feat: paginationNav support high page counts (#15219)

* feat: paginationNav support high page counts This commit updates PaginationNav to support high page counts. I add a prop to PaginationNav which short circuits logic causing present issue * Update README.md * fix: code review * docs(paginationnav): remove test story --------- Co-authored-by: Alison Joseph <[email protected]> Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Dec 11, 2023 · 4d278de · 4d278de
1 parent 7ebcca1
commit 4d278de
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5845,6 +5845,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "disableOverflow": Object {
+        "type": "bool",
+      },
       "itemsShown": Object {
         "type": "number",
       },

diff --git a/packages/react/src/components/PaginationNav/PaginationNav.js b/packages/react/src/components/PaginationNav/PaginationNav.js
@@ -119,9 +119,32 @@ function PaginationOverflow({
   fromIndex,
   count,
   onSelect,
+  // eslint-disable-next-line react/prop-types
+  disableOverflow,
   translateWithId: t = translateWithId,
 }) {
   const prefix = usePrefix();
+
+  //If overflow is disabled, return a select tag with no select options
+  if (disableOverflow === true && count > 1) {
+    return (
+      <li className={`${prefix}--pagination-nav__list-item`}>
+        <div className={`${prefix}--pagination-nav__select`}>
+          {/* eslint-disable-next-line jsx-a11y/no-onchange */}
+          <select
+            className={`${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select`}
+            aria-label={`Select ${t('carbon.pagination-nav.item')} number`}
+            disabled></select>
+          <div className={`${prefix}--pagination-nav__select-icon-wrapper`}>
+            <OverflowMenuHorizontal
+              className={`${prefix}--pagination-nav__select-icon`}
+            />
+          </div>
+        </div>
+      </li>
+    );
+  }
+
   if (count > 1) {
     return (
       <li className={`${prefix}--pagination-nav__list-item`}>
@@ -175,6 +198,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
     className,
     onChange = () => {},
     totalItems,
+    disableOverflow,
     itemsShown = 10,
     page = 0,
     loop = false,
@@ -192,7 +216,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
   );
   const prevPage = usePrevious(currentPage);
   const prefix = usePrefix();
-
+  const [isOverflowDisabled, setIsOverFlowDisabled] = useState(disableOverflow);
   function jumpToItem(index) {
     if (index >= 0 && index < totalItems) {
       setCurrentPage(index);
@@ -260,6 +284,10 @@ const PaginationNav = React.forwardRef(function PaginationNav(
     }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    setIsOverFlowDisabled(disableOverflow);
+  }, [disableOverflow]);
+
   const classNames = classnames(`${prefix}--pagination-nav`, className);
 
   const backwardButtonDisabled = !loop && currentPage === 0;
@@ -297,6 +325,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
           fromIndex={startOffset}
           count={cuts.front}
           onSelect={jumpToItem}
+          disableOverflow={isOverflowDisabled}
         />
 
         {
@@ -322,6 +351,7 @@ const PaginationNav = React.forwardRef(function PaginationNav(
           fromIndex={totalItems - cuts.back - 1}
           count={cuts.back}
           onSelect={jumpToItem}
+          disableOverflow={isOverflowDisabled}
         />
 
         {
@@ -432,6 +462,12 @@ PaginationNav.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
+   * Set this to true if you are having performance problems with large data sets.
+   */
+  disableOverflow: PropTypes.bool, // eslint-disable-line react/prop-types
+
   /**
    * The number of items to be shown.
    */

diff --git a/packages/react/src/components/PaginationNav/PaginationNav.stories.js b/packages/react/src/components/PaginationNav/PaginationNav.stories.js
@@ -32,6 +32,7 @@ Playground.args = {
   itemsShown: 10,
   page: 0,
   totalItems: 25,
+  disableOverflow: false,
 };
 
 Playground.argTypes = {
@@ -55,4 +56,9 @@ Playground.argTypes = {
       type: 'number',
     },
   },
+  disableOverflow: {
+    control: {
+      type: 'boolean',
+    },
+  },
 };