Merge pull request #1378 from react-bootstrap-table/develop

20200517 release

Author: AllenFang

docs/README.md

@@ -39,11 +39,36 @@
 * [onDataSizeChange](#onDataSizeChange)
 
 ### <a name='keyField'>keyField(**required**) - [String]</a>
-Tells `react-bootstrap-table2` which column is unique.
+Tells `react-bootstrap-table2` which column of the data is unique. This should be the name of a property that is unique for each item in your dataset
 
 ### <a name='data'>data(**required**) - [Array]</a>
 Provides data for your table. It accepts a single Array object.
 
+Each item in this array is an object that represents a row in the table. Each "Row" object should have a key-value pair for each column in the table, whose key matches that column's dataField value.
+
+For example, if your column definitions look like:
+
+```js
+columns = [
+  { dataField: 'id', text: 'Id' },
+  { dataField: 'name', text: 'Name' },
+  { dataField: 'animal', text: 'Animal' },
+]
+```
+
+Then your data might look like:
+
+```js
+data = [
+  { id: 1, name: 'George', animal: 'Monkey' }
+  { id: 2, name: 'Jeffrey', animal: 'Giraffe' }
+  { id: 3, name: 'Alice', animal: 'Giraffe' }
+  { id: 4, name: 'Alice', animal: 'Tiger' }
+]
+```
+
+And your "keyField" would be `id`
+
 ### <a name='columns'>columns(**required**) - [Object]</a>
 Accepts a single Array object, please see [columns definition](./columns.md) for more detail.
 

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-filter/README.md

@@ -2,7 +2,7 @@
 
 `react-bootstrap-table2` separate the filter core code base to [`react-bootstrap-table2-filter`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-filter), so there's a little bit different when you use column filter than `react-bootstrap-table`. In the following, we are going to show you how to enable the column filter:
 
-**[Live Demo For Column Filter](https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/gh-pages-src/storybook/index.html?selectedKind=Column%20Filter)**
+**[Live Demo For Column Filter](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter)**
 
 **[API&Props Definitation](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/filter-props.html)**
 
@@ -385,4 +385,4 @@ export default () => (
     />
   </div>
 );
-```
+```

packages/react-bootstrap-table2-filter/src/filter.js

@@ -39,55 +39,36 @@ export const filterByNumber = _ => (
 ) => (
   data.filter((row) => {
     if (number === '' || !comparator) return true;
-    let valid = true;
     let cell = _.get(row, dataField);
+
     if (customFilterValue) {
       cell = customFilterValue(cell, row);
     }
 
     switch (comparator) {
       case EQ: {
-        if (cell != number) {
-          valid = false;
-        }
-        break;
+        return cell == number;
       }
       case GT: {
-        if (cell <= number) {
-          valid = false;
-        }
-        break;
+        return cell > number;
       }
       case GE: {
-        if (cell < number) {
-          valid = false;
-        }
-        break;
+        return cell >= number;
       }
       case LT: {
-        if (cell >= number) {
-          valid = false;
-        }
-        break;
+        return cell < number;
       }
       case LE: {
-        if (cell > number) {
-          valid = false;
-        }
-        break;
+        return cell <= number;
       }
       case NE: {
-        if (cell == number) {
-          valid = false;
-        }
-        break;
+        return cell != number;
       }
       default: {
         console.error('Number comparator provided is not supported');
-        break;
+        return true;
       }
     }
-    return valid;
   })
 );
 
@@ -208,25 +189,19 @@ export const filterByArray = _ => (
 };
 
 export const filterFactory = _ => (filterType) => {
-  let filterFn;
   switch (filterType) {
-    case FILTER_TYPE.TEXT:
-    case FILTER_TYPE.SELECT:
-      filterFn = filterByText(_);
-      break;
     case FILTER_TYPE.MULTISELECT:
-      filterFn = filterByArray(_);
-      break;
+      return filterByArray(_);
     case FILTER_TYPE.NUMBER:
-      filterFn = filterByNumber(_);
-      break;
+      return filterByNumber(_);
     case FILTER_TYPE.DATE:
-      filterFn = filterByDate(_);
-      break;
+      return filterByDate(_);
+    case FILTER_TYPE.TEXT:
+    case FILTER_TYPE.SELECT:
     default:
-      filterFn = filterByText(_);
+      // Use `text` filter as default filter
+      return filterByText(_);
   }
-  return filterFn;
 };
 
 export const filters = (data, columns, _) => (currFilters, clearFilters = {}) => {

packages/react-bootstrap-table2-filter/test/context.test.js

@@ -55,11 +55,13 @@ describe('FilterContext', () => {
       jest.fn().mockReturnValue(enableRemote),
       handleFilterChange
     );
+    const filterOptions = {};
 
     return (
       <FilterContext.Provider
         columns={ tableColumns }
         data={ data }
+        filter={ filterOptions }
         dataChangeListener={ dataChangeListener }
       >
         <FilterContext.Consumer>

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

@@ -80,6 +80,9 @@ Custom the style on input element.
 #### delay = [number]
 milionsecond for debounce user input.
 
+#### srText = [string]
+Customize the screen reader text for the search input. (Default: "Search this table")
+
 ### Search Options
 
 #### defaultSearch - [string]
@@ -141,6 +144,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/SearchBar.js

@@ -56,21 +56,24 @@ class SearchBar extends React.Component {
       className,
       style,
       placeholder,
-      tableId
+      tableId,
+      srText
     } = this.props;
 
     return (
       <label
         htmlFor={ `search-bar-${tableId}` }
         className="search-label"
       >
-        <span className="sr-only">Search this table</span>
+        <span id={ `search-bar-${tableId}-label` } className="sr-only">
+          { srText }
+        </span>
         <input
           ref={ n => this.input = n }
           id={ `search-bar-${tableId}` }
           type="text"
           style={ style }
-          aria-label="enter text you want to search"
+          aria-labelledby={ `search-bar-${tableId}-label` }
           onKeyUp={ () => this.onKeyup() }
           onChange={ this.onChangeValue }
           className={ `form-control ${className}` }
@@ -89,7 +92,8 @@ SearchBar.propTypes = {
   style: PropTypes.object,
   delay: PropTypes.number,
   searchText: PropTypes.string,
-  tableId: PropTypes.string
+  tableId: PropTypes.string,
+  srText: PropTypes.string
 };
 
 SearchBar.defaultProps = {
@@ -98,7 +102,8 @@ SearchBar.defaultProps = {
   placeholder: 'Search',
   delay: 250,
   searchText: '',
-  tableId: '0'
+  tableId: '0',
+  srText: 'Search this table'
 };
 
 export default SearchBar;

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);
       }