Add function color remaining text (#1980)

This commit is contained in:
usagi-f 2017-04-17 17:34:33 +09:00 committed by Eugen
parent 0e062ce3a7
commit 3b6b05fe4c
3 changed files with 29 additions and 5 deletions

View file

@ -9,14 +9,17 @@ const CharacterCounter = React.createClass({
mixins: [PureRenderMixin], 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 () { render () {
const diff = this.props.max - this.props.text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length; const diff = this.props.max - this.props.text.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, "_").length;
return ( return this.checkRemainingText(diff);
<span style={{ fontSize: '16px', cursor: 'default' }}>
{diff}
</span>
);
} }
}); });

View file

@ -17,6 +17,7 @@ window.React = React;
function loadStories () { function loadStories () {
require('./stories/loading_indicator.story.jsx'); require('./stories/loading_indicator.story.jsx');
require('./stories/button.story.jsx'); require('./stories/button.story.jsx');
require('./stories/character_counter.story.jsx');
require('./stories/autosuggest_textarea.story.jsx'); require('./stories/autosuggest_textarea.story.jsx');
} }

View file

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