Merge pull request #285 from qoretechnologies/foxhoundn/bug-reqorecon…

…tainer-does-284 `onPageChange` paging container callback fixed
qoretechnologies · Feb 24, 2023 · 4f1e408 · 4f1e408
2 parents fca3123 + 57545ed
commit 4f1e408
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 3 deletions.
diff --git a/__tests__/collection.test.tsx b/__tests__/collection.test.tsx
@@ -211,6 +211,7 @@ test('<Collection /> has infinite paging', () => {
 });
 
 test('<Collection /> has custom paging', () => {
+  const onPageChange = jest.fn();
   render(
     <ReqoreUIProvider>
       <ReqoreLayoutContent>
@@ -222,6 +223,7 @@ test('<Collection /> has custom paging', () => {
             autoLoadMore: true,
             showLabels: true,
             loadMoreLabel: 'Scroll to load more',
+            onPageChange,
           }}
         />
       </ReqoreLayoutContent>
@@ -236,6 +238,7 @@ test('<Collection /> has custom paging', () => {
 
   mockAllIsIntersecting(true);
 
+  expect(onPageChange).toHaveBeenCalledWith(2, { isFirst: false, isLast: true });
   expect(document.querySelectorAll('.reqore-collection-item').length).toBe(100);
 });
 

diff --git a/__tests__/containers/paging.test.tsx b/__tests__/containers/paging.test.tsx
@@ -104,3 +104,35 @@ test('Renders default <PaginationContainer /> with both control wrappers, one in
   expect(document.querySelectorAll('.reqore-button')[101]?.getAttribute('disabled')).toBe('');
   expect(document.querySelectorAll('.reqore-button')[203]?.getAttribute('disabled')).toBe('');
 });
+
+test('Renders default <PaginationContainer /> with onPageChange callback', () => {
+  const fn = jest.fn();
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqorePaginationContainer<any>
+            items={data}
+            type={{ onPageChange: fn, infinite: true }}
+          >
+            {(items) => (
+              <ReqoreControlGroup vertical>
+                {items.map((item) => (
+                  <ReqoreTag label={`${item.firstName} ${item.lastName}`} />
+                ))}
+              </ReqoreControlGroup>
+            )}
+          </ReqorePaginationContainer>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
+
+  fireEvent.click(document.querySelectorAll('.reqore-button')[0]);
+
+  expect(fn).toBeCalledTimes(1);
+  expect(fn).toBeCalledWith(2, { isFirst: false, isLast: false });
+});
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.34.5",
+  "version": "0.34.6",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/constants/paging.ts b/src/constants/paging.ts
@@ -35,13 +35,17 @@ export function getPaginationOptionsFromType<T>(
       itemsPerPage,
       pagesToShow,
       startPage,
+      enabled,
+      onPageChange,
       pageControlsPosition = 'bottom',
       includeBottomControls,
       includeTopControls,
+
       ...componentOptions
     } = type;
+
     return {
-      pagingOptions: { infinite, itemsPerPage, pagesToShow, startPage },
+      pagingOptions: { infinite, itemsPerPage, pagesToShow, startPage, enabled, onPageChange },
       pageControlsPosition,
       componentOptions,
       includeBottomControls,

diff --git a/src/hooks/usePaging.ts b/src/hooks/usePaging.ts
@@ -74,7 +74,7 @@ export const useReqorePaging = <T>(
   useUpdateEffect(() => {
     setPage(1);
     setTotalPage(Math.ceil(size(items) / itemsPerPage));
-  }, [size(items), itemsPerPage]);
+  }, [size(items)]);
 
   const slicedItems: T[] = useMemo(() => {
     return items.slice(infinite ? 0 : (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);