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 bdfc4eb

Browse files
Merge pull request #158 from react-bootstrap-table/enhance/refactoring
Refarcotring Wrapper
2 parents 90bea38 + fb81595 commit bdfc4eb

File tree

21 files changed

+761
-752
lines changed

21 files changed

+761
-752
lines changed

‎packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ class EmptyTableOverlay extends React.Component {
116116
};
117117
}
118118

119-
handleTableChange = ({ page, sizePerPage }) => {
119+
handleTableChange = (type,{ page, sizePerPage }) => {
120120
const currentIndex = (page - 1) * sizePerPage;
121121
setTimeout(() => {
122122
this.setState(() => ({

‎packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,7 @@ class Container extends React.Component {
127127
};
128128
}
129129

130-
handleTableChange = ({ page, sizePerPage }) => {
130+
handleTableChange = (type,{ page, sizePerPage }) => {
131131
const currentIndex = (page - 1) * sizePerPage;
132132
setTimeout(() => {
133133
this.setState(() => ({

‎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 によって変換されたページ (->オリジナル) /