add render prop on ReferenceArrayField (remove pagination from ReferenceArrayFieldBase)

Author: ThieryMichel

docs/ReferenceArrayField.md

@@ -86,6 +86,7 @@ You can change how the list of related records is rendered by passing a custom c
 | `source`       | Required | `string`                                                                          | -                                | Name of the property to display                                                                        |
 | `reference`    | Required | `string`                                                                          | -                                | The name of the resource for the referenced records, e.g. 'tags'                                       |
 | `children`     | Optional | `Element`                                                                         | `<SingleFieldList>`              | One or several elements that render a list of records based on a `ListContext`                         |
+| `render`     | Optional | `(listContext) => Element`                                                                         | `<SingleFieldList>`              | A function that takes a list context and render a list of records                         |
 | `filter`       | Optional | `Object`                                                                          | -                                | Filters to use when fetching the related records (the filtering is done client-side)                   |
 | `pagination`   | Optional | `Element`                                                                         | -                                | Pagination element to display pagination controls. empty by default (no pagination)                    |
 | `perPage`      | Optional | `number`                                                                          | 1000                             | Maximum number of results to display                                                                   |
@@ -179,6 +180,38 @@ export const PostShow = () => (
 );
 ```
 
+
+## `render`
+
+Alternatively to children you can pass a render prop to `<ReferenceArrayField>`. The render prop will receive the list context as its argument, allowing to inline the render logic .
+When receiving a render prop the `<ReferenceArrayField>` component will ignore the children property.
+
+
+```jsx
+<ReferenceArrayField
+    label="Tags"
+    reference="tags"
+    source="tag_ids"
+    render={(context) => {
+
+        if (context.isPending) {
+            return <p>Loading...</p>;
+        }
+
+        if (context.error) {
+            return <p className="error">{context.error.toString()}</p>;
+        }
+        return (
+            <p>
+                {listContext.data?.map((tag, index) => (
+                    <li key={index}>{tag.name}</li>
+                ))}
+            </p>
+        );
+    }}
+/>
+```
+
 ## `filter`
 
 `<ReferenceArrayField>` fetches all the related records, and displays them all, too. You can use the `filter` prop to filter the list of related records to display (this works by filtering the records client-side, after the fetch).

docs/ReferenceArrayFieldBase.md

@@ -142,6 +142,7 @@ const MyTagList = (props: { children: React.ReactNode }) => {
 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.
 When receiving a `render` prop the `<ReferenceArrayFieldBase>` component will ignore the children property.
 
+
 ```jsx
 <ReferenceArrayFieldBase
     label="Tags"

packages/ra-ui-materialui/src/field/ReferenceArrayField.spec.tsx

@@ -28,6 +28,7 @@ import { AdminContext } from '../AdminContext';
 import {
     DifferentIdTypes,
     WithPagination,
+    WithRenderProp,
 } from './ReferenceArrayField.stories';
 
 const theme = createTheme({});
@@ -333,6 +334,20 @@ describe('<ReferenceArrayField />', () => {
         expect(await screen.findByText('artist_3')).not.toBeNull();
     });
 
+    it('should support renderProp', async () => {
+        render(<WithRenderProp />);
+        await waitFor(() => {
+            expect(screen.queryByText('John Lennon')).not.toBeNull();
+            expect(screen.queryByText('Paul McCartney')).not.toBeNull();
+            expect(screen.queryByText('Ringo Star')).not.toBeNull();
+            expect(screen.queryByText('George Harrison')).not.toBeNull();
+            expect(screen.queryByText('Mick Jagger')).not.toBeNull();
+            expect(screen.queryByText('Keith Richards')).not.toBeNull();
+            expect(screen.queryByText('Ronnie Wood')).not.toBeNull();
+            expect(screen.queryByText('Charlie Watts')).not.toBeNull();
+        });
+    });
+
     describe('"Select all" button', () => {
         it('should be displayed if an item is selected', async () => {
             render(<WithPagination />);

packages/ra-ui-materialui/src/field/ReferenceArrayField.stories.tsx

@@ -164,3 +164,40 @@ export const WithPagination = () => (
         </ResourceDefinitionContextProvider>
     </AdminContext>
 );
+
+export const WithRenderProp = () => (
+    <AdminContext dataProvider={dataProvider} defaultTheme="light">
+        <ResourceDefinitionContextProvider definitions={resouceDefs}>
+            <Show resource="bands" id={1} sx={{ width: 600 }}>
+                <SimpleShowLayout>
+                    <TextField source="name" />
+                    <ReferenceArrayField
+                        source="members"
+                        reference="artists"
+                        render={({ data, isPending, error }) => {
+                            if (isPending) {
+                                return <p>Loading...</p>;
+                            }
+
+                            if (error) {
+                                return (
+                                    <p style={{ color: 'red' }}>
+                                        {error.toString()}
+                                    </p>
+                                );
+                            }
+
+                            return (
+                                <p>
+                                    {data?.map((datum, index) => (
+                                        <li key={index}>{datum.name}</li>
+                                    ))}
+                                </p>
+                            );
+                        }}
+                    />
+                </SimpleShowLayout>
+            </Show>
+        </ResourceDefinitionContextProvider>
+    </AdminContext>
+);

packages/ra-ui-materialui/src/field/ReferenceArrayField.tsx

@@ -80,6 +80,7 @@ export const ReferenceArrayField = <
     ReferenceRecordType extends RaRecord = RaRecord,
 >({
     pagination,
+    render,
     ...inProps
 }: ReferenceArrayFieldProps<RecordType, ReferenceRecordType>) => {
     const props = useThemeProps({
@@ -88,7 +89,11 @@ export const ReferenceArrayField = <
     });
     return (
         <ReferenceArrayFieldBase {...inProps}>
-            <PureReferenceArrayFieldView {...props} pagination={pagination} />
+            <PureReferenceArrayFieldView
+                {...props}
+                pagination={pagination}
+                render={render}
+            />
         </ReferenceArrayFieldBase>
     );
 };
@@ -107,8 +112,10 @@ export interface ReferenceArrayFieldViewProps
 export const ReferenceArrayFieldView = (
     props: ReferenceArrayFieldViewProps
 ) => {
-    const { children, pagination, className, sx } = props;
-    const { isPending, total } = useListContext();
+    const { children, render, pagination, className, sx } = props;
+    const listContext = useListContext();
+
+    const { isPending, total } = listContext;
 
     return (
         <Root className={className} sx={sx}>
@@ -118,7 +125,9 @@ export const ReferenceArrayFieldView = (
                 />
             ) : (
                 <span>
-                    {children || <SingleFieldList />}
+                    {(render ? render(listContext) : children) || (
+                        <SingleFieldList />
+                    )}
                     {pagination && total !== undefined ? pagination : null}
                 </span>
             )}