Skip to content

Commit 6203091

Browse files
AllenFangAllenFang
committed
extract useless function from pagination ro paginationHandler
1 parent 297f3e0 commit 6203091

File tree

6 files changed

+272
-336
lines changed

6 files changed

+272
-336
lines changed

‎packages/react-bootstrap-table2-paginator/src/pagination-list-adapter.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
import React, { Component } from 'react';
33

44
import pageResolver from './page-resolver';
5+
import PaginationList from './pagination-list';
56

6-
export default WrappedComponent =>
7+
const paginationListAdapter = WrappedComponent =>
78
class PaginationListAdapter extends pageResolver(Component) {
89
render() {
910
const { lastPage, totalPages, pageButtonRenderer, onPageChange } = this.props;
@@ -18,3 +19,6 @@ export default WrappedComponent =>
1819
}
1920
};
2021

22+
23+
export const PaginationListWithAdapter = paginationListAdapter(PaginationList);
24+
export default paginationListAdapter;

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

Lines changed: 30 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -4,89 +4,13 @@ import cs from 'classnames';
44
import React, { Component } from 'react';
55
import PropTypes from 'prop-types';
66
import pageResolver from './page-resolver';
7-
import SizePerPageDropDown from './size-per-page-dropdown';
8-
import PaginationList from './pagination-list';
7+
import paginationHandler from './pagination-handler';
8+
import { SizePerPageDropdownAdapter } from './size-per-page-dropdown-adapter';
9+
import { PaginationListWithAdapter } from './pagination-list-adapter';
910
import PaginationTotal from './pagination-total';
1011
import Const from './const';
1112

1213
class Pagination extends pageResolver(Component) {
13-
constructor(props) {
14-
super(props);
15-
this.closeDropDown = this.closeDropDown.bind(this);
16-
this.toggleDropDown = this.toggleDropDown.bind(this);
17-
this.handleChangePage = this.handleChangePage.bind(this);
18-
this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
19-
this.state = this.initialState();
20-
}
21-
22-
componentWillReceiveProps(nextProps) {
23-
const { dataSize, currSizePerPage } = nextProps;
24-
if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) {
25-
const totalPages = this.calculateTotalPage(currSizePerPage, dataSize);
26-
const lastPage = this.calculateLastPage(totalPages);
27-
this.setState({ totalPages, lastPage });
28-
}
29-
}
30-
31-
toggleDropDown() {
32-
const dropdownOpen = !this.state.dropdownOpen;
33-
this.setState(() => {
34-
return { dropdownOpen };
35-
});
36-
}
37-
38-
closeDropDown() {
39-
this.setState(() => {
40-
return { dropdownOpen: false };
41-
});
42-
}
43-
44-
handleChangeSizePerPage(sizePerPage) {
45-
const { currSizePerPage, onSizePerPageChange } = this.props;
46-
const selectedSize = typeof sizePerPage === 'string' ? parseInt(sizePerPage, 10) : sizePerPage;
47-
let { currPage } = this.props;
48-
if (selectedSize !== currSizePerPage) {
49-
const newTotalPages = this.calculateTotalPage(selectedSize);
50-
const newLastPage = this.calculateLastPage(newTotalPages);
51-
if (currPage > newLastPage) currPage = newLastPage;
52-
onSizePerPageChange(selectedSize, currPage);
53-
}
54-
this.closeDropDown();
55-
}
56-
57-
handleChangePage(newPage) {
58-
let page;
59-
const {
60-
currPage,
61-
pageStartIndex,
62-
prePageText,
63-
nextPageText,
64-
lastPageText,
65-
firstPageText,
66-
onPageChange
67-
// keepSizePerPageState
68-
} = this.props;
69-
const { lastPage } = this.state;
70-
71-
if (newPage === prePageText) {
72-
page = this.backToPrevPage();
73-
} else if (newPage === nextPageText) {
74-
page = (currPage + 1) > lastPage ? lastPage : currPage + 1;
75-
} else if (newPage === lastPageText) {
76-
page = lastPage;
77-
} else if (newPage === firstPageText) {
78-
page = pageStartIndex;
79-
} else {
80-
page = parseInt(newPage, 10);
81-
}
82-
83-
// if (keepSizePerPageState) { this.closeDropDown(); }
84-
85-
if (page !== currPage) {
86-
onPageChange(page);
87-
}
88-
}
89-
9014
defaultTotal = (from, to, size) => (
9115
<PaginationTotal
9216
from={ from }
@@ -103,49 +27,26 @@ class Pagination extends pageResolver(Component) {
10327
return this.defaultTotal(from, to, size);
10428
};
10529

106-
renderSizePerPageDropDown() {
107-
const {
108-
sizePerPageList,
109-
currSizePerPage,
110-
hideSizePerPage,
111-
sizePerPageRenderer,
112-
sizePerPageOptionRenderer
113-
} = this.props;
114-
const { dropdownOpen: open } = this.state;
115-
116-
if (sizePerPageList.length > 1 && !hideSizePerPage) {
117-
if (sizePerPageRenderer) {
118-
return sizePerPageRenderer({
119-
options: this.calculateSizePerPageStatus(),
120-
currSizePerPage: `${currSizePerPage}`,
121-
onSizePerPageChange: this.handleChangeSizePerPage
122-
});
123-
}
124-
return (
125-
<SizePerPageDropDown
126-
currSizePerPage={ `${currSizePerPage}` }
127-
options={ this.calculateSizePerPageStatus() }
128-
optionRenderer={ sizePerPageOptionRenderer }
129-
onSizePerPageChange={ this.handleChangeSizePerPage }
130-
onClick={ this.toggleDropDown }
131-
onBlur={ this.closeDropDown }
132-
open={ open }
133-
/>
134-
);
135-
}
136-
return null;
137-
}
138-
13930
render() {
140-
const { totalPages, lastPage } = this.state;
14131
const {
14232
showTotal,
14333
dataSize,
14434
pageListRenderer,
14535
pageButtonRenderer,
14636
paginationTotalRenderer,
147-
hidePageListOnlyOnePage
37+
hidePageListOnlyOnePage,
38+
totalPages,
39+
lastPage,
40+
onPageChange,
41+
sizePerPageList,
42+
currSizePerPage,
43+
hideSizePerPage,
44+
sizePerPageRenderer,
45+
sizePerPageOptionRenderer,
46+
onSizePerPageChange,
47+
...rest
14848
} = this.props;
49+
14950
const pages = this.calculatePageStatus(this.calculatePages(totalPages, lastPage), lastPage);
15051
const [from, to] = this.calculateFromTo();
15152
const pageListClass = cs(
@@ -156,7 +57,14 @@ class Pagination extends pageResolver(Component) {
15657
return (
15758
<div className="row react-bootstrap-table-pagination">
15859
<div className="col-md-6 col-xs-6 col-sm-6 col-lg-6">
159-
{ this.renderSizePerPageDropDown() }
60+
<SizePerPageDropdownAdapter
61+
sizePerPageList={ sizePerPageList }
62+
currSizePerPage={ currSizePerPage }
63+
hideSizePerPage={ hideSizePerPage }
64+
sizePerPageRenderer={ sizePerPageRenderer }
65+
sizePerPageOptionRenderer={ sizePerPageOptionRenderer }
66+
onSizePerPageChange={ onSizePerPageChange }
67+
/>
16068
{
16169
showTotal ?
16270
this.setTotal(
@@ -170,13 +78,15 @@ class Pagination extends pageResolver(Component) {
17078
{
17179
pageListRenderer ? pageListRenderer({
17280
pages,
173-
onPageChange: this.handleChangePage
81+
onPageChange
17482
}) : (
17583
<div className={ pageListClass }>
176-
<PaginationList
177-
pages={ pages }
84+
<PaginationListWithAdapter
85+
{ ...rest }
86+
lastPage={ lastPage }
87+
totalPages={ totalPages }
17888
pageButtonRenderer={ pageButtonRenderer }
179-
onPageChange={ this.handleChangePage }
89+
onPageChange={ onPageChange }
18090
/>
18191
</div>
18292
)
@@ -239,4 +149,4 @@ Pagination.defaultProps = {
239149
hidePageListOnlyOnePage: Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE
240150
};
241151

242-
export default Pagination;
152+
export default paginationHandler(Pagination);

‎packages/react-bootstrap-table2-paginator/src/size-per-page-dropdown-adapter.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
import React, { Component } from 'react';
33

44
import pageResolver from './page-resolver';
5+
import SizePerPageDropDown from './size-per-page-dropdown';
56

6-
export default WrappedComponent =>
7+
const sizePerPageDropdownAdapter = WrappedComponent =>
78
class SizePerPageDropdownAdapter extends pageResolver(Component) {
89
constructor(props) {
910
super(props);
@@ -61,3 +62,6 @@ export default WrappedComponent =>
6162
}
6263
};
6364

65+
66+
export const SizePerPageDropdownAdapter = sizePerPageDropdownAdapter(SizePerPageDropDown);
67+
export default sizePerPageDropdownAdapter;

‎packages/react-bootstrap-table2-paginator/test/data-context.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ describe('PaginationDataContext', () => {
124124
expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
125125
expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
126126
expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
127-
expect(pagination.prop('paginationTotalRenderer')).toBeNull();
127+
expect(pagination.prop('paginationTotalRenderer')).toBeUndefined();
128128
});
129129
});
130130

0 commit comments

Comments
 (0)