logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe
commit: b87a08e16004221f27996007c241bcc80470c33f
parent: be6cabb3159d55ded386d43096fe2fe58af657dc
Author: usagi-f <usagi.f@gmail.com>
Date:   Mon, 17 Apr 2017 17:34:33 +0900

Add function color remaining text (#1980)


Diffstat:

Mapp/assets/javascripts/components/features/compose/components/character_counter.jsx13++++++++-----
Mstorybook/config.js1+
Astorybook/stories/character_counter.story.jsx20++++++++++++++++++++
3 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/components/features/compose/components/character_counter.jsx b/app/assets/javascripts/components/features/compose/components/character_counter.jsx @@ -9,14 +9,17 @@ const CharacterCounter = React.createClass({ mixins: [PureRenderMixin], + checkRemainingText (diff) { + if (diff <= 0) { + return <span style={{ fontSize: '16px', cursor: 'default', color: '#ff5050' }}>{diff}</span>; + } + return <span style={{ fontSize: '16px', cursor: 'default' }}>{diff}</span>; + }, + render () { const diff = this.props.max - this.props.text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length; - return ( - <span style={{ fontSize: '16px', cursor: 'default' }}> - {diff} - </span> - ); + return this.checkRemainingText(diff); } }); diff --git a/storybook/config.js b/storybook/config.js @@ -17,6 +17,7 @@ window.React = React; function loadStories () { require('./stories/loading_indicator.story.jsx'); require('./stories/button.story.jsx'); + require('./stories/character_counter.story.jsx'); require('./stories/autosuggest_textarea.story.jsx'); } diff --git a/storybook/stories/character_counter.story.jsx b/storybook/stories/character_counter.story.jsx @@ -0,0 +1,20 @@ +import { storiesOf } from '@kadira/storybook'; +import CharacterCounter from '../../app/assets/javascripts/components/features/compose/components/character_counter'; + +storiesOf('CharacterCounter', module) + .add('no text', () => { + const text = ''; + return <CharacterCounter text={text} max="500" />; + }) + .add('a few strings text', () => { + const text = '0123456789'; + return <CharacterCounter text={text} max="500" />; + }) + .add('the same text', () => { + const text = '01234567890123456789'; + return <CharacterCounter text={text} max="20" />; + }) + .add('over text', () => { + const text = '01234567890123456789012345678901234567890123456789'; + return <CharacterCounter text={text} max="10" />; + });