remove unneeded renderPagination from ReferenceArrayFieldBase

Author: ThieryMichel

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

@@ -41,8 +41,8 @@ describe('ReferenceArrayFieldBase', () => {
             return <div>{resource}</div>;
         };
         const dataProvider = testDataProvider({
-            // @ts-ignore
             getList: () =>
+                // @ts-ignore
                 Promise.resolve({ data: [{ id: 1 }, { id: 2 }], total: 2 }),
         });
         render(
@@ -103,21 +103,11 @@ describe('ReferenceArrayFieldBase', () => {
         });
     });
 
-    it('should render pagination using renderPagination prop', async () => {
-        render(<WithPagination />);
-        await waitFor(() => {
-            expect(screen.queryByText('1 - 3 of 8')).not.toBeNull();
-            expect(screen.queryByText('Next Page')).not.toBeNull();
-            expect(screen.queryByText('Previous Page')).not.toBeNull();
-        });
-        screen.getByText('Next Page').click();
+    it('should not render pagination when given a render prop', async () => {
+        render(<WithRenderProp pagination={<p>Custom Pagination</p>} />);
         await waitFor(() => {
-            expect(screen.queryByText('4 - 6 of 8')).not.toBeNull();
-        });
-        screen.getByText('Previous Page').click();
-
-        await waitFor(() => {
-            expect(screen.queryByText('1 - 3 of 8')).not.toBeNull();
+            expect(screen.queryByText('John Lennon')).not.toBeNull();
         });
+        expect(screen.queryByText('Custom Pagination')).toBeNull();
     });
 });

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

@@ -111,8 +111,10 @@ export const Loading = () => (
 
 export const WithRenderProp = ({
     dataProvider = defaultDataProvider,
+    pagination,
 }: {
     dataProvider?: DataProvider;
+    pagination?: React.ReactElement;
 }) => (
     <TestMemoryRouter initialEntries={['/bands/1/show']}>
         <CoreAdmin
@@ -135,6 +137,7 @@ export const WithRenderProp = ({
                         <ReferenceArrayFieldBase
                             source="members"
                             reference="artists"
+                            pagination={pagination}
                             render={({ data, isPending, error }) => {
                                 if (isPending) {
                                     return <p>Loading...</p>;
@@ -164,77 +167,6 @@ export const WithRenderProp = ({
     </TestMemoryRouter>
 );
 
-export const WithRenderPaginationProp = ({
-    dataProvider = defaultDataProvider,
-}: {
-    dataProvider: DataProvider;
-}) => (
-    <TestMemoryRouter initialEntries={['/bands/1/show']}>
-        <CoreAdmin
-            dataProvider={dataProvider}
-            queryClient={
-                new QueryClient({
-                    defaultOptions: {
-                        queries: {
-                            retry: false,
-                        },
-                    },
-                })
-            }
-        >
-            <Resource name="artists" />
-            <Resource
-                name="bands"
-                show={
-                    <ShowBase resource="bands" id={1}>
-                        <ReferenceArrayFieldBase
-                            source="members"
-                            reference="artists"
-                            perPage={3}
-                            renderPagination={({
-                                total,
-                                perPage,
-                                setPage,
-                                page,
-                            }) => {
-                                const nextPage = () => {
-                                    setPage?.(page + 1);
-                                };
-                                const previousPage = () => {
-                                    setPage?.(page - 1);
-                                };
-                                return (
-                                    <div>
-                                        <button
-                                            disabled={page <= 1}
-                                            onClick={previousPage}
-                                        >
-                                            Previous Page
-                                        </button>
-                                        <span>
-                                            {`${(page - 1) * perPage + 1} - ${Math.min(page * perPage, total)} of ${total}`}
-                                        </span>
-                                        <button
-                                            disabled={page >= total / perPage}
-                                            onClick={nextPage}
-                                        >
-                                            Next Page
-                                        </button>
-                                    </div>
-                                );
-                            }}
-                        >
-                            <MyReferenceArrayField>
-                                <List source="name" />
-                            </MyReferenceArrayField>
-                        </ReferenceArrayFieldBase>
-                    </ShowBase>
-                }
-            />
-        </CoreAdmin>
-    </TestMemoryRouter>
-);
-
 const MyReferenceArrayField = (props: { children: React.ReactNode }) => {
     const context = useListContext();
 

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

@@ -75,7 +75,6 @@ export const ReferenceArrayFieldBase = <
         children,
         render,
         pagination,
-        renderPagination,
         filter,
         page = 1,
         perPage,
@@ -111,9 +110,7 @@ export const ReferenceArrayFieldBase = <
         <ResourceContextProvider value={reference}>
             <ListContextProvider value={controllerProps}>
                 {render ? render(controllerProps) : children}
-                {renderPagination
-                    ? renderPagination(controllerProps)
-                    : pagination}
+                {!render && pagination}
             </ListContextProvider>
         </ResourceContextProvider>
     );
@@ -125,9 +122,6 @@ export interface ReferenceArrayFieldBaseProps<
 > extends FieldProps<RecordType> {
     children?: ReactNode;
     render?: (props: ListControllerResult<ReferenceRecordType>) => ReactElement;
-    renderPagination?: (
-        props: ListControllerResult<ReferenceRecordType>
-    ) => ReactElement;
     filter?: FilterPayload;
     page?: number;
     pagination?: ReactElement;