Merge pull request #9607 from marmelab/fix-pagination-rowsperpage-type

[TypeScript] Fix `<Pagination rowsPerPageOptions>` doesn't accept an array of objects
marmelab · Jan 24, 2024 · 70f75cd · 70f75cd
2 parents 8af24d8 + 0e865cd
commit 70f75cd
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 2 deletions.
diff --git a/packages/ra-core/src/controller/list/useListController.ts b/packages/ra-core/src/controller/list/useListController.ts
@@ -438,6 +438,8 @@ export const injectedProps = [
     'error',
     'exporter',
     'filterValues',
+    'hasNextPage',
+    'hasPreviousPage',
     'hideFilter',
     'isFetching',
     'isLoading',

diff --git a/packages/ra-ui-materialui/src/list/pagination/Pagination.spec.tsx b/packages/ra-ui-materialui/src/list/pagination/Pagination.spec.tsx
@@ -6,6 +6,7 @@ import { ListPaginationContext } from 'ra-core';
 
 import { Pagination } from './Pagination';
 import { DeviceTestWrapper } from '../../layout';
+import { RowsPerPageOptions } from './Pagination.stories';
 
 const theme = createTheme();
 
@@ -272,4 +273,11 @@ describe('<Pagination />', () => {
         expect(prevButton).not.toBeNull();
         expect(prevButton.disabled).toBe(true);
     });
+
+    describe('rowsPerPageOptions', () => {
+        it('should accept an array of options with label and value', () => {
+            render(<RowsPerPageOptions />);
+            expect(screen.getByText('ten')).not.toBeNull();
+        });
+    });
 });
diff --git a/packages/ra-ui-materialui/src/list/pagination/Pagination.stories.tsx b/packages/ra-ui-materialui/src/list/pagination/Pagination.stories.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { ListPaginationContext, I18nContextProvider } from 'ra-core';
+import { defaultI18nProvider } from 'react-admin';
+
+import { Pagination } from './Pagination';
+
+export default {
+    title: 'ra-ui-materialui/list/Pagination',
+};
+
+const theme = createTheme();
+
+const defaultProps = {
+    resource: 'posts',
+    page: 1,
+    perPage: 10,
+    setPage: () => null,
+    isLoading: false,
+    hasNextPage: undefined,
+    hasPreviousPage: undefined,
+};
+
+const Wrapper = ({ children, listContext }) => (
+    <I18nContextProvider value={defaultI18nProvider}>
+        <ThemeProvider theme={theme}>
+            <ListPaginationContext.Provider value={listContext}>
+                {children}
+            </ListPaginationContext.Provider>
+        </ThemeProvider>
+    </I18nContextProvider>
+);
+
+export const Basic = () => {
+    const [page, setPage] = React.useState(1);
+    return (
+        <Wrapper
+            listContext={{
+                ...defaultProps,
+                setPage,
+                perPage: 10,
+                total: 43,
+                page,
+            }}
+        >
+            <Pagination rowsPerPageOptions={[1]} />
+        </Wrapper>
+    );
+};
+
+export const Loading = () => (
+    <Wrapper listContext={{ ...defaultProps, isLoading: true }}>
+        <Pagination rowsPerPageOptions={[1]} />
+    </Wrapper>
+);
+
+export const OnePage = () => (
+    <Wrapper
+        listContext={{
+            ...defaultProps,
+            perPage: 10,
+            total: 7,
+            page: 1,
+        }}
+    >
+        <Pagination rowsPerPageOptions={[1]} />
+    </Wrapper>
+);
+
+export const RowsPerPageOptions = () => {
+    const [page, setPage] = React.useState(1);
+    const [perPage, setPerPage] = React.useState(10);
+    return (
+        <Wrapper
+            listContext={{
+                ...defaultProps,
+                setPage,
+                setPerPage,
+                perPage,
+                total: 73,
+                page,
+            }}
+        >
+            <h2>Default</h2>
+            <Pagination />
+            <h2>Custom</h2>
+            <Pagination rowsPerPageOptions={[10, 20, 100]} />
+            <h2>With Labels</h2>
+            <Pagination
+                rowsPerPageOptions={[
+                    { label: 'ten', value: 10 },
+                    { label: 'twenty', value: 20 },
+                    { label: 'one hundred', value: 100 },
+                ]}
+            />
+        </Wrapper>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/list/pagination/Pagination.tsx b/packages/ra-ui-materialui/src/list/pagination/Pagination.tsx
@@ -150,7 +150,15 @@ export const Pagination: FC<PaginationProps> = memo(props => {
 Pagination.propTypes = {
     actions: ComponentPropType,
     limit: PropTypes.element,
-    rowsPerPageOptions: PropTypes.arrayOf(PropTypes.number),
+    rowsPerPageOptions: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+            PropTypes.number,
+            PropTypes.exact({
+                label: PropTypes.string.isRequired,
+                value: PropTypes.number.isRequired,
+            }),
+        ])
+    ),
 };
 
 const DefaultRowsPerPageOptions = [5, 10, 25, 50];
@@ -159,7 +167,7 @@ const emptyArray = [];
 export interface PaginationProps
     extends TablePaginationBaseProps,
         Partial<ListPaginationContextValue> {
-    rowsPerPageOptions?: number[];
+    rowsPerPageOptions?: Array<number | { label: string; value: number }>;
     actions?: FC<PaginationActionsProps>;
     limit?: ReactElement;
 }