Skip to content

Commit 63c2630

Browse files
AllenFangAllenFang
committed
fix same issue react-bootstrap-table#778, but for search
1 parent 903dd2e commit 63c2630

File tree

4 files changed

+169
-20
lines changed

4 files changed

+169
-20
lines changed

‎packages/react-bootstrap-table2-example/examples/pagination/custom-page-list-with-search.js

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/* eslint react/prefer-stateless-function: 0 */
2+
import React from 'react';
3+
4+
import BootstrapTable from 'react-bootstrap-table-next';
5+
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
6+
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
7+
import Code from 'components/common/code-block';
8+
import { productsGenerator } from 'utils/common';
9+
10+
const products = productsGenerator(21);
11+
const { SearchBar } = Search;
12+
13+
const columns = [{
14+
dataField: 'id',
15+
text: 'Product ID'
16+
}, {
17+
dataField: 'name',
18+
text: 'Product Name'
19+
}];
20+
21+
const sourceCode = `\
22+
import BootstrapTable from 'react-bootstrap-table-next';
23+
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
24+
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
25+
26+
class Table extends React.Component {
27+
render() {
28+
const options = {
29+
custom: true,
30+
paginationSize: 4,
31+
pageStartIndex: 1,
32+
firstPageText: 'First',
33+
prePageText: 'Back',
34+
nextPageText: 'Next',
35+
lastPageText: 'Last',
36+
nextPageTitle: 'First page',
37+
prePageTitle: 'Pre page',
38+
firstPageTitle: 'Next page',
39+
lastPageTitle: 'Last page',
40+
showTotal: true,
41+
totalSize: products.length
42+
};
43+
const contentTable = ({ paginationProps, paginationTableProps }) => (
44+
<div>
45+
<PaginationListStandalone { ...paginationProps } />
46+
<div>
47+
<div>
48+
<BootstrapTable
49+
striped
50+
hover
51+
keyField="id"
52+
data={ products }
53+
columns={ columns }
54+
filter={ filterFactory() }
55+
cellEdit={ cellEditFactory() }
56+
{ ...paginationTableProps }
57+
/>
58+
</div>
59+
</div>
60+
<PaginationListStandalone { ...paginationProps } />
61+
</div>
62+
);
63+
64+
return (
65+
<div>
66+
<h2>PaginationProvider will care the data size change. You dont do anything</h2>
67+
<PaginationProvider
68+
pagination={
69+
paginationFactory(options)
70+
}
71+
>
72+
{ contentTable }
73+
</PaginationProvider>
74+
<Code>{ sourceCode }</Code>
75+
</div >
76+
);
77+
}
78+
}
79+
`;
80+
81+
export default class Table extends React.Component {
82+
render() {
83+
const options = {
84+
custom: true,
85+
paginationSize: 4,
86+
pageStartIndex: 1,
87+
firstPageText: 'First',
88+
prePageText: 'Back',
89+
nextPageText: 'Next',
90+
lastPageText: 'Last',
91+
nextPageTitle: 'First page',
92+
prePageTitle: 'Pre page',
93+
firstPageTitle: 'Next page',
94+
lastPageTitle: 'Last page',
95+
showTotal: true,
96+
totalSize: products.length
97+
};
98+
const contentTable = ({ paginationProps, paginationTableProps }) => (
99+
<div>
100+
<PaginationListStandalone { ...paginationProps } />
101+
<ToolkitProvider
102+
keyField="id"
103+
columns={ columns }
104+
data={ products }
105+
search
106+
>
107+
{
108+
toolkitprops => (
109+
<div>
110+
<SearchBar { ...toolkitprops.searchProps } />
111+
<BootstrapTable
112+
striped
113+
hover
114+
{ ...toolkitprops.baseProps }
115+
{ ...paginationTableProps }
116+
/>
117+
</div>
118+
)
119+
}
120+
</ToolkitProvider>
121+
<PaginationListStandalone { ...paginationProps } />
122+
</div>
123+
);
124+
125+
return (
126+
<div>
127+
<h2>PaginationProvider will care the data size change. You dont do anything</h2>
128+
<PaginationProvider
129+
pagination={
130+
paginationFactory(options)
131+
}
132+
>
133+
{ contentTable }
134+
</PaginationProvider>
135+
<Code>{ sourceCode }</Code>
136+
</div >
137+
);
138+
}
139+
}

‎packages/react-bootstrap-table2-example/stories/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ import StandaloneSizePerPage from 'examples/pagination/standalone-size-per-page'
171171
import FullyCustomPaginationTable from 'examples/pagination/fully-custom-pagination';
172172
import RemoteStandalonePaginationTable from 'examples/pagination/remote-standalone-pagination';
173173
import CustomePaginationWithFilter from 'examples/pagination/custome-page-list-with-filter';
174+
import CustomePaginationWithSearch from 'examples/pagination/custom-page-list-with-search';
174175

175176
// search
176177
import SearchTable from 'examples/search';
@@ -394,7 +395,8 @@ storiesOf('Pagination', module)
394395
.add('Standalone SizePerPage Dropdown', () => <StandaloneSizePerPage />)
395396
.add('Fully Custom Pagination', () => <FullyCustomPaginationTable />)
396397
.add('Remote Fully Custom Pagination', () => <RemoteStandalonePaginationTable />)
397-
.add('Custom Pagination with Filter', () => <CustomePaginationWithFilter />);
398+
.add('Custom Pagination with Filter', () => <CustomePaginationWithFilter />)
399+
.add('Custom Pagination with Search', () => <CustomePaginationWithSearch />);
398400

399401
storiesOf('Table Search', module)
400402
.addDecorator(bootstrapStyle())

‎packages/react-bootstrap-table2-toolkit/src/search/context.js

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,36 +17,44 @@ export default (options = {
1717
static propTypes = {
1818
data: PropTypes.array.isRequired,
1919
columns: PropTypes.array.isRequired,
20-
searchText: PropTypes.string
20+
searchText: PropTypes.string,
21+
dataChangeListener: PropTypes.object
2122
}
2223

2324
constructor(props) {
2425
super(props);
25-
this.performRemoteSearch = props.searchText !== '';
26+
let initialData = props.data;
27+
if (isRemoteSearch() && this.props.searchText !== '') {
28+
handleRemoteSearchChange(this.props.searchText);
29+
} else {
30+
initialData = this.search(props.searchText.toLowerCase());
31+
this.triggerListener(initialData);
32+
}
33+
this.state = { data: initialData };
2634
}
2735

2836
componentWillReceiveProps(nextProps) {
29-
if (isRemoteSearch()) {
30-
if (nextProps.searchText !== this.props.searchText) {
31-
this.performRemoteSearch = true;
37+
if (nextProps.searchText !== this.props.searchText) {
38+
if (isRemoteSearch()) {
39+
handleRemoteSearchChange(nextProps.searchText);
3240
} else {
33-
this.performRemoteSearch = false;
41+
const result = this.search(nextProps.searchText.toLowerCase());
42+
this.triggerListener(result);
43+
this.setState({
44+
data: result
45+
});
3446
}
3547
}
3648
}
3749

38-
search() {
39-
const { data, columns } = this.props;
40-
let { searchText } = this.props;
41-
42-
if (isRemoteSearch()) {
43-
if (this.performRemoteSearch) {
44-
handleRemoteSearchChange(searchText);
45-
}
46-
return data;
50+
triggerListener(result) {
51+
if (this.props.dataChangeListener) {
52+
this.props.dataChangeListener.emit('filterChanged', result.length);
4753
}
54+
}
4855

49-
searchText = searchText.toLowerCase();
56+
search(searchText) {
57+
const { data, columns } = this.props;
5058
return data.filter((row, ridx) => {
5159
for (let cidx = 0; cidx < columns.length; cidx += 1) {
5260
const column = columns[cidx];
@@ -69,9 +77,8 @@ export default (options = {
6977
}
7078

7179
render() {
72-
const data = this.search();
7380
return (
74-
<SearchContext.Provider value={ { data } }>
81+
<SearchContext.Provider value={ { data: this.state.data } }>
7582
{ this.props.children }
7683
</SearchContext.Provider>
7784
);

‎packages/react-bootstrap-table2/src/contexts/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,7 @@ const withContext = Base =>
217217
ref={ n => this.searchContext = n }
218218
data={ rootProps.getData(filterProps) }
219219
searchText={ this.props.search.searchText }
220+
dataChangeListener={ this.props.dataChangeListener }
220221
>
221222
<this.SearchContext.Consumer>
222223
{
@@ -237,7 +238,7 @@ const withContext = Base =>
237238
{ ...baseProps }
238239
ref={ n => this.filterContext = n }
239240
data={ rootProps.getData() }
240-
listenerForPagination={ this.props.listenerForPagination }
241+
dataChangeListener={ this.props.dataChangeListener }
241242
>
242243
<this.FilterContext.Consumer>
243244
{

0 commit comments

Comments
 (0)