fix for matching requirement from #537

Author: AllenFang

examples/js/selection/all-select.js

@@ -1,7 +1,11 @@
 /* eslint max-len: 0 */
+/* eslint no-alert: 0 */
+/* eslint guard-for-in: 0 */
+/* eslint no-console: 0 */
 import React from 'react';
 import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
 
+
 const products = [];
 
 function addProducts(quantity) {
@@ -16,73 +20,29 @@ function addProducts(quantity) {
   }
 }
 
-addProducts(100);
+addProducts(50);
 
-const options = {
-  sizePerPageList: [ 5, 10, 15, 20 ],
-  sizePerPage: 10,
-  sortName: 'id',
-  sortOrder: 'desc'
-};
-const selectRowProp = {
-  mode: 'checkbox',
-  clickToSelect: true,
-  bgColor: 'rgb(238, 193, 213)'
-};
-const filterOptions = {
-  type: 'TextFilter',
-  placeholder: 'Product Name'
-};
+export default class SelectAllOnCurrPage extends React.Component {
 
-export default class SelectAll extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selected: [],
-      filteredProducts: products
-    };
-  }
-
-  onSelect(row, isSelected) {
-    const selectedProducts = this.state.selected;
+  onSelectAll = (isSelected) => {
     if (isSelected) {
-      selectedProducts.push(row.id);
-    } else {
-      const index = selectedProducts
-        .indexOf(row.universalId);
-      selectedProducts.splice(index, 1);
+      return this.refs.table.state.data.map(row => row.id);
     }
-    this.setState({ selected: selectedProducts });
-  }
-
-  onSelectAll(isSelected) {
-    const items = isSelected
-        ? this.state.filteredProducts.map(product => product.id)
-        : [];
-    this.setState({ selected: items });
-  }
-
-  afterColumnFilter(filterConds, result) {
-    this.setState({ filteredProducts: result });
   }
 
   render() {
-    Object.assign(selectRowProp, {
-      selected: this.state.selected,
-      onSelect: this.onSelect.bind(this),
-      onSelectAll: this.onSelectAll.bind(this) });
-    Object.assign(options, {
-      afterColumnFilter: this.afterColumnFilter.bind(this) });
+    const selectRowProp = {
+      mode: 'checkbox',
+      clickToSelect: true,
+      onSelectAll: this.onSelectAll
+    };
 
     return (
-      <div>
-        <div>Product selected: { this.state.selected.length }</div>
-        <BootstrapTable ref='table' selectRow={ selectRowProp } data={ products } pagination={ true } options={ options }>
+      <BootstrapTable ref='table' data={ products } selectRow={ selectRowProp } pagination>
           <TableHeaderColumn dataField='id' isKey={ true }>Product ID</TableHeaderColumn>
-          <TableHeaderColumn dataField='name' filter={ filterOptions }>Product Name</TableHeaderColumn>
+          <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
           <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
-        </BootstrapTable>
-      </div>
-   );
+      </BootstrapTable>
+    );
   }
 }

examples/js/selection/demo.js

@@ -129,7 +129,7 @@ class Demo extends React.Component {
         </div>
         <div className='col-md-offset-1 col-md-8'>
           <div className='panel panel-default'>
-            <div className='panel-heading'>Select all (with pagination and filter)</div>
+            <div className='panel-heading'>Select All Which Only Active on Current Page</div>
             <div className='panel-body'>
               <h5>Source in all-select.js</h5>
               <SelectAll />