From 25a6482eea1ca3fa9d3e2c89425827da58f4bd38 Mon Sep 17 00:00:00 2001 From: Alex Kalmakov Date: Mon, 12 Aug 2024 12:46:06 +0200 Subject: [PATCH 1/2] Added allowAllRows prop for pagination --- src/components/Pagination/Pagination.test.tsx | 18 ++++++++++++++++++ src/components/Pagination/Pagination.tsx | 10 +++++++++- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/components/Pagination/Pagination.test.tsx b/src/components/Pagination/Pagination.test.tsx index 86ac8c0a..11515939 100644 --- a/src/components/Pagination/Pagination.test.tsx +++ b/src/components/Pagination/Pagination.test.tsx @@ -159,4 +159,22 @@ describe("Pagination", () => { }); expect(onChange).not.toHaveBeenCalled(); }); + + it("should not show `All rows` in the page sizes if it's disabled", async () => { + const onPageSizeChange = vi.fn(); + const { getByText, queryByText } = renderPagination({ + currentPage: 1, + onChange, + onPageSizeChange, + maxRowsPerPageList: [250, 500], + allowAllRows: false, + }); + expect(queryByText("All rows")).not.toBeInTheDocument(); + + await vi.waitFor(() => { + fireEvent.click(getByText("250 rows")); + fireEvent.click(getByText("500 rows")); + expect(onPageSizeChange).toBeCalledTimes(1); + }); + }); }); diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 787c669c..d23015ca 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -4,6 +4,7 @@ import { MouseEventHandler, ReactElement, useCallback, + useEffect, useRef, } from "react"; import { @@ -30,6 +31,7 @@ export interface PaginationProps onPageNumberFocus?: FocusEventHandler; onPageNumberBlur?: FocusEventHandler; disableNextButton?: boolean; + allowAllRows?: boolean; } const CustomSelect = styled.div` width: 150px; @@ -51,6 +53,7 @@ export const Pagination = ({ onPageNumberFocus, onPageNumberBlur, disableNextButton, + allowAllRows = true, ...props }: PaginationProps): ReactElement => { const hasRowCount = ["number", "string"].includes(typeof rowCount); @@ -129,6 +132,11 @@ export const Pagination = ({ [currentPage, onChangeProp, onNextPageClick, rightButtonDisabled] ); + // if `allowAllRows` is false we need to switch to the first option in the list + if (pageSize === -1 && !allowAllRows && maxRowsPerPageList.length > 0) { + pageSize = maxRowsPerPageList[0]; + } + return ( - All rows + {allowAllRows && All rows} {maxRowsPerPageList.map(option => ( Date: Mon, 12 Aug 2024 12:57:32 +0200 Subject: [PATCH 2/2] lint --- src/components/Pagination/Pagination.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index d23015ca..413e6613 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -4,7 +4,6 @@ import { MouseEventHandler, ReactElement, useCallback, - useEffect, useRef, } from "react"; import {