From 53cd06c8df2191138e0f39a6226afddf5a58dd1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Zaninotto?= Date: Fri, 4 Nov 2022 08:59:22 +0100 Subject: [PATCH] Fix ReferenceManyField does not show pagination when using partial pagination Closes #8014 --- .../src/field/ReferenceManyField.spec.tsx | 70 +++++++++++++++++++ .../src/field/ReferenceManyField.tsx | 6 +- 2 files changed, 72 insertions(+), 4 deletions(-) diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx index a586d2f6b75..8cfc32669e2 100644 --- a/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx +++ b/packages/ra-ui-materialui/src/field/ReferenceManyField.spec.tsx @@ -9,6 +9,7 @@ import { AdminContext } from '../AdminContext'; import { ReferenceManyField } from './ReferenceManyField'; import { TextField } from './TextField'; import { SingleFieldList } from '../list/SingleFieldList'; +import { Pagination } from '../list/pagination/Pagination'; const theme = createTheme(); @@ -179,4 +180,73 @@ describe('', () => { expect(links[0].getAttribute('href')).toEqual('/comments/1'); expect(links[1].getAttribute('href')).toEqual('/comments/2'); }); + + describe('pagination', () => { + it('should render pagination based on total from getManyReference', async () => { + const data = [ + { id: 1, title: 'hello' }, + { id: 2, title: 'world' }, + ]; + const history = createMemoryHistory(); + render( + + Promise.resolve({ data, total: 12 }), + })} + history={history} + > + } + > + + + + + + ); + await screen.findByText('hello'); + await screen.findByText('world'); + await screen.findByText('ra.navigation.page_range_info'); + await screen.findByText('1'); + await screen.findByText('2'); + }); + it('should render pagination based on pageInfo from getManyReference', async () => { + const data = [ + { id: 1, title: 'hello' }, + { id: 2, title: 'world' }, + ]; + const history = createMemoryHistory(); + render( + + Promise.resolve({ + data, + pageInfo: { + hasPreviousPage: false, + hasNextPage: true, + }, + }), + })} + history={history} + > + } + > + + + + + + ); + await screen.findByText('hello'); + await screen.findByText('world'); + await screen.findByText('ra.navigation.partial_page_range_info'); + await screen.findByLabelText('ra.navigation.previous'); + await screen.findByLabelText('ra.navigation.next'); + }); + }); }); diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.tsx index 4c77ca7440b..7231f2eadf5 100644 --- a/packages/ra-ui-materialui/src/field/ReferenceManyField.tsx +++ b/packages/ra-ui-materialui/src/field/ReferenceManyField.tsx @@ -89,9 +89,7 @@ export const ReferenceManyField: FC = props => { {children} - {pagination && controllerProps.total !== undefined - ? pagination - : null} + {pagination !== false && pagination} ); @@ -103,7 +101,7 @@ export interface ReferenceManyFieldProps children: ReactNode; filter?: FilterPayload; page?: number; - pagination?: ReactElement; + pagination?: ReactElement | false; perPage?: number; reference: string; sort?: SortPayload;