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:
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" />;
+ });