add render prop on ReferenceOneFieldBase

Author: ThieryMichel

docs/ListBase.md

@@ -69,7 +69,7 @@ The `<ListBase>` component accepts the same props as [`useListController`](./use
 These are a subset of the props accepted by `<List>` - only the props that change data fetching, and not the props related to the user interface.
 
 In addition, `<ListBase>` renders its children components inside a `ListContext`. Check [the `<List children>` documentation](./List.md#children) for usage examples.
-Alternatively you can pass a render function to the props, in place of children. This function will receive the listContext as argument. Check [the `<List render>` documentation](./List.md#render) for usage examples.
+Alternatively you can pass a render function to the props, in place of children. This function will receive the listContext as argument. 
 
 ## Security
 

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

@@ -41,8 +41,8 @@ describe('ReferenceManyFieldBase', () => {
             return <div>{resource}</div>;
         };
         const dataProvider = testDataProvider({
+            // @ts-ignore
             getList: () =>
-                // @ts-ignore
                 Promise.resolve({ data: [{ id: 1 }, { id: 2 }], total: 2 }),
         });
         render(

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

@@ -334,9 +334,9 @@ export const WithRenderPagination = ({
                             reference="books"
                             perPage={2}
                             renderPagination={({
-                                page,
+                                page = 0,
                                 setPage,
-                                total,
+                                total = 0,
                                 perPage,
                             }) => {
                                 const nextPage = () => {
@@ -353,9 +353,7 @@ export const WithRenderPagination = ({
                                         >
                                             previous page
                                         </button>
-                                        {(page - 1) * perPage + 1} -{' '}
-                                        {Math.min(page * perPage, total)} of{' '}
-                                        {total}
+                                        {`${(page - 1) * perPage + 1} - ${Math.min(page * perPage, total)} of ${total}`}
                                         <button
                                             disabled={page >= total / perPage}
                                             onClick={nextPage}
@@ -420,12 +418,17 @@ const List = ({ source }: { source: string }) => {
 };
 
 const Pagination = () => {
-    const { page, setPage, total, perPage } = useListContextWithProps();
+    const {
+        page = 1,
+        setPage,
+        total = 0,
+        perPage = 0,
+    } = useListContextWithProps();
     const nextPage = () => {
-        setPage(page + 1);
+        setPage?.(page + 1);
     };
     const previousPage = () => {
-        setPage(page - 1);
+        setPage?.(page - 1);
     };
     return (
         <div>

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

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import {
+    Basic,
+    Loading,
+    WithRenderProp,
+} from './ReferenceOneFieldBase.stories';
+
+describe('ReferenceOneFieldBase', () => {
+    it('should pass the loading state', async () => {
+        jest.spyOn(console, 'error')
+            .mockImplementationOnce(() => {})
+            .mockImplementationOnce(() => {});
+
+        render(<Loading />);
+        await waitFor(() => {
+            expect(screen.queryByText('Loading...')).not.toBeNull();
+        });
+    });
+
+    it('should render the data', async () => {
+        render(<Basic />);
+        await waitFor(() => {
+            expect(screen.queryByText('9780393966473')).not.toBeNull();
+        });
+    });
+
+    describe('with render prop', () => {
+        it('should pass the loading state', async () => {
+            jest.spyOn(console, 'error')
+                .mockImplementationOnce(() => {})
+                .mockImplementationOnce(() => {});
+
+            const dataProviderWithAuthorsLoading = {
+                getOne: () =>
+                    Promise.resolve({
+                        data: {
+                            id: 1,
+                            title: 'War and Peace',
+                            author: 1,
+                            summary:
+                                "War and Peace broadly focuses on Napoleon's invasion of Russia, and the impact it had on Tsarist society. The book explores themes such as revolution, revolution and empire, the growth and decline of various states and the impact it had on their economies, culture, and society.",
+                            year: 1869,
+                        },
+                    }),
+                getMany: _resource => new Promise(() => {}),
+            } as any;
+
+            render(
+                <WithRenderProp dataProvider={dataProviderWithAuthorsLoading} />
+            );
+            await waitFor(() => {
+                expect(screen.queryByText('Loading...')).not.toBeNull();
+            });
+        });
+
+        it('should render the data', async () => {
+            render(<WithRenderProp />);
+            await waitFor(() => {
+                expect(screen.queryByText('9780393966473')).not.toBeNull();
+            });
+        });
+    });
+});

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

@@ -0,0 +1,119 @@
+import * as React from 'react';
+
+import {
+    CoreAdminContext,
+    RecordContextProvider,
+    ReferenceOneFieldBase,
+    ResourceContextProvider,
+    TestMemoryRouter,
+    useRecordContext,
+    useReferenceOneFieldController,
+} from '../..';
+
+export default { title: 'ra-ui-materialui/fields/ReferenceOneFieldBase' };
+
+const defaultDataProvider = {
+    getManyReference: () =>
+        Promise.resolve({
+            data: [{ id: 1, ISBN: '9780393966473', genre: 'novel' }],
+            total: 1,
+        }),
+} as any;
+
+const Wrapper = ({ children, dataProvider = defaultDataProvider }) => (
+    <TestMemoryRouter initialEntries={['/books/1/show']}>
+        <CoreAdminContext dataProvider={dataProvider}>
+            <ResourceContextProvider value="books">
+                <RecordContextProvider
+                    value={{ id: 1, title: 'War and Peace' }}
+                >
+                    {children}
+                </RecordContextProvider>
+            </ResourceContextProvider>
+        </CoreAdminContext>
+    </TestMemoryRouter>
+);
+
+export const Basic = () => (
+    <Wrapper>
+        <ReferenceOneFieldBase reference="book_details" target="book_id">
+            <MyReferenceOneField reference="book_details" target="book_id">
+                <TextField source="ISBN" />
+            </MyReferenceOneField>
+        </ReferenceOneFieldBase>
+    </Wrapper>
+);
+
+const dataProviderWithLoading = {
+    getManyReference: () => new Promise(() => {}),
+} as any;
+
+export const Loading = () => (
+    <Wrapper dataProvider={dataProviderWithLoading}>
+        <ReferenceOneFieldBase reference="book_details" target="book_id">
+            <MyReferenceOneField reference="book_details" target="book_id">
+                <TextField source="ISBN" />
+            </MyReferenceOneField>
+        </ReferenceOneFieldBase>
+    </Wrapper>
+);
+
+export const WithRenderProp = ({
+    dataProvider = defaultDataProvider,
+}: {
+    dataProvider?: any;
+}) => {
+    return (
+        <Wrapper dataProvider={dataProvider}>
+            <ReferenceOneFieldBase
+                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>
+    );
+};
+
+const MyReferenceOneField = ({
+    reference,
+    target,
+    children,
+}: {
+    children: React.ReactNode;
+    reference: string;
+    target: string;
+}) => {
+    const context = useReferenceOneFieldController({
+        reference,
+        target,
+    });
+
+    if (context.isPending) {
+        return <p>Loading...</p>;
+    }
+
+    if (context.error) {
+        return <p style={{ color: 'red' }}>{context.error.toString()}</p>;
+    }
+    return children;
+};
+
+const TextField = ({ source }) => {
+    const record = useRecordContext();
+    return <span>{record ? record[source] : ''}</span>;
+};

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

@@ -10,6 +10,7 @@ import { useGetPathForRecord } from '../../routing';
 import type { UseReferenceFieldControllerResult } from './useReferenceFieldController';
 import type { RaRecord } from '../../types';
 import type { LinkToType } from '../../routing';
+import { UseReferenceResult } from '../useReference';
 
 /**
  * Render the related record in a one-to-one relationship
@@ -29,6 +30,7 @@ export const ReferenceOneFieldBase = <
 ) => {
     const {
         children,
+        render,
         record,
         reference,
         source = 'id',
@@ -79,7 +81,7 @@ export const ReferenceOneFieldBase = <
         <ResourceContextProvider value={reference}>
             <ReferenceFieldContextProvider value={context}>
                 <RecordContextProvider value={context.referenceRecord}>
-                    {children}
+                    {render ? render(controllerProps) : children}
                 </RecordContextProvider>
             </ReferenceFieldContextProvider>
         </ResourceContextProvider>
@@ -94,6 +96,7 @@ export interface ReferenceOneFieldBaseProps<
         ReferenceRecordType
     > {
     children?: ReactNode;
+    render?: (props: UseReferenceResult<ReferenceRecordType>) => ReactNode;
     link?: LinkToType<ReferenceRecordType>;
     empty?: ReactNode;
     resource?: string;

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

@@ -80,6 +80,6 @@ export const ReferenceManyField = <
 
 export interface ReferenceManyFieldProps<
     RecordType extends Record<string, any> = Record<string, any>,
-    ReferenceRecordType extends Record<string, any> = Record<string, any>,
+    ReferenceRecordType extends RaRecord = RaRecord,
 > extends Omit<FieldProps<RecordType>, 'source'>,
         ReferenceManyFieldBaseProps<RecordType, ReferenceRecordType> {}