feat: arrow enabled in last page in case closeonlastpage function was…

… passed
kleros · Jul 2, 2024 · 70f4635 · 70f4635
1 parent e5fd320
commit 70f4635
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/src/hooks/pagination/use-pagination.tsx b/src/hooks/pagination/use-pagination.tsx
@@ -3,11 +3,16 @@ const usePagination = (
   numPages: number,
   //eslint-disable-next-line @typescript-eslint/ban-types
   callback: Function,
+  closeOnLastPage?: () => void,
   numNeighbors = 2
 ) => {
   const incrementPage = () => {
-    const newPage = Math.min(numPages, currentPage + 1);
-    callback(newPage);
+    if (currentPage === numPages && closeOnLastPage) {
+      closeOnLastPage();
+    } else {
+      const newPage = Math.min(numPages, currentPage + 1);
+      callback(newPage);
+    }
   };
 
   const decrementPage = () => {

diff --git a/src/lib/pagination/compact.tsx b/src/lib/pagination/compact.tsx
@@ -62,6 +62,7 @@ interface CompactPaginationProps {
   numPages: number;
   //eslint-disable-next-line @typescript-eslint/ban-types
   callback: Function;
+  closeOnLastPage?: () => void;
   label?: ReactNode;
   className?: string;
 }
@@ -70,19 +71,23 @@ const CompactPagination: React.FC<CompactPaginationProps> = ({
   currentPage,
   numPages,
   callback,
+  closeOnLastPage,
   label,
   className,
 }) => {
   const [{ incrementPage, decrementPage, minPageReached, maxPageReached }] =
-    usePagination(currentPage, numPages, callback);
+    usePagination(currentPage, numPages, callback, closeOnLastPage);
 
   return (
     <Wrapper {...{ className }}>
       <StyledLabel>{label}</StyledLabel>
       <LeftArrow disabled={minPageReached} onClick={decrementPage}>
         <Arrow className={StyledSVG.styledComponentId} />
       </LeftArrow>
-      <RightArrow disabled={maxPageReached} onClick={incrementPage}>
+      <RightArrow
+        disabled={maxPageReached && !closeOnLastPage}
+        onClick={incrementPage}
+      >
         <Arrow className={StyledSVG.styledComponentId} />
       </RightArrow>
     </Wrapper>