fix #239

AllenFang · Jan 30, 2016 · 8d41dc5 · 8d41dc5
1 parent f5978f9
commit 8d41dc5
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 6 deletions.
diff --git a/src/BootstrapTable.js b/src/BootstrapTable.js
@@ -571,6 +571,7 @@ class BootstrapTable extends React.Component {
       return (
         <div className="tool-bar">
           <ToolBar
+            clearSearch={this.props.options.clearSearch}
             enableInsert={this.props.insertRow}
             enableDelete={this.props.deleteRow}
             enableSearch={this.props.search}
@@ -654,6 +655,7 @@ BootstrapTable.propTypes = {
   columnFilter: React.PropTypes.bool,
   trClassName: React.PropTypes.any,
   options: React.PropTypes.shape({
+    clearSearch: React.PropTypes.bool,
     sortName: React.PropTypes.string,
     sortOrder: React.PropTypes.string,
     afterTableComplete: React.PropTypes.func,
@@ -710,6 +712,7 @@ BootstrapTable.defaultProps = {
   columnFilter: false,
   trClassName: '',
   options: {
+    clearSearch: false,
     sortName: undefined,
     sortOrder: undefined,
     afterTableComplete: undefined,

diff --git a/src/toolbar/ToolBar.js b/src/toolbar/ToolBar.js
@@ -115,6 +115,11 @@ class ToolBar extends React.Component{
     this.props.onExportCSV();
   }
 
+  handleClearBtnClick = () => {
+    this.refs.seachInput.value = '';
+    this.props.onSearch('');
+  }
+
   render(){
     var modalClassName = "bs-table-modal-sm"+new Date().getTime();
     var insertBtn = this.props.enableInsert?
@@ -126,10 +131,8 @@ class ToolBar extends React.Component{
             onClick={this.handleDropRowBtnClick.bind(this)}>
             <i className="glyphicon glyphicon-trash"></i> Delete
           </button>:null;
-    var searchTextInput = this.props.enableSearch?
-      <div className="form-group form-group-sm">
-        <input className="form-control" type='text' placeholder={this.props.searchPlaceholder?this.props.searchPlaceholder:'Search'} onKeyUp={this.handleKeyUp.bind(this)}/>
-      </div>:null;
+
+    var searchTextInput = this.renderSearchPanel();
 
     var showSelectedOnlyBtn = this.props.enableShowOnlySelected?
       <button type="button" onClick={this.handleShowOnlyToggle.bind(this)} className="btn btn-primary" data-toggle="button" aria-pressed="false">
@@ -165,6 +168,35 @@ class ToolBar extends React.Component{
     )
   }
 
+  renderSearchPanel() {
+    if(this.props.enableSearch) {
+      let classNames = 'form-group form-group-sm';
+      let clearBtn = null;
+      if(this.props.clearSearch) {
+        clearBtn = (
+          <span className="input-group-btn">
+            <button
+              className="btn btn-default"
+              type="button"
+              onClick={ this.handleClearBtnClick }>Clear</button>
+          </span>
+        );
+        classNames = 'form-group form-group-sm input-group input-group-sm';
+      }
+
+      return (
+        <div className={classNames}>
+          <input ref='seachInput' className="form-control" type='text'
+            placeholder={this.props.searchPlaceholder?this.props.searchPlaceholder:'Search'}
+            onKeyUp={this.handleKeyUp.bind(this)}/>
+            { clearBtn }
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
+
   renderInsertRowModal(modalClassName){
     var validateState=this.state.validateState||{};
     var inputField = this.props.columns.map(function(column, i){
@@ -226,13 +258,15 @@ ToolBar.propTypes = {
   enableSearch: React.PropTypes.bool,
   enableShowOnlySelected: React.PropTypes.bool,
   columns: React.PropTypes.array,
-  searchPlaceholder: React.PropTypes.string
+  searchPlaceholder: React.PropTypes.string,
+  clearSearch: React.PropTypes.bool
 };
 
 ToolBar.defaultProps = {
   enableInsert: false,
   enableDelete: false,
   enableSearch: false,
-  enableShowOnlySelected: false
+  enableShowOnlySelected: false,
+  clearSearch: false
 }
 export default ToolBar;