Updates

Author: liuchuzhang

examples/pagerCount.js

@@ -21,17 +21,30 @@ function onShowSizeChange(current, pageSize) {
 
 ReactDOM.render(
   <div>
+    <p> pageCount = 10, hide prev and next jumpers </p>
     <Pagination total={500} itemRender={itemRender} pagerCount={10} showPrevNextJumpers={false} />
 
+    <p> Has `showSizeChanger` and `showQuickJumper` </p>
     <Pagination
       selectComponentClass={Select}
       showSizeChanger
       onShowSizeChange={onShowSizeChange}
       defaultCurrent={3}
       total={500}
       pagerCount={7}
+      showQuickJumper
     />
 
-    <Pagination total={500} pagerCount={8} />
+    <p> pagerCount less than 3 </p>
+    <Pagination total={100} pagerCount={0} />
+
+    <p> Has `showLessItems` and `pagerCount` </p>
+    <Pagination total={500} pagerCount={8} showLessItems />
+
+    <p> The pagerCount is odd </p>
+    <Pagination total={200} pagerCount={7} />
+
+    <p> The pagerCount is even </p>
+    <Pagination total={200} pagerCount={8} />
   </div>
 , document.getElementById('__react-content'));

src/Pager.jsx

@@ -25,18 +25,26 @@ const Pager = (props) => {
     props.onKeyPress(e, props.onClick, props.page);
   };
 
-  const itemRender = props.itemRender(props.page, 'page', <a>{props.page}</a>);
-
+  let pageType = 'page';
+  if (props.last) {
+    pageType = 'jump-last';
+  }
+  if (props.first) {
+    pageType = 'jump-first';
+  }
+  
+  const itemNode = props.itemRender(props.page, pageType, <a>{props.page}</a>);
+  
   return (
-    itemRender === null ? null :
+    itemNode === null ? null :
     <li
       title={props.showTitle ? props.page : null}
       className={cls}
       onClick={handleClick}
       onKeyPress={handleKeyPress}
       tabIndex="0"
     >
-      {itemRender}
+      {itemNode}
     </li>
   );
 };

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 {
           </li>
         );
       }
-      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 :
         <Pager
           locale={props.locale}
           last
@@ -532,9 +537,9 @@ class Pagination extends React.Component {
         />
       );
       firstPager = (
-        lastPagerRender === null ? null :
         <Pager
           locale={props.locale}
+          first
           rootPrefixCls={prefixCls}
           onClick={this.handleChange}
           onKeyPress={this.runIfEnter}