🐛 fix pagination component bugs on less than 5page

 #262

Author: KRRISH96

lib/pagination/index.js

@@ -36,34 +36,38 @@ class Pagination extends Component {
 
     const steps = [];
 
-    // eslint-disable-next-line no-restricted-syntax
-    for (const key of Array(3).keys()) {
-      let page;
-
-      if (currentActive > 2) {
-        if (currentActive >= total - 1) {
-          page = (key - 3) + total;
+    if (total >= 3) {
+      const innerSteps = total > 5 ? 3 : (total - 2); //   FIX THIS for 3,4 pages
+      // eslint-disable-next-line no-restricted-syntax
+      for (const key of Array(innerSteps).keys()) {
+        let page;
+
+        if (currentActive > 2) {
+          if ((currentActive >= total - 1) && total > 4) {
+            page = (key - 3) + total;
+          } else if (total === 4 && currentActive === 4) {
+            page = currentActive + (key - 2);
+          } else {
+            page = currentActive + (key - 1);
+          }
         } else {
-          page = currentActive + (key - 1);
+          page = key + 2;
         }
-      } else {
-        page = key + 2;
+        /* eslint-disable jsx-a11y/click-events-have-key-events */
+        /* eslint-disable jsx-a11y/no-static-element-interactions */
+        steps.push(<div
+          className={classnames(theme['pagination-steps'], {
+            [theme.active]: page === currentActive,
+          })}
+          data-react-active-page={page === currentActive ? 'active' : undefined}
+          key={page}
+          onClick={() => this.navigate(page)}
+        >
+          {page}
+          {/* eslint-disable-next-line react/jsx-closing-tag-location */}
+        </div>);
       }
-      /* eslint-disable jsx-a11y/click-events-have-key-events */
-      /* eslint-disable jsx-a11y/no-static-element-interactions */
-      steps.push(<div
-        className={classnames(theme['pagination-steps'], {
-          [theme.active]: page === currentActive,
-        })}
-        data-react-active-page={page === currentActive ? 'active' : undefined}
-        key={page}
-        onClick={() => this.navigate(page)}
-      >
-        {page}
-        {/* eslint-disable-next-line react/jsx-closing-tag-location */}
-      </div>);
     }
-
     return [
       <div
         className={classnames(theme['pagination-steps'], {
@@ -75,19 +79,21 @@ class Pagination extends Component {
       >
         {1}
       </div>,
-      currentActive > 2 ? this.renderDots('left') : null,
-      steps,
-      currentActive < total - 1 ? this.renderDots('right') : null,
-      <div
-        className={classnames(theme['pagination-steps'], {
-          [theme.active]: total === currentActive,
-        })}
-        key={total}
-        data-react-active-page={total === currentActive ? 'active' : undefined}
-        onClick={() => this.navigate(total)}
-      >
-        {total}
-      </div>,
+      total > 5 && currentActive > 2 ? this.renderDots('left') : null,
+      total >= 3 && steps,
+      total > 5 && currentActive < total - 1 ? this.renderDots('right') : null,
+      total >= 2 && (
+        <div
+          className={classnames(theme['pagination-steps'], {
+            [theme.active]: total === currentActive,
+          })}
+          key={total}
+          data-react-active-page={total === currentActive ? 'active' : undefined}
+          onClick={() => this.navigate(total)}
+        >
+          {total}
+        </div>
+      ),
     ];
   };