add renderProp on edit component

Author: ThieryMichel

docs/Edit.md

@@ -66,6 +66,7 @@ You can customize the `<Edit>` 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`: a function to renders the form, receive the editContext as argument.
 * `className`: passed to the root component
 * [`component`](#component): override the root component
 * [`disableAuthentication`](#disableauthentication): disable the authentication check
@@ -80,6 +81,33 @@ You can customize the `<Edit>` component using the following props:
 * [`title`](#title): override the page title
 * [`transform`](#transform): transform the form data before calling `dataProvider.update()`
 
+## `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.
+
+{% raw %}
+```tsx
+<List
+    render={({ error, isPending }) => {
+        if (isPending) {
+            return <div>Loading...</div>;
+        }
+        if (error) {
+            return <div>Error: {error.message}</div>;
+        }
+        return (
+            <SimpleList
+                primaryText="%{title} (%{year})"
+                secondaryText="%{summary}"
+                tertiaryText={record => record.year}
+            />
+        );
+    }}
+/>
+```
+{% endraw %}
+
 ## `actions`
 
 You can replace the list of default actions by your own elements using the `actions` prop:

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

@@ -29,6 +29,7 @@ import {
     NotificationTranslated,
     EmptyWhileLoading,
     Themed,
+    WithRenderProp,
 } from './Edit.stories';
 
 describe('<Edit />', () => {
@@ -340,6 +341,13 @@ describe('<Edit />', () => {
         });
     });
 
+    it('should allow tu use render prop instead of children', async () => {
+        render(<WithRenderProp />);
+        await waitFor(() => {
+            expect(screen.queryAllByText('War and Peace')).toHaveLength(1);
+        });
+    });
+
     describe('onSuccess prop', () => {
         it('should allow to override the default success side effects', async () => {
             const dataProvider = {

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

@@ -397,3 +397,24 @@ export const Themed = () => (
         </Admin>
     </TestMemoryRouter>
 );
+
+export const WithRenderProp = () => (
+    <TestMemoryRouter initialEntries={['/books/1/Edit']}>
+        <Admin dataProvider={dataProvider}>
+            <Resource
+                name="books"
+                edit={() => (
+                    <Edit
+                        render={editContext => {
+                            return editContext.record ? (
+                                <span>{editContext.record.title}</span>
+                            ) : null;
+                        }}
+                    >
+                        <BookTitle />
+                    </Edit>
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);

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

@@ -76,6 +76,7 @@ export const Edit = <RecordType extends RaRecord = any>(
         loading = defaultLoading,
         ...rest
     } = props;
+
     return (
         <EditBase<RecordType>
             resource={resource}
@@ -95,7 +96,7 @@ export const Edit = <RecordType extends RaRecord = any>(
 
 export interface EditProps<RecordType extends RaRecord = any, ErrorType = Error>
     extends EditBaseProps<RecordType, ErrorType>,
-        Omit<EditViewProps, 'children'> {}
+        Omit<EditViewProps, 'children' | 'render'> {}
 
 const defaultLoading = <Loading />;
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ReactElement, ElementType } from 'react';
+import type { ReactElement, ElementType, ReactNode } from 'react';
 import {
     Card,
     CardContent,
@@ -9,7 +9,11 @@ import {
     type Theme,
 } from '@mui/material';
 import clsx from 'clsx';
-import { useEditContext, useResourceDefinition } from 'ra-core';
+import {
+    EditControllerResult,
+    useEditContext,
+    useResourceDefinition,
+} from 'ra-core';
 
 import { EditActions } from './EditActions';
 import { Title } from '../layout';
@@ -22,6 +26,7 @@ export const EditView = (props: EditViewProps) => {
         actions,
         aside,
         children,
+        render,
         className,
         component: Content = Card,
         emptyWhileLoading = false,
@@ -30,11 +35,13 @@ export const EditView = (props: EditViewProps) => {
     } = props;
 
     const { hasShow } = useResourceDefinition();
-    const { resource, defaultTitle, record, isPending } = useEditContext();
+    const editContext = useEditContext();
+
+    const { resource, defaultTitle, record, isPending } = editContext;
 
     const finalActions =
         typeof actions === 'undefined' && hasShow ? defaultActions : actions;
-    if (!children || (!record && isPending && emptyWhileLoading)) {
+    if ((!children && !render) || (!record && isPending && emptyWhileLoading)) {
         return null;
     }
 
@@ -54,7 +61,15 @@ export const EditView = (props: EditViewProps) => {
                 })}
             >
                 <Content className={EditClasses.card}>
-                    {record ? children : <CardContent>&nbsp;</CardContent>}
+                    {record ? (
+                        render ? (
+                            render(editContext)
+                        ) : (
+                            children
+                        )
+                    ) : (
+                        <CardContent>&nbsp;</CardContent>
+                    )}
                 </Content>
                 {aside}
             </div>
@@ -70,6 +85,7 @@ export interface EditViewProps
     emptyWhileLoading?: boolean;
     title?: string | ReactElement | false;
     sx?: SxProps<Theme>;
+    render?: (editContext: EditControllerResult) => ReactNode;
 }
 
 const PREFIX = 'RaEdit';