add render props to CreateBase component

Author: ThieryMichel

docs/CreateBase.md

@@ -46,6 +46,7 @@ export const BookCreate = () => (
 You can customize the `<CreateBase>` component using the following props, documented in the `<Create>` component:
 
 * `children`: the components that renders the form
+* `render`: alternative to children, a function that takes the EditController context and renders the form
 * [`disableAuthentication`](./Create.md#disableauthentication): disable the authentication check
 * [`mutationMode`](./Create.md#mutationmode): Switch to optimistic or undoable mutations (pessimistic by default)
 * [`mutationOptions`](./Create.md#mutationoptions): options for the `dataProvider.create()` call

packages/ra-core/src/controller/create/CreateBase.spec.tsx

@@ -8,6 +8,7 @@ import {
     DefaultTitle,
     NoAuthProvider,
     WithAuthProviderNoAccessControl,
+    WithRenderProp,
 } from './CreateBase.stories';
 
 describe('CreateBase', () => {
@@ -283,4 +284,22 @@ describe('CreateBase', () => {
         fireEvent.click(screen.getByText('FR'));
         await screen.findByText('Créer un article (fr)');
     });
+
+    it('should allow render props', async () => {
+        const dataProvider = testDataProvider({
+            // @ts-ignore
+            create: jest.fn((_, { data }) =>
+                Promise.resolve({ data: { id: 1, ...data } })
+            ),
+        });
+
+        render(<WithRenderProp dataProvider={dataProvider} />);
+        fireEvent.click(screen.getByText('save'));
+
+        await waitFor(() => {
+            expect(dataProvider.create).toHaveBeenCalledWith('posts', {
+                data: { test: 'test' },
+            });
+        });
+    });
 });

packages/ra-core/src/controller/create/CreateBase.stories.tsx

@@ -148,6 +148,29 @@ export const AccessControl = ({
     </CoreAdminContext>
 );
 
+export const WithRenderProp = ({
+    dataProvider = defaultDataProvider,
+    callTimeOptions,
+    ...props
+}: {
+    dataProvider?: DataProvider;
+    callTimeOptions?: SaveHandlerCallbacks;
+} & Partial<CreateBaseProps>) => (
+    <CoreAdminContext dataProvider={dataProvider}>
+        <CreateBase
+            {...defaultProps}
+            render={({ save }) => {
+                const handleClick = () => {
+                    if (!save) return;
+                    save({ test: 'test' }, callTimeOptions);
+                };
+
+                return <button onClick={handleClick}>save</button>;
+            }}
+        />
+    </CoreAdminContext>
+);
+
 const defaultDataProvider = testDataProvider({
     // @ts-ignore
     create: (_, { data }) => Promise.resolve({ data: { id: 1, ...data } }),

packages/ra-core/src/controller/create/CreateBase.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import {
     useCreateController,
     CreateControllerProps,
+    CreateControllerResult,
 } from './useCreateController';
 import { CreateContextProvider } from './CreateContextProvider';
 import { Identifier, RaRecord } from '../../types';
@@ -44,6 +45,7 @@ export const CreateBase = <
     MutationOptionsError = Error,
 >({
     children,
+    render,
     loading = null,
     ...props
 }: CreateBaseProps<RecordType, ResultRecordType, MutationOptionsError>) => {
@@ -62,11 +64,17 @@ export const CreateBase = <
         return loading;
     }
 
+    if (!render && !children) {
+        throw new Error(
+            '<CreateBase> 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}>
             <CreateContextProvider value={controllerProps}>
-                {children}
+                {render ? render(controllerProps) : children}
             </CreateContextProvider>
         </OptionalResourceContextProvider>
     );
@@ -81,6 +89,7 @@ export interface CreateBaseProps<
         MutationOptionsError,
         ResultRecordType
     > {
-    children: ReactNode;
+    children?: ReactNode;
+    render?: (props: CreateControllerResult<RecordType>) => ReactNode;
     loading?: ReactNode;
 }