Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit fb81595

Browse files
refactoring wrapper mechanism
1 parent 3bfeec7 commit fb81595

File tree

18 files changed

+725
-729
lines changed

18 files changed

+725
-729
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import TextFilter from './components/text';
2-
import FilterWrapper from './wrapper';
2+
import wrapperFactory from './wrapper';
33
import * as Comparison from './comparison';
44

55
export default (options = {}) => ({
6-
FilterWrapper,
6+
wrapperFactory,
77
options
88
});
99

Lines changed: 53 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,66 @@
1-
/* eslint react/prop-types: 0 */
2-
import { Component } from 'react';
1+
import React, { Component } from 'react';
32
import PropTypes from 'prop-types';
43
import { filters } from './filter';
54
import { LIKE } from './comparison';
65

7-
export default class FilterWrapper extends Component {
8-
static propTypes = {
9-
store: PropTypes.object.isRequired,
10-
columns: PropTypes.array.isRequired,
11-
baseElement: PropTypes.func.isRequired,
12-
onRemoteFilterChange: PropTypes.func.isRequired,
13-
// refactoring later
14-
_: PropTypes.object.isRequired
15-
}
16-
17-
constructor(props) {
18-
super(props);
19-
this.state = { currFilters: {}, isDataChanged: false };
20-
this.onFilter = this.onFilter.bind(this);
21-
}
22-
23-
componentWillReceiveProps(nextProps) {
24-
// consider to use lodash.isEqual
25-
if (JSON.stringify(this.state.currFilters) !== JSON.stringify(nextProps.store.filters)) {
26-
this.setState(() => ({ isDataChanged: true, currFilters: nextProps.store.filters }));
27-
} else {
28-
this.setState(() => ({ isDataChanged: false }));
6+
export default (Base, {
7+
_,
8+
remoteResolver
9+
}) =>
10+
class FilterWrapper extends remoteResolver(Component) {
11+
static propTypes = {
12+
store: PropTypes.object.isRequired,
13+
columns: PropTypes.array.isRequired
2914
}
30-
}
31-
32-
onFilter(column, filterVal, filterType) {
33-
const { store, columns, _, onRemoteFilterChange } = this.props;
34-
const currFilters = Object.assign({}, this.state.currFilters);
35-
const { dataField, filter } = column;
3615

37-
if (!_.isDefined(filterVal) || filterVal === '') {
38-
delete currFilters[dataField];
39-
} else {
40-
const { comparator = LIKE } = filter.props;
41-
currFilters[dataField] = { filterVal, filterType, comparator };
16+
constructor(props) {
17+
super(props);
18+
this.state = { currFilters: {}, isDataChanged: false };
19+
this.onFilter = this.onFilter.bind(this);
4220
}
43-
store.filters = currFilters;
4421

45-
if (this.isRemote() || this.isPaginationRemote()) {
46-
onRemoteFilterChange(this.isPaginationRemote());
47-
// when remote filtering is enable, dont set currFilters state
48-
// in the componentWillReceiveProps, it's the key point that we can know the filter is changed
49-
return;
22+
componentWillReceiveProps(nextProps) {
23+
// consider to use lodash.isEqual
24+
if (JSON.stringify(this.state.currFilters) !== JSON.stringify(nextProps.store.filters)) {
25+
this.setState(() => ({ isDataChanged: true, currFilters: nextProps.store.filters }));
26+
} else {
27+
this.setState(() => ({ isDataChanged: false }));
28+
}
5029
}
5130

52-
store.filteredData = filters(store, columns, _)(currFilters);
53-
this.setState(() => ({ currFilters, isDataChanged: true }));
54-
}
31+
onFilter(column, filterVal, filterType) {
32+
const { store, columns } = this.props;
33+
const currFilters = Object.assign({}, this.state.currFilters);
34+
const { dataField, filter } = column;
5535

56-
// refactoring later
57-
isRemote() {
58-
const { remote } = this.props;
59-
return remote === true || (typeof remote === 'object' && remote.filter);
60-
}
36+
if (!_.isDefined(filterVal) || filterVal === '') {
37+
delete currFilters[dataField];
38+
} else {
39+
const { comparator = LIKE } = filter.props;
40+
currFilters[dataField] = { filterVal, filterType, comparator };
41+
}
42+
store.filters = currFilters;
6143

62-
// refactoring later
63-
isPaginationRemote() {
64-
const { remote } = this.props;
65-
return remote === true || (typeof remote === 'object' && remote.pagination);
66-
}
44+
if (this.isRemoteFiltering() || this.isRemotePagination()) {
45+
this.handleRemoteFilterChange();
46+
// when remote filtering is enable, dont set currFilters state
47+
// in the componentWillReceiveProps,
48+
// it's the key point that we can know the filter is changed
49+
return;
50+
}
6751

68-
render() {
69-
return this.props.baseElement({
70-
...this.props,
71-
key: 'table',
72-
onFilter: this.onFilter,
73-
isDataChanged: this.state.isDataChanged
74-
});
75-
}
76-
}
52+
store.filteredData = filters(store, columns, _)(currFilters);
53+
this.setState(() => ({ currFilters, isDataChanged: true }));
54+
}
55+
56+
render() {
57+
return (
58+
<Base
59+
{ ...this.props }
60+
data={ this.props.store.data }
61+
onFilter={ this.onFilter }
62+
isDataChanged={ this.state.isDataChanged }
63+
/>
64+
);
65+
}
66+
};

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import sinon from 'sinon';
33
import { shallow } from 'enzyme';
44

55
import _ from 'react-bootstrap-table2/src/utils';
6+
import remoteResolver from 'react-bootstrap-table2/src/props-resolver/remote-resolver';
67
import BootstrapTable from 'react-bootstrap-table2/src/bootstrap-table';
78
import Store from 'react-bootstrap-table2/src/store';
89
import filter, { textFilter } from '../src';
9-
import FilterWrapper from '../src/wrapper';
10+
import wrapperFactory from '../src/wrapper';
1011
import { FILTER_TYPE } from '../src/const';
1112

1213
const data = [];
@@ -21,10 +22,10 @@ for (let i = 0; i < 20; i += 1) {
2122
describe('Wrapper', () => {
2223
let wrapper;
2324
let instance;
24-
const onRemoteFilterChangeCB = sinon.stub();
25+
const onTableChangeCB = sinon.stub();
2526

2627
afterEach(() => {
27-
onRemoteFilterChangeCB.reset();
28+
onTableChangeCB.reset();
2829
});
2930

3031
const createTableProps = () => {
@@ -46,16 +47,19 @@ describe('Wrapper', () => {
4647
filter: filter(),
4748
_,
4849
store: new Store('id'),
49-
onRemoteFilterChange: onRemoteFilterChangeCB
50+
onTableChange: onTableChangeCB
5051
};
5152
tableProps.store.data = data;
5253
return tableProps;
5354
};
5455

55-
const pureTable = props => (<BootstrapTable { ...props } />);
56+
const FilterWrapper = wrapperFactory(BootstrapTable, {
57+
_,
58+
remoteResolver
59+
});
5660

5761
const createFilterWrapper = (props, renderFragment = true) => {
58-
wrapper = shallow(<FilterWrapper { ...props } baseElement={pureTable}/>);
62+
wrapper = shallow(<FilterWrapper { ...props } />);
5963
instance = wrapper.instance();
6064
if (renderFragment) {
6165
const fragment = instance.render();
@@ -177,7 +181,7 @@ describe('Wrapper', () => {
177181
});
178182

179183
it('should calling props.onRemoteFilterChange correctly', () => {
180-
expect(onRemoteFilterChangeCB.calledOnce).toBeTruthy();
184+
expect(onTableChangeCB.calledOnce).toBeTruthy();
181185
});
182186
});
183187

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import PaginationWrapper from './wrapper';
1+
import wrapperFactory from './wrapper';
22

33
export default (options = {}) => ({
4-
PaginationWrapper,
4+
wrapperFactory,
55
options
66
});

‎packages/react-bootstrap-table2-paginator/src/page.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
export const getByCurrPage = store=>(page,sizePerPage, pageStartIndex) => {
1+
export const getByCurrPage = (store, pageStartIndex) => {
22
const dataSize = store.data.length;
33
if (!dataSize) return [];
44
const getNormalizedPage = () => {
55
const offset = Math.abs(1 - pageStartIndex);
6-
return page + offset;
6+
return store.page + offset;
77
};
8-
const end = (getNormalizedPage() * sizePerPage) - 1;
9-
const start = end - (sizePerPage - 1);
8+
const end = (getNormalizedPage() * store.sizePerPage) - 1;
9+
const start = end - (store.sizePerPage - 1);
1010

1111
const result = [];
1212
for (let i = start; i <= end; i += 1) {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /