From 9cfc49daf41888034ea956d313c12dbee478d389 Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Fri, 22 Feb 2019 14:39:15 +0800 Subject: [PATCH 01/15] Add bonudary jumper hide api --- README.md | 2 +- src/Pagination.jsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 594b3da3..2fef3829 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ React.render(, 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 | ## License diff --git a/src/Pagination.jsx b/src/Pagination.jsx index 35e7e4eb..0b67682f 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -53,6 +53,7 @@ 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, }; static defaultProps = { @@ -74,6 +75,7 @@ class Pagination extends React.Component { locale: LOCALE, style: {}, itemRender: defaultItemRender, + hideBoundary: false, }; constructor(props) { @@ -569,10 +571,10 @@ class Pagination extends React.Component { pagerList.push(jumpNext); } - if (left !== 1) { + if (left !== 1 && !props.hideBoundary) { pagerList.unshift(firstPager); } - if (right !== allPages) { + if (right !== allPages && !props.hideBoundary) { pagerList.push(lastPager); } } From b68fb12fa40c3b8cd2e958c5b744cdf2e4bf0100 Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Tue, 26 Feb 2019 11:13:50 +0800 Subject: [PATCH 02/15] Add pagerCount props --- examples/default.js | 2 +- src/Pagination.jsx | 27 ++++++++++++++++----------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/examples/default.js b/examples/default.js index 88e42be4..f73afae8 100644 --- a/examples/default.js +++ b/examples/default.js @@ -15,7 +15,7 @@ class App extends React.Component { }); } render() { - return ; + return ; } } diff --git a/src/Pagination.jsx b/src/Pagination.jsx index 0b67682f..82eada2b 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -54,6 +54,7 @@ class Pagination extends React.Component { jumpPrevIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), jumpNextIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]), hideBoundary: PropTypes.bool, + pagerCount: PropTypes.number, }; static defaultProps = { @@ -76,6 +77,7 @@ class Pagination extends React.Component { style: {}, itemRender: defaultItemRender, hideBoundary: false, + pagerCount: 5, }; constructor(props) { @@ -145,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)); } 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) ); } @@ -336,8 +338,10 @@ class Pagination extends React.Component { let lastPager = null; let gotoButton = null; + const { pagerCount, hideBoundary } = props; 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; const { current, pageSize } = this.state; const prevPage = current - 1 > 0 ? current - 1 : 0; @@ -427,7 +431,7 @@ class Pagination extends React.Component { ); } - if (allPages <= 5 + pageBufferSize * 2) { + if (allPages <= pagerCount + pageBufferSize * 2) { const pagerProps = { locale, rootPrefixCls: prefixCls, @@ -532,13 +536,14 @@ class Pagination extends React.Component { let left = Math.max(1, current - pageBufferSize); let right = Math.min(current + pageBufferSize, allPages); - + const pageBoundaryCount = hideBoundary ? 0 : 1; + 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++) { @@ -558,23 +563,23 @@ 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 && !props.hideBoundary) { + if (left !== 1 && !hideBoundary) { pagerList.unshift(firstPager); } - if (right !== allPages && !props.hideBoundary) { + if (right !== allPages && !hideBoundary) { pagerList.push(lastPager); } } From 61b0dc813f7a0bd9bdd51941033a97d6b1e85a2b Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Tue, 26 Feb 2019 11:34:30 +0800 Subject: [PATCH 03/15] Update docs --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 2fef3829..a67e8b39 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,7 @@ React.render(, container); | 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 From 26baf18fbbf503abc256ce86f603e2667a1b3f1b Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Tue, 26 Feb 2019 11:39:04 +0800 Subject: [PATCH 04/15] Fix --- src/Pagination.jsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/Pagination.jsx b/src/Pagination.jsx index 82eada2b..7aac7aaf 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -338,9 +338,10 @@ class Pagination extends React.Component { let lastPager = null; let gotoButton = null; + const pageBoundaryCount = hideBoundary ? 0 : 1; const { pagerCount, hideBoundary } = props; const goButton = (props.showQuickJumper && props.showQuickJumper.goButton); - const halfPagerCount = Math.max(1, Math.floor(pagerCount / 2)) + const halfPagerCount = Math.max(1, Math.floor(pagerCount / 2)); const pageBufferSize = props.showLessItems ? 1 : halfPagerCount; const { current, pageSize } = this.state; @@ -536,8 +537,7 @@ class Pagination extends React.Component { let left = Math.max(1, current - pageBufferSize); let right = Math.min(current + pageBufferSize, allPages); - const pageBoundaryCount = hideBoundary ? 0 : 1; - + if (current - 1 <= pageBufferSize) { right = 1 + pageBufferSize * 2 + pageBoundaryCount; } @@ -563,7 +563,10 @@ class Pagination extends React.Component { ); } - if (current - pageBoundaryCount > pageBufferSize && current !== pageBoundaryCount + pageBufferSize + 1) { + if ( + current - pageBoundaryCount > pageBufferSize && + current !== pageBoundaryCount + pageBufferSize + 1 + ) { pagerList[0] = React.cloneElement(pagerList[0], { className: `${prefixCls}-item-after-jump-prev`, }); From 5b5dc27b9d4f5bd91b641e9411dd52a81d0e64fc Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Tue, 26 Feb 2019 11:41:22 +0800 Subject: [PATCH 05/15] Updates --- src/Pagination.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pagination.jsx b/src/Pagination.jsx index 7aac7aaf..49f5e3ba 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -338,8 +338,8 @@ class Pagination extends React.Component { let lastPager = null; let gotoButton = null; - const pageBoundaryCount = hideBoundary ? 0 : 1; const { pagerCount, hideBoundary } = props; + const pageBoundaryCount = hideBoundary ? 0 : 1; const goButton = (props.showQuickJumper && props.showQuickJumper.goButton); const halfPagerCount = Math.max(1, Math.floor(pagerCount / 2)); const pageBufferSize = props.showLessItems ? 1 : halfPagerCount; From e958ba1dbe17ac7d0ba582640771a22f1efbc811 Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Wed, 27 Feb 2019 09:56:59 +0800 Subject: [PATCH 06/15] reset example --- examples/default.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/default.js b/examples/default.js index f73afae8..88e42be4 100644 --- a/examples/default.js +++ b/examples/default.js @@ -15,7 +15,7 @@ class App extends React.Component { }); } render() { - return ; + return ; } } From bc837679399ab9c518248e060622ea368037a96b Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Thu, 28 Feb 2019 09:53:36 +0800 Subject: [PATCH 07/15] Add `jump-first` and `jump-last` renders --- examples/pagerCount.html | 1 + examples/pagerCount.js | 22 ++++++++++++++++++++++ src/Pager.jsx | 5 ++++- src/Pagination.jsx | 33 ++++++++++++++++++++++----------- 4 files changed, 49 insertions(+), 12 deletions(-) create mode 100644 examples/pagerCount.html create mode 100644 examples/pagerCount.js diff --git a/examples/pagerCount.html b/examples/pagerCount.html new file mode 100644 index 00000000..48cdce85 --- /dev/null +++ b/examples/pagerCount.html @@ -0,0 +1 @@ +placeholder diff --git a/examples/pagerCount.js b/examples/pagerCount.js new file mode 100644 index 00000000..10c9f8f5 --- /dev/null +++ b/examples/pagerCount.js @@ -0,0 +1,22 @@ +import 'rc-pagination/assets/index.less'; +import Pagination from 'rc-pagination'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +const total = 500; + +const itemRender = (current, type, element) => { + const hideItems = ['jump-last', 'jump-first']; + + if (hideItems.includes(type)) { + return null; + } + + return element; +}; + +ReactDOM.render( +
+ +
+, document.getElementById('__react-content')); diff --git a/src/Pager.jsx b/src/Pager.jsx index 421f9c9e..06c8c574 100644 --- a/src/Pager.jsx +++ b/src/Pager.jsx @@ -25,7 +25,10 @@ const Pager = (props) => { props.onKeyPress(e, props.onClick, props.page); }; + const itemRender = props.itemRender(props.page, 'page', {props.page}) + return ( + itemRender === null ? null :
  • { onKeyPress={handleKeyPress} tabIndex="0" > - {props.itemRender(props.page, 'page', {props.page})} + {itemRender}
    • ); }; diff --git a/src/Pagination.jsx b/src/Pagination.jsx index 49f5e3ba..6840867e 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -53,7 +53,6 @@ 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, }; @@ -76,7 +75,6 @@ class Pagination extends React.Component { locale: LOCALE, style: {}, itemRender: defaultItemRender, - hideBoundary: false, pagerCount: 5, }; @@ -338,8 +336,8 @@ class Pagination extends React.Component { let lastPager = null; let gotoButton = null; - const { pagerCount, hideBoundary } = props; - const pageBoundaryCount = hideBoundary ? 0 : 1; + const { pagerCount } = props; + const boundaryRemainder = pagerCount % 2 === 0 ? 1 : 0; const goButton = (props.showQuickJumper && props.showQuickJumper.goButton); const halfPagerCount = Math.max(1, Math.floor(pagerCount / 2)); const pageBufferSize = props.showLessItems ? 1 : halfPagerCount; @@ -507,7 +505,19 @@ class Pagination extends React.Component { ); } + const firstPagerRender = props.itemRender( + 1, + 'jump-first', + this.getItemIcon(props.jumpNextIcon) + ) + const lastPagerRender = props.itemRender( + allPages, + 'jump-last', + this.getItemIcon(props.jumpNextIcon) + ) + lastPager = ( + firstPagerRender === null ? null : ); firstPager = ( + lastPagerRender === null ? null : pageBufferSize && - current !== pageBoundaryCount + pageBufferSize + 1 + current - boundaryRemainder > pageBufferSize && + current !== boundaryRemainder + pageBufferSize + 1 ) { pagerList[0] = React.cloneElement(pagerList[0], { className: `${prefixCls}-item-after-jump-prev`, @@ -579,10 +590,10 @@ class Pagination extends React.Component { pagerList.push(jumpNext); } - if (left !== 1 && !hideBoundary) { + if (left !== 1) { pagerList.unshift(firstPager); } - if (right !== allPages && !hideBoundary) { + if (right !== allPages) { pagerList.push(lastPager); } } From 87ff9b09c8c8b65b73b21525a7ddfa32738f738b Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Thu, 28 Feb 2019 10:02:24 +0800 Subject: [PATCH 08/15] Fix --- examples/pagerCount.js | 4 ++-- src/Pager.jsx | 2 +- src/Pagination.jsx | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/pagerCount.js b/examples/pagerCount.js index 10c9f8f5..1a858b1d 100644 --- a/examples/pagerCount.js +++ b/examples/pagerCount.js @@ -7,11 +7,11 @@ const total = 500; const itemRender = (current, type, element) => { const hideItems = ['jump-last', 'jump-first']; - + if (hideItems.includes(type)) { return null; } - + return element; }; diff --git a/src/Pager.jsx b/src/Pager.jsx index 06c8c574..3abbb7f9 100644 --- a/src/Pager.jsx +++ b/src/Pager.jsx @@ -25,7 +25,7 @@ const Pager = (props) => { props.onKeyPress(e, props.onClick, props.page); }; - const itemRender = props.itemRender(props.page, 'page', {props.page}) + const itemRender = props.itemRender(props.page, 'page', {props.page}); return ( itemRender === null ? null : diff --git a/src/Pagination.jsx b/src/Pagination.jsx index 6840867e..8fb13076 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -145,13 +145,13 @@ class Pagination extends React.Component { } getJumpPrevPage = () => { - return Math.max(1, this.state.current - (this.props.showLessItems ? 3 : this.props.pagerCount)); + return Math.max(1, this.state.current - (this.props.showLessItems ? 3 : 5)); } getJumpNextPage = () => { return Math.min( calculatePage(undefined, this.state, this.props), - this.state.current + (this.props.showLessItems ? 3 : this.props.pagerCount) + this.state.current + (this.props.showLessItems ? 3 : 5) ); } @@ -509,12 +509,12 @@ class Pagination extends React.Component { 1, 'jump-first', this.getItemIcon(props.jumpNextIcon) - ) + ); const lastPagerRender = props.itemRender( allPages, 'jump-last', this.getItemIcon(props.jumpNextIcon) - ) + ); lastPager = ( firstPagerRender === null ? null : From 22560e3b2889588bd3f148ac0fe3ba9f4b8d27dd Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Thu, 28 Feb 2019 10:03:23 +0800 Subject: [PATCH 09/15] Update docs --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index a67e8b39..beed22a2 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,6 @@ React.render(, 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 From ede47cebfb2667951a9808ddbc56583debaa380f Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Fri, 1 Mar 2019 09:59:39 +0800 Subject: [PATCH 10/15] Updates --- examples/pagerCount.js | 21 ++++++++++++++++++--- src/Pagination.jsx | 19 ++++++++----------- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/examples/pagerCount.js b/examples/pagerCount.js index 1a858b1d..d3246f8f 100644 --- a/examples/pagerCount.js +++ b/examples/pagerCount.js @@ -2,8 +2,8 @@ import 'rc-pagination/assets/index.less'; import Pagination from 'rc-pagination'; import React from 'react'; import ReactDOM from 'react-dom'; - -const total = 500; +import Select from 'rc-select'; +import 'rc-select/assets/index.css'; const itemRender = (current, type, element) => { const hideItems = ['jump-last', 'jump-first']; @@ -15,8 +15,23 @@ const itemRender = (current, type, element) => { return element; }; +function onShowSizeChange(current, pageSize) { + console.log(current, pageSize); +} + ReactDOM.render(
    - + + + + +
    , document.getElementById('__react-content')); diff --git a/src/Pagination.jsx b/src/Pagination.jsx index 8fb13076..b2bd7d11 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -339,7 +339,7 @@ class Pagination extends React.Component { const { pagerCount } = props; const boundaryRemainder = pagerCount % 2 === 0 ? 1 : 0; const goButton = (props.showQuickJumper && props.showQuickJumper.goButton); - const halfPagerCount = Math.max(1, Math.floor(pagerCount / 2)); + const halfPagerCount = Math.max(1, Math.floor((pagerCount - 1) / 2)); const pageBufferSize = props.showLessItems ? 1 : halfPagerCount; const { current, pageSize } = this.state; @@ -430,7 +430,7 @@ class Pagination extends React.Component { ); } - if (allPages <= pagerCount + pageBufferSize * 2) { + if (allPages <= pageBufferSize * 2 + boundaryRemainder + 1) { const pagerProps = { locale, rootPrefixCls: prefixCls, @@ -546,15 +546,15 @@ class Pagination extends React.Component { /> ); - let left = Math.max(1, current - pageBufferSize); - let right = Math.min(current + pageBufferSize - boundaryRemainder, allPages); + let left = Math.max(1, current - pageBufferSize - boundaryRemainder); + let right = Math.min(current + pageBufferSize, allPages); if (current - 1 <= pageBufferSize) { - right = 1 + pageBufferSize * 2 - boundaryRemainder; + right = 1 + pageBufferSize * 2 + boundaryRemainder; } - if (allPages - current <= pageBufferSize) { - left = allPages - pageBufferSize * 2; + if (allPages - current < pageBufferSize) { + left = allPages - pageBufferSize * 2 - boundaryRemainder; } for (let i = left; i <= right; i++) { @@ -574,10 +574,7 @@ class Pagination extends React.Component { ); } - if ( - current - boundaryRemainder > pageBufferSize && - current !== boundaryRemainder + pageBufferSize + 1 - ) { + if (current - boundaryRemainder - 2 > pageBufferSize) { pagerList[0] = React.cloneElement(pagerList[0], { className: `${prefixCls}-item-after-jump-prev`, }); From b708827aa4a4e0f7960a09a21cbad482afacf19f Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Fri, 1 Mar 2019 15:18:08 +0800 Subject: [PATCH 11/15] Updates --- examples/pagerCount.js | 15 +++++++++++++- src/Pager.jsx | 16 +++++++++++---- src/Pagination.jsx | 45 +++++++++++++++++++++++------------------- 3 files changed, 51 insertions(+), 25 deletions(-) diff --git a/examples/pagerCount.js b/examples/pagerCount.js index d3246f8f..4fd710b2 100644 --- a/examples/pagerCount.js +++ b/examples/pagerCount.js @@ -21,8 +21,10 @@ function onShowSizeChange(current, pageSize) { ReactDOM.render(
    +

    pageCount = 10, hide prev and next jumpers

    +

    Has `showSizeChanger` and `showQuickJumper`

    - +

    pagerCount less than 3

    + + +

    Has `showLessItems` and `pagerCount`

    + + +

    The pagerCount is odd

    + + +

    The pagerCount is even

    +
    , document.getElementById('__react-content')); diff --git a/src/Pager.jsx b/src/Pager.jsx index 3abbb7f9..92b0449e 100644 --- a/src/Pager.jsx +++ b/src/Pager.jsx @@ -25,10 +25,18 @@ const Pager = (props) => { props.onKeyPress(e, props.onClick, props.page); }; - const itemRender = props.itemRender(props.page, 'page', {props.page}); - + let pageType = 'page'; + if (props.last) { + pageType = 'jump-last'; + } + if (props.first) { + pageType = 'jump-first'; + } + + const itemNode = props.itemRender(props.page, pageType, {props.page}); + return ( - itemRender === null ? null : + itemNode === null ? null :
  • { onKeyPress={handleKeyPress} tabIndex="0" > - {itemRender} + {itemNode}
    • ); }; diff --git a/src/Pagination.jsx b/src/Pagination.jsx index b2bd7d11..5f29235d 100644 --- a/src/Pagination.jsx +++ b/src/Pagination.jsx @@ -83,9 +83,15 @@ class Pagination extends React.Component { const hasOnChange = props.onChange !== noop; const hasCurrent = ('current' in props); + const hasShowLessItems = ('showLessItems' in props); if (hasCurrent && !hasOnChange) { console.warn('Warning: You provided a `current` prop to a Pagination component without an `onChange` handler. This will render a read-only component.'); // eslint-disable-line } + if (hasShowLessItems && props.showLessItems) { + console.warn( + 'Warning: `showLessItems` is deprecated since 1.18.0. Please use pagerCount instead.' + ) // eslint-disable-line + } let current = props.defaultCurrent; if ('current' in props) { @@ -145,13 +151,17 @@ class Pagination extends React.Component { } getJumpPrevPage = () => { - return Math.max(1, this.state.current - (this.props.showLessItems ? 3 : 5)); + const { showLessItems } = this.props; + const hasPagerCount = this.hasPagerCount() + return Math.max(1, this.state.current - (showLessItems && !hasPagerCount ? 3 : 5)); } getJumpNextPage = () => { + const { showLessItems } = this.props; + const hasPagerCount = this.hasPagerCount() return Math.min( calculatePage(undefined, this.state, this.props), - this.state.current + (this.props.showLessItems ? 3 : 5) + this.state.current + (showLessItems && !hasPagerCount ? 3 : 5) ); } @@ -318,6 +328,8 @@ class Pagination extends React.Component { } } + hasPagerCount = () => !(this.props.pagerCount === 5) + render() { // When hideOnSinglePage is true and there is only 1 page, hide the pager if (this.props.hideOnSinglePage === true && this.props.total <= this.state.pageSize) { @@ -336,11 +348,15 @@ class Pagination extends React.Component { let lastPager = null; let gotoButton = null; - const { pagerCount } = props; - const boundaryRemainder = pagerCount % 2 === 0 ? 1 : 0; + const { pagerCount, showLessItems } = props; + // `pagerCount` priority is greater than `showLessItems`. + const hasPagerCount = this.hasPagerCount(); + const boundary = pagerCount === 0 ? 0 : 1; + const boundaryRemainder = hasPagerCount ? (pagerCount % 2 !== 0 ? 0 : boundary) : 0; + const halfPagerCount = Math.max(0, Math.floor((pagerCount - 1) / 2)); + const pageBufferSize = hasPagerCount ? halfPagerCount : (showLessItems ? 1 : halfPagerCount); + const goButton = (props.showQuickJumper && props.showQuickJumper.goButton); - const halfPagerCount = Math.max(1, Math.floor((pagerCount - 1) / 2)); - const pageBufferSize = props.showLessItems ? 1 : halfPagerCount; const { current, pageSize } = this.state; const prevPage = current - 1 > 0 ? current - 1 : 0; @@ -461,8 +477,8 @@ class Pagination extends React.Component { ); } } else { - const prevItemTitle = props.showLessItems ? locale.prev_3 : locale.prev_5; - const nextItemTitle = props.showLessItems ? locale.next_3 : locale.next_5; + const prevItemTitle = showLessItems && !hasPagerCount ? locale.prev_3 : locale.prev_5; + const nextItemTitle = showLessItems && !hasPagerCount ? locale.next_3 : locale.next_5; if (props.showPrevNextJumpers) { let jumpPrevClassString = `${prefixCls}-jump-prev`; if (props.jumpPrevIcon) { @@ -505,19 +521,8 @@ class Pagination extends React.Component { ); } - const firstPagerRender = props.itemRender( - 1, - 'jump-first', - this.getItemIcon(props.jumpNextIcon) - ); - const lastPagerRender = props.itemRender( - allPages, - 'jump-last', - this.getItemIcon(props.jumpNextIcon) - ); lastPager = ( - firstPagerRender === null ? null : ); firstPager = ( - lastPagerRender === null ? null : Date: Fri, 1 Mar 2019 15:41:41 +0800 Subject: [PATCH 12/15] Fix --- examples/pagerCount.js | 2 +- src/Pager.jsx | 4 ++-- src/Pagination.jsx | 10 ++++++---- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/examples/pagerCount.js b/examples/pagerCount.js index 4fd710b2..68762380 100644 --- a/examples/pagerCount.js +++ b/examples/pagerCount.js @@ -36,7 +36,7 @@ ReactDOM.render( />

    pagerCount less than 3

    - +

    Has `showLessItems` and `pagerCount`

    diff --git a/src/Pager.jsx b/src/Pager.jsx index 92b0449e..067aed90 100644 --- a/src/Pager.jsx +++ b/src/Pager.jsx @@ -32,9 +32,9 @@ const Pager = (props) => { if (props.first) { pageType = 'jump-first'; } - + const itemNode = props.itemRender(props.page, pageType, {props.page}); - + return ( itemNode === null ? null :
  • { const { showLessItems } = this.props; - const hasPagerCount = this.hasPagerCount() + const hasPagerCount = this.hasPagerCount(); return Math.max(1, this.state.current - (showLessItems && !hasPagerCount ? 3 : 5)); } getJumpNextPage = () => { const { showLessItems } = this.props; - const hasPagerCount = this.hasPagerCount() + const hasPagerCount = this.hasPagerCount(); return Math.min( calculatePage(undefined, this.state, this.props), this.state.current + (showLessItems && !hasPagerCount ? 3 : 5) @@ -352,9 +352,11 @@ class Pagination extends React.Component { // `pagerCount` priority is greater than `showLessItems`. const hasPagerCount = this.hasPagerCount(); const boundary = pagerCount === 0 ? 0 : 1; - const boundaryRemainder = hasPagerCount ? (pagerCount % 2 !== 0 ? 0 : boundary) : 0; + const pagerCountBoundary = pagerCount % 2 !== 0 ? 0 : boundary; + const boundaryRemainder = hasPagerCount ? pagerCountBoundary : 0; const halfPagerCount = Math.max(0, Math.floor((pagerCount - 1) / 2)); - const pageBufferSize = hasPagerCount ? halfPagerCount : (showLessItems ? 1 : halfPagerCount); + const halfHasLessItemsCount = showLessItems ? 1 : halfPagerCount; + const pageBufferSize = hasPagerCount ? halfPagerCount : halfHasLessItemsCount; const goButton = (props.showQuickJumper && props.showQuickJumper.goButton); const { current, pageSize } = this.state; From 79483b1bc7384de75fc8751c5ccef58c5e92facc Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Thu, 7 Mar 2019 11:34:33 +0800 Subject: [PATCH 13/15] Add test case --- tests/Pagination.spec.js | 155 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 147 insertions(+), 8 deletions(-) diff --git a/tests/Pagination.spec.js b/tests/Pagination.spec.js index 25623d3e..48f9a278 100644 --- a/tests/Pagination.spec.js +++ b/tests/Pagination.spec.js @@ -1,13 +1,13 @@ /* eslint func-names: 0, no-console: 0 */ -import expect from 'expect.js'; -import Pagination from '../src'; -import Select from 'rc-select'; -import React from 'react'; -import TestUtils from 'react-dom/test-utils'; -import ReactDOM from 'react-dom'; -import TwoPagination from './helper/two-pagination'; +import expect from 'expect.js' +import Pagination from '../src' +import Select from 'rc-select' +import React from 'react' +import TestUtils from 'react-dom/test-utils' +import ReactDOM from 'react-dom' +import TwoPagination from './helper/two-pagination' -const Simulate = TestUtils.Simulate; +const Simulate = TestUtils.Simulate describe('Uncontrolled Pagination', () => { let pagination = null; @@ -813,3 +813,142 @@ describe('data and aria props', () => { }); }); }); + +describe('pagerCount props', () => { + describe('with pagerCount, when hide first, last', () => { + const container = document.createElement('div'); + document.body.appendChild(container); + + const itemRender = (current, type, element) => { + if (type === 'jump-first' || type === 'jump-last') { + return null; + } + return element; + } + + it('pageCount is 2, total is 10, show 1 pager', (done) => { + ReactDOM.render( + , + container, + function() { + const pagers = TestUtils.scryRenderedDOMComponentsWithClass( + this, + 'rc-pagination-item' + ); + expect(pagers.length).to.be(1); + done(); + } + ) + }); + + it('pageCount is 2, total is 11, show 2 pager', (done) => { + ReactDOM.render( + , + container, + function() { + const pagers = TestUtils.scryRenderedDOMComponentsWithClass( + this, + 'rc-pagination-item' + ); + expect(pagers.length).to.be(2); + done(); + } + ); + }); + + it('should show 10 pagers if pageCount equals 10', (done) => { + ReactDOM.render( + , + container, + function() { + const pagers = TestUtils.scryRenderedDOMComponentsWithClass( + this, + 'rc-pagination-item' + ); + expect(pagers.length).to.be(10); + + const eighthPager = TestUtils.findRenderedDOMComponentWithClass( + this, + 'rc-pagination-item-8' + ); + expect(TestUtils.isDOMComponent(eighthPager)).to.be(true); + Simulate.click(eighthPager); + setTimeout(() => { + const afterPagers = TestUtils.scryRenderedDOMComponentsWithClass( + this, + 'rc-pagination-item' + ); + expect(afterPagers.length).to.be(10); + done(); + }, 10); + } + ); + }); + }) + + describe('pagerCount is even', () => { + it('pageCount is even', (done) => { + const container = document.createElement('div'); + document.body.appendChild(container); + ReactDOM.render( + , + container, + function() { + const pagers = TestUtils.scryRenderedDOMComponentsWithClass( + this, + 'rc-pagination-item' + ); + expect(pagers.length).to.be(9); + + const sixthPager = TestUtils.findRenderedDOMComponentWithClass( + this, + 'rc-pagination-item-6' + ); + expect(TestUtils.isDOMComponent(sixthPager)).to.be(true); + Simulate.click(sixthPager); + setTimeout(() => { + const afterPagers = TestUtils.scryRenderedDOMComponentsWithClass( + this, + 'rc-pagination-item' + ); + expect(afterPagers.length).to.be(10); + done(); + }, 10); + } + ); + }); + + it('defaultCurrent is last page', (done) => { + const container = document.createElement('div') + document.body.appendChild(container) + ReactDOM.render( + , + container, + function() { + setTimeout(() => { + const pagers = TestUtils.scryRenderedDOMComponentsWithClass( + this, + 'rc-pagination-item' + ); + expect(pagers.length).to.be(8); + + const pager46 = TestUtils.findRenderedDOMComponentWithClass( + this, + 'rc-pagination-item-46' + ); + expect(TestUtils.isDOMComponent(pager46)).to.be(true); + Simulate.click(pager46); + setTimeout(() => { + const afterPagers = TestUtils.scryRenderedDOMComponentsWithClass( + this, + 'rc-pagination-item' + ); + expect(afterPagers.length).to.be(9); + done(); + }, 10); + }, 10); + } + ); + }); + }); +}); From f76eb567ec9c9f3543fe97fe601641b1b05eb3a3 Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Thu, 7 Mar 2019 11:58:32 +0800 Subject: [PATCH 14/15] Update --- tests/Pagination.spec.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/tests/Pagination.spec.js b/tests/Pagination.spec.js index 48f9a278..34bf6ccc 100644 --- a/tests/Pagination.spec.js +++ b/tests/Pagination.spec.js @@ -1,13 +1,13 @@ /* eslint func-names: 0, no-console: 0 */ -import expect from 'expect.js' -import Pagination from '../src' -import Select from 'rc-select' -import React from 'react' -import TestUtils from 'react-dom/test-utils' -import ReactDOM from 'react-dom' -import TwoPagination from './helper/two-pagination' - -const Simulate = TestUtils.Simulate +import expect from 'expect.js'; +import Pagination from '../src'; +import Select from 'rc-select'; +import React from 'react'; +import TestUtils from 'react-dom/test-utils'; +import ReactDOM from 'react-dom'; +import TwoPagination from './helper/two-pagination'; + +const Simulate = TestUtils.Simulate; describe('Uncontrolled Pagination', () => { let pagination = null; From 9a55e81914a73e07f28f4b02acf058e5bfaebbfc Mon Sep 17 00:00:00 2001 From: liuchuzhang Date: Thu, 7 Mar 2019 12:36:48 +0800 Subject: [PATCH 15/15] Fix --- tests/Pagination.spec.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/tests/Pagination.spec.js b/tests/Pagination.spec.js index 34bf6ccc..7cd613a3 100644 --- a/tests/Pagination.spec.js +++ b/tests/Pagination.spec.js @@ -824,13 +824,13 @@ describe('pagerCount props', () => { return null; } return element; - } + }; it('pageCount is 2, total is 10, show 1 pager', (done) => { ReactDOM.render( , container, - function() { + function () { const pagers = TestUtils.scryRenderedDOMComponentsWithClass( this, 'rc-pagination-item' @@ -838,14 +838,14 @@ describe('pagerCount props', () => { expect(pagers.length).to.be(1); done(); } - ) + ); }); it('pageCount is 2, total is 11, show 2 pager', (done) => { ReactDOM.render( , container, - function() { + function () { const pagers = TestUtils.scryRenderedDOMComponentsWithClass( this, 'rc-pagination-item' @@ -860,7 +860,7 @@ describe('pagerCount props', () => { ReactDOM.render( , container, - function() { + function () { const pagers = TestUtils.scryRenderedDOMComponentsWithClass( this, 'rc-pagination-item' @@ -884,7 +884,7 @@ describe('pagerCount props', () => { } ); }); - }) + }); describe('pagerCount is even', () => { it('pageCount is even', (done) => { @@ -893,7 +893,7 @@ describe('pagerCount props', () => { ReactDOM.render( , container, - function() { + function () { const pagers = TestUtils.scryRenderedDOMComponentsWithClass( this, 'rc-pagination-item' @@ -919,19 +919,19 @@ describe('pagerCount props', () => { }); it('defaultCurrent is last page', (done) => { - const container = document.createElement('div') - document.body.appendChild(container) + const container = document.createElement('div'); + document.body.appendChild(container); ReactDOM.render( , container, - function() { + function () { setTimeout(() => { const pagers = TestUtils.scryRenderedDOMComponentsWithClass( this, 'rc-pagination-item' ); expect(pagers.length).to.be(8); - + const pager46 = TestUtils.findRenderedDOMComponentWithClass( this, 'rc-pagination-item-46'