add render prop on Show

Author: ThieryMichel

docs/Show.md

@@ -61,7 +61,8 @@ That's enough to display the post show view above.
 
 | Prop             | Required | Type              | Default | Description
 |------------------|----------|-------------------|---------|--------------------------------------------------------
-| `children`       | Required | `ReactNode`       |         | The components rendering the record fields
+| `children`       | Required if no render | `ReactNode`       |         | The components rendering the record fields
+| `render`       | Required if no children | `(showContext) => ReactNode`       |         | A function rendering the record fields, receive the show context as its argument
 | `actions`        | Optional | `ReactElement`    |         | The actions to display in the toolbar
 | `aside`          | Optional | `ReactElement`    |         | The component to display on the side of the list
 | `className`      | Optional | `string`          |         | passed to the root component

packages/ra-ui-materialui/src/detail/Edit.spec.tsx

@@ -341,7 +341,7 @@ describe('<Edit />', () => {
         });
     });
 
-    it('should allow tu use render prop instead of children', async () => {
+    it('should allow to use render prop instead of children', async () => {
         render(<WithRenderProp />);
         await waitFor(() => {
             expect(screen.queryAllByText('War and Peace')).toHaveLength(1);

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

@@ -25,6 +25,7 @@ import {
     TitleFalse,
     TitleElement,
     Themed,
+    WithRenderProp,
 } from './Show.stories';
 import { Show } from './Show';
 
@@ -132,11 +133,18 @@ describe('<Show />', () => {
 
     it('should be customized by a theme', async () => {
         render(<Themed />);
-        expect(screen.queryByTestId('themed-view').classList).toContain(
+        expect(screen.queryByTestId('themed-view')?.classList).toContain(
             'custom-class'
         );
     });
 
+    it('should allow to use render prop instead of children', async () => {
+        render(<WithRenderProp />);
+        await waitFor(() => {
+            expect(screen.queryByText('War and Peace')).not.toBeNull();
+        });
+    });
+
     describe('title', () => {
         it('should display by default the title of the resource', async () => {
             render(<Basic />);

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

@@ -45,7 +45,9 @@ import { Loading } from '../layout';
  * );
  * export default App;
  *
+ * @typedef {(showContext: Object) => ReactNode} RenderProp
  * @param {ShowProps} inProps
+ * @param {RenderProp} inProps.render A function rendering the page content, receive the show context as its argument.
  * @param {ReactElement|false} inProps.actions An element to display above the page content, or false to disable actions.
  * @param {string} inProps.className A className to apply to the page content.
  * @param {ElementType} inProps.component The component to use as root component (div by default).

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

@@ -39,7 +39,7 @@ export const ShowView = (props: ShowViewProps) => {
     const finalActions =
         typeof actions === 'undefined' && hasEdit ? defaultActions : actions;
 
-    if (!children || (!record && emptyWhileLoading)) {
+    if (!record && emptyWhileLoading) {
         return null;
     }
     return (
@@ -57,7 +57,9 @@ export const ShowView = (props: ShowViewProps) => {
                     [ShowClasses.noActions]: !finalActions,
                 })}
             >
-                <Content className={ShowClasses.card}>{children}</Content>
+                <Content className={ShowClasses.card}>
+                    {render ? render(showContext) : children}
+                </Content>
                 {aside}
             </div>
         </Root>