add renderprops to List component

Author: ThieryMichel

docs/List.md

@@ -55,7 +55,8 @@ You can find more advanced examples of `<List>` usage in the [demos](./Demos.md)
 
 | Prop                      | Required | Type           | Default        | Description                                                                                  |
 |---------------------------|----------|----------------|----------------|----------------------------------------------------------------------------------------------|
-| `children`                | Required | `ReactNode`    | -              | The components rendering the list of records.                                          |
+| `children`                | Required if no render | `ReactNode`    | -              | The components rendering the list of records.                                          |
+| `render`                | Required if no children | `(listContext) => ReactNode`    | -              | The components rendering the list of records.                                          |
 | `actions`                 | Optional | `ReactElement` | -              | The actions to display in the toolbar.                                                       |
 | `aside`                   | Optional | `ReactElement` | -              | The component to display on the side of the list.                                            |
 | `component`               | Optional | `Component`    | `Card`         | The component to render as the root element.                                                 |
@@ -79,6 +80,33 @@ You can find more advanced examples of `<List>` usage in the [demos](./Demos.md)
 
 Additional props are passed down to the root component (a MUI `<Card>` by default).
 
+## `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`
 
 By default, the `<List>` view displays a toolbar on top of the list. It contains:

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

@@ -23,6 +23,7 @@ import {
     Default,
     SelectAllLimit,
     Themed,
+    WithRenderProp,
 } from './List.stories';
 
 const theme = createTheme(defaultTheme);
@@ -325,6 +326,19 @@ describe('<List />', () => {
         });
     });
 
+    it('should render a list page using render prop', async () => {
+        render(<WithRenderProp />);
+        expect(screen.getByText('Loading...')).toBeDefined();
+
+        await waitFor(() => {
+            screen.getByText('1-10 of 13');
+        });
+        screen.getByText('War and Peace (1869)');
+        screen.getByText(
+            'A historical novel that intertwines the lives of Russian aristocrats with the events of the Napoleonic wars.'
+        );
+    });
+
     describe('title', () => {
         it('should display by default the title of the resource', async () => {
             render(<Basic />);

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

@@ -844,3 +844,32 @@ export const Themed = () => (
         </Admin>
     </TestMemoryRouter>
 );
+
+export const WithRenderProp = () => (
+    <TestMemoryRouter initialEntries={['/books']}>
+        <Admin dataProvider={defaultDataProvider}>
+            <Resource
+                name="books"
+                list={() => (
+                    <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}
+                                />
+                            );
+                        }}
+                    />
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);

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

@@ -20,6 +20,7 @@ import { Loading } from '../layout';
  * - actions
  * - aside: Side Component
  * - children: List Layout
+ * - render: alternative to children Function to render the List Layout, receive the list context as argument
  * - component
  * - disableAuthentication
  * - disableSyncWithLocation

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

@@ -195,7 +195,7 @@ export interface ListViewProps<RecordType extends RaRecord = any> {
      *     </List>
      * );
      */
-    children: ReactNode;
+    children?: ReactNode;
 
     /**
      * A function rendering the list of records. Take the list controller as argument.