Skip to content

Commit da907d4

Browse files
AllenFangAllenFang
authored
fix liftcycle issue (#149)
1 parent 4d04b75 commit da907d4

File tree

5 files changed

+172
-133
lines changed

5 files changed

+172
-133
lines changed

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import Pagination from './pagination';
2-
import wrapper from './wrapper';
1+
import PaginationWrapper from './wrapper';
32

43
export default (options = {}) => ({
5-
Pagination,
6-
wrapper,
4+
PaginationWrapper,
75
options
86
});

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

Lines changed: 138 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -5,135 +5,152 @@ import React, { Component } from 'react';
55
import PropTypes from 'prop-types';
66

77
import Const from './const';
8+
import Pagination from './pagination';
89
import { getByCurrPage } from './page';
910

10-
const wrapperFactory = baseElement =>
11-
class PaginationWrapper extends Component {
12-
static propTypes = {
13-
store: PropTypes.object.isRequired
11+
class PaginationWrapper extends Component {
12+
static propTypes = {
13+
store: PropTypes.object.isRequired,
14+
baseElement: PropTypes.func.isRequired
15+
}
16+
17+
constructor(props) {
18+
super(props);
19+
this.handleChangePage = this.handleChangePage.bind(this);
20+
this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
21+
22+
let currPage;
23+
let currSizePerPage;
24+
const { options } = props.pagination;
25+
const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
26+
27+
// initialize current page
28+
if (typeof options.page !== 'undefined') {
29+
currPage = options.page;
30+
} else if (typeof options.pageStartIndex !== 'undefined') {
31+
currPage = options.pageStartIndex;
32+
} else {
33+
currPage = Const.PAGE_START_INDEX;
1434
}
1535

16-
constructor(props) {
17-
super(props);
18-
this.handleChangePage = this.handleChangePage.bind(this);
19-
this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
20-
21-
let currPage;
22-
let currSizePerPage;
23-
const options = props.pagination.options || {};
24-
const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
25-
26-
// initialize current page
27-
if (typeof options.page !== 'undefined') {
28-
currPage = options.page;
29-
} else if (typeof options.pageStartIndex !== 'undefined') {
30-
currPage = options.pageStartIndex;
31-
} else {
32-
currPage = Const.PAGE_START_INDEX;
33-
}
34-
35-
// initialize current sizePerPage
36-
if (typeof options.sizePerPage !== 'undefined') {
37-
currSizePerPage = options.sizePerPage;
38-
} else if (typeof sizePerPageList[0] === 'object') {
39-
currSizePerPage = sizePerPageList[0].value;
40-
} else {
41-
currSizePerPage = sizePerPageList[0];
42-
}
43-
44-
this.state = { currPage, currSizePerPage };
36+
// initialize current sizePerPage
37+
if (typeof options.sizePerPage !== 'undefined') {
38+
currSizePerPage = options.sizePerPage;
39+
} else if (typeof sizePerPageList[0] === 'object') {
40+
currSizePerPage = sizePerPageList[0].value;
41+
} else {
42+
currSizePerPage = sizePerPageList[0];
4543
}
4644

47-
isRemote() {
48-
const { remote } = this.props;
49-
return remote === true || (typeof remote === 'object' && remote.pagination);
50-
}
45+
this.state = { currPage, currSizePerPage };
46+
}
5147

52-
handleChangePage(currPage) {
53-
const { currSizePerPage } = this.state;
54-
const { pagination: { options }, onRemotePageChange } = this.props;
55-
if (options.onPageChange) {
56-
options.onPageChange(currPage, currSizePerPage);
57-
}
58-
if (this.isRemote()) {
59-
onRemotePageChange(currPage, currSizePerPage);
60-
return;
61-
}
62-
this.setState(() => {
63-
return {
64-
currPage
65-
};
66-
});
48+
componentWillReceiveProps(nextProps) {
49+
let needNewState = false;
50+
let { currPage, currSizePerPage } = this.state;
51+
const { page, sizePerPage } = nextProps.pagination.options;
52+
if (typeof page !== 'undefined') {
53+
currPage = page;
54+
needNewState = true;
6755
}
68-
69-
handleChangeSizePerPage(currSizePerPage, currPage) {
70-
const { pagination: { options }, onRemotePageChange } = this.props;
71-
if (options.onSizePerPageChange) {
72-
options.onSizePerPageChange(currSizePerPage, currPage);
73-
}
74-
if (this.isRemote()) {
75-
onRemotePageChange(currPage, currSizePerPage);
76-
return;
77-
}
78-
this.setState(() => {
79-
return {
80-
currPage,
81-
currSizePerPage
82-
};
83-
});
56+
if (typeof sizePerPage !== 'undefined') {
57+
currSizePerPage = sizePerPage;
58+
needNewState = true;
8459
}
8560

86-
render() {
87-
const { pagination: { Pagination, options }, store } = this.props;
88-
const { currPage, currSizePerPage } = this.state;
89-
const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
90-
Const.With_FIRST_AND_LAST : options.withFirstAndLast;
91-
const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
92-
Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
93-
const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
94-
Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
95-
const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
96-
Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
97-
const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
98-
Const.PAGE_START_INDEX : options.pageStartIndex;
99-
100-
const data = this.isRemote() ?
101-
this.props.data :
102-
getByCurrPage(store)(currPage, currSizePerPage, pageStartIndex);
103-
104-
const base = baseElement({
105-
...this.props,
106-
key: 'table',
107-
data
108-
});
109-
110-
return [
111-
base,
112-
<Pagination
113-
key="pagination"
114-
dataSize={ options.totalSize || store.data.length }
115-
currPage={ currPage }
116-
currSizePerPage={ currSizePerPage }
117-
onPageChange={ this.handleChangePage }
118-
onSizePerPageChange={ this.handleChangeSizePerPage }
119-
sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
120-
paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
121-
pageStartIndex={ pageStartIndex }
122-
withFirstAndLast={ withFirstAndLast }
123-
alwaysShowAllBtns={ alwaysShowAllBtns }
124-
hideSizePerPage={ hideSizePerPage }
125-
hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
126-
firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
127-
prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
128-
nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
129-
lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
130-
prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
131-
nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
132-
firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
133-
lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
134-
/>
135-
];
136-
}
137-
};
61+
if (needNewState) this.setState(() => ({ currPage, currSizePerPage }));
62+
}
63+
64+
isRemote() {
65+
const { remote } = this.props;
66+
return remote === true || (typeof remote === 'object' && remote.pagination);
67+
}
13868

139-
export default wrapperFactory;
69+
handleChangePage(currPage) {
70+
const { currSizePerPage } = this.state;
71+
const { pagination: { options }, onRemotePageChange } = this.props;
72+
if (options.onPageChange) {
73+
options.onPageChange(currPage, currSizePerPage);
74+
}
75+
if (this.isRemote()) {
76+
onRemotePageChange(currPage, currSizePerPage);
77+
return;
78+
}
79+
this.setState(() => {
80+
return {
81+
currPage
82+
};
83+
});
84+
}
85+
86+
handleChangeSizePerPage(currSizePerPage, currPage) {
87+
const { pagination: { options }, onRemotePageChange } = this.props;
88+
if (options.onSizePerPageChange) {
89+
options.onSizePerPageChange(currSizePerPage, currPage);
90+
}
91+
if (this.isRemote()) {
92+
onRemotePageChange(currPage, currSizePerPage);
93+
return;
94+
}
95+
this.setState(() => {
96+
return {
97+
currPage,
98+
currSizePerPage
99+
};
100+
});
101+
}
102+
103+
render() {
104+
const { pagination: { options }, store, baseElement } = this.props;
105+
const { currPage, currSizePerPage } = this.state;
106+
const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
107+
Const.With_FIRST_AND_LAST : options.withFirstAndLast;
108+
const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
109+
Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
110+
const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
111+
Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
112+
const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
113+
Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
114+
const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
115+
Const.PAGE_START_INDEX : options.pageStartIndex;
116+
117+
const data = this.isRemote() ?
118+
this.props.data :
119+
getByCurrPage(store)(currPage, currSizePerPage, pageStartIndex);
120+
121+
const base = baseElement({
122+
...this.props,
123+
key: 'table',
124+
data
125+
});
126+
127+
return [
128+
base,
129+
<Pagination
130+
key="pagination"
131+
dataSize={ options.totalSize || store.data.length }
132+
currPage={ currPage }
133+
currSizePerPage={ currSizePerPage }
134+
onPageChange={ this.handleChangePage }
135+
onSizePerPageChange={ this.handleChangeSizePerPage }
136+
sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
137+
paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
138+
pageStartIndex={ pageStartIndex }
139+
withFirstAndLast={ withFirstAndLast }
140+
alwaysShowAllBtns={ alwaysShowAllBtns }
141+
hideSizePerPage={ hideSizePerPage }
142+
hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
143+
firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
144+
prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
145+
nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
146+
lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
147+
prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
148+
nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
149+
firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
150+
lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
151+
/>
152+
];
153+
}
154+
}
155+
156+
export default PaginationWrapper;

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

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
66
import BootstrapTable from 'react-bootstrap-table2/src/bootstrap-table';
77
import Store from 'react-bootstrap-table2/src/store';
88
import paginator from '../src';
9-
import wrapperFactory from '../src/wrapper';
9+
import PaginationWrapper from '../src/wrapper';
1010
import Pagination from '../src/pagination';
1111
import Const from '../src/const';
1212

@@ -19,7 +19,6 @@ for (let i = 0; i < 100; i += 1) {
1919
}
2020

2121
describe('Wrapper', () => {
22-
let PaginationWrapper;
2322
let wrapper;
2423
let instance;
2524

@@ -44,8 +43,7 @@ describe('Wrapper', () => {
4443
const pureTable = props => (<BootstrapTable { ...props } />);
4544

4645
const createPaginationWrapper = (props, renderFragment = true) => {
47-
PaginationWrapper = wrapperFactory(pureTable);
48-
wrapper = shallow(<PaginationWrapper { ...props } />);
46+
wrapper = shallow(<PaginationWrapper { ...props } baseElement={ pureTable } />);
4947
instance = wrapper.instance();
5048
if (renderFragment) {
5149
const fragment = instance.render();
@@ -100,6 +98,32 @@ describe('Wrapper', () => {
10098
expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
10199
expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
102100
});
101+
102+
describe('componentWillReceiveProps', () => {
103+
it('should setting currPage state correclt by options.page', () => {
104+
props.pagination.options.page = 2;
105+
instance.componentWillReceiveProps(props);
106+
expect(instance.state.currPage).toEqual(props.pagination.options.page);
107+
});
108+
109+
it('should not setting currPage state if options.page not existing', () => {
110+
const { currPage } = instance.state;
111+
instance.componentWillReceiveProps(props);
112+
expect(instance.state.currPage).toBe(currPage);
113+
});
114+
115+
it('should setting currSizePerPage state correclt by options.sizePerPage', () => {
116+
props.pagination.options.sizePerPage = 20;
117+
instance.componentWillReceiveProps(props);
118+
expect(instance.state.currSizePerPage).toEqual(props.pagination.options.sizePerPage);
119+
});
120+
121+
it('should not setting currSizePerPage state if options.sizePerPage not existing', () => {
122+
const { currSizePerPage } = instance.state;
123+
instance.componentWillReceiveProps(props);
124+
expect(instance.state.currSizePerPage).toBe(currSizePerPage);
125+
});
126+
});
103127
});
104128

105129
describe('when options.page is defined', () => {

‎packages/react-bootstrap-table2/src/table-factory.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,8 @@ export const pureTable = props =>
2121

2222
export const wrapWithPagination = (props) => {
2323
if (props.pagination) {
24-
const { wrapper } = props.pagination;
25-
const PaginationBase = wrapper(pureTable);
26-
return React.createElement(PaginationBase, { ...props });
24+
const { PaginationWrapper } = props.pagination;
25+
return React.createElement(PaginationWrapper, { ...props, baseElement: pureTable });
2726
}
2827
return pureTable(props);
2928
};

‎packages/react-bootstrap-table2/test/container.test.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ describe('withDataStore', () => {
156156
describe('when pagination prop is defined', () => {
157157
const PaginationWrapper = () => <div>test</div>;
158158
const pagination = {
159-
wrapper: jest.fn().mockReturnValue(PaginationWrapper)
159+
PaginationWrapper
160160
};
161161

162162
beforeEach(() => {
@@ -177,6 +177,7 @@ describe('withDataStore', () => {
177177
it('should injecting correct props to Pagination wrapper', () => {
178178
const component = wrapper.find(PaginationWrapper);
179179
expect(component.props().onRemotePageChange).toBeDefined();
180+
expect(component.props().baseElement).toBeDefined();
180181
});
181182
});
182183

0 commit comments

Comments
 (0)