fix same issue #778, but for search

packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js

@@ -0,0 +1,139 @@
+/* eslint react/prefer-stateless-function: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const products = productsGenerator(21);
+const { SearchBar } = Search;
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
+import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
+
+class Table extends React.Component {
+  render() {
+    const options = {
+      custom: true,
+      paginationSize: 4,
+      pageStartIndex: 1,
+      firstPageText: 'First',
+      prePageText: 'Back',
+      nextPageText: 'Next',
+      lastPageText: 'Last',
+      nextPageTitle: 'First page',
+      prePageTitle: 'Pre page',
+      firstPageTitle: 'Next page',
+      lastPageTitle: 'Last page',
+      showTotal: true,
+      totalSize: products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <PaginationListStandalone { ...paginationProps } />
+        <div>
+          <div>
+            <BootstrapTable
+              striped
+              hover
+              keyField="id"
+              data={ products }
+              columns={ columns }
+              filter={ filterFactory() }
+              cellEdit={ cellEditFactory() }
+              { ...paginationTableProps }
+            />
+          </div>
+        </div>
+        <PaginationListStandalone { ...paginationProps } />
+      </div>
+    );
+
+    return (
+      <div>
+        <h2>PaginationProvider will care the data size change. You dont do anything</h2>
+        <PaginationProvider
+          pagination={
+            paginationFactory(options)
+          }
+        >
+          { contentTable }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div >
+    );
+  }
+}
+`;
+
+export default class Table extends React.Component {
+  render() {
+    const options = {
+      custom: true,
+      paginationSize: 4,
+      pageStartIndex: 1,
+      firstPageText: 'First',
+      prePageText: 'Back',
+      nextPageText: 'Next',
+      lastPageText: 'Last',
+      nextPageTitle: 'First page',
+      prePageTitle: 'Pre page',
+      firstPageTitle: 'Next page',
+      lastPageTitle: 'Last page',
+      showTotal: true,
+      totalSize: products.length
+    };
+    const contentTable = ({ paginationProps, paginationTableProps }) => (
+      <div>
+        <PaginationListStandalone { ...paginationProps } />
+        <ToolkitProvider
+          keyField="id"
+          columns={ columns }
+          data={ products }
+          search
+        >
+          {
+            toolkitprops => (
+              <div>
+                <SearchBar { ...toolkitprops.searchProps } />
+                <BootstrapTable
+                  striped
+                  hover
+                  { ...toolkitprops.baseProps }
+                  { ...paginationTableProps }
+                />
+              </div>
+            )
+          }
+        </ToolkitProvider>
+        <PaginationListStandalone { ...paginationProps } />
+      </div>
+    );
+
+    return (
+      <div>
+        <h2>PaginationProvider will care the data size change. You dont do anything</h2>
+        <PaginationProvider
+          pagination={
+            paginationFactory(options)
+          }
+        >
+          { contentTable }
+        </PaginationProvider>
+        <Code>{ sourceCode }</Code>
+      </div >
+    );
+  }
+}

packages/react-bootstrap-table2-example/stories/index.js

@@ -171,6 +171,7 @@ import StandaloneSizePerPage from 'examples/pagination/standalone-size-per-page'
 import FullyCustomPaginationTable from 'examples/pagination/fully-custom-pagination';
 import RemoteStandalonePaginationTable from 'examples/pagination/remote-standalone-pagination';
 import CustomePaginationWithFilter from 'examples/pagination/custome-page-list-with-filter';
+import CustomePaginationWithSearch from 'examples/pagination/custom-page-list-with-search';
 
 // search
 import SearchTable from 'examples/search';
@@ -394,7 +395,8 @@ storiesOf('Pagination', module)
   .add('Standalone SizePerPage Dropdown', () => <StandaloneSizePerPage />)
   .add('Fully Custom Pagination', () => <FullyCustomPaginationTable />)
   .add('Remote Fully Custom Pagination', () => <RemoteStandalonePaginationTable />)
-  .add('Custom Pagination with Filter', () => <CustomePaginationWithFilter />);
+  .add('Custom Pagination with Filter', () => <CustomePaginationWithFilter />)
+  .add('Custom Pagination with Search', () => <CustomePaginationWithSearch />);
 
 storiesOf('Table Search', module)
   .addDecorator(bootstrapStyle())

packages/react-bootstrap-table2-toolkit/src/search/context.js

@@ -17,36 +17,44 @@ export default (options = {
     static propTypes = {
       data: PropTypes.array.isRequired,
       columns: PropTypes.array.isRequired,
-      searchText: PropTypes.string
+      searchText: PropTypes.string,
+      dataChangeListener: PropTypes.object
     }
 
     constructor(props) {
       super(props);
-      this.performRemoteSearch = props.searchText !== '';
+      let initialData = props.data;
+      if (isRemoteSearch() && this.props.searchText !== '') {
+        handleRemoteSearchChange(this.props.searchText);
+      } else {
+        initialData = this.search(props.searchText.toLowerCase());
+        this.triggerListener(initialData);
+      }
+      this.state = { data: initialData };
     }
 
     componentWillReceiveProps(nextProps) {
-      if (isRemoteSearch()) {
-        if (nextProps.searchText !== this.props.searchText) {
-          this.performRemoteSearch = true;
+      if (nextProps.searchText !== this.props.searchText) {
+        if (isRemoteSearch()) {
+          handleRemoteSearchChange(nextProps.searchText);
         } else {
-          this.performRemoteSearch = false;
+          const result = this.search(nextProps.searchText.toLowerCase());
+          this.triggerListener(result);
+          this.setState({
+            data: result
+          });
         }
       }
     }
 
-    search() {
-      const { data, columns } = this.props;
-      let { searchText } = this.props;
-
-      if (isRemoteSearch()) {
-        if (this.performRemoteSearch) {
-          handleRemoteSearchChange(searchText);
-        }
-        return data;
+    triggerListener(result) {
+      if (this.props.dataChangeListener) {
+        this.props.dataChangeListener.emit('filterChanged', result.length);
       }
+    }
 
-      searchText = searchText.toLowerCase();
+    search(searchText) {
+      const { data, columns } = this.props;
       return data.filter((row, ridx) => {
         for (let cidx = 0; cidx < columns.length; cidx += 1) {
           const column = columns[cidx];
@@ -69,9 +77,8 @@ export default (options = {
     }
 
     render() {
-      const data = this.search();
       return (
-        <SearchContext.Provider value={ { data } }>
+        <SearchContext.Provider value={ { data: this.state.data } }>
           { this.props.children }
         </SearchContext.Provider>
       );

packages/react-bootstrap-table2/src/contexts/index.js

@@ -217,6 +217,7 @@ const withContext = Base =>
           ref={ n => this.searchContext = n }
           data={ rootProps.getData(filterProps) }
           searchText={ this.props.search.searchText }
+          dataChangeListener={ this.props.dataChangeListener }
         >
           <this.SearchContext.Consumer>
             {
@@ -237,7 +238,7 @@ const withContext = Base =>
           { ...baseProps }
           ref={ n => this.filterContext = n }
           data={ rootProps.getData() }
-          listenerForPagination={ this.props.listenerForPagination }
+          dataChangeListener={ this.props.dataChangeListener }
         >
           <this.FilterContext.Consumer>
             {