pagination component - add new property and extend config

folio-org · Oct 23, 2024 · fc76f8f · fc76f8f
1 parent f9eb350
commit fc76f8f
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/src/components/ItemSearch/ItemSearch.tsx b/src/components/ItemSearch/ItemSearch.tsx
@@ -44,9 +44,11 @@ export const ItemSearch = () => {
 
   useLoadSearchResults(fetchData);
 
-  const isVisiblePaginationCount = isVisibleSegments
-    ? !!navigationSegment?.value && primarySegments?.[navigationSegment?.value]?.isVisiblePaginationCount
-    : true;
+  const segmentConfig = isVisibleSegments
+    ? !!navigationSegment?.value && primarySegments?.[navigationSegment?.value]
+    : undefined;
+  const isVisiblePaginationCount = segmentConfig ? segmentConfig.isVisiblePaginationCount : true;
+  const isLoopedPagination = segmentConfig ? segmentConfig.isLoopedPagination : false;
 
   return (
     <div data-testid="id-search" className="item-search">
@@ -72,6 +74,7 @@ export const ItemSearch = () => {
                     showCount={isVisiblePaginationCount}
                     onPrevPageClick={onPrevPageClick}
                     onNextPageClick={onNextPageClick}
+                    isLooped={isLoopedPagination}
                   />
                 )}
               </>

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -14,6 +14,7 @@ export type Props = {
   showCount?: boolean;
   onPrevPageClick: VoidFunction;
   onNextPageClick: VoidFunction;
+  isLooped?: boolean;
 };
 
 export const Pagination: FC<Props> = memo(
@@ -25,6 +26,7 @@ export const Pagination: FC<Props> = memo(
     showCount = true,
     onPrevPageClick,
     onNextPageClick,
+    isLooped = false,
   }) => {
     const isFirstPage = currentPage === 0;
     const isDisabledNext = totalPages ? currentPage === totalPages - 1 : false;
@@ -45,7 +47,7 @@ export const Pagination: FC<Props> = memo(
         <Button
           type={ButtonType.Text}
           onClick={onPrevPageClick}
-          disabled={isFirstPage}
+          disabled={!isLooped && isFirstPage}
           className="pagination-button"
           data-testid="backward-button"
         >
@@ -67,7 +69,7 @@ export const Pagination: FC<Props> = memo(
         <Button
           type={ButtonType.Text}
           onClick={onNextPageClick}
-          disabled={isDisabledNext}
+          disabled={!isLooped && isDisabledNext}
           className="pagination-button"
           data-testid="forward-button"
         >

diff --git a/src/configs/complexLookup/complexLookup.config.ts b/src/configs/complexLookup/complexLookup.config.ts
@@ -50,12 +50,14 @@ export const COMPLEX_LOOKUPS_CONFIG: ComplexLookupsConfig = {
           labelId: 'ld.search',
           isVisiblePaginationCount: true,
           isVisibleSubLabel: true,
+          isLoopedPagination: false,
         },
         [SearchSegment.Browse]: {
           type: SearchSegment.Browse,
           labelId: 'ld.browse',
           isVisiblePaginationCount: false,
           isVisibleSubLabel: false,
+          isLoopedPagination: true,
         },
       },
       defaultValues: {

diff --git a/src/types/complexLookup.d.ts b/src/types/complexLookup.d.ts
@@ -26,6 +26,7 @@ type SearchSegmentConfig = {
   labelId: string;
   isVisiblePaginationCount?: boolean;
   isVisibleSubLabel?: boolean;
+  isLoopedPagination?: boolean;
 };
 
 type PrimarySegmentsConfig = { [key in SearchSegment]: SearchSegmentConfig };