fix: stabilize pagination item count (#695)

Author: QDyanbing

src/Pagination.tsx

@@ -486,13 +486,27 @@ const Pagination: React.FC<PaginationProps> = (props) => {
       left = allPages - pageBufferSize * 2;
     }
 
+    const hasJumpPrev =
+      !!jumpPrev && current - 1 >= pageBufferSize * 2 && current !== 1 + 2;
+    const hasJumpNext =
+      !!jumpNext &&
+      allPages - current >= pageBufferSize * 2 &&
+      current !== allPages - 2;
+
+    if (!showLessItems && hasJumpPrev && right !== allPages) {
+      left += 1;
+    }
+    if (!showLessItems && hasJumpNext && left !== 1) {
+      right -= 1;
+    }
+
     for (let i = left; i <= right; i += 1) {
       pagerList.push(
         <Pager {...pagerProps} key={i} page={i} active={current === i} />,
       );
     }
 
-    if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
+    if (hasJumpPrev) {
       pagerList[0] = React.cloneElement<PagerProps>(pagerList[0], {
         className: clsx(
           `${prefixCls}-item-after-jump-prev`,
@@ -503,7 +517,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
       pagerList.unshift(jumpPrev);
     }
 
-    if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
+    if (hasJumpNext) {
       const lastOne = pagerList[pagerList.length - 1];
       pagerList[pagerList.length - 1] = React.cloneElement(lastOne, {
         className: clsx(

tests/__snapshots__/demo.test.tsx.snap

@@ -1550,18 +1550,7 @@ exports[`Example jumper 1`] = `
       />
     </li>
     <li
-      class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-after-jump-prev"
-      tabindex="0"
-      title="3"
-    >
-      <a
-        rel="nofollow"
-      >
-        3
-      </a>
-    </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-4"
+      class="rc-pagination-item rc-pagination-item-4 rc-pagination-item-after-jump-prev"
       tabindex="0"
       title="4"
     >
@@ -1583,7 +1572,7 @@ exports[`Example jumper 1`] = `
       </a>
     </li>
     <li
-      class="rc-pagination-item rc-pagination-item-6"
+      class="rc-pagination-item rc-pagination-item-6 rc-pagination-item-before-jump-next"
       tabindex="0"
       title="6"
     >
@@ -1593,17 +1582,6 @@ exports[`Example jumper 1`] = `
         6
       </a>
     </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-7 rc-pagination-item-before-jump-next"
-      tabindex="0"
-      title="7"
-    >
-      <a
-        rel="nofollow"
-      >
-        7
-      </a>
-    </li>
     <li
       class="rc-pagination-jump-next"
       tabindex="0"
@@ -1735,18 +1713,7 @@ exports[`Example jumper 1`] = `
       />
     </li>
     <li
-      class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-after-jump-prev"
-      tabindex="0"
-      title="3"
-    >
-      <a
-        rel="nofollow"
-      >
-        3
-      </a>
-    </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-4"
+      class="rc-pagination-item rc-pagination-item-4 rc-pagination-item-after-jump-prev"
       tabindex="0"
       title="4"
     >
@@ -1768,7 +1735,7 @@ exports[`Example jumper 1`] = `
       </a>
     </li>
     <li
-      class="rc-pagination-item rc-pagination-item-6"
+      class="rc-pagination-item rc-pagination-item-6 rc-pagination-item-before-jump-next"
       tabindex="0"
       title="6"
     >
@@ -1778,17 +1745,6 @@ exports[`Example jumper 1`] = `
         6
       </a>
     </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-7 rc-pagination-item-before-jump-next"
-      tabindex="0"
-      title="7"
-    >
-      <a
-        rel="nofollow"
-      >
-        7
-      </a>
-    </li>
     <li
       class="rc-pagination-jump-next"
       tabindex="0"
@@ -2097,18 +2053,7 @@ exports[`Example jumperWithGoButton 1`] = `
       />
     </li>
     <li
-      class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-after-jump-prev"
-      tabindex="0"
-      title="3"
-    >
-      <a
-        rel="nofollow"
-      >
-        3
-      </a>
-    </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-4"
+      class="rc-pagination-item rc-pagination-item-4 rc-pagination-item-after-jump-prev"
       tabindex="0"
       title="4"
     >
@@ -2130,7 +2075,7 @@ exports[`Example jumperWithGoButton 1`] = `
       </a>
     </li>
     <li
-      class="rc-pagination-item rc-pagination-item-6"
+      class="rc-pagination-item rc-pagination-item-6 rc-pagination-item-before-jump-next"
       tabindex="0"
       title="6"
     >
@@ -2140,17 +2085,6 @@ exports[`Example jumperWithGoButton 1`] = `
         6
       </a>
     </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-7 rc-pagination-item-before-jump-next"
-      tabindex="0"
-      title="7"
-    >
-      <a
-        rel="nofollow"
-      >
-        7
-      </a>
-    </li>
     <li
       class="rc-pagination-jump-next"
       tabindex="0"
@@ -2639,18 +2573,7 @@ exports[`Example locale 1`] = `
       />
     </li>
     <li
-      class="rc-pagination-item rc-pagination-item-3 rc-pagination-item-after-jump-prev"
-      tabindex="0"
-      title="3"
-    >
-      <a
-        rel="nofollow"
-      >
-        3
-      </a>
-    </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-4"
+      class="rc-pagination-item rc-pagination-item-4 rc-pagination-item-after-jump-prev"
       tabindex="0"
       title="4"
     >
@@ -2672,7 +2595,7 @@ exports[`Example locale 1`] = `
       </a>
     </li>
     <li
-      class="rc-pagination-item rc-pagination-item-6"
+      class="rc-pagination-item rc-pagination-item-6 rc-pagination-item-before-jump-next"
       tabindex="0"
       title="6"
     >
@@ -2682,17 +2605,6 @@ exports[`Example locale 1`] = `
         6
       </a>
     </li>
-    <li
-      class="rc-pagination-item rc-pagination-item-7 rc-pagination-item-before-jump-next"
-      tabindex="0"
-      title="7"
-    >
-      <a
-        rel="nofollow"
-      >
-        7
-      </a>
-    </li>
     <li
       class="rc-pagination-jump-next"
       tabindex="0"