about summary refs log tree commit diff
diff options
context:
space:
mode:
authorusagi-f <usagi.f@gmail.com>2017-04-17 17:34:33 +0900
committerEugen <eugen@zeonfederated.com>2017-04-17 10:34:33 +0200
commitb87a08e16004221f27996007c241bcc80470c33f (patch)
tree4aba1277472329b552651ea93f404236b68efaf0
parentbe6cabb3159d55ded386d43096fe2fe58af657dc (diff)
Add function color remaining text (#1980)
-rw-r--r--app/assets/javascripts/components/features/compose/components/character_counter.jsx13
-rw-r--r--storybook/config.js1
-rw-r--r--storybook/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
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" />;
+  });