vhad/react-bootstrap-table2
1
0
Fork 0
mirror of https://github.com/gosticks/react-bootstrap-table2.git synced 2025-10-16 11:55:39 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

data, keyField and columns is necessary value for toolkits context

Browse Source
This commit is contained in:
AllenFang 2018-07-03 23:26:57 +08:00
parent 5a442bf7ed
commit e6d4a9641b
8 changed files with 100 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,15 +40,27 @@ const columns = [{
const RemoteFilter = props => (
<div>
<BootstrapTable
remote={ { filter: true } }
<ToolkitContext.Provider
keyField="id"
data={ props.data }
columns={ columns }
filter={ filterFactory() }
onTableChange={ props.onTableChange }
/>
<Code>{ sourceCode }</Code>
>
<ToolkitContext.Consumer>
{
toolkitprops => [
<SearchBar { ...toolkitprops.searchProps } />,
<BootstrapTable
{ ...toolkitprops.baseProps }
remote={ { search: true } }
onTableChange={ props.onTableChange }
search={ searchFactory({
...toolkitprops.searchProps
}) }
/>
]
}
</ToolkitContext.Consumer>
</ToolkitContext.Provider>
</div>
);
@ -97,16 +109,18 @@ class Container extends React.Component {
const RemoteFilter = props => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ props.data }
columns={ columns }
>
<ToolkitContext.Consumer>
{
toolkitprops => [
<SearchBar { ...toolkitprops.searchProps } />,
<BootstrapTable
{ ...toolkitprops.baseProps }
remote={ { search: true } }
keyField="id"
data={ props.data }
columns={ columns }
onTableChange={ props.onTableChange }
search={ searchFactory({
...toolkitprops.searchProps

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

@ -55,18 +55,20 @@ const columns = [{
filterValue: (cell, row) => types[cell] // we will search the value after filterValue called
}];
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<h3>Try to Search Bob, Cat or Allen instead of 0, 1 or 2</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
@ -80,7 +82,11 @@ const columns = [{
export default () => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@ -89,9 +95,7 @@ export default () => (
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }

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

@ -36,7 +36,11 @@ const columns = [{
text: 'Product Price'
}];
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@ -51,9 +55,7 @@ const columns = [{
/>
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
@ -67,7 +69,11 @@ const columns = [{
export default () => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@ -82,9 +88,7 @@ export default () => (
/>
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }

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

@ -55,20 +55,23 @@ const MySearch = (props) => {
);
};
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
/>
<MySearch { ...props.searchProps } />
<br />
</div>
)
}
@ -96,15 +99,17 @@ const MySearch = (props) => {
export default () => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }

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

@ -36,7 +36,11 @@ const columns = [{
text: 'Product Price'
}];
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@ -45,9 +49,7 @@ const columns = [{
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }
@ -61,7 +63,11 @@ const columns = [{
export default () => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@ -70,9 +76,7 @@ export default () => (
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps
}) }

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

@ -38,21 +38,23 @@ const columns = [{
formatter: cell => \`USD \${cell}\` // we will search the data after formatted
}];
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
<div>
<h3>Input something at below input field:</h3>
<h3>Try to Search USD at below input field:</h3>
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps,
searchFormatted: true // enable searchFormatted
searchFormatted: true
}) }
/>
</div>
@ -64,7 +66,11 @@ const columns = [{
export default () => (
<div>
<ToolkitContext.Provider>
<ToolkitContext.Provider
keyField="id"
data={ products }
columns={ columns }
>
<ToolkitContext.Consumer>
{
props => (
@ -73,9 +79,7 @@ export default () => (
<SearchBar { ...props.searchProps } />
<hr />
<BootstrapTable
keyField="id"
data={ products }
columns={ columns }
{ ...props.baseProps }
search={ searchFactory({
...props.searchProps,
searchFormatted: true

12
packages/react-bootstrap-table2-toolkit/context.js vendored
View File

@ -1,10 +1,18 @@
/* eslint react/prop-types: 0 */
/* eslint react/require-default-props: 0 */
import React from 'react';
import PropTypes from 'prop-types';
const ToolkitContext = React.createContext();
class ToolkitProvider extends React.Component {
static propTypes = {
keyField: PropTypes.string.isRequired,
data: PropTypes.array.isRequired,
columns: PropTypes.array.isRequired,
children: PropTypes.node.isRequired
}
constructor(props) {
super(props);
this.test = false;
@ -23,9 +31,11 @@ class ToolkitProvider extends React.Component {
}
render() {
const { keyField, columns, data } = this.props;
return (
<ToolkitContext.Provider value={ {
searchProps: this.searchProps
searchProps: this.searchProps,
baseProps: { keyField, columns, data }
} }
>
{ this.props.children }

2
packages/react-bootstrap-table2/src/contexts/index.js vendored
View File

@ -13,7 +13,7 @@ const withContext = Base =>
class BootstrapTableContainer extends remoteResolver(Component) {
constructor(props) {
super(props);
this.DataContext = createDataContext(props.data);
this.DataContext = createDataContext();
if (props.columns.filter(col => col.sort).length > 0) {
this.SortContext = createSortContext(