add render props to ListBase component

Author: ThieryMichel

docs/ListBase.md

@@ -69,6 +69,7 @@ The `<ListBase>` component accepts the same props as [`useListController`](./use
 These are a subset of the props accepted by `<List>` - only the props that change data fetching, and not the props related to the user interface.
 
 In addition, `<ListBase>` renders its children components inside a `ListContext`. Check [the `<List children>` documentation](./List.md#children) for usage examples.
+Alternatively you can pass a render function to the props, in place of children. This function will receive the listContext as argument. Check [the `<List render>` documentation](./List.md#render) for usage examples.
 
 ## Security
 

packages/ra-core/src/controller/list/InfiniteListBase.stories.tsx

@@ -246,6 +246,45 @@ DefaultTitle.argTypes = {
     },
 };
 
+export const WithRenderProps = () => (
+    <CoreAdminContext dataProvider={defaultDataProvider}>
+        <InfiniteListBase
+            resource="books"
+            perPage={5}
+            render={context => {
+                const {
+                    hasNextPage,
+                    fetchNextPage,
+                    isFetchingNextPage,
+                    hasPreviousPage,
+                    fetchPreviousPage,
+                    isFetchingPreviousPage,
+                } = context;
+                return (
+                    <div>
+                        {hasPreviousPage && (
+                            <button
+                                onClick={() => fetchPreviousPage()}
+                                disabled={isFetchingPreviousPage}
+                            >
+                                Previous
+                            </button>
+                        )}
+                        {hasNextPage && (
+                            <button
+                                onClick={() => fetchNextPage()}
+                                disabled={isFetchingNextPage}
+                            >
+                                Next
+                            </button>
+                        )}
+                    </div>
+                );
+            }}
+        />
+    </CoreAdminContext>
+);
+
 const Title = () => {
     const { defaultTitle } = useListContext();
     const [locale, setLocale] = useLocaleState();

packages/ra-core/src/controller/list/InfiniteListBase.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react';
 import {
     useInfiniteListController,
     InfiniteListControllerProps,
+    InfiniteListControllerResult,
 } from './useInfiniteListController';
 import { OptionalResourceContextProvider } from '../../core';
 import { RaRecord } from '../../types';
@@ -46,6 +47,7 @@ import { useIsAuthPending } from '../../auth';
  */
 export const InfiniteListBase = <RecordType extends RaRecord = any>({
     children,
+    render,
     loading = null,
     ...props
 }: InfiniteListBaseProps<RecordType>) => {
@@ -59,6 +61,12 @@ export const InfiniteListBase = <RecordType extends RaRecord = any>({
         return loading;
     }
 
+    if (!render && !children) {
+        throw new Error(
+            "<InfiniteListBase> 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}>
@@ -83,6 +91,7 @@ export const InfiniteListBase = <RecordType extends RaRecord = any>({
 
 export interface InfiniteListBaseProps<RecordType extends RaRecord = any>
     extends InfiniteListControllerProps<RecordType> {
-    children: ReactNode;
     loading?: ReactNode;
+    children?: ReactNode;
+    render?: (props: InfiniteListControllerResult<RecordType>) => ReactNode;
 }

packages/ra-core/src/controller/list/ListBase.stories.tsx

@@ -282,6 +282,69 @@ export const DefaultTitle = ({
     </CoreAdminContext>
 );
 
+export const WithRenderProps = ({
+    dataProvider = defaultDataProvider,
+}: {
+    dataProvider?: DataProvider;
+}) => (
+    <CoreAdminContext dataProvider={dataProvider}>
+        <ListBase
+            resource="books"
+            perPage={5}
+            render={controllerProps => {
+                const {
+                    data,
+                    error,
+                    isPending,
+                    sort,
+                    filterValues,
+                    page,
+                    perPage,
+                    setPage,
+                    total,
+                } = controllerProps;
+                const defaultValue = JSON.stringify({
+                    page,
+                    perPage,
+                    sort,
+                    filterValues,
+                });
+                if (isPending) {
+                    return <div>Loading...</div>;
+                }
+                if (error) {
+                    return <div>Error...</div>;
+                }
+
+                return (
+                    <div>
+                        <button
+                            disabled={page <= 1}
+                            onClick={() => setPage(page - 1)}
+                        >
+                            previous
+                        </button>
+                        <span>
+                            Page {page} of {Math.ceil(total / perPage)}
+                        </span>
+                        <button
+                            disabled={page >= total / perPage}
+                            onClick={() => setPage(page + 1)}
+                        >
+                            next
+                        </button>
+                        <ul>
+                            {data.map((record: any) => (
+                                <li key={record.id}>{record.title}</li>
+                            ))}
+                        </ul>
+                    </div>
+                );
+            }}
+        ></ListBase>
+    </CoreAdminContext>
+);
+
 DefaultTitle.args = {
     translations: 'default',
 };

packages/ra-core/src/controller/list/ListBase.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { useListController, ListControllerProps } from './useListController';
+import {
+    useListController,
+    ListControllerProps,
+    ListControllerResult,
+} from './useListController';
 import { OptionalResourceContextProvider } from '../../core';
 import { RaRecord } from '../../types';
 import { ListContextProvider } from './ListContextProvider';
@@ -42,6 +46,7 @@ import { useIsAuthPending } from '../../auth';
  */
 export const ListBase = <RecordType extends RaRecord = any>({
     children,
+    render,
     loading = null,
     ...props
 }: ListBaseProps<RecordType>) => {
@@ -54,19 +59,25 @@ export const ListBase = <RecordType extends RaRecord = any>({
     if (isAuthPending && !props.disableAuthentication) {
         return loading;
     }
+    if (!render && !children) {
+        throw new Error(
+            "<ListBase> 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}>
             <ListContextProvider value={controllerProps}>
-                {children}
+                {render ? render(controllerProps) : children}
             </ListContextProvider>
         </OptionalResourceContextProvider>
     );
 };
 
 export interface ListBaseProps<RecordType extends RaRecord = any>
     extends ListControllerProps<RecordType> {
-    children: ReactNode;
+    children?: ReactNode;
+    render?: (props: ListControllerResult<RecordType, Error>) => ReactNode;
     loading?: ReactNode;
 }

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

@@ -191,7 +191,7 @@ export interface ListViewProps {
      *     </List>
      * );
      */
-    children: ReactNode;
+    children?: ReactNode;
 
     /**
      * The component used to display the list. Defaults to <Card>.