fix #1365

Author: AllenFang

packages/react-bootstrap-table2-example/examples/search/search-hook.js

@@ -0,0 +1,91 @@
+/* eslint react/prop-types: 0 */
+import React from 'react';
+
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
+
+const { SearchBar } = Search;
+const products = productsGenerator();
+
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const sourceCode = `\
+import BootstrapTable from 'react-bootstrap-table-next';
+import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
+
+const { SearchBar } = Search;
+const columns = [{
+  dataField: 'id',
+  text: 'Product ID'
+}, {
+  dataField: 'name',
+  text: 'Product Name'
+}, {
+  dataField: 'price',
+  text: 'Product Price'
+}];
+
+const afterSearch = (newResult) => {
+  console.log(newResult);
+};
+
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ { afterSearch } }
+>
+  {
+    props => (
+      <div>
+        <h3>Input something at below input field:</h3>
+        <SearchBar { ...props.searchProps } />
+        <hr />
+        <BootstrapTable
+          { ...props.baseProps }
+        />
+      </div>
+    )
+  }
+</ToolkitProvider>
+`;
+
+const afterSearch = (newResult) => {
+  console.log(newResult);
+};
+
+export default () => (
+  <div>
+    <ToolkitProvider
+      keyField="id"
+      data={ products }
+      columns={ columns }
+      search={ { afterSearch } }
+    >
+      {
+        props => (
+          <div>
+            <h3>Input something at below input field:</h3>
+            <SearchBar { ...props.searchProps } />
+            <hr />
+            <BootstrapTable
+              { ...props.baseProps }
+            />
+          </div>
+        )
+      }
+    </ToolkitProvider>
+    <Code>{ sourceCode }</Code>
+  </div>
+);

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

@@ -197,6 +197,7 @@ import CustomePaginationWithSearch from 'examples/pagination/custom-page-list-wi
 import SearchTable from 'examples/search';
 import ClearSearchButton from 'examples/search/clear-search-button';
 import DefaultSearch from 'examples/search/default-search';
+import SearchHooks from 'examples/search/search-hook';
 import DefaultCustomSearch from 'examples/search/default-custom-search';
 import FullyCustomSearch from 'examples/search/fully-custom-search';
 import SearchFormattedData from 'examples/search/search-formatted';
@@ -464,6 +465,7 @@ storiesOf('Table Search', module)
   .add('Clear Search Button', () => <ClearSearchButton />)
   .add('Default Search Table', () => <DefaultSearch />)
   .add('Default Custom Search', () => <DefaultCustomSearch />)
+  .add('Search Hooks', () => <SearchHooks />)
   .add('Searchable Column', () => <SearchableColumn />)
   .add('Fully Custom Search', () => <FullyCustomSearch />)
   .add('Search Formatted Value', () => <SearchFormattedData />)

packages/react-bootstrap-table2-toolkit/README.md

@@ -141,6 +141,22 @@ If you want to search on the formatted data, you are supposed to enable this pro
 </ToolkitProvider>
 ```
 
+#### afterSearch - [Function]
+After search done, this callback function will be called with newest result.
+
+```js
+<ToolkitProvider
+  keyField="id"
+  data={ products }
+  columns={ columns }
+  search={ {
+    afterSearch: (newResult) => console.log(newResult)
+  } }
+>
+  // ...
+</ToolkitProvider>
+```
+
 ### Clear Search Button
 We have a built-in clear search function which allow user clear search status via clicking button:
 

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

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 
 export default (options = {
   searchFormatted: false,
+  afterSearch: null,
   onColumnMatch: null
 }) => (
   _,
@@ -32,7 +33,7 @@ export default (options = {
         handleRemoteSearchChange(this.props.searchText);
       } else {
         initialData = this.search(props);
-        this.triggerListener(initialData);
+        this.triggerListener(initialData, true);
       }
       this.state = { data: initialData };
     }
@@ -41,7 +42,10 @@ export default (options = {
       return this.state.data;
     }
 
-    triggerListener(result) {
+    triggerListener(result, skipInit) {
+      if (options.afterSearch && !skipInit) {
+        options.afterSearch(result);
+      }
       if (this.props.dataChangeListener) {
         this.props.dataChangeListener.emit('filterChanged', result.length);
       }