Skip to content

Commit 8c95570

Browse files
ThieryMichelThieryMichel
committed
remove pagination prop from ReferenceArrayFieldBase and ReferenceManyFieldBase
1 parent 8c08dec commit 8c95570

8 files changed

+2
-214
lines changed

‎docs/ReferenceArrayFieldBase.md‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,6 @@ You can change how the list of related records is rendered by passing a custom c
9898
| `children` | Optional\* | `Element` | | One or several elements that render a list of records based on a `ListContext` |
9999
| `render` | Optional\* | `(ListContext) => Element` | | A function that takes a list context and renders a list of records |
100100
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records (the filtering is done client-side) |
101-
| `pagination` | Optional | `Element` | - | Pagination element to display pagination controls. empty by default (no pagination) |
102101
| `perPage` | Optional | `number` | 1000 | Maximum number of results to display |
103102
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v5/docs/react/reference/useQuery) | `{}` | `react-query` options for the `getMany` query |
104103
| `sort` | Optional | `{ field, order }` | `{ field: 'id', order: 'DESC' }` | Sort order to use when displaying the related records (the sort is done client-side) |
@@ -140,7 +139,7 @@ const MyTagList = (props: { children: React.ReactNode }) => {
140139
141140
## `render`
142141
143-
Alternatively to children you can pass a `render` function prop to `<ReferenceArrayFieldBase>`. The `render` prop will receive the `ListContext` as its argument, allowing to inline the `render` logic for both the list and the pagination.
142+
Alternatively to children you can pass a `render` function prop to `<ReferenceArrayFieldBase>`. The `render` prop will receive the `ListContext` as its argument, allowing to inline the `render` logic.
144143
When receiving a `render` prop the `<ReferenceArrayFieldBase>` component will ignore the children property.
145144
146145
```jsx
@@ -183,26 +182,6 @@ For instance, to render only tags that are 'published', you can use the followin
183182
```
184183
{% endraw %}
185184
186-
## `pagination`
187-
188-
`<ReferenceArrayFieldBase>` fetches *all* the related fields, and puts them all in a `ListContext`. If a record has a large number of related records, you can limit the number of displayed records with the [`perPage`](#perpage) prop. Then, let users display remaining records by rendering pagination controls. For that purpose, pass a pagination element to the `pagination` prop.
189-
190-
For instance, to limit the display of related records to 10, you can use the following code:
191-
192-
```jsx
193-
import { Pagination, ReferenceArrayFieldBase } from 'react-admin';
194-
195-
<ReferenceArrayFieldBase
196-
label="Tags"
197-
source="tag_ids"
198-
reference="tags"
199-
perPage={10}
200-
pagination={<Pagination />}
201-
/>
202-
```
203-
204-
***Note:*** The pagination prop will be ignored when the component receive a render prop
205-
206185
## `perPage`
207186
208187
`<ReferenceArrayFieldBase>` fetches *all* the related fields, and puts them all in a `ListContext`. If a record has a large number of related records, it may be a good idea to limit the number of displayed records. The `perPage` prop allows to create a client-side pagination for the related records.
@@ -213,8 +192,6 @@ For instance, to limit the display of related records to 10, you can use the fol
213192
<ReferenceArrayFieldBase label="Tags" source="tag_ids" reference="tags" perPage={10} />
214193
```
215194
216-
If you want to let the user display the remaining records, you have to pass a [`pagination`](#pagination) element.
217-
218195
## `queryOptions`
219196
220197
Use the `queryOptions` prop to pass options to [the `dataProvider.getMany()` query](./useGetOne.md#aggregating-getone-calls) that fetches the referenced record.

‎docs/ReferenceManyFieldBase.md‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ export const PostList = () => (
106106
| `debounce` | Optional\* | `number` | 500 | debounce time in ms for the `setFilters` callbacks |
107107
| `empty` | Optional | `ReactNode` | - | Element to display when there are no related records. |
108108
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records, passed to `getManyReference()` |
109-
| `pagination` | Optional | `Element` | - | Pagination element to display pagination controls. empty by default (no pagination) |
110109
| `perPage` | Optional | `number` | 25 | Maximum number of referenced records to fetch |
111110
| `queryOptions` | Optional | [`UseQuery Options`](https://tanstack.com/query/v3/docs/react/reference/useQuery) | `{}` | `react-query` options for the `getMany` query |
112111
| `reference` | Required | `string` | - | The name of the resource for the referenced records, e.g. 'books' |
@@ -152,7 +151,7 @@ export const AuthorShow = () => (
152151
153152
## `render`
154153
155-
Alternatively, you can pass a `render` function prop instead of children. The `render` prop will receive the `ListContext` as arguments, allowing to inline the render logic for both the list and the pagination.
154+
Alternatively, you can pass a `render` function prop instead of children. The `render` prop will receive the `ListContext` as arguments, allowing to inline the render logic.
156155
When receiving a `render` function prop the `<ReferenceManyFieldBase>` component will ignore the children property.
157156
158157
```jsx
@@ -293,20 +292,6 @@ const AuthorEdit = () => (
293292
294293
{% endraw %}
295294
296-
## `pagination`
297-
298-
If you want to allow users to paginate the list, pass a `<Pagination>` element as the `pagination` prop:
299-
300-
```jsx
301-
import { Pagination } from 'react-admin';
302-
303-
<ReferenceManyFieldBase pagination={<Pagination />} reference="comments" target="post_id">
304-
...
305-
</ReferenceManyFieldBase>
306-
```
307-
308-
***Note:*** The pagination prop will be ignored if a render prop is specified
309-
310295
## `perPage`
311296
312297
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/ReferenceArrayFieldBase.spec.tsx‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
Basic,
55
Errored,
66
Loading,
7-
WithPagination,
87
WithRenderProp,
98
} from './ReferenceArrayFieldBase.stories';
109

@@ -71,24 +70,6 @@ describe('ReferenceArrayFieldBase', () => {
7170
});
7271
});
7372

74-
it('should render pagination', async () => {
75-
render(<WithPagination />);
76-
await waitFor(() => {
77-
expect(screen.queryByText('1 - 3 of 8')).not.toBeNull();
78-
expect(screen.queryByText('Next Page')).not.toBeNull();
79-
expect(screen.queryByText('Previous Page')).not.toBeNull();
80-
});
81-
screen.getByText('Next Page').click();
82-
await waitFor(() => {
83-
expect(screen.queryByText('4 - 6 of 8')).not.toBeNull();
84-
});
85-
screen.getByText('Previous Page').click();
86-
87-
await waitFor(() => {
88-
expect(screen.queryByText('1 - 3 of 8')).not.toBeNull();
89-
});
90-
});
91-
9273
it('should support renderProp', async () => {
9374
render(<WithRenderProp />);
9475
await waitFor(() => {
@@ -102,12 +83,4 @@ describe('ReferenceArrayFieldBase', () => {
10283
expect(screen.queryByText('Charlie Watts')).not.toBeNull();
10384
});
10485
});
105-
106-
it('should not render pagination when given a render prop', async () => {
107-
render(<WithRenderProp pagination={<p>Custom Pagination</p>} />);
108-
await waitFor(() => {
109-
expect(screen.queryByText('John Lennon')).not.toBeNull();
110-
});
111-
expect(screen.queryByText('Custom Pagination')).toBeNull();
112-
});
11386
});

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

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -67,31 +67,6 @@ export const Basic = ({
6767
</TestMemoryRouter>
6868
);
6969

70-
export const WithPagination = () => (
71-
<TestMemoryRouter initialEntries={['/bands/1/show']}>
72-
<CoreAdmin dataProvider={defaultDataProvider}>
73-
<Resource name="artists" />
74-
<Resource
75-
name="bands"
76-
show={
77-
<ShowBase resource="bands" id={1}>
78-
<ReferenceArrayFieldBase
79-
source="members"
80-
reference="artists"
81-
pagination={<Pagination />}
82-
perPage={3}
83-
>
84-
<MyReferenceArrayField>
85-
<List source="name" />
86-
</MyReferenceArrayField>
87-
</ReferenceArrayFieldBase>
88-
</ShowBase>
89-
}
90-
/>
91-
</CoreAdmin>
92-
</TestMemoryRouter>
93-
);
94-
9570
const erroredDataProvider = {
9671
...defaultDataProvider,
9772
getMany: _resource => Promise.reject(new Error('Error')),
@@ -110,10 +85,8 @@ export const Loading = () => (
11085

11186
export const WithRenderProp = ({
11287
dataProvider = defaultDataProvider,
113-
pagination,
11488
}: {
11589
dataProvider?: DataProvider;
116-
pagination?: React.ReactElement;
11790
}) => (
11891
<TestMemoryRouter initialEntries={['/bands/1/show']}>
11992
<CoreAdmin
@@ -136,7 +109,6 @@ export const WithRenderProp = ({
136109
<ReferenceArrayFieldBase
137110
source="members"
138111
reference="artists"
139-
pagination={pagination}
140112
render={({ data, isPending, error }) => {
141113
if (isPending) {
142114
return <p>Loading...</p>;
@@ -189,26 +161,3 @@ const List = ({ source }: { source: string }) => {
189161
</p>
190162
);
191163
};
192-
193-
const Pagination = () => {
194-
const { page = 1, setPage, total = 0, perPage = 0 } = useListContext();
195-
const nextPage = () => {
196-
setPage?.(page + 1);
197-
};
198-
const previousPage = () => {
199-
setPage?.(page - 1);
200-
};
201-
return (
202-
<div>
203-
<button disabled={page <= 1} onClick={previousPage}>
204-
Previous Page
205-
</button>
206-
<span>
207-
{`${(page - 1) * perPage + 1} - ${Math.min(page * perPage, total)} of ${total}`}
208-
</span>
209-
<button disabled={page >= total / perPage} onClick={nextPage}>
210-
Next Page
211-
</button>
212-
</div>
213-
);
214-
};

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ export const ReferenceArrayFieldBase = <
7474
const {
7575
children,
7676
render,
77-
pagination,
7877
filter,
7978
page = 1,
8079
perPage,
@@ -110,7 +109,6 @@ export const ReferenceArrayFieldBase = <
110109
<ResourceContextProvider value={reference}>
111110
<ListContextProvider value={controllerProps}>
112111
{render ? render(controllerProps) : children}
113-
{!render && pagination}
114112
</ListContextProvider>
115113
</ResourceContextProvider>
116114
);
@@ -124,7 +122,6 @@ export interface ReferenceArrayFieldBaseProps<
124122
render?: (props: ListControllerResult<ReferenceRecordType>) => ReactElement;
125123
filter?: FilterPayload;
126124
page?: number;
127-
pagination?: ReactElement;
128125
perPage?: number;
129126
reference: string;
130127
sort?: SortPayload;

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

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
Basic,
55
Errored,
66
Loading,
7-
WithPagination,
87
WithRenderProp,
98
} from './ReferenceManyFieldBase.stories';
109

@@ -70,24 +69,6 @@ describe('ReferenceManyFieldBase', () => {
7069
});
7170
});
7271

73-
it('should render pagination', async () => {
74-
render(<WithPagination />);
75-
await waitFor(() => {
76-
expect(screen.queryByText('1 - 2 of 3')).not.toBeNull();
77-
expect(screen.queryByText('Next Page')).not.toBeNull();
78-
expect(screen.queryByText('Previous Page')).not.toBeNull();
79-
});
80-
screen.getByText('Next Page').click();
81-
await waitFor(() => {
82-
expect(screen.queryByText('3 - 3 of 3')).not.toBeNull();
83-
});
84-
screen.getByText('Previous Page').click();
85-
86-
await waitFor(() => {
87-
expect(screen.queryByText('1 - 2 of 3')).not.toBeNull();
88-
});
89-
});
90-
9172
describe('with render prop', () => {
9273
it('should display an error if error is defined', async () => {
9374
jest.spyOn(console, 'error')
@@ -156,13 +137,5 @@ describe('ReferenceManyFieldBase', () => {
156137
).not.toBeNull();
157138
});
158139
});
159-
160-
it('should not render pagination when receiving a render prop', async () => {
161-
render(<WithRenderProp pagination={<p>Custom Pagination</p>} />);
162-
await waitFor(() => {
163-
expect(screen.queryByText('War and Peace')).not.toBeNull();
164-
});
165-
expect(screen.queryByText('Custom Pagination')).toBeNull();
166-
});
167140
});
168141
});

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

Lines changed: 0 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -202,49 +202,10 @@ export const Loading = ({ dataProvider = dataProviderWithAuthorsLoading }) => (
202202
</TestMemoryRouter>
203203
);
204204

205-
export const WithPagination = ({ dataProvider = dataProviderWithAuthors }) => (
206-
<TestMemoryRouter initialEntries={['/authors/1/show']}>
207-
<CoreAdmin
208-
dataProvider={dataProvider}
209-
queryClient={
210-
new QueryClient({
211-
defaultOptions: {
212-
queries: {
213-
retry: false,
214-
},
215-
},
216-
})
217-
}
218-
>
219-
<Resource name="books" />
220-
<Resource
221-
name="authors"
222-
show={
223-
<ShowBase>
224-
<ReferenceManyFieldBase
225-
target="author"
226-
source="id"
227-
reference="books"
228-
perPage={2}
229-
pagination={<Pagination />}
230-
>
231-
<MyReferenceManyField>
232-
<List source="title" />
233-
</MyReferenceManyField>
234-
</ReferenceManyFieldBase>
235-
</ShowBase>
236-
}
237-
/>
238-
</CoreAdmin>
239-
</TestMemoryRouter>
240-
);
241-
242205
export const WithRenderProp = ({
243206
dataProvider = dataProviderWithAuthors,
244-
pagination,
245207
}: {
246208
dataProvider?: any;
247-
pagination?: React.ReactNode;
248209
}) => (
249210
<TestMemoryRouter initialEntries={['/books/1/show']}>
250211
<CoreAdmin
@@ -268,7 +229,6 @@ export const WithRenderProp = ({
268229
reference="books"
269230
target="author"
270231
source="id"
271-
pagination={pagination}
272232
render={({ error, isPending, data }) => {
273233
if (isPending) {
274234
return <p>Loading...</p>;
@@ -320,26 +280,3 @@ const List = ({ source }: { source: string }) => {
320280
</p>
321281
);
322282
};
323-
324-
const Pagination = () => {
325-
const { page = 1, setPage, total = 0, perPage = 0 } = useListContext();
326-
const nextPage = () => {
327-
setPage?.(page + 1);
328-
};
329-
const previousPage = () => {
330-
setPage?.(page - 1);
331-
};
332-
return (
333-
<div>
334-
<button disabled={page <= 1} onClick={previousPage}>
335-
Previous Page
336-
</button>
337-
<span>
338-
{`${(page - 1) * perPage + 1} - ${Math.min(page * perPage, total)} of ${total}`}
339-
</span>
340-
<button disabled={page >= total / perPage} onClick={nextPage}>
341-
Next Page
342-
</button>
343-
</div>
344-
);
345-
};

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,6 @@ export const ReferenceManyFieldBase = <
6767
empty,
6868
filter = defaultFilter,
6969
page = 1,
70-
pagination = null,
7170
perPage = 25,
7271
record,
7372
reference,
@@ -129,7 +128,6 @@ export const ReferenceManyFieldBase = <
129128
<ResourceContextProvider value={reference}>
130129
<ListContextProvider value={controllerProps}>
131130
{render ? render(controllerProps) : children}
132-
{!render && pagination}
133131
</ListContextProvider>
134132
</ResourceContextProvider>
135133
);
@@ -145,7 +143,6 @@ export interface ReferenceManyFieldBaseProps<
145143
children?: ReactNode;
146144
render?: (props: ListControllerResult<ReferenceRecordType>) => ReactNode;
147145
empty?: ReactNode;
148-
pagination?: ReactNode;
149146
}
150147

151148
const defaultFilter = {};

0 commit comments

Comments
 (0)