Merge pull request #1499 from ASU/uds-1856-pagination-ellipses2

fix(unity-react-core): change the number of pages displayed

Author: mlsamuelson

packages/unity-react-core/src/components/Pagination/Pagination.jsx

@@ -61,16 +61,39 @@ export const Pagination = ({
   };
 
   const renderPages = () => {
+
+    if (totalPages < 5) {
+      return (
+        <>
+          {Array.from({ length: totalPages }, (_, index) => {
+            const page = index + 1;
+            return (
+              <PageItem
+                ariaLabel={`Page ${page} of ${totalPages}`}
+                isClickeable
+                key={page}
+                selectedPage={selectedPage === page}
+                onClick={e => handleChangePage(e, page)}
+              >
+                {page}
+              </PageItem>
+            );
+          })}
+        </>
+      );
+    }
+
     // Set the ranges to be shown in the pagination
+    const displayMinimumPages = 2;
     const lowerRangeLimit = iff(
       selectedPage === totalPages - 1,
-      2,
-      selectedPage === totalPages ? 3 : 1
+      1,
+      selectedPage === totalPages ? 2 : 1
     );
     const upperRangeLimit = iff(
       selectedPage === 1,
-      3,
-      selectedPage === 2 ? 2 : 1
+      2,
+      selectedPage === 2 ? 1 : 1
     );
     const lowerRange = createRange(
       selectedPage - lowerRangeLimit,
@@ -96,6 +119,16 @@ export const Pagination = ({
             1
           </PageItem>
         )}
+        {selectedPage > (totalPages - displayMinimumPages ) && (
+          <PageItem
+            isClickeable
+            ariaLabel={`Page 2 of ${totalPages}`}
+            selectedPage={selectedPage === 2}
+            onClick={e => handleChangePage(e, 2)}
+          >
+            2
+          </PageItem>
+        )}
         {renderedPages[0] > 2 && <PageItem ellipses>...</PageItem>}
         {renderedPages.map(page => (
           <PageItem
@@ -111,6 +144,16 @@ export const Pagination = ({
         {renderedPages[renderedPages.length - 1] < totalPages - 1 && (
           <PageItem ellipses>...</PageItem>
         )}
+        {selectedPage < displayMinimumPages + 1  && (
+          <PageItem
+            isClickeable
+            ariaLabel={`Page ${totalPages-1} of ${totalPages}`}
+            selectedPage={selectedPage === totalPages - 1}
+            onClick={e => handleChangePage(e, totalPages - 1)}
+          >
+            {totalPages - 1}
+          </PageItem>
+        )}
         {renderedPages[renderedPages.length - 1] !== totalPages && (
           <PageItem
             isClickeable