add render prop to Create

Author: ThieryMichel

docs/Create.md

@@ -58,6 +58,7 @@ You can customize the `<Create>` component using the following props:
 * [`actions`](#actions): override the actions toolbar with a custom component
 * [`aside`](#aside): component to render aside to the main content
 * `children`: the components that renders the form
+* `render`: Alternative to children. A function that renders the form, receive the create context as its argument
 * `className`: passed to the root component
 * [`component`](#component): override the root component
 * [`disableAuthentication`](#disableauthentication): disable the authentication check
@@ -70,6 +71,36 @@ You can customize the `<Create>` component using the following props:
 * [`title`](#title): override the page title
 * [`transform`](#transform): transform the form data before calling `dataProvider.create()`
 
+## `render`
+
+Alternatively to children you can pass a render prop to `<Create>`. The render prop will receive the create context as its argument, allowing to inline the render logic for the create form.
+When receiving a render prop the `<Create>` component will ignore the children property.
+
+{% raw %}
+```tsx
+<Create render={(createContext) => {
+    if (createContext.isPending) {
+        return <div>Loading...</div>;
+    }
+    if (createContext.error) {
+        return <div>Error: {error.message}</div>;
+    }
+
+    return (
+        <Box>
+            <h1>{`Create new ${createContext.resource}`}</h1>
+            <SimpleForm>
+                <TextInput source="title" validate={[required()]} />
+                <TextInput source="teaser" multiline={true} label="Short description" />
+                <RichTextInput source="body" />
+                <DateInput label="Publication date" source="published_at" defaultValue={new Date()} />
+            </SimpleForm>
+        </Box>
+    );
+}} />
+```
+{% endraw %}
+
 ## `actions`
 
 You can replace the list of default actions by your own elements using the `actions` prop:

docs/Edit.md

@@ -83,25 +83,39 @@ You can customize the `<Edit>` component using the following props:
 
 ## `render`
 
-Alternatively to children you can pass a render prop to `<List>`. The render prop will receive the list context as its argument, allowing to inline the render logic for both the list content.
-When receiving a render prop the `<List>` component will ignore the children property.
+Alternatively to children you can pass a render prop to `<Edit>`. The render prop will receive the edit context as its argument, allowing to inline the render logic for the edit form.
+When receiving a render prop the `<Edit>` component will ignore the children property.
 
 {% raw %}
 ```tsx
-<List
-    render={({ error, isPending }) => {
-        if (isPending) {
+<Edit
+    render={(listContext) => {
+        if (listContext.isPending) {
             return <div>Loading...</div>;
         }
-        if (error) {
+        if (listContext.error) {
             return <div>Error: {error.message}</div>;
         }
         return (
-            <SimpleList
-                primaryText="%{title} (%{year})"
-                secondaryText="%{summary}"
-                tertiaryText={record => record.year}
-            />
+            <div>
+                <h1>{`Edit ${listController.resource} #${listController.record.id}`}</h1>
+                <SimpleForm>
+                    <TextInput disabled label="Id" source="id" />
+                    <TextInput source="title" validate={required()} />
+                    <TextInput multiline source="teaser" validate={required()} />
+                    <RichTextInput source="body" validate={required()} />
+                    <DateInput label="Publication date" source="published_at" />
+                    <ReferenceManyField label="Comments" reference="comments" target="post_id">
+                        <DataTable>
+                            <DataTable.Col source="body" />
+                            <DataTable.Col source="created_at" field={DateField} />
+                            <DataTable.Col>
+                                <EditButton />
+                            </DataTable.Col>
+                        </DataTable>
+                    </ReferenceManyField>
+                </SimpleForm>
+            </div>
         );
     }}
 />

docs/List.md

@@ -82,7 +82,7 @@ Additional props are passed down to the root component (a MUI `<Card>` by defaul
 
 ## `render`
 
-Alternatively to children you can pass a render prop to `<List>`. The render prop will receive the list context as its argument, allowing to inline the render logic for both the list content.
+Alternatively to children you can pass a render prop to `<List>`. The render prop will receive the list context as its argument, allowing to inline the render logic for the list content.
 When receiving a render prop the `<List>` component will ignore the children property.
 
 {% raw %}

packages/ra-ui-materialui/src/detail/Create.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import expect from 'expect';
 import { CoreAdminContext, testDataProvider } from 'ra-core';
-import { screen, render } from '@testing-library/react';
+import { screen, render, waitFor } from '@testing-library/react';
 
 import { Create } from './Create';
 import {
@@ -12,6 +12,7 @@ import {
     NotificationDefault,
     NotificationTranslated,
     Themed,
+    WithRenderProp,
 } from './Create.stories';
 
 describe('<Create />', () => {
@@ -57,6 +58,13 @@ describe('<Create />', () => {
         );
     });
 
+    it('should support a render prop', async () => {
+        render(<WithRenderProp />);
+        await waitFor(() => {
+            expect(screen.queryByText('Create new books')).not.toBeNull();
+        });
+    });
+
     describe('title', () => {
         it('should display by default the title of the resource', async () => {
             render(<Basic />);

packages/ra-ui-materialui/src/detail/Create.stories.tsx

@@ -305,3 +305,22 @@ export const Themed = () => (
         </Admin>
     </TestMemoryRouter>
 );
+
+export const WithRenderProp = () => (
+    <TestMemoryRouter initialEntries={['/books/create']}>
+        <Admin dataProvider={dataProvider}>
+            <Resource
+                name="books"
+                create={() => (
+                    <Create
+                        render={createContext => {
+                            return (
+                                <div>{`Create new ${createContext.resource}`}</div>
+                            );
+                        }}
+                    />
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);

packages/ra-ui-materialui/src/detail/Create.tsx

@@ -22,6 +22,8 @@ import { Loading } from '../layout';
  *
  * The <Create> component accepts the following props:
  *
+ * - children: Component rendering the Form Layout
+ * - render: Alternative to children. A function to render the Form Layout. Receives the create context as its argument.
  * - actions
  * - aside
  * - component
@@ -66,7 +68,6 @@ export const Create = <
         name: PREFIX,
     });
 
-    useCheckMinimumRequiredProps('Create', ['children'], props);
     const {
         resource,
         record,
@@ -80,6 +81,13 @@ export const Create = <
         loading = defaultLoading,
         ...rest
     } = props;
+
+    if (!props.render && !props.children) {
+        throw new Error(
+            '<Create> requires either a `render` prop or `children` prop'
+        );
+    }
+
     return (
         <CreateBase<RecordType, ResultRecordType>
             resource={resource}
@@ -102,8 +110,11 @@ export interface CreateProps<
     RecordType extends Omit<RaRecord, 'id'> = any,
     MutationOptionsError = Error,
     ResultRecordType extends RaRecord = RecordType & { id: Identifier },
-> extends CreateBaseProps<RecordType, ResultRecordType, MutationOptionsError>,
-        Omit<CreateViewProps, 'children'> {}
+> extends Omit<
+            CreateBaseProps<RecordType, ResultRecordType, MutationOptionsError>,
+            'children' | 'render'
+        >,
+        CreateViewProps {}
 
 const defaultLoading = <Loading />;
 

packages/ra-ui-materialui/src/detail/CreateView.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import type { ElementType, ReactElement } from 'react';
+import type { ElementType, ReactElement, ReactNode } from 'react';
 import {
     Card,
     type ComponentsOverrides,
     styled,
     type SxProps,
     type Theme,
 } from '@mui/material';
-import { useCreateContext } from 'ra-core';
+import { CreateControllerResult, useCreateContext } from 'ra-core';
 import clsx from 'clsx';
 
 import { Title } from '../layout';
@@ -18,13 +18,16 @@ export const CreateView = (props: CreateViewProps) => {
         actions,
         aside,
         children,
+        render,
         className,
         component: Content = Card,
         title,
         ...rest
     } = props;
 
-    const { resource, defaultTitle } = useCreateContext();
+    const createContext = useCreateContext();
+
+    const { resource, defaultTitle } = createContext;
 
     return (
         <Root className={clsx('create-page', className)} {...rest}>
@@ -41,7 +44,9 @@ export const CreateView = (props: CreateViewProps) => {
                     [CreateClasses.noActions]: !actions,
                 })}
             >
-                <Content className={CreateClasses.card}>{children}</Content>
+                <Content className={CreateClasses.card}>
+                    {render ? render(createContext) : children}
+                </Content>
                 {aside}
             </div>
         </Root>
@@ -55,6 +60,8 @@ export interface CreateViewProps
     component?: ElementType;
     sx?: SxProps<Theme>;
     title?: string | ReactElement | false;
+    render?: (createContext: CreateControllerResult) => ReactNode;
+    children?: ReactNode;
 }
 
 const PREFIX = 'RaCreate';

packages/ra-ui-materialui/src/detail/Edit.tsx

@@ -65,7 +65,6 @@ export const Edit = <RecordType extends RaRecord = any>(
         name: PREFIX,
     });
 
-    useCheckMinimumRequiredProps('Edit', ['children'], props);
     const {
         resource,
         id,
@@ -79,6 +78,12 @@ export const Edit = <RecordType extends RaRecord = any>(
         ...rest
     } = props;
 
+    if (!props.render && !props.children) {
+        throw new Error(
+            '<Edit> requires either a `render` prop or `children` prop'
+        );
+    }
+
     return (
         <EditBase<RecordType>
             resource={resource}

packages/ra-ui-materialui/src/detail/EditView.tsx

@@ -41,7 +41,8 @@ export const EditView = (props: EditViewProps) => {
 
     const finalActions =
         typeof actions === 'undefined' && hasShow ? defaultActions : actions;
-    if ((!children && !render) || (!record && isPending && emptyWhileLoading)) {
+
+    if (!record && isPending && emptyWhileLoading) {
         return null;
     }
 

packages/ra-ui-materialui/src/list/List.tsx

@@ -80,6 +80,12 @@ export const List = <RecordType extends RaRecord = any>(
         name: PREFIX,
     });
 
+    if (!props.render && !props.children) {
+        throw new Error(
+            '<List> requires either a `render` prop or `children` prop'
+        );
+    }
+
     return (
         <ListBase<RecordType>
             debounce={debounce}