remove unneeded renderPagination prop from ReferenceManyFieldBase

Author: ThieryMichel

docs/ReferenceManyFieldBase.md

@@ -108,7 +108,6 @@ export const PostList = () => (
 | `empty`        | Optional | `ReactNode`                                                                       | -                                | Element to display when there are no related records.                                |
 | `filter`       | Optional | `Object`                                                                          | -                                | Filters to use when fetching the related records, passed to `getManyReference()`    |
 | `pagination`   | Optional | `Element`                                                                         | -                                | Pagination element to display pagination controls. empty by default (no pagination) |
-| `renderPagination`   | Optional | `(listContext) => Element`                                                                         | -                                | Pagination function that receives a `ListContext` and render pagination controls. |
 | `perPage`      | Optional | `number`                                                                          | 25                               | Maximum number of referenced records to fetch                                       |
 | `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v3/docs/react/reference/useQuery) | `{}`                             | `react-query` options for the `getMany` query                                       |
 | `reference`    | Required | `string`                                                                          | -                                | The name of the resource for the referenced records, e.g. 'books'                   |
@@ -153,7 +152,8 @@ export const AuthorShow = () => (
 
 ## `render`
 
-Alternatively to children you can pass a render prop to `<ReferenceManyFieldBase>`. The render prop will receive the list context as its argument, allowing to inline the render logic.
+Alternatively to children you can pass a render prop to `<ReferenceManyFieldBase>`. The render prop will receive the list context as its argument, allowing to inline the render logic for both the list and the pagination.
+When receiving a render prop the `<ReferenceManyFieldBase>` component will ignore the children and the pagination property.
 
 ```jsx
 import { Show, SimpleShowLayout, ReferenceManyFieldBase, DataTable, TextField, DateField } from 'react-admin';
@@ -329,6 +329,8 @@ import { Pagination } from 'react-admin';
 </ReferenceManyFieldBase>
 ```
 
+***Note:*** The pagination prop will be ignored if a render prop is specified
+
 ## `perPage`
 
 By default, react-admin restricts the possible values to 25 and displays no pagination control. You can change the limit by setting the `perPage` prop:

packages/ra-core/src/controller/field/ReferenceManyFieldBase.spec.tsx

@@ -41,8 +41,8 @@ describe('ReferenceManyFieldBase', () => {
             return <div>{resource}</div>;
         };
         const dataProvider = testDataProvider({
-            // @ts-ignore
             getList: () =>
+                // @ts-ignore
                 Promise.resolve({ data: [{ id: 1 }, { id: 2 }], total: 2 }),
         });
         render(
@@ -156,23 +156,13 @@ describe('ReferenceManyFieldBase', () => {
                 ).not.toBeNull();
             });
         });
-    });
-
-    it('should render pagination using renderPagination prop', async () => {
-        render(<WithPagination />);
-        await waitFor(() => {
-            expect(screen.queryByText('1 - 2 of 3')).not.toBeNull();
-            expect(screen.queryByText('Next Page')).not.toBeNull();
-            expect(screen.queryByText('Previous Page')).not.toBeNull();
-        });
-        screen.getByText('Next Page').click();
-        await waitFor(() => {
-            expect(screen.queryByText('3 - 3 of 3')).not.toBeNull();
-        });
-        screen.getByText('Previous Page').click();
 
-        await waitFor(() => {
-            expect(screen.queryByText('1 - 2 of 3')).not.toBeNull();
+        it('should not render pagination when receiving a render prop', async () => {
+            render(<WithRenderProp pagination={<p>Custom Pagination</p>} />);
+            await waitFor(() => {
+                expect(screen.queryByText('War and Peace')).not.toBeNull();
+            });
+            expect(screen.queryByText('Custom Pagination')).toBeNull();
         });
     });
 });

packages/ra-core/src/controller/field/ReferenceManyFieldBase.stories.tsx

@@ -239,7 +239,13 @@ export const WithPagination = ({ dataProvider = dataProviderWithAuthors }) => (
     </TestMemoryRouter>
 );
 
-export const WithRenderProp = ({ dataProvider = dataProviderWithAuthors }) => (
+export const WithRenderProp = ({
+    dataProvider = dataProviderWithAuthors,
+    pagination,
+}: {
+    dataProvider?: any;
+    pagination?: React.ReactNode;
+}) => (
     <TestMemoryRouter initialEntries={['/books/1/show']}>
         <CoreAdmin
             dataProvider={dataProvider}
@@ -262,6 +268,7 @@ export const WithRenderProp = ({ dataProvider = dataProviderWithAuthors }) => (
                             reference="books"
                             target="author"
                             source="id"
+                            pagination={pagination}
                             render={({ error, isPending, data }) => {
                                 if (isPending) {
                                     return <p>Loading...</p>;
@@ -290,74 +297,6 @@ export const WithRenderProp = ({ dataProvider = dataProviderWithAuthors }) => (
     </TestMemoryRouter>
 );
 
-export const WithRenderPagination = ({
-    dataProvider = dataProviderWithAuthors,
-}) => (
-    <TestMemoryRouter initialEntries={['/authors/1/show']}>
-        <CoreAdmin
-            dataProvider={dataProvider}
-            queryClient={
-                new QueryClient({
-                    defaultOptions: {
-                        queries: {
-                            retry: false,
-                        },
-                    },
-                })
-            }
-        >
-            <Resource name="books" />
-            <Resource
-                name="authors"
-                show={
-                    <ShowBase>
-                        <ReferenceManyFieldBase
-                            target="author"
-                            source="id"
-                            reference="books"
-                            perPage={2}
-                            renderPagination={({
-                                page = 0,
-                                setPage,
-                                total = 0,
-                                perPage,
-                            }) => {
-                                const nextPage = () => {
-                                    setPage(page + 1);
-                                };
-                                const previousPage = () => {
-                                    setPage(page - 1);
-                                };
-                                return (
-                                    <div>
-                                        <button
-                                            disabled={page <= 1}
-                                            onClick={previousPage}
-                                        >
-                                            previous page
-                                        </button>
-                                        {`${(page - 1) * perPage + 1} - ${Math.min(page * perPage, total)} of ${total}`}
-                                        <button
-                                            disabled={page >= total / perPage}
-                                            onClick={nextPage}
-                                        >
-                                            next page
-                                        </button>
-                                    </div>
-                                );
-                            }}
-                        >
-                            <MyReferenceManyField>
-                                <List source="title" />
-                            </MyReferenceManyField>
-                        </ReferenceManyFieldBase>
-                    </ShowBase>
-                }
-            />
-        </CoreAdmin>
-    </TestMemoryRouter>
-);
-
 const MyReferenceManyField = ({ children }: { children: React.ReactNode }) => {
     const context = useListContext();
 

packages/ra-core/src/controller/field/ReferenceManyFieldBase.tsx

@@ -68,7 +68,6 @@ export const ReferenceManyFieldBase = <
         filter = defaultFilter,
         page = 1,
         pagination = null,
-        renderPagination = null,
         perPage = 25,
         record,
         reference,
@@ -130,9 +129,7 @@ export const ReferenceManyFieldBase = <
         <ResourceContextProvider value={reference}>
             <ListContextProvider value={controllerProps}>
                 {render ? render(controllerProps) : children}
-                {renderPagination
-                    ? renderPagination(controllerProps)
-                    : pagination}
+                {!render && pagination}
             </ListContextProvider>
         </ResourceContextProvider>
     );
@@ -147,9 +144,6 @@ export interface ReferenceManyFieldBaseProps<
     > {
     children?: ReactNode;
     render?: (props: ListControllerResult<ReferenceRecordType>) => ReactNode;
-    renderPagination?: (
-        props: ListControllerResult<ReferenceRecordType>
-    ) => ReactNode;
     empty?: ReactNode;
     pagination?: ReactNode;
 }