Merge pull request #13 from ritz078/fix/filter-input

show cross only if text present
storybookjs · Jul 8, 2016 · 2cd67ac · 2cd67ac
2 parents 103c2d4 + 2d73ec6
commit 2cd67ac
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/src/modules/ui/components/left_panel/__tests__/text_filter.js b/src/modules/ui/components/left_panel/__tests__/text_filter.js
@@ -35,11 +35,9 @@ describe('manager.ui.components.left_panel.test_filter', function () {
       const onClear = sinon.spy();
       const wrap = shallow(<TextFilter onClear={onClear} />);
 
-      // use the latest div to avoid parents
-      // example: <div><div>x</div></div>
-      const clear = wrap.find('div')
-        .filterWhere(el => el.text() === 'x')
-        .last();
+      wrap.setState({ query: 'hello' });
+
+      const clear = wrap.find('.clear');
 
       clear.simulate('click');
       expect(onClear.calledOnce).to.equal(true);

diff --git a/src/modules/ui/components/left_panel/text_filter.js b/src/modules/ui/components/left_panel/text_filter.js
@@ -9,21 +9,34 @@ const mainStyle = {
 };
 
 export default class TextFilter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      query: '',
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.fireOnClear = this.fireOnClear.bind(this);
+  }
+
   onChange(event) {
     const text = event.target.value;
+    this.setState({ query: text });
     const { onChange } = this.props;
     if (onChange) onChange(text);
   }
 
   fireOnClear() {
+    this.setState({ query: '' });
+
     const { onClear } = this.props;
     if (onClear) onClear();
   }
 
   render() {
     const textWrapStyle = {
       background: '#F7F7F7',
-      paddingRight: 25,
     };
 
     const textStyle = {
@@ -40,33 +53,39 @@ export default class TextFilter extends React.Component {
 
     const clearButtonStyle = {
       position: 'absolute',
-      color: '#B1B1B1',
+      color: '#868686',
       border: 'none',
       width: 25,
       height: 26,
-      right: 0,
-      top: 2,
+      right: 1,
+      top: 0,
       textAlign: 'center',
       cursor: 'pointer',
+      lineHeight: '23px',
+      fontSize: 20,
     };
 
     return (
-      <div style={mainStyle}>
-        <div style={textWrapStyle}>
+      <div style={mainStyle} >
+        <div style={textWrapStyle} >
           <input
             style={textStyle}
             type="text"
             placeholder="Filter"
             name="filter-text"
             value={this.props.text || ''}
-            onChange={this.onChange.bind(this)}
+            onChange={this.onChange}
           />
         </div>
-        <div
-          style={clearButtonStyle}
-          onClick={this.fireOnClear.bind(this)}
-        >x
-        </div>
+        {
+          this.state.query && this.state.query.length && <div
+            style={clearButtonStyle}
+            onClick={this.fireOnClear}
+            className="clear"
+          >
+            ×
+          </div>
+        }
       </div>
     );
   }