vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2026-07-03 23:50:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add simple toolkit context wrapper for user

Browse Source
This commit is contained in:
AllenFang
2018-07-11 23:35:41 +08:00
parent e6d4a9641b
commit 0ec5b6cb9f
10 changed files with 272 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/README.md
View File

@@ -277,32 +277,30 @@ $ npm install react-bootstrap-table2-toolkit --save
After installation of `react-bootstrap-table2-toolkit`, you can render search field easily:
```js
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, searchFactory } = Search;
//...
<ToolkitContext.Provider>
<ToolkitContext.Consumer>
{
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>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
<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>

67
packages/react-bootstrap-table2-example/examples/remote/remote-search.js vendored
View File

@@ -3,7 +3,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -23,6 +23,7 @@ const columns = [{
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
const columns = [{
@@ -40,27 +41,25 @@ const columns = [{
const RemoteFilter = props => (
<div>
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ props.data }
columns={ columns }
>
<ToolkitContext.Consumer>
{
toolkitprops => [
<SearchBar { ...toolkitprops.searchProps } />,
<BootstrapTable
{ ...toolkitprops.baseProps }
remote={ { search: true } }
onTableChange={ props.onTableChange }
search={ searchFactory({
...toolkitprops.searchProps
}) }
/>
]
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
toolkitprops => [
<SearchBar { ...toolkitprops.searchProps } />,
<BootstrapTable
{ ...toolkitprops.baseProps }
remote={ { search: true } }
onTableChange={ props.onTableChange }
search={ searchFactory({
...toolkitprops.searchProps
}) }
/>
]
}
</ToolkitProvider>
</div>
);
@@ -109,27 +108,25 @@ class Container extends React.Component {
const RemoteFilter = props => (
<div>
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ props.data }
columns={ columns }
>
<ToolkitContext.Consumer>
{
toolkitprops => [
<SearchBar { ...toolkitprops.searchProps } />,
<BootstrapTable
{ ...toolkitprops.baseProps }
remote={ { search: true } }
onTableChange={ props.onTableChange }
search={ searchFactory({
...toolkitprops.searchProps
}) }
/>
]
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
toolkitprops => [
<SearchBar { ...toolkitprops.searchProps } />,
<BootstrapTable
{ ...toolkitprops.baseProps }
remote={ { search: true } }
onTableChange={ props.onTableChange }
search={ searchFactory({
...toolkitprops.searchProps
}) }
/>
]
}
</ToolkitProvider>
<Code>{ sourceCode }</Code>
</div>
);

76
packages/react-bootstrap-table2-example/examples/search/custom-search-value.js vendored
View File

@@ -3,7 +3,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import Code from 'components/common/code-block';
import { jobsGenerator1 } from 'utils/common';
@@ -32,7 +32,7 @@ const columns = [{
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, searchFactory } = Search;
const owners = ['Allen', 'Bob', 'Cat'];
@@ -55,56 +55,52 @@ const columns = [{
filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
}];
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
props => (
<div>
<h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitProvider>
`;
export default () => (
<div>
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
props => (
<div>
<h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitProvider>
<Code>{ sourceCode }</Code>
</div>
);

100
packages/react-bootstrap-table2-example/examples/search/default-custom-search.js vendored
View File

@@ -2,7 +2,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -22,7 +22,7 @@ const columns = [{
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, searchFactory } = Search;
const columns = [{
@@ -36,68 +36,64 @@ const columns = [{
text: 'Product Price'
}];
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar
{ ...props.searchProps }
className="custome-search-field"
style={ { color: 'white' } }
delay={ 1000 }
placeholder="Search Something!!!"
/>
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar
{ ...props.searchProps }
className="custome-search-field"
style={ { color: 'white' } }
delay={ 1000 }
placeholder="Search Something!!!"
/>
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitProvider>
`;
export default () => (
<div>
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar
{ ...props.searchProps }
className="custome-search-field"
style={ { color: 'white' } }
delay={ 1000 }
placeholder="Search Something!!!"
/>
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar
{ ...props.searchProps }
className="custome-search-field"
style={ { color: 'white' } }
delay={ 1000 }
placeholder="Search Something!!!"
/>
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitProvider>
<Code>{ sourceCode }</Code>
</div>
);

72
packages/react-bootstrap-table2-example/examples/search/fully-custom-search.js vendored
View File

@@ -3,7 +3,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -23,7 +23,7 @@ const columns = [{
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { searchFactory } = Search;
const columns = [{
@@ -55,28 +55,26 @@ const MySearch = (props) => {
);
};
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
<MySearch { ...props.searchProps } />
<br />
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
props => (
<div>
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
<MySearch { ...props.searchProps } />
<br />
</div>
)
}
</ToolkitProvider>
`;
const MySearch = (props) => {
@@ -99,28 +97,26 @@ const MySearch = (props) => {
export default () => (
<div>
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
<MySearch { ...props.searchProps } />
<br />
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
props => (
<div>
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
<MySearch { ...props.searchProps } />
<br />
</div>
)
}
</ToolkitProvider>
<Code>{ sourceCode }</Code>
</div>
);

76
packages/react-bootstrap-table2-example/examples/search/index.js vendored
View File

@@ -2,7 +2,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -22,7 +22,7 @@ const columns = [{
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, searchFactory } = Search;
const columns = [{
@@ -36,56 +36,52 @@ const columns = [{
text: 'Product Price'
}];
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitProvider>
`;
export default () => (
<div>
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
</div>
)
}
</ToolkitProvider>
<Code>{ sourceCode }</Code>
</div>
);

80
packages/react-bootstrap-table2-example/examples/search/search-formatted.js vendored
View File

@@ -2,7 +2,7 @@
import React from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import Code from 'components/common/code-block';
import { productsGenerator } from 'utils/common';
@@ -23,7 +23,7 @@ const columns = [{
const sourceCode = `\
import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, searchFactory } = Search;
const columns = [{
@@ -38,58 +38,54 @@ const columns = [{
formatter: cell => \`USD \${cell}\` // we will search the data after formatted
}];
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Try to Search USD at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps,
searchFormatted: true
}) }
/>
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
props => (
<div>
<h3>Try to Search USD at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps,
searchFormatted: true
}) }
/>
</div>
)
}
</ToolkitProvider>
`;
export default () => (
<div>
<ToolkitContext.Provider
<ToolkitProvider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Try to Search USD at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps,
searchFormatted: true
}) }
/>
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
{
props => (
<div>
<h3>Try to Search USD at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps,
searchFormatted: true
}) }
/>
</div>
)
}
</ToolkitProvider>
<Code>{ sourceCode }</Code>
</div>
);

12
packages/react-bootstrap-table2-toolkit/README.md
View File

@@ -19,13 +19,12 @@ $ npm install react-bootstrap-table2-toolkit --save
## Table Search
```js
import ToolkitContext, { Search } from 'react-bootstrap-table2-toolkit';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
const { SearchBar, searchFactory } = Search;
//...
<ToolkitContext.Provider>
<ToolkitContext.Consumer>
<ToolkitProvider>
{
props => (
<div>
@@ -43,13 +42,12 @@ const { SearchBar, searchFactory } = Search;
</div>
)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
</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 `ToolkitContext.Provider`
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`
2. `ToolkitContext` is a react context, you are supposed to wrap the `BootstrapTable` and `SearchBar` as the child of `ToolkitContext.Consumer`
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.

6
packages/react-bootstrap-table2-toolkit/index.js vendored
View File

@@ -1,4 +1,6 @@
import ToolkitContext from './context';
import Context from './context';
import ToolkitProvider from './provider';
export default ToolkitContext;
export default ToolkitProvider;
export const ToolkitContext = Context;
export { default as Search } from './src/search';

19
packages/react-bootstrap-table2-toolkit/provider.js vendored Normal file
View File

@@ -0,0 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
import ToolkitContext from './context';
const Toolkitprovider = props => (
<ToolkitContext.Provider { ...props }>
<ToolkitContext.Consumer>
{
tookKitProps => props.children(tookKitProps)
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
);
Toolkitprovider.propTypes = {
children: PropTypes.func.isRequired
};
export default Toolkitprovider;