add render props to ShowBase component

Author: ThieryMichel

docs/CreateBase.md

@@ -46,7 +46,7 @@ export const BookCreate = () => (
 You can customize the `<CreateBase>` component using the following props, documented in the `<Create>` component:
 
 * `children`: the components that renders the form
-* `render`: alternative to children, a function that takes the EditController context and renders the form
+* `render`: alternative to children, a function that takes the CreateController context and renders the form
 * [`disableAuthentication`](./Create.md#disableauthentication): disable the authentication check
 * [`mutationMode`](./Create.md#mutationmode): Switch to optimistic or undoable mutations (pessimistic by default)
 * [`mutationOptions`](./Create.md#mutationoptions): options for the `dataProvider.create()` call

docs/ShowBase.md

@@ -62,7 +62,8 @@ const App = () => (
 
 | Prop             | Required | Type              | Default | Description
 |------------------|----------|-------------------|---------|--------------------------------------------------------
-| `children`       | Required | `ReactNode`       |         | The components rendering the record fields
+| `children`       | Optional | `ReactNode`       |         | The components rendering the record fields
+| `children`       | Optional | `(props: ShowControllerResult<RecordType>) => ReactNode`       |         | Alternative to children, a function that takes the ShowController context and renders the form
 | `disable Authentication` | Optional | `boolean` |         | Set to `true` to disable the authentication check
 | `empty WhileLoading` | Optional | `boolean`     |         | Set to `true` to return `null` while the list is loading
 | `id`             | Optional | `string`          |         | The record identifier. If not provided, it will be deduced from the URL

packages/ra-core/src/controller/show/ShowBase.spec.tsx

@@ -8,6 +8,7 @@ import {
     DefaultTitle,
     NoAuthProvider,
     WithAuthProviderNoAccessControl,
+    WithRenderProp,
 } from './ShowBase.stories';
 
 describe('ShowBase', () => {
@@ -105,4 +106,16 @@ describe('ShowBase', () => {
         fireEvent.click(screen.getByText('FR'));
         await screen.findByText("Détails de l'article Hello (fr)");
     });
+
+    it('should support render prop', async () => {
+        const dataProvider = testDataProvider({
+            // @ts-ignore
+            getOne: jest.fn(() =>
+                Promise.resolve({ data: { id: 12, test: 'Hello' } })
+            ),
+        });
+        render(<WithRenderProp dataProvider={dataProvider} />);
+        expect(dataProvider.getOne).toHaveBeenCalled();
+        await screen.findByText('Hello');
+    });
 });

packages/ra-core/src/controller/show/ShowBase.stories.tsx

@@ -145,6 +145,23 @@ export const AccessControl = ({
     </CoreAdminContext>
 );
 
+export const WithRenderProp = ({
+    dataProvider = defaultDataProvider,
+    ...props
+}: {
+    dataProvider?: DataProvider;
+} & Partial<ShowBaseProps>) => (
+    <CoreAdminContext dataProvider={dataProvider}>
+        <ShowBase
+            {...defaultProps}
+            {...props}
+            render={({ record }) => {
+                return <p>{record?.test}</p>;
+            }}
+        />
+    </CoreAdminContext>
+);
+
 const defaultDataProvider = testDataProvider({
     getOne: () =>
         // @ts-ignore

packages/ra-core/src/controller/show/ShowBase.tsx

@@ -1,7 +1,11 @@
 import * as React from 'react';
 
 import { RaRecord } from '../../types';
-import { useShowController, ShowControllerProps } from './useShowController';
+import {
+    useShowController,
+    ShowControllerProps,
+    ShowControllerResult,
+} from './useShowController';
 import { ShowContextProvider } from './ShowContextProvider';
 import { OptionalResourceContextProvider } from '../../core';
 import { useIsAuthPending } from '../../auth';
@@ -37,6 +41,7 @@ import { useIsAuthPending } from '../../auth';
  */
 export const ShowBase = <RecordType extends RaRecord = any>({
     children,
+    render,
     loading = null,
     ...props
 }: ShowBaseProps<RecordType>) => {
@@ -51,18 +56,25 @@ export const ShowBase = <RecordType extends RaRecord = any>({
         return loading;
     }
 
+    if (!render && !children) {
+        throw new Error(
+            '<ShowBase> 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}>
             <ShowContextProvider value={controllerProps}>
-                {children}
+                {render ? render(controllerProps) : children}
             </ShowContextProvider>
         </OptionalResourceContextProvider>
     );
 };
 
 export interface ShowBaseProps<RecordType extends RaRecord = RaRecord>
     extends ShowControllerProps<RecordType> {
-    children: React.ReactNode;
+    children?: React.ReactNode;
+    render?: (props: ShowControllerResult<RecordType>) => React.ReactNode;
     loading?: React.ReactNode;
 }