vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-08-11 11:40:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactoring search

Browse Source
This commit is contained in:
AllenFang
2018-08-01 20:26:00 +08:00
parent 0ec5b6cb9f
commit 03ece4b1fc
14 changed files with 85 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/README.md
-39
View File
@@ -29,7 +29,6 @@
* [defaultSortDirection](#defaultSortDirection)
* [pagination](#pagination)
* [filter](#filter)
* [search](#search)
* [onTableChange](#onTableChange)
### <a name='keyField'>keyField(**required**) - [String]</a>
@@ -265,44 +264,6 @@ const columns = [ {
<BootstrapTable data={ data } columns={ columns } filter={ filterFactory() } />
```
### <a name='search'>search - [Object]</a>
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;
//...
<ToolkitProvider>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitProvider>
```
### <a name='onTableChange'>onTableChange - [Function]</a>
This callback function will be called when [`remote`](#remote) enabled only.
packages/react-bootstrap-table2-example/examples/remote/remote-search.js
Vendored
+4 -7
View File
@@ -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
}) }
/>
]
}
</ToolkitProvider>
<Code>{ sourceCode }</Code>
</div>
);
@@ -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
}) }
/>
]
}
packages/react-bootstrap-table2-example/examples/search/custom-search-value.js
Vendored
+4 -8
View File
@@ -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 = [{
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
@@ -84,6 +82,7 @@ export default () => (
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
@@ -93,9 +92,6 @@ export default () => (
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
packages/react-bootstrap-table2-example/examples/search/default-custom-search.js
Vendored
+4 -8
View File
@@ -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 = [{
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
@@ -71,6 +69,7 @@ export default () => (
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
@@ -86,9 +85,6 @@ export default () => (
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js
Vendored
+4 -10
View File
@@ -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 => (
<div>
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
<MySearch { ...props.searchProps } />
<br />
@@ -101,15 +97,13 @@ export default () => (
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
<div>
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
<MySearch { ...props.searchProps } />
<br />
packages/react-bootstrap-table2-example/examples/search/index.js
Vendored
+4 -8
View File
@@ -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 = [{
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
@@ -65,6 +63,7 @@ export default () => (
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
@@ -74,9 +73,6 @@ export default () => (
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
packages/react-bootstrap-table2-example/examples/search/search-formatted.js
Vendored
+4 -10
View File
@@ -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 = [{
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps,
searchFormatted: true
}) }
/>
</div>
)
@@ -68,6 +65,7 @@ export default () => (
keyField="id"
data={ products }
columns={ columns }
search={ { searchFormatted: true } }
>
{
props => (
@@ -77,10 +75,6 @@ export default () => (
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps,
searchFormatted: true
}) }
/>
</div>
)
packages/react-bootstrap-table2-toolkit/README.md
+18 -17
View File
@@ -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;
//...
<ToolkitProvider>
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search
>
{
props => (
<div>
@@ -32,12 +37,7 @@ const { SearchBar, searchFactory } = Search;
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
search={ searchFactory({
...props.searchProps
}) }
{ ...props.baseProps }
/>
</div>
)
@@ -45,25 +45,26 @@ const { SearchBar, searchFactory } = Search;
</ToolkitProvider>
```
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
<BootstrapTable
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
search={ searchFactory({
...props.searchProps,
search={ {
searchFormatted: true
}) }
/>
} }
>
// ...
</ToolkitProvider>
```
packages/react-bootstrap-table2-toolkit/context.js
Vendored
+32 -14
View File
@@ -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 (
<ToolkitContext.Provider value={ {
searchProps: this.searchProps,
baseProps: { keyField, columns, data }
searchProps: {
onSearch: this.onSearch
},
baseProps
} }
>
{ this.props.children }
packages/react-bootstrap-table2-toolkit/src/search/index.js
Vendored
+1 -8
View File
@@ -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 };
packages/react-bootstrap-table2/src/bootstrap-table.js
Vendored
+6 -1
View File
@@ -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 = {
packages/react-bootstrap-table2/src/contexts/index.js
Vendored
+2 -2
View File
@@ -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);
}
}
packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js
Vendored
+1 -1
View File
@@ -27,7 +27,7 @@ export default ExtendBase =>
}
if (this.searchContext) {
searchText = this.searchContext.props.searchText;
searchText = this.props.search.searchText;
}
return {
packages/react-bootstrap-table2/test/contexts/index.test.js
+1 -4
View File
@@ -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(