From 03ece4b1fc9dfa81deb261a3061f0f638445b0e0 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 14 Jul 2018 14:09:51 +0800 Subject: [PATCH] refactoring search --- docs/README.md | 39 ---------------- .../examples/remote/remote-search.js | 11 ++--- .../examples/search/custom-search-value.js | 12 ++--- .../examples/search/default-custom-search.js | 12 ++--- .../examples/search/fully-custom-search.js | 14 ++---- .../examples/search/index.js | 12 ++--- .../examples/search/search-formatted.js | 14 ++---- .../react-bootstrap-table2-toolkit/README.md | 35 +++++++------- .../react-bootstrap-table2-toolkit/context.js | 46 +++++++++++++------ .../src/search/index.js | 9 +--- .../src/bootstrap-table.js | 7 ++- .../src/contexts/index.js | 4 +- .../src/props-resolver/remote-resolver.js | 2 +- .../test/contexts/index.test.js | 5 +- 14 files changed, 85 insertions(+), 137 deletions(-) diff --git a/docs/README.md b/docs/README.md index ba9ea6d..7a02af1 100644 --- a/docs/README.md +++ b/docs/README.md @@ -29,7 +29,6 @@ * [defaultSortDirection](#defaultSortDirection) * [pagination](#pagination) * [filter](#filter) -* [search](#search) * [onTableChange](#onTableChange) ### keyField(**required**) - [String] @@ -265,44 +264,6 @@ const columns = [ { ``` -### search - [Object] -Enable the search functionality. - -`search` allow user to searhc all the table data. However, search functionality is separated from core of `react-bootstrap-table2` so that you are suppose to install `react-bootstrap-table2-toolkit` firstly. - -```sh -$ npm install react-bootstrap-table2-toolkit --save -``` - -After installation of `react-bootstrap-table2-toolkit`, you can render search field easily: - -```js -import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; - -const { SearchBar, searchFactory } = Search; -//... - - - { - props => ( -
-

Input something at below input field:

- -
- -
- ) - } - -``` - ### onTableChange - [Function] This callback function will be called when [`remote`](#remote) enabled only. diff --git a/packages/react-bootstrap-table2-example/examples/remote/remote-search.js b/packages/react-bootstrap-table2-example/examples/remote/remote-search.js index 95fbf4e..ad4d5a1 100644 --- a/packages/react-bootstrap-table2-example/examples/remote/remote-search.js +++ b/packages/react-bootstrap-table2-example/examples/remote/remote-search.js @@ -7,7 +7,7 @@ import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; import Code from 'components/common/code-block'; import { productsGenerator } from 'utils/common'; -const { SearchBar, searchFactory } = Search; +const { SearchBar } = Search; const products = productsGenerator(17); const columns = [{ @@ -45,6 +45,7 @@ const RemoteFilter = props => ( keyField="id" data={ props.data } columns={ columns } + search > { toolkitprops => [ @@ -53,13 +54,11 @@ const RemoteFilter = props => ( { ...toolkitprops.baseProps } remote={ { search: true } } onTableChange={ props.onTableChange } - search={ searchFactory({ - ...toolkitprops.searchProps - }) } /> ] } + { sourceCode } ); @@ -112,6 +111,7 @@ const RemoteFilter = props => ( keyField="id" data={ props.data } columns={ columns } + search > { toolkitprops => [ @@ -120,9 +120,6 @@ const RemoteFilter = props => ( { ...toolkitprops.baseProps } remote={ { search: true } } onTableChange={ props.onTableChange } - search={ searchFactory({ - ...toolkitprops.searchProps - }) } /> ] } diff --git a/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js b/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js index 8df77fa..fcb4d19 100644 --- a/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js +++ b/packages/react-bootstrap-table2-example/examples/search/custom-search-value.js @@ -7,7 +7,7 @@ import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; import Code from 'components/common/code-block'; import { jobsGenerator1 } from 'utils/common'; -const { SearchBar, searchFactory } = Search; +const { SearchBar } = Search; const products = jobsGenerator1(5); const owners = ['Allen', 'Bob', 'Cat']; @@ -34,7 +34,7 @@ const sourceCode = `\ import BootstrapTable from 'react-bootstrap-table-next'; import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; -const { SearchBar, searchFactory } = Search; +const { SearchBar } = Search; const owners = ['Allen', 'Bob', 'Cat']; const types = ['Cloud Service', 'Message Service', 'Add Service', 'Edit Service', 'Money']; @@ -59,6 +59,7 @@ const columns = [{ keyField="id" data={ products } columns={ columns } + search > { props => ( @@ -68,9 +69,6 @@ const columns = [{
) @@ -84,6 +82,7 @@ export default () => ( keyField="id" data={ products } columns={ columns } + search > { props => ( @@ -93,9 +92,6 @@ export default () => (
) diff --git a/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js b/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js index 22938d1..3e146db 100644 --- a/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js +++ b/packages/react-bootstrap-table2-example/examples/search/default-custom-search.js @@ -6,7 +6,7 @@ import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; import Code from 'components/common/code-block'; import { productsGenerator } from 'utils/common'; -const { SearchBar, searchFactory } = Search; +const { SearchBar } = Search; const products = productsGenerator(); const columns = [{ @@ -24,7 +24,7 @@ const sourceCode = `\ import BootstrapTable from 'react-bootstrap-table-next'; import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; -const { SearchBar, searchFactory } = Search; +const { SearchBar } = Search; const columns = [{ dataField: 'id', text: 'Product ID' @@ -40,6 +40,7 @@ const columns = [{ keyField="id" data={ products } columns={ columns } + search > { props => ( @@ -55,9 +56,6 @@ const columns = [{
) @@ -71,6 +69,7 @@ export default () => ( keyField="id" data={ products } columns={ columns } + search > { props => ( @@ -86,9 +85,6 @@ export default () => (
) diff --git a/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js b/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js index 98720d6..78bf504 100644 --- a/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js +++ b/packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js @@ -3,12 +3,11 @@ import React from 'react'; import BootstrapTable from 'react-bootstrap-table-next'; -import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; +import ToolkitProvider from 'react-bootstrap-table2-toolkit'; import Code from 'components/common/code-block'; import { productsGenerator } from 'utils/common'; const products = productsGenerator(); -const { searchFactory } = Search; const columns = [{ dataField: 'id', @@ -23,9 +22,8 @@ const columns = [{ const sourceCode = `\ import BootstrapTable from 'react-bootstrap-table-next'; -import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; +import ToolkitProvider from 'react-bootstrap-table2-toolkit'; -const { searchFactory } = Search; const columns = [{ dataField: 'id', text: 'Product ID' @@ -59,15 +57,13 @@ const MySearch = (props) => { keyField="id" data={ products } columns={ columns } + search > { props => (

@@ -101,15 +97,13 @@ export default () => ( keyField="id" data={ products } columns={ columns } + search > { props => (

diff --git a/packages/react-bootstrap-table2-example/examples/search/index.js b/packages/react-bootstrap-table2-example/examples/search/index.js index 252cc68..3a8effc 100644 --- a/packages/react-bootstrap-table2-example/examples/search/index.js +++ b/packages/react-bootstrap-table2-example/examples/search/index.js @@ -6,7 +6,7 @@ import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; import Code from 'components/common/code-block'; import { productsGenerator } from 'utils/common'; -const { SearchBar, searchFactory } = Search; +const { SearchBar } = Search; const products = productsGenerator(); const columns = [{ @@ -24,7 +24,7 @@ const sourceCode = `\ import BootstrapTable from 'react-bootstrap-table-next'; import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; -const { SearchBar, searchFactory } = Search; +const { SearchBar } = Search; const columns = [{ dataField: 'id', text: 'Product ID' @@ -40,6 +40,7 @@ const columns = [{ keyField="id" data={ products } columns={ columns } + search > { props => ( @@ -49,9 +50,6 @@ const columns = [{
) @@ -65,6 +63,7 @@ export default () => ( keyField="id" data={ products } columns={ columns } + search > { props => ( @@ -74,9 +73,6 @@ export default () => (
) diff --git a/packages/react-bootstrap-table2-example/examples/search/search-formatted.js b/packages/react-bootstrap-table2-example/examples/search/search-formatted.js index b6fd736..71575ff 100644 --- a/packages/react-bootstrap-table2-example/examples/search/search-formatted.js +++ b/packages/react-bootstrap-table2-example/examples/search/search-formatted.js @@ -6,7 +6,7 @@ import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; import Code from 'components/common/code-block'; import { productsGenerator } from 'utils/common'; -const { SearchBar, searchFactory } = Search; +const { SearchBar } = Search; const products = productsGenerator(); const columns = [{ @@ -25,7 +25,7 @@ const sourceCode = `\ import BootstrapTable from 'react-bootstrap-table-next'; import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; -const { SearchBar, searchFactory } = Search; +const { SearchBar } = Search; const columns = [{ dataField: 'id', text: 'Product ID' @@ -42,6 +42,7 @@ const columns = [{ keyField="id" data={ products } columns={ columns } + search={ { searchFormatted: true } } > { props => ( @@ -51,10 +52,6 @@ const columns = [{
) @@ -68,6 +65,7 @@ export default () => ( keyField="id" data={ products } columns={ columns } + search={ { searchFormatted: true } } > { props => ( @@ -77,10 +75,6 @@ export default () => (
) diff --git a/packages/react-bootstrap-table2-toolkit/README.md b/packages/react-bootstrap-table2-toolkit/README.md index 538bc4a..5ddf507 100644 --- a/packages/react-bootstrap-table2-toolkit/README.md +++ b/packages/react-bootstrap-table2-toolkit/README.md @@ -21,10 +21,15 @@ $ npm install react-bootstrap-table2-toolkit --save ```js import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit'; -const { SearchBar, searchFactory } = Search; +const { SearchBar } = Search; //... - + { props => (
@@ -32,12 +37,7 @@ const { SearchBar, searchFactory } = Search;
) @@ -45,25 +45,26 @@ const { SearchBar, searchFactory } = Search; ``` -1. You need to enable the search functionality via `search` prop on `BootstrapTable` and pass the result of calling `searchFactory` with custom option and default `searchProps` provided by `ToolkitProvider` +1. You have to enable the search functionality via `search` prop on `ToolkitProvider`. 2. `ToolkitProvider` is a wrapper of react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitProvider` -3. You should render `SearchBar` with `searchProps` as well. +3. You should render `SearchBar` with `searchProps` as well. The position of `SearchBar` is depends on you. -### Options +### search pptions # searchFormatted - [bool] -If you want to search on the formatted data, you are supposed to enable it. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search. +If you want to search on the formatted data, you are supposed to enable this props. `react-bootstrap-table2` will check if you define the `column.formatter` when doing search. ```js - + } } +> + // ... + ``` \ No newline at end of file diff --git a/packages/react-bootstrap-table2-toolkit/context.js b/packages/react-bootstrap-table2-toolkit/context.js index b86a4da..a561203 100644 --- a/packages/react-bootstrap-table2-toolkit/context.js +++ b/packages/react-bootstrap-table2-toolkit/context.js @@ -1,8 +1,9 @@ -/* eslint react/prop-types: 0 */ -/* eslint react/require-default-props: 0 */ + import React from 'react'; import PropTypes from 'prop-types'; +import createContext from './src/search/context'; + const ToolkitContext = React.createContext(); class ToolkitProvider extends React.Component { @@ -10,32 +11,49 @@ class ToolkitProvider extends React.Component { keyField: PropTypes.string.isRequired, data: PropTypes.array.isRequired, columns: PropTypes.array.isRequired, - children: PropTypes.node.isRequired + children: PropTypes.node.isRequired, + search: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.shape({ + searchFormatted: PropTypes.bool + }) + ]) + } + + static defaultProps = { + search: null } constructor(props) { super(props); - this.test = false; - this.searchProps = { - onSearch: this.onSearch.bind(this), + this.state = { searchText: '' }; + this.onSearch = this.onSearch.bind(this); } onSearch(searchText) { - this.searchProps = { - ...this.searchProps, - searchText - }; - this.forceUpdate(); + this.setState({ searchText }); } render() { - const { keyField, columns, data } = this.props; + const baseProps = { + keyField: this.props.keyField, + columns: this.props.columns, + data: this.props.data + }; + if (this.props.search) { + baseProps.search = { + searchContext: createContext(this.props.search), + searchText: this.state.searchText + }; + } return ( { this.props.children } diff --git a/packages/react-bootstrap-table2-toolkit/src/search/index.js b/packages/react-bootstrap-table2-toolkit/src/search/index.js index 06fc1d7..c905897 100644 --- a/packages/react-bootstrap-table2-toolkit/src/search/index.js +++ b/packages/react-bootstrap-table2-toolkit/src/search/index.js @@ -1,10 +1,3 @@ import SearchBar from './SearchBar'; -import createContext from './context'; - -const searchFactory = ({ searchText, onSearch, ...options }) => ({ - createContext: createContext(options), - searchText -}); - -export default { SearchBar, searchFactory }; +export default { SearchBar }; diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 20f64f4..6be3c8e 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -174,7 +174,12 @@ BootstrapTable.propTypes = { onTableChange: PropTypes.func, onSort: PropTypes.func, onFilter: PropTypes.func, - onExternalFilter: PropTypes.func + onExternalFilter: PropTypes.func, + // Inject from toolkit + search: PropTypes.shape({ + searchText: PropTypes.string, + searchContext: PropTypes.func + }) }; BootstrapTable.defaultProps = { diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js index e95ea27..bb5fe15 100644 --- a/packages/react-bootstrap-table2/src/contexts/index.js +++ b/packages/react-bootstrap-table2/src/contexts/index.js @@ -43,8 +43,8 @@ const withContext = Base => this.isRemotePagination, this.handleRemotePageChange); } - if (props.search) { - this.SearchContext = props.search.createContext( + if (props.search && props.search.searchContext) { + this.SearchContext = props.search.searchContext( _, this.isRemoteSearch, this.handleRemoteSearchChange); } } diff --git a/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js b/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js index f0b1a59..89af4c6 100644 --- a/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js +++ b/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js @@ -27,7 +27,7 @@ export default ExtendBase => } if (this.searchContext) { - searchText = this.searchContext.props.searchText; + searchText = this.props.search.searchText; } return { diff --git a/packages/react-bootstrap-table2/test/contexts/index.test.js b/packages/react-bootstrap-table2/test/contexts/index.test.js index 1236b24..4a2b1de 100644 --- a/packages/react-bootstrap-table2/test/contexts/index.test.js +++ b/packages/react-bootstrap-table2/test/contexts/index.test.js @@ -138,10 +138,7 @@ describe('Context', () => { beforeEach(() => { const SearchContext = React.createContext(); const search = { - createContext: jest.fn().mockReturnValue({ - Provider: SearchContext.Provider, - Consumer: SearchContext.Consumer - }), + searchContext: jest.fn().mockReturnValue(SearchContext), searchText: '' }; wrapper = shallow(