add render prop on InfiniteList

Author: ThieryMichel

docs/InfiniteList.md

@@ -58,9 +58,10 @@ The props are the same as [the `<List>` component](./List.md):
 
 | Prop                       | Required | Type           | Default                 | Description                                                                                  |
 |----------------------------|----------|----------------|-------------------------|----------------------------------------------------------------------------------------------|
-| `children`                 | Required | `ReactNode`    | -                       | The component to use to render the list of records.                                          |
+| `children`                 | Required if no render | `ReactNode`    | -                       | The component to use to render the list of records.                                          |
+| `render`                 | Required if no children | `ReactNode`    | -                       | A function that render the list of records, receives the list context as argument.                                          |
 | `actions`                  | Optional | `ReactElement` | -                       | The actions to display in the toolbar.                                                       |
-| `aside`                    | Optional | `ReactElement` | -                       | The component to display on the side of the list.                                            |
+| `aside`                    | Optional | `(listContext) => ReactElement` | -                       | The component to display on the side of the list.                                            |
 | `component`                | Optional | `Component`    | `Card`                  | The component to render as the root element.                                                 |
 | `debounce`                 | Optional | `number`       | `500`                   | The debounce delay in milliseconds to apply when users change the sort or filter parameters. |
 | `disable Authentication`   | Optional | `boolean`      | `false`                 | Set to `true` to disable the authentication check.                                           |
@@ -84,6 +85,33 @@ Check the [`<List>` component](./List.md) for details about each prop.
 
 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 `<InfiniteList>`. 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 `<InfiniteList>` component will ignore the children property.
+
+{% raw %}
+```tsx
+<InfiniteList
+    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 %}
+
 ## `pagination`
 
 You can replace the default "load on scroll" pagination (triggered by a component named `<InfinitePagination>`) by a custom pagination component. To get the pagination state and callbacks, you'll need to read the `InfinitePaginationContext`. 

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

@@ -1,14 +1,38 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 
-import { Themed } from './InfiniteList.stories';
+import { Themed, WithRenderProp } from './InfiniteList.stories';
 
 describe('<InfiniteList />', () => {
+    let originalIntersectionObserver;
+    beforeAll(() => {
+        originalIntersectionObserver = window.IntersectionObserver;
+        const intersectionObserverMock = () => ({
+            observe: () => null,
+            unobserve: () => null,
+        });
+        window.IntersectionObserver = jest
+            .fn()
+            .mockImplementation(intersectionObserverMock);
+    });
+    afterAll(() => {
+        window.IntersectionObserver = originalIntersectionObserver;
+    });
+
     it('should be customized by a theme', async () => {
         render(<Themed />);
         expect(screen.queryByTestId('themed-list').classList).toContain(
             'custom-class'
         );
     });
+    it('should render a list page using render prop', async () => {
+        render(<WithRenderProp />);
+        expect(screen.getByText('Loading...')).toBeDefined();
+
+        await waitFor(() => {
+            screen.getByText('War and Peace');
+            screen.getByText('Leo Tolstoy');
+        });
+    });
 });

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

@@ -478,3 +478,47 @@ export const Themed = () => (
         />
     </Admin>
 );
+
+export const WithRenderProp = () => (
+    <Admin
+        dataProvider={{
+            ...dataProvider,
+            getList: (resource, params) =>
+                dataProvider
+                    .getList(resource, params)
+                    .then(({ data, total }) => ({
+                        data,
+                        pageInfo: {
+                            hasNextPage:
+                                total! >
+                                params.pagination.page *
+                                    params.pagination.perPage,
+                            hasPreviousPage: params.pagination.page > 1,
+                        },
+                    })),
+        }}
+    >
+        <Resource
+            name="books"
+            list={() => (
+                <InfiniteList
+                    render={({ error, isPending }) => {
+                        if (isPending) {
+                            return <div>Loading...</div>;
+                        }
+                        if (error) {
+                            return <div>Error: {error.message}</div>;
+                        }
+                        return (
+                            <SimpleList
+                                primaryText="%{title}"
+                                secondaryText="%{author}"
+                                tertiaryText={record => record.year}
+                            />
+                        );
+                    }}
+                />
+            )}
+        />
+    </Admin>
+);

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

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