add render prop on Show

Author: ThieryMichel

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

@@ -280,3 +280,22 @@ export const Themed = () => (
         </Admin>
     </TestMemoryRouter>
 );
+
+export const WithRenderProp = () => (
+    <TestMemoryRouter initialEntries={['/books/1/show']}>
+        <Admin dataProvider={dataProvider}>
+            <Resource
+                name="books"
+                show={() => (
+                    <Show
+                        render={showContext =>
+                            showContext.record ? (
+                                <span>{showContext.record.title}</span>
+                            ) : null
+                        }
+                    />
+                )}
+            />
+        </Admin>
+    </TestMemoryRouter>
+);

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

@@ -75,6 +75,12 @@ export const Show = <RecordType extends RaRecord = any>(
         ...rest
     } = props;
 
+    if (!props.render && !props.children) {
+        throw new Error(
+            '<Show> requires either a `render` prop or `children` prop'
+        );
+    }
+
     return (
         <ShowBase<RecordType>
             id={id}
@@ -90,7 +96,7 @@ export const Show = <RecordType extends RaRecord = any>(
 
 export interface ShowProps<RecordType extends RaRecord = any>
     extends ShowBaseProps<RecordType>,
-        Omit<ShowViewProps, 'children'> {}
+        Omit<ShowViewProps, 'children' | 'render'> {}
 
 const defaultLoading = <Loading />;
 

packages/ra-ui-materialui/src/detail/ShowView.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,
     type ComponentsOverrides,
@@ -8,7 +8,11 @@ import {
     type Theme,
 } from '@mui/material';
 import clsx from 'clsx';
-import { useShowContext, useResourceDefinition } from 'ra-core';
+import {
+    useShowContext,
+    useResourceDefinition,
+    ShowControllerResult,
+} from 'ra-core';
 import { ShowActions } from './ShowActions';
 import { Title } from '../layout';
 import { ShowProps } from './Show';
@@ -20,14 +24,16 @@ export const ShowView = (props: ShowViewProps) => {
         actions,
         aside,
         children,
+        render,
         className,
         component: Content = Card,
         emptyWhileLoading = false,
         title,
         ...rest
     } = props;
 
-    const { resource, defaultTitle, record } = useShowContext();
+    const showContext = useShowContext();
+    const { resource, defaultTitle, record } = showContext;
     const { hasEdit } = useResourceDefinition();
 
     const finalActions =
@@ -66,6 +72,7 @@ export interface ShowViewProps
     emptyWhileLoading?: boolean;
     title?: string | ReactElement | false;
     sx?: SxProps<Theme>;
+    render?: (showContext: ShowControllerResult) => ReactNode;
 }
 
 const PREFIX = 'RaShow';