Improvement custom text filter

examples/js/column-filter/demo.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import TextFilter from './text-filter';
 import TextFilterWithDefaultValue from './text-filter-with-default-value';
+import TextFilterCustomHandler from './text-filter-custom-handler';
 import RegexFilter from './regex-filter';
 import SelectFilter from './select-filter';
 import SelectFilterWithDefaultValue from './select-filter-with-default-value';
@@ -38,6 +39,15 @@ class Demo extends React.Component {
                     </div>
                 </div>
             </div>
+            <div className='col-md-offset-1 col-md-8'>
+                <div className='panel panel-default'>
+                    <div className='panel-heading'>Text Filter With Custom Handler Example ( clear filter input text, exposed api for dynamic params )</div>
+                    <div className='panel-body'>
+                        <h5>Source in /examples/js/column-filter/text-filter-custom-handler.js</h5>
+                        <TextFilterCustomHandler />
+                    </div>
+                </div>
+            </div>
             <div className='col-md-offset-1 col-md-8'>
                 <div className='panel panel-default'>
                     <div className='panel-heading'>Regex Filter</div>

examples/js/column-filter/text-filter-custom-handler.js

@@ -0,0 +1,36 @@
+/* eslint max-len: 0 */
+import React from 'react';
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+
+const products = [];
+
+function addProducts(quantity) {
+  const startId = products.length;
+  for (let i = 0; i < quantity; i++) {
+    const id = startId + i;
+    products.push({
+      id: id,
+      name: 'Item name ' + id,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(5);
+
+function customHandleTextFilter(filter, value) {
+  // dynamic params
+  filter(value, 'TextFilter');
+}
+
+export default class TextFilterCustomHandler extends React.Component {
+  render() {
+    return (
+      <BootstrapTable data={ products }>
+        <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
+        <TableHeaderColumn dataField='name' filter={ { type: 'TextFilter', delay: 1000, defaultValue: window.location.hash, customHandleTextFilter: customHandleTextFilter, clearFilter: true } }>Product Name</TableHeaderColumn>
+        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+}

src/TableHeaderColumn.js

@@ -159,10 +159,11 @@ TableHeaderColumn.propTypes = {
     emitter: PropTypes.object,
     placeholder: PropTypes.string,
     getElement: PropTypes.func,
-    customFilterParameters: PropTypes.object
+    customFilterParameters: PropTypes.object,
+    customHandleTextFilter: PropTypes.func,
+    clearFilter: PropTypes.bool
   }),
-  sortIndicator: PropTypes.bool,
-  export: PropTypes.bool
+  sortIndicator: PropTypes.bool
 };
 
 TableHeaderColumn.defaultProps = {

src/filters/Text.js

@@ -4,17 +4,74 @@ import Const from '../Const';
 class TextFilter extends Component {
   constructor(props) {
     super(props);
+  }
+
+  render() {
+    const {
+      placeholder,
+      columnName,
+      defaultValue,
+      filterHandler,
+      delay,
+      customHandleTextFilter,
+      clearFilter } = this.props;
+    return (
+      <FilterTextInput
+        placeholder={ placeholder }
+        columnName={ columnName }
+        defaultValue={ defaultValue }
+        filterHandler={ filterHandler }
+        delay={ delay }
+        onCustomHandleTextFilter={ customHandleTextFilter }
+        onClearFilter={ clearFilter } />
+    );
+  }
+}
+
+class FilterTextInput extends Component {
+  constructor(props) {
+    super(props);
+
     this.filter = this.filter.bind(this);
     this.timeout = null;
+    this.firstFilter = true;
+
+    this.state = {
+      text: ''
+    };
+  }
+
+  _clearFilterText(clear) {
+    if (clear) {
+      this.setState({
+        text: ''
+      });
+    }
   }
 
   filter(event) {
+    this.firstFilter = false;
+
+    this.setState({
+      text: event.target.value
+    });
+
     if (this.timeout) {
       clearTimeout(this.timeout);
     }
+
     const filterValue = event.target.value;
     this.timeout = setTimeout(() => {
-      this.props.filterHandler(filterValue, Const.FILTER_TYPE.TEXT);
+      // if user want to clear filter input text
+      if (this.props.onClearFilter) {
+        this._clearFilterText(this.props.onClearFilter);
+      }
+      // exposed the filterHandler method for user to search by dynamic paprams.
+      if (this.props.onCustomHandleTextFilter) {
+        this.props.onCustomHandleTextFilter(this.props.filterHandler, filterValue);
+      } else {
+        this.props.filterHandler(filterValue, Const.FILTER_TYPE.TEXT);
+      }
     }, this.props.delay);
   }
 
@@ -31,13 +88,14 @@ class TextFilter extends Component {
 
   render() {
     const { placeholder, columnName, defaultValue } = this.props;
+
     return (
       <input ref='inputText'
         className='filter text-filter form-control'
         type='text'
         onChange={ this.filter }
         placeholder={ placeholder || `Enter ${columnName}...` }
-        defaultValue={ defaultValue ? defaultValue : '' } />
+        value={ defaultValue && this.firstFilter ? defaultValue : this.state.text } />
     );
   }
 }
@@ -47,7 +105,9 @@ TextFilter.propTypes = {
   defaultValue: PropTypes.string,
   delay: PropTypes.number,
   placeholder: PropTypes.string,
-  columnName: PropTypes.string
+  columnName: PropTypes.string,
+  customHandleTextFilter: PropTypes.func,
+  clearFilter: PropTypes.bool
 };
 
 TextFilter.defaultProps = {