add render prop to ReferenceOneField

Author: ThieryMichel

docs/ReferenceOneField.md

@@ -60,6 +60,7 @@ const BookShow = () => (
 | `reference`    | Required | `string`                                    | -                                | The name of the resource for the referenced records, e.g. 'book_details'            |
 | `target`       | Required | string                                      | -                                | Target field carrying the relationship on the referenced resource, e.g. 'book_id'   |
 | `children`     | Optional | `Element`                                   | -                                | The Field element used to render the referenced record                              |
+| `render`     | Optional | `(ReferenceFieldContext) => Element`                                   | -                                | A function that takes the `ReferenceFieldContext` and returns a React element                              |
 | `empty`        | Optional | `ReactNode`                         | -                                | The text or element to display when the referenced record is empty                   |
 | `filter`       | Optional | `Object`                                    | `{}`                             | Used to filter referenced records                                                   |
 | `link`         | Optional | `string | Function`                         | `edit`                           | Target of the link wrapping the rendered child. Set to `false` to disable the link. |
@@ -80,6 +81,34 @@ For instance, if you want to render both the genre and the ISBN for a book:
 </ReferenceOneField>
 ```
 
+
+## `render`
+
+Alternatively to children you can pass a `render` function prop to `<ReferenceOneFieldBase>`. The `render` function prop will receive the `ReferenceFieldContext` as its argument, allowing to inline the render logic.
+When receiving a `render` function prop the `<ReferenceOneFieldBase>` component will ignore the children property.
+
+```jsx
+<ReferenceOneField
+    reference="book_details"
+    target="book_id"
+    render={({ isPending, error, referenceRecord }) => {
+        if (isPending) {
+            return <Typography>Loading...</Typography>;
+        }
+
+        if (error) {
+            return <Typography className="error" >{error.toString()}</Typography>;
+        }
+        return (
+            <div>
+                <Typography>{referenceRecord ? referenceRecord.genre : ''}</Typography>
+                <Typography>{referenceRecord ? referenceRecord.ISBN : ''}</Typography>
+            </div>
+        );
+    }}
+/>
+```
+
 ## `empty`
 
 Use `empty` to customize the text displayed when the related record is empty.

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

@@ -9,6 +9,7 @@ import {
     EmptyText,
     Empty,
     Themed,
+    WithRenderProp,
 } from './ReferenceOneField.stories';
 
 describe('ReferenceOneField', () => {
@@ -54,6 +55,11 @@ describe('ReferenceOneField', () => {
         });
     });
 
+    it('should allow to render the referenceRecord using a render prop', async () => {
+        render(<WithRenderProp />);
+        await screen.findByText('9780393966473');
+    });
+
     describe('emptyText', () => {
         it('should render the emptyText prop when the record is not found', async () => {
             render(<EmptyText />);

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

@@ -568,3 +568,25 @@ export const Themed = () => (
         </ReferenceOneField>
     </Wrapper>
 );
+
+export const WithRenderProp = () => (
+    <Wrapper>
+        <ReferenceOneField
+            reference="book_details"
+            target="book_id"
+            render={({ isPending, error, referenceRecord }) => {
+                if (isPending) {
+                    return <p>Loading...</p>;
+                }
+
+                if (error) {
+                    return <p style={{ color: 'red' }}>{error.toString()}</p>;
+                }
+
+                return (
+                    <span>{referenceRecord ? referenceRecord.ISBN : ''}</span>
+                );
+            }}
+        />
+    </Wrapper>
+);

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

@@ -7,6 +7,7 @@ import {
     SortPayload,
     RaRecord,
     ReferenceOneFieldBase,
+    UseReferenceResult,
 } from 'ra-core';
 
 import { FieldProps } from './types';
@@ -37,6 +38,7 @@ export const ReferenceOneField = <
 
     const {
         children,
+        render,
         reference,
         source = 'id',
         target,
@@ -88,6 +90,7 @@ export interface ReferenceOneFieldProps<
     ReferenceRecordType extends RaRecord = RaRecord,
 > extends Omit<FieldProps<RecordType>, 'source' | 'emptyText'> {
     children?: ReactNode;
+    render?: (record: UseReferenceResult<ReferenceRecordType>) => ReactElement;
     reference: string;
     target: string;
     sort?: SortPayload;