Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add pagerCount props #162

Open
wants to merge 15 commits into
base: master
Choose a base branch
from
Open

Add pagerCount props #162

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9cfc49d
Add bonudary jumper hide api
liuchuzhang Feb 22, 2019
b68fb12
Add pagerCount props
liuchuzhang Feb 26, 2019
61b0dc8
Update docs
liuchuzhang Feb 26, 2019
26baf18
Fix
liuchuzhang Feb 26, 2019
5b5dc27
Updates
liuchuzhang Feb 26, 2019
e958ba1
reset example
liuchuzhang Feb 27, 2019
bc83767
Add `jump-first` and `jump-last` renders
liuchuzhang Feb 28, 2019
87ff9b0
Fix
liuchuzhang Feb 28, 2019
22560e3
Update docs
liuchuzhang Feb 28, 2019
ede47ce
Updates
liuchuzhang Mar 1, 2019
b708827
Updates
liuchuzhang Mar 1, 2019
01f707f
Fix
liuchuzhang Mar 1, 2019
79483b1
Add test case
liuchuzhang Mar 7, 2019
f76eb56
Update
liuchuzhang Mar 7, 2019
9a55e81
Fix
liuchuzhang Mar 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ React.render(<Pagination />, container);
| nextIcon | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| jumpPrevIcon | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |
| jumpNextIcon | specifict the default previous icon | ReactNode \| (props: PaginationProps) => ReactNode | |

| hideBoundary | hide boundary jumper | Bool | false |
| pagerCount | show number of pagers | Number | 5 |

## License

Expand Down
2 changes: 1 addition & 1 deletion examples/default.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ class App extends React.Component {
});
}
render() {
return <Pagination onChange={this.onChange} current={this.state.current} total={25} />;
return <Pagination onChange={this.onChange} current={this.state.current} total={400} />;
liuchuzhang marked this conversation as resolved.
Show resolved Hide resolved
}
}

Expand Down
30 changes: 20 additions & 10 deletions src/Pagination.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@ class Pagination extends React.Component {
nextIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
jumpPrevIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
jumpNextIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
hideBoundary: PropTypes.bool,
pagerCount: PropTypes.number,
};

static defaultProps = {
Expand All @@ -74,6 +76,8 @@ class Pagination extends React.Component {
locale: LOCALE,
style: {},
itemRender: defaultItemRender,
hideBoundary: false,
pagerCount: 5,
};

constructor(props) {
Expand Down Expand Up @@ -143,13 +147,13 @@ class Pagination extends React.Component {
}

getJumpPrevPage = () => {
return Math.max(1, this.state.current - (this.props.showLessItems ? 3 : 5));
return Math.max(1, this.state.current - (this.props.showLessItems ? 3 : this.props.pagerCount));
liuchuzhang marked this conversation as resolved.
Show resolved Hide resolved
}

getJumpNextPage = () => {
return Math.min(
calculatePage(undefined, this.state, this.props),
this.state.current + (this.props.showLessItems ? 3 : 5)
this.state.current + (this.props.showLessItems ? 3 : this.props.pagerCount)
);
}

Expand Down Expand Up @@ -334,8 +338,11 @@ class Pagination extends React.Component {
let lastPager = null;
let gotoButton = null;

const { pagerCount, hideBoundary } = props;
const pageBoundaryCount = hideBoundary ? 0 : 1;
const goButton = (props.showQuickJumper && props.showQuickJumper.goButton);
const pageBufferSize = props.showLessItems ? 1 : 2;
const halfPagerCount = Math.max(1, Math.floor(pagerCount / 2));
const pageBufferSize = props.showLessItems ? 1 : halfPagerCount;
liuchuzhang marked this conversation as resolved.
Show resolved Hide resolved
const { current, pageSize } = this.state;

const prevPage = current - 1 > 0 ? current - 1 : 0;
Expand Down Expand Up @@ -425,7 +432,7 @@ class Pagination extends React.Component {
);
}

if (allPages <= 5 + pageBufferSize * 2) {
if (allPages <= pagerCount + pageBufferSize * 2) {
const pagerProps = {
locale,
rootPrefixCls: prefixCls,
Expand Down Expand Up @@ -532,11 +539,11 @@ class Pagination extends React.Component {
let right = Math.min(current + pageBufferSize, allPages);

if (current - 1 <= pageBufferSize) {
right = 1 + pageBufferSize * 2;
right = 1 + pageBufferSize * 2 + pageBoundaryCount;
}

if (allPages - current <= pageBufferSize) {
left = allPages - pageBufferSize * 2;
left = allPages - pageBufferSize * 2 - pageBoundaryCount;
}

for (let i = left; i <= right; i++) {
Expand All @@ -556,23 +563,26 @@ class Pagination extends React.Component {
);
}

if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
if (
current - pageBoundaryCount > pageBufferSize &&
current !== pageBoundaryCount + pageBufferSize + 1
) {
pagerList[0] = React.cloneElement(pagerList[0], {
className: `${prefixCls}-item-after-jump-prev`,
});
pagerList.unshift(jumpPrev);
}
if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
if (allPages - current > pageBufferSize && current !== allPages - pageBufferSize - 1) {
pagerList[pagerList.length - 1] = React.cloneElement(pagerList[pagerList.length - 1], {
className: `${prefixCls}-item-before-jump-next`,
});
pagerList.push(jumpNext);
}

if (left !== 1) {
if (left !== 1 && !hideBoundary) {
pagerList.unshift(firstPager);
}
if (right !== allPages) {
if (right !== allPages && !hideBoundary) {
pagerList.push(lastPager);
}
}
Expand Down