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 d99645d

Browse files
implement pagination context
1 parent f6508ff commit d99645d

File tree

7 files changed

+239
-192
lines changed

7 files changed

+239
-192
lines changed
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import wrapperFactory from './src/wrapper';
1+
import createContext from './src/context';
22

33
export default (options = {}) => ({
4-
wrapperFactory,
4+
createContext,
55
options
66
});
Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
/* eslint react/prop-types: 0 */
2+
/* eslint react/require-default-props: 0 */
3+
import React from 'react';
4+
import PropTypes from 'prop-types';
5+
6+
import Const from './const';
7+
import Pagination from './pagination';
8+
import { getByCurrPage } from './page';
9+
10+
export default (
11+
isRemotePagination,
12+
handleRemotePageChange
13+
) => {
14+
const PaginationContext = React.createContext();
15+
16+
class PaginationProvider extends React.Component {
17+
static propTypes = {
18+
data: PropTypes.array.isRequired
19+
}
20+
21+
constructor(props) {
22+
super(props);
23+
this.handleChangePage = this.handleChangePage.bind(this);
24+
this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);
25+
26+
let currPage;
27+
let currSizePerPage;
28+
const { options } = props.pagination;
29+
const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;
30+
31+
// initialize current page
32+
if (typeof options.page !== 'undefined') {
33+
currPage = options.page;
34+
} else if (typeof options.pageStartIndex !== 'undefined') {
35+
currPage = options.pageStartIndex;
36+
} else {
37+
currPage = Const.PAGE_START_INDEX;
38+
}
39+
40+
// initialize current sizePerPage
41+
if (typeof options.sizePerPage !== 'undefined') {
42+
currSizePerPage = options.sizePerPage;
43+
} else if (typeof sizePerPageList[0] === 'object') {
44+
currSizePerPage = sizePerPageList[0].value;
45+
} else {
46+
currSizePerPage = sizePerPageList[0];
47+
}
48+
49+
this.currPage = currPage;
50+
this.currSizePerPage = currSizePerPage;
51+
}
52+
53+
handleChangePage(currPage) {
54+
const { currSizePerPage } = this;
55+
const { pagination: { options } } = this.props;
56+
57+
if (options.onPageChange) {
58+
options.onPageChange(currPage, currSizePerPage);
59+
}
60+
61+
this.currPage = currPage;
62+
63+
if (isRemotePagination()) {
64+
handleRemotePageChange(currPage, currSizePerPage);
65+
return;
66+
}
67+
this.forceUpdate();
68+
}
69+
70+
handleChangeSizePerPage(currSizePerPage, currPage) {
71+
const { pagination: { options } } = this.props;
72+
73+
if (options.onSizePerPageChange) {
74+
options.onSizePerPageChange(currSizePerPage, currPage);
75+
}
76+
77+
this.currPage = currPage;
78+
this.currSizePerPage = currSizePerPage;
79+
80+
if (isRemotePagination()) {
81+
handleRemotePageChange(currPage, currSizePerPage);
82+
return;
83+
}
84+
this.forceUpdate();
85+
}
86+
87+
render() {
88+
let { data } = this.props;
89+
const { pagination: { options } } = this.props;
90+
const { currPage, currSizePerPage } = this;
91+
const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
92+
Const.With_FIRST_AND_LAST : options.withFirstAndLast;
93+
const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
94+
Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
95+
const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
96+
Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
97+
const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
98+
Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
99+
const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
100+
Const.PAGE_START_INDEX : options.pageStartIndex;
101+
102+
data = isRemotePagination() ?
103+
data :
104+
getByCurrPage(
105+
data,
106+
currPage,
107+
currSizePerPage,
108+
pageStartIndex
109+
);
110+
111+
return (
112+
<PaginationContext.Provider value={ { data } }>
113+
{ this.props.children }
114+
<Pagination
115+
key="pagination"
116+
dataSize={ options.totalSize || this.props.data.length }
117+
currPage={ currPage }
118+
currSizePerPage={ currSizePerPage }
119+
onPageChange={ this.handleChangePage }
120+
onSizePerPageChange={ this.handleChangeSizePerPage }
121+
sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
122+
paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
123+
pageStartIndex={ pageStartIndex }
124+
withFirstAndLast={ withFirstAndLast }
125+
alwaysShowAllBtns={ alwaysShowAllBtns }
126+
hideSizePerPage={ hideSizePerPage }
127+
hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
128+
showTotal={ options.showTotal }
129+
firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
130+
prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
131+
nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
132+
lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
133+
prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
134+
nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
135+
firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
136+
lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
137+
/>
138+
</PaginationContext.Provider>
139+
);
140+
}
141+
}
142+
143+
return {
144+
Provider: PaginationProvider,
145+
Consumer: PaginationContext.Consumer
146+
};
147+
};

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

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
1-
export const getByCurrPage = (store, pageStartIndex) => {
2-
const dataSize = store.data.length;
1+
export const getByCurrPage = (
2+
data,
3+
page,
4+
sizePerPage,
5+
pageStartIndex
6+
) => {
7+
const dataSize = data.length;
38
if (!dataSize) return [];
9+
410
const getNormalizedPage = () => {
511
const offset = Math.abs(1 - pageStartIndex);
6-
return store.page + offset;
12+
return page + offset;
713
};
8-
const end = (getNormalizedPage() * store.sizePerPage) - 1;
9-
const start = end - (store.sizePerPage - 1);
14+
15+
const end = (getNormalizedPage() * sizePerPage) - 1;
16+
const start = end - (sizePerPage - 1);
1017

1118
const result = [];
1219
for (let i = start; i <= end; i += 1) {
13-
result.push(store.data[i]);
20+
result.push(data[i]);
1421
if (i + 1 === dataSize) break;
1522
}
1623
return result;

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

Lines changed: 0 additions & 160 deletions
This file was deleted.

‎packages/react-bootstrap-table2/src/contexts/data-context.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ export default () => {
1616
this.setState(() => ({ data: nextProps.data }));
1717
}
1818

19-
getData = (filterProps, sortProps) => {
20-
if (sortProps) return sortProps.data;
19+
getData = (filterProps, sortProps, paginationProps) => {
20+
if (paginationProps) return paginationProps.data;
21+
else if (sortProps) return sortProps.data;
2122
else if (filterProps) return filterProps.data;
2223
return this.props.data;
2324
}

0 commit comments

Comments
(0)

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