mirror of
https://git.bsd.gay/fef/nyastodon.git
synced 2024-12-24 03:43:42 +01:00
Add function color remaining text (#1980)
This commit is contained in:
parent
be6cabb315
commit
b87a08e160
3 changed files with 29 additions and 5 deletions
|
@ -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);
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
|
||||
|
|
20
storybook/stories/character_counter.story.jsx
Normal file
20
storybook/stories/character_counter.story.jsx
Normal 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" />;
|
||||
});
|
Loading…
Reference in a new issue