Merge branch 'master' of https://github.com/AllenFang/react-bootstrap…

…-table

CHANGELOG.md

@@ -1,3 +1,24 @@
+<a name="v1.4.6"></a>
+# [v1.4.6](https://github.com/AllenFang/react-bootstrap-table/compare/v1.4.5...v1.4.6) (2016-01-30)
+### Features
+* Support column format with extra data([a4e4565](https://github.com/AllenFang/react-bootstrap-table/commit/a4e4565a872a5f188d117b5fc01e767b4d0e03ef))
+	* Add ```formatExtraData``` in ```TableHeaderColumn```. Check the example in ```examples/js/column-format/format-extra-data-table.js```
+* Add Clear button for cleaning search input field([8d41dc5](https://github.com/AllenFang/react-bootstrap-table/commit/8d41dc546ca327c8108edfc2f340ac05bb85615f))
+	* add  ```clearSearch``` on ```options``` props
+	```js
+	var options = {
+		clearSearch: true
+	};
+	//...
+	ReactDOM.render(
+		<BootstrapTable data={collection} options={options}>...
+	);
+	```
+
+### Enhancement
+* Available to clean all selection state By API([f5978f9](https://github.com/AllenFang/react-bootstrap-table/commit/f5978f95c1e8229562483c3b55ca649b8b4bcde5))
+	* Check this [thread](https://github.com/AllenFang/react-bootstrap-table/issues/244)
+
 <a name="v1.4.5"></a>
 # [v1.4.5](https://github.com/AllenFang/react-bootstrap-table/compare/v1.4.4...v1.4.5) (2016-01-25)
 ### Bug fixes

examples/js/manipulation/demo.js

@@ -6,6 +6,7 @@ import ColumnFilterTable from './filter-table';
 import MultiSearchTable from './multi-search-table';
 import ExportCSVTable from './export-csv-table';
 import DeleteRowCustomComfirmTable from './del-row-custom-confirm';
+import SearchClearTable from './search-clear-table';
 
 class Demo extends React.Component {
   render() {
@@ -39,6 +40,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">Table Search Example with Clear Button</div>
+            <div className="panel-body">
+              <h5>Source in /examples/js/manipulation/search-clear-table.js</h5>
+              <SearchClearTable />
+            </div>
+          </div>
+        </div>
         <div className="col-md-offset-1 col-md-8">
           <div className="panel panel-default">
             <div className="panel-heading">Table Multi Search Example(Use space to delimited search text, ex:3 4)</div>

examples/js/manipulation/search-clear-table.js

@@ -0,0 +1,45 @@
+'use strict';
+import React from 'react';
+import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
+
+
+var products = [];
+
+function addProducts(quantity) {
+  var startId = products.length;
+  for (var i = 0; i < quantity; i++) {
+    var id = startId + i;
+    products.push({
+      id: id,
+      name: "Item name " + id,
+      price: 2100 + i
+    });
+  }
+}
+
+addProducts(5);
+
+function afterSearch(searchText, result){
+  console.log('Your search text is ' + searchText);
+  console.log('Result is:');
+  for(let i=0;i<result.length;i++){
+    console.log("Product: " + result[i].id + ", " + result[i].name + ", " + result[i].price);
+  }
+}
+
+var options = {
+  afterSearch: afterSearch,  //define a after search hook,
+  clearSearch: true
+}
+
+export default class SearchClearTable extends React.Component{
+  render(){
+    return (
+      <BootstrapTable data={products} search={true} options={options}>
+          <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
+          <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
+      </BootstrapTable>
+    );
+  }
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-table",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "description": "It' a react table for bootstrap",
   "main": "./dist/react-bootstrap-table.min.js",
   "repository": {

src/BootstrapTable.js

@@ -250,6 +250,13 @@ class BootstrapTable extends React.Component {
     }
   }
 
+  cleanSelected() {
+    this.store.setSelectedRowKey([]);
+    this.setState({
+      selectedRowKeys: []
+    });
+  }
+
   handleSort(order, sortField) {
     if (this.props.options.onSortChange) {
       this.props.options.onSortChange(sortField, order, this.props);
@@ -567,6 +574,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}
@@ -650,6 +658,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,
@@ -706,6 +715,7 @@ BootstrapTable.defaultProps = {
   columnFilter: false,
   trClassName: '',
   options: {
+    clearSearch: false,
     sortName: undefined,
     sortOrder: undefined,
     afterTableComplete: undefined,

src/TableHeaderColumn.js

@@ -51,7 +51,8 @@ TableHeaderColumn.propTypes = {
   sortFunc: React.PropTypes.func,
   columnClassName: React.PropTypes.any,
   filterFormatted: React.PropTypes.bool,
-  sort: React.PropTypes.string
+  sort: React.PropTypes.string,
+  formatExtraData: React.PropTypes.any
 };
 
 TableHeaderColumn.defaultProps = {
@@ -67,7 +68,8 @@ TableHeaderColumn.defaultProps = {
   sortFunc: undefined,
   columnClassName: '',
   filterFormatted: false,
-  sort: undefined
+  sort: undefined,
+  formatExtraData: undefined
 };
 
 export default TableHeaderColumn;

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;