fix: pagination sizing bug

dequelabs · Jul 26, 2022 · 3e2417d · 3e2417d
1 parent 8df85c5
commit 3e2417d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
@@ -19,6 +19,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   onPreviousPageClick?: () => void;
   onFirstPageClick?: () => void;
   onLastPageClick?: () => void;
+  onPageSizeChange?: () => void;
   tooltipPlacement?: Placement;
   thin?: boolean;
   className?: string;
@@ -40,6 +41,7 @@ const Pagination = React.forwardRef<HTMLDivElement, Props>(
       onPreviousPageClick,
       onFirstPageClick,
       onLastPageClick,
+      onPageSizeChange,
       className,
       thin = false,
       ...other
@@ -174,6 +176,7 @@ Pagination.propTypes = {
   onPreviousPageClick: PropTypes.func,
   onFirstPageClick: PropTypes.func,
   onLastPageClick: PropTypes.func,
+  onPageSizeChange: PropTypes.func,
   // @ts-expect-error
   tooltipPlacement: PropTypes.string,
   className: PropTypes.string

diff --git a/packages/react/src/components/Pagination/usePagination.tsx b/packages/react/src/components/Pagination/usePagination.tsx
@@ -14,6 +14,7 @@ interface PaginationResults {
   onPreviousPageClick: () => void;
   onFirstPageClick: () => void;
   onLastPageClick: () => void;
+  setCurrentPage: (page:number) => void;
 }
 
 // PageStatus has some built-in redundancy to prevent a user from
@@ -27,7 +28,7 @@ interface PageStatus {
 export const usePagination = ({
   totalItems,
   initialPageSize = 10,
-  initialPage = 1
+  initialPage = 1,
 }: Options): {
   pagination: PaginationResults;
   pageStatus: PageStatus;
@@ -36,7 +37,6 @@ export const usePagination = ({
 
   const pageStart = currentPage * initialPageSize - initialPageSize + 1;
   const pageEnd = Math.min(pageStart + initialPageSize - 1, totalItems);
-
   const onFirstPageClick = () => setCurrentPage(1);
   const onPreviousPageClick = () => setCurrentPage(currentPage - 1);
   const onNextPageClick = () => setCurrentPage(currentPage + 1);
@@ -50,7 +50,8 @@ export const usePagination = ({
     onFirstPageClick,
     onPreviousPageClick,
     onNextPageClick,
-    onLastPageClick
+    onLastPageClick,
+    setCurrentPage
   };
 
   const pageStatus: PageStatus = {
@@ -59,5 +60,6 @@ export const usePagination = ({
     pageEnd
   };
 
+
   return { pagination, pageStatus };
 };