diff options
| -rw-r--r-- | app/assets/javascripts/components/features/compose/components/character_counter.jsx | 13 | ||||
| -rw-r--r-- | storybook/config.js | 1 | ||||
| -rw-r--r-- | storybook/stories/character_counter.story.jsx | 20 |
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 index e6b675354..fc64f94a5 100644 --- 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 index 4a111a8b9..924eadf49 100644 --- 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 new file mode 100644 index 000000000..931d8a037 --- /dev/null +++ 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" />; + }); |