Skip to content

Commit 921e8c7

Browse files
AllenFangAllenFang
committed
1 parent a3b3ce0 commit 921e8c7

File tree

5 files changed

+88
-36
lines changed

5 files changed

+88
-36
lines changed

‎packages/react-bootstrap-table2-example/examples/pagination/custome-page-list-with-filter.js

Lines changed: 60 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,70 @@ import React from 'react';
33

44
import BootstrapTable from 'react-bootstrap-table-next';
55
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
6-
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
6+
import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
77
import Code from 'components/common/code-block';
8-
import { productsGenerator } from 'utils/common';
8+
import { productsQualityGenerator } from 'utils/common';
99

10-
const products = productsGenerator(21);
10+
const products = productsQualityGenerator(21);
11+
12+
const selectOptions = {
13+
0: 'good',
14+
1: 'Bad',
15+
2: 'unknown'
16+
};
1117

1218
const columns = [{
1319
dataField: 'id',
14-
text: 'Product ID',
15-
filter: textFilter({})
20+
text: 'Product ID'
1621
}, {
1722
dataField: 'name',
1823
text: 'Product Name',
1924
filter: textFilter()
25+
}, {
26+
dataField: 'quality',
27+
text: 'Product Quailty',
28+
formatter: cell => selectOptions[cell],
29+
filter: selectFilter({
30+
options: selectOptions,
31+
defaultValue: 0
32+
})
2033
}];
2134

2235
const sourceCode = `\
2336
import BootstrapTable from 'react-bootstrap-table-next';
2437
import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
25-
import filterFactory, { textFilter } from 'react-bootstrap-table2-filter';
38+
import filterFactory, { textFilter, selectFilter } from 'react-bootstrap-table2-filter';
39+
40+
const selectOptions = {
41+
0: 'good',
42+
1: 'Bad',
43+
2: 'unknown'
44+
};
45+
46+
const columns = [{
47+
dataField: 'id',
48+
text: 'Product ID'
49+
}, {
50+
dataField: 'name',
51+
text: 'Product Name',
52+
filter: textFilter()
53+
}, {
54+
dataField: 'quality',
55+
text: 'Product Quailty',
56+
formatter: cell => selectOptions[cell],
57+
filter: selectFilter({
58+
options: selectOptions,
59+
defaultValue: 0
60+
})
61+
}];
2662
2763
class Table extends React.Component {
64+
state = { products }
65+
66+
loadData = () => {
67+
this.setState({ products: productsQualityGenerator(40, 7) });
68+
}
69+
2870
render() {
2971
const options = {
3072
custom: true,
@@ -39,21 +81,21 @@ class Table extends React.Component {
3981
firstPageTitle: 'Next page',
4082
lastPageTitle: 'Last page',
4183
showTotal: true,
42-
totalSize: products.length
84+
totalSize: this.state.products.length
4385
};
4486
const contentTable = ({ paginationProps, paginationTableProps }) => (
4587
<div>
88+
<button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
4689
<PaginationListStandalone { ...paginationProps } />
4790
<div>
4891
<div>
4992
<BootstrapTable
5093
striped
5194
hover
5295
keyField="id"
53-
data={ products }
96+
data={ this.state.products }
5497
columns={ columns }
5598
filter={ filterFactory() }
56-
cellEdit={ cellEditFactory() }
5799
{ ...paginationTableProps }
58100
/>
59101
</div>
@@ -72,14 +114,19 @@ class Table extends React.Component {
72114
>
73115
{ contentTable }
74116
</PaginationProvider>
75-
<Code>{ sourceCode }</Code>
76117
</div >
77118
);
78119
}
79120
}
80121
`;
81122

82123
export default class Table extends React.Component {
124+
state = { products }
125+
126+
loadData = () => {
127+
this.setState({ products: productsQualityGenerator(40, 7) });
128+
}
129+
83130
render() {
84131
const options = {
85132
custom: true,
@@ -94,18 +141,19 @@ export default class Table extends React.Component {
94141
firstPageTitle: 'Next page',
95142
lastPageTitle: 'Last page',
96143
showTotal: true,
97-
totalSize: products.length
144+
totalSize: this.state.products.length
98145
};
99146
const contentTable = ({ paginationProps, paginationTableProps }) => (
100147
<div>
148+
<button className="btn btn-default" onClick={ this.loadData }>Load Another Data</button>
101149
<PaginationListStandalone { ...paginationProps } />
102150
<div>
103151
<div>
104152
<BootstrapTable
105153
striped
106154
hover
107155
keyField="id"
108-
data={ products }
156+
data={ this.state.products }
109157
columns={ columns }
110158
filter={ filterFactory() }
111159
{ ...paginationTableProps }

‎packages/react-bootstrap-table2-example/src/utils/common.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ export const withOnSale = rows => rows.map((row) => {
2929
return row;
3030
});
3131

32-
export const productsQualityGenerator = (quantity = 5) =>
32+
export const productsQualityGenerator = (quantity = 5, factor = 0) =>
3333
Array.from({ length: quantity }, (value, index) => ({
34-
id: index,
35-
name: `Item name ${index}`,
34+
id: index + factor,
35+
name: `Item name ${index + factor}`,
3636
quality: index % 3
3737
}));
3838

‎packages/react-bootstrap-table2-filter/src/context.js

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,8 @@ export default (
2727
this.onFilter = this.onFilter.bind(this);
2828
this.doFilter = this.doFilter.bind(this);
2929
this.onExternalFilter = this.onExternalFilter.bind(this);
30-
this.state = {
31-
data: props.data
32-
};
30+
this.data = props.data;
31+
this.isEmitDataChange = false;
3332
}
3433

3534
componentDidMount() {
@@ -39,13 +38,10 @@ export default (
3938
}
4039

4140
componentWillReceiveProps(nextProps) {
42-
let nextData = nextProps.data;
43-
if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.state.data)) {
44-
nextData = this.doFilter(nextProps);
41+
// let nextData = nextProps.data;
42+
if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) {
43+
this.doFilter(nextProps, undefined, this.isEmitDataChange);
4544
}
46-
this.setState({
47-
data: nextData
48-
});
4945
}
5046

5147
onFilter(column, filterType, initialize = false) {
@@ -83,9 +79,7 @@ export default (
8379
if (filter.props.onFilter) {
8480
result = filter.props.onFilter(filterVal);
8581
}
86-
87-
result = this.doFilter(this.props, result);
88-
this.setState({ data: result });
82+
this.doFilter(this.props, result);
8983
};
9084
}
9185

@@ -95,21 +89,25 @@ export default (
9589
};
9690
}
9791

98-
doFilter(props, customResult) {
92+
doFilter(props, customResult, ignoreEmitDataChange = false) {
9993
let result = customResult;
10094

10195
const { dataChangeListener, data, columns } = props;
10296
result = result || filters(data, columns, _)(this.currFilters);
103-
if (dataChangeListener) {
97+
this.data = result;
98+
if (dataChangeListener && !ignoreEmitDataChange) {
99+
this.isEmitDataChange = true;
104100
dataChangeListener.emit('filterChanged', result.length);
101+
} else {
102+
this.isEmitDataChange = false;
103+
this.forceUpdate();
105104
}
106-
return result;
107105
}
108106

109107
render() {
110108
return (
111109
<FilterContext.Provider value={ {
112-
data: this.state.data,
110+
data: this.data,
113111
onFilter: this.onFilter,
114112
onExternalFilter: this.onExternalFilter
115113
} }

‎packages/react-bootstrap-table2-filter/test/context.test.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -283,9 +283,9 @@ describe('FilterContext', () => {
283283
expect(onFilter).toHaveBeenCalledWith(filterVal);
284284
});
285285

286-
it('should set state.data correctly', () => {
286+
it('should set data correctly', () => {
287287
instance.onFilter(customColumns[1], FILTER_TYPE.TEXT)(filterVal);
288-
expect(instance.state.data).toEqual(mockReturn);
288+
expect(instance.data).toEqual(mockReturn);
289289
});
290290
});
291291

‎packages/react-bootstrap-table2-paginator/src/state-context.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,15 @@ class StateProvider extends React.Component {
5050

5151
// user should align the page when the page is not fit to the data size when remote enable
5252
if (this.isRemotePagination() || custom) {
53-
this.currPage = nextProps.pagination.options.page;
54-
this.currSizePerPage = nextProps.pagination.options.sizePerPage;
55-
this.dataSize = nextProps.pagination.options.totalSize;
53+
if (typeof nextProps.pagination.options.page !== 'undefined') {
54+
this.currPage = nextProps.pagination.options.page;
55+
}
56+
if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') {
57+
this.currSizePerPage = nextProps.pagination.options.sizePerPage;
58+
}
59+
if (typeof nextProps.pagination.options.totalSize !== 'undefined') {
60+
this.dataSize = nextProps.pagination.options.totalSize;
61+
}
5662
}
5763
}
5864

0 commit comments

Comments
 (0)