diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx index 44cce028d..d3e834dcf 100644 --- a/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx +++ b/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx @@ -76,56 +76,83 @@ describe("DataView", () => { }); expect(rowElements.length).toBe(21); - fireEvent.click(screen.getByText("Show more")); - waitFor(() => { + fireEvent.click(screen.getByText("Show more")); + const loadedRows = within(tableElement).getAllByRole("row", { hidden: false, }); expect(loadedRows.length).toBe(41); }); }); -}); - -it("resets the rows when searching", async () => { - render( - , - ); - - const tableElement = await screen.findByRole("table", { name: "" }); - const rowElements = within(tableElement).getAllByRole("row", { - hidden: false, - }); - expect(rowElements.length).toBe(21); - fireEvent.click(screen.getByText("Show more")); + it("resets the rows when searching", async () => { + render( + , + ); - waitFor(() => { - const loadedRows = within(tableElement).getAllByRole("row", { + const tableElement = await screen.findByRole("table", { name: "" }); + const rowElements = within(tableElement).getAllByRole("row", { hidden: false, }); - expect(loadedRows.length).toBe(41); + expect(rowElements.length).toBe(21); + + fireEvent.click(screen.getByText("Show more")); + + waitFor(() => { + const loadedRows = within(tableElement).getAllByRole("row", { + hidden: false, + }); + expect(loadedRows.length).toBe(41); + }); + + const searchField = screen.getByPlaceholderText("Search"); + fireEvent.change(searchField, { target: { value: "John" } }); + + waitFor(() => { + const rowsAfterFilter = within(tableElement).getAllByRole("row", { + hidden: false, + }); + expect(rowsAfterFilter.length).toBeLessThanOrEqual(21); + }); }); - const searchField = screen.getByPlaceholderText("Search"); - fireEvent.change(searchField, { target: { value: "John" } }); + it("fires onPaginationChange when pagination changes", async () => { + let currentPage = 1; + const onPaginationChange = (pagination: { + pageIndex: number; + pageSize: number; + }) => { + currentPage = pagination.pageIndex; + }; - waitFor(() => { - const rowsAfterFilter = within(tableElement).getAllByRole("row", { - hidden: false, + render( + <> + + , + ); + + const nextButton = screen.getByLabelText("Next page"); + fireEvent.click(nextButton); + + await waitFor(() => { + expect(currentPage).toBe(2); }); - expect(rowsAfterFilter.length).toBeLessThanOrEqual(21); }); }); diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx index 79d6e8fb6..c3b883c81 100644 --- a/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx +++ b/packages/odyssey-react-mui/src/labs/DataView/DataView.tsx @@ -123,6 +123,7 @@ const DataView = ({ totalRows, maxPages, maxResultsPerPage, + onPaginationChange, }: DataViewProps) => { const odysseyDesignTokens = useOdysseyDesignTokens(); const { t } = useTranslation(); @@ -218,6 +219,11 @@ const DataView = ({ })); }, [filters, paginationType, resultsPerPage, search]); + // Fire onPaginationChange if pagination changes + useEffect(() => { + onPaginationChange?.(pagination); + }, [onPaginationChange, pagination]); + // Retrieve the data useEffect(() => { fetchData({ diff --git a/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts b/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts index 7960dbe7c..e06e2ef93 100644 --- a/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts +++ b/packages/odyssey-react-mui/src/labs/DataView/componentTypes.ts @@ -73,8 +73,19 @@ export type UniversalProps = { maxResultsPerPage?: number; metaText?: string; noResultsPlaceholder?: ReactNode; + /** + * @deprecated onChangeRowSelection is now onRowSelectionChange + */ onChangeRowSelection?: (rowSelection: DataRowSelectionState) => void; + onPaginationChange?: ({ + pageIndex, + pageSize, + }: { + pageIndex: number; + pageSize: number; + }) => void; onReorderRows?: ({ rowId, newRowIndex }: DataOnReorderRowsType) => void; + onRowSelectionChange?: (rowSelection: DataRowSelectionState) => void; paginationType?: (typeof paginationTypeValues)[number]; resultsPerPage?: number; searchDelayTime?: number; diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx index 0b49457ca..141004d05 100644 --- a/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx +++ b/packages/odyssey-storybook/src/components/odyssey-labs/DataView/DataView.stories.tsx @@ -989,3 +989,28 @@ export const LoadMore: StoryObj = { hasFilters: true, }, }; + +export const PaginationHook: StoryObj = { + render: function C() { + const [data, setData] = useState(personData); + const { getData } = useDataCallbacks(data, setData); + + const onPaginationChange = (pagination: { + pageIndex: number; + pageSize: number; + }) => { + console.log(pagination); + }; + + return ( + + ); + }, +};