Make pagination page buffer configurable (#2032)

* Pagination-Talon tileBuffer through props * Included tileBuffer as dependency in hooks
magento · Dec 17, 2019 · 1d2d32b · 1d2d32b
1 parent 9f7d1c9
commit 1d2d32b
Showing 1 changed file with 19 additions and 17 deletions.
diff --git a/packages/peregrine/lib/talons/Pagination/usePagination.js b/packages/peregrine/lib/talons/Pagination/usePagination.js
@@ -1,30 +1,32 @@
 import { useCallback, useMemo } from 'react';
-const tileBuffer = 2;
 
 export const usePagination = props => {
-    const { currentPage, setPage, totalPages } = props;
+    const { currentPage, setPage, totalPages, tileBuffer = 2 } = props;
 
-    const getLeadTile = useCallback((currentPage, totalPages) => {
-        const selectedTile = currentPage;
-        const leftBound = 1 + tileBuffer;
-        const rightBound = totalPages - tileBuffer;
+    const getLeadTile = useCallback(
+        (currentPage, totalPages) => {
+            const selectedTile = currentPage;
+            const leftBound = 1 + tileBuffer;
+            const rightBound = totalPages - tileBuffer;
 
-        let leadTile = selectedTile - tileBuffer;
-        if (selectedTile < leftBound) {
-            leadTile = 1;
-        } else if (selectedTile > rightBound) {
-            leadTile = Math.max(totalPages - tileBuffer * 2, 1);
-        }
-        return leadTile;
-    }, []);
+            let leadTile = selectedTile - tileBuffer;
+            if (selectedTile < leftBound) {
+                leadTile = 1;
+            } else if (selectedTile > rightBound) {
+                leadTile = Math.max(totalPages - tileBuffer * 2, 1);
+            }
+            return leadTile;
+        },
+        [tileBuffer]
+    );
 
     const handleLeftSkip = useCallback(() => {
         const leadTile = getLeadTile(currentPage, totalPages);
 
         const leftSkip = Math.max(1, leadTile - (tileBuffer + 1));
 
         setPage(leftSkip);
-    }, [currentPage, getLeadTile, setPage, totalPages]);
+    }, [currentPage, getLeadTile, setPage, totalPages, tileBuffer]);
 
     const handleRightSkip = useCallback(() => {
         const leadTile = getLeadTile(currentPage, totalPages);
@@ -34,7 +36,7 @@ export const usePagination = props => {
         );
 
         setPage(rightSkip);
-    }, [currentPage, getLeadTile, setPage, totalPages]);
+    }, [currentPage, getLeadTile, setPage, totalPages, tileBuffer]);
 
     const handleNavBack = useCallback(() => {
         if (currentPage > 1) {
@@ -61,7 +63,7 @@ export const usePagination = props => {
             tiles.push(tile);
         }
         return tiles;
-    }, [currentPage, getLeadTile, totalPages]);
+    }, [currentPage, getLeadTile, totalPages, tileBuffer]);
 
     return {
         handleLeftSkip,