add render props to EditBase component

Author: ThieryMichel

docs/EditBase.md

@@ -47,6 +47,7 @@ export const BookEdit = () => (
 You can customize the `<EditBase>` component using the following props, documented in the `<Edit>` component:
 
 * `children`: the components that renders the form
+* `render`: alternative to children, a function that takes the EditController context and renders the form
 * [`disableAuthentication`](./Edit.md#disableauthentication): disable the authentication check
 * [`id`](./Edit.md#id): the id of the record to edit
 * [`mutationMode`](./Edit.md#mutationmode): switch to optimistic or pessimistic mutations (undoable by default)

packages/ra-core/src/controller/edit/EditBase.spec.tsx

@@ -8,13 +8,14 @@ import {
     DefaultTitle,
     NoAuthProvider,
     WithAuthProviderNoAccessControl,
+    WithRenderProps,
 } from './EditBase.stories';
 
 describe('EditBase', () => {
     it('should give access to the save function', async () => {
         const dataProvider = testDataProvider({
-            // @ts-ignore
             getOne: () =>
+                // @ts-ignore
                 Promise.resolve({ data: { id: 12, test: 'previous' } }),
             update: jest.fn((_, { id, data, previousData }) =>
                 Promise.resolve({ data: { id, ...previousData, ...data } })
@@ -44,8 +45,8 @@ describe('EditBase', () => {
 
     it('should allow to override the onSuccess function', async () => {
         const dataProvider = testDataProvider({
-            // @ts-ignore
             getOne: () =>
+                // @ts-ignore
                 Promise.resolve({ data: { id: 12, test: 'previous' } }),
             update: jest.fn((_, { id, data, previousData }) =>
                 Promise.resolve({ data: { id, ...previousData, ...data } })
@@ -84,8 +85,8 @@ describe('EditBase', () => {
 
     it('should allow to override the onSuccess function at call time', async () => {
         const dataProvider = testDataProvider({
-            // @ts-ignore
             getOne: () =>
+                // @ts-ignore
                 Promise.resolve({ data: { id: 12, test: 'previous' } }),
             update: jest.fn((_, { id, data, previousData }) =>
                 Promise.resolve({ data: { id, ...previousData, ...data } })
@@ -128,8 +129,8 @@ describe('EditBase', () => {
     it('should allow to override the onError function', async () => {
         jest.spyOn(console, 'error').mockImplementation(() => {});
         const dataProvider = testDataProvider({
-            // @ts-ignore
             getOne: () =>
+                // @ts-ignore
                 Promise.resolve({ data: { id: 12, test: 'previous' } }),
             // @ts-ignore
             update: jest.fn(() => Promise.reject({ message: 'test' })),
@@ -162,8 +163,8 @@ describe('EditBase', () => {
 
     it('should allow to override the onError function at call time', async () => {
         const dataProvider = testDataProvider({
-            // @ts-ignore
             getOne: () =>
+                // @ts-ignore
                 Promise.resolve({ data: { id: 12, test: 'previous' } }),
             // @ts-ignore
             update: jest.fn(() => Promise.reject({ message: 'test' })),
@@ -199,8 +200,8 @@ describe('EditBase', () => {
 
     it('should allow to override the transform function', async () => {
         const dataProvider = testDataProvider({
-            // @ts-ignore
             getOne: () =>
+                // @ts-ignore
                 Promise.resolve({ data: { id: 12, test: 'previous' } }),
             update: jest.fn((_, { id, data, previousData }) =>
                 Promise.resolve({ data: { id, ...previousData, ...data } })
@@ -239,8 +240,8 @@ describe('EditBase', () => {
 
     it('should allow to override the transform function at call time', async () => {
         const dataProvider = testDataProvider({
-            // @ts-ignore
             getOne: () =>
+                // @ts-ignore
                 Promise.resolve({ data: { id: 12, test: 'previous' } }),
             update: jest.fn((_, { id, data, previousData }) =>
                 Promise.resolve({ data: { id, ...previousData, ...data } })
@@ -376,4 +377,32 @@ describe('EditBase', () => {
         fireEvent.click(screen.getByText('FR'));
         await screen.findByText("Modifier l'article Hello (fr)");
     });
+
+    it('should allow renderProp', async () => {
+        const dataProvider = testDataProvider({
+            getOne: () =>
+                // @ts-ignore
+                Promise.resolve({ data: { id: 12, test: 'Hello' } }),
+            update: jest.fn((_, { id, data, previousData }) =>
+                Promise.resolve({ data: { id, ...previousData, ...data } })
+            ),
+        });
+        render(
+            <WithRenderProps
+                dataProvider={dataProvider}
+                mutationMode="pessimistic"
+            />
+        );
+        await screen.findByText('12');
+        await screen.findByText('Hello');
+        fireEvent.click(screen.getByText('save'));
+
+        await waitFor(() => {
+            expect(dataProvider.update).toHaveBeenCalledWith('posts', {
+                id: 12,
+                data: { test: 'test' },
+                previousData: { id: 12, test: 'Hello' },
+            });
+        });
+    });
 });

packages/ra-core/src/controller/edit/EditBase.stories.tsx

@@ -16,6 +16,7 @@ import {
     mergeTranslations,
     useEditContext,
     useLocaleState,
+    MutationMode,
 } from '../..';
 
 export default {
@@ -149,6 +150,35 @@ export const AccessControl = ({
     </CoreAdminContext>
 );
 
+export const WithRenderProps = ({
+    dataProvider = defaultDataProvider,
+    mutationMode = 'optimistic',
+}: {
+    dataProvider?: DataProvider;
+    mutationMode?: MutationMode;
+}) => (
+    <CoreAdminContext dataProvider={dataProvider}>
+        <EditBase
+            mutationMode={mutationMode}
+            {...defaultProps}
+            render={({ record, save }) => {
+                const handleClick = () => {
+                    if (!save) return;
+
+                    save({ test: 'test' });
+                };
+                return (
+                    <>
+                        <p>{record?.id}</p>
+                        <p>{record?.test}</p>
+                        <button onClick={handleClick}>save</button>
+                    </>
+                );
+            }}
+        />
+    </CoreAdminContext>
+);
+
 const defaultDataProvider = testDataProvider({
     getOne: () =>
         // @ts-ignore

packages/ra-core/src/controller/edit/EditBase.tsx

@@ -2,7 +2,11 @@ import * as React from 'react';
 import { ReactNode } from 'react';
 
 import { RaRecord } from '../../types';
-import { useEditController, EditControllerProps } from './useEditController';
+import {
+    useEditController,
+    EditControllerProps,
+    EditControllerResult,
+} from './useEditController';
 import { EditContextProvider } from './EditContextProvider';
 import { OptionalResourceContextProvider } from '../../core';
 import { useIsAuthPending } from '../../auth';
@@ -38,6 +42,7 @@ import { useIsAuthPending } from '../../auth';
  */
 export const EditBase = <RecordType extends RaRecord = any, ErrorType = Error>({
     children,
+    render,
     loading = null,
     ...props
 }: EditBaseProps<RecordType, ErrorType>) => {
@@ -52,11 +57,17 @@ export const EditBase = <RecordType extends RaRecord = any, ErrorType = Error>({
         return loading;
     }
 
+    if (!render && !children) {
+        throw new Error(
+            "<EditBase> requires either a 'render' prop or 'children' prop"
+        );
+    }
+
     return (
         // We pass props.resource here as we don't need to create a new ResourceContext if the props is not provided
         <OptionalResourceContextProvider value={props.resource}>
             <EditContextProvider value={controllerProps}>
-                {children}
+                {render ? render(controllerProps) : children}
             </EditContextProvider>
         </OptionalResourceContextProvider>
     );
@@ -66,6 +77,7 @@ export interface EditBaseProps<
     RecordType extends RaRecord = RaRecord,
     ErrorType = Error,
 > extends EditControllerProps<RecordType, ErrorType> {
-    children: ReactNode;
+    children?: ReactNode;
+    render?: (props: EditControllerResult<RecordType, ErrorType>) => ReactNode;
     loading?: ReactNode;
 }