Merge pull request #9705 from marmelab/simpleshowlayout-direction

Add ability to set `<SimpleShowLayout direction>`
marmelab · Mar 13, 2024 · 1509bed · 1509bed
2 parents 4992470 + 79de0e2
commit 1509bed
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 8 deletions.
diff --git a/docs/SimpleShowLayout.md b/docs/SimpleShowLayout.md
@@ -33,6 +33,7 @@ The `<SimpleShowLayout>` component accepts the following props:
 |------------------|----------|------------------|---------|--------------------------------------------------------
 | `children`      | Required | `ReactNode`      |         | The components rendering the record fields
 | `className`      | Optional | `string`         |         | The class name applied to the root element
+| `direction`      | Optional | `string`         | `column`| The direction of the layout. Passed to the `<Stack>` component
 | `divider`        | Optional | `ReactElement`   |         | Optional element to render between each field
 | `record`         | Optional | `object`         |         | The record to render. Passed to the `RecordContext`
 | `spacing`        | Optional | `number`         | `1`     | The spacing between fields. Passed to the `<Stack>` component
@@ -143,6 +144,22 @@ const PostShow = () => (
 
 The default spacing is `1`.
 
+## `direction`
+
+`<SimpleShowLayout>` renders a Material UI `<Stack>`. You can customize the direction of the layout by passing a `direction` prop:
+
+```jsx
+const PostShow = () => (
+    <Show>
+        <SimpleShowLayout direction="row">
+            <PostTitle label="title" />
+            <PostTitle label="author" />
+            <PostTitle label="published_at" />
+        </SimpleShowLayout>
+    </Show>
+);
+```
+
 ## `divider`
 
 `<Stack>` accepts an optional `divider` prop - a component rendered between each row. `<SimpleShowLayout>` also accepts this props, and passes it to the `<Stack>` component.
@@ -212,6 +229,24 @@ const BookShow = () => (
 );
 ```
 
+You can also nest `<SimpleShowLayout>` components with different `direction` props to create complex layouts:
+
+```jsx
+const BookShow = () => (
+    <Show>
+        <SimpleShowLayout>
+            <TextField source="title" />
+            <TextField source="summary" />
+            <SimpleShowLayout direction="row">
+                <TextField source="author" />
+                <TextField source="category" />
+                <NumberField source="year" />
+            </SimpleShowLayout>
+        </SimpleShowLayout>
+    </Show>
+);
+```
+            
 ## Hiding The Field Labels
 
 You can disable the `<Labeled>` decoration added by `<SimpleShowLayout>` by setting `label={false}` on a field:

diff --git a/packages/ra-ui-materialui/src/detail/SimpleShowLayout.stories.tsx b/packages/ra-ui-materialui/src/detail/SimpleShowLayout.stories.tsx
@@ -67,6 +67,20 @@ export const CustomLabel = () => (
     </ResourceContext.Provider>
 );
 
+export const Direction = () => (
+    <ResourceContext.Provider value="books">
+        <RecordContextProvider value={record}>
+            <SimpleShowLayout direction="row">
+                <TextField source="id" />
+                <TextField source="title" />
+                <TextField source="author" />
+                <TextField source="summary" />
+                <NumberField source="year" />
+            </SimpleShowLayout>
+        </RecordContextProvider>
+    </ResourceContext.Provider>
+);
+
 export const Spacing = () => (
     <ResourceContext.Provider value="books">
         <RecordContextProvider value={record}>
@@ -136,3 +150,26 @@ export const SeveralColumns = () => (
         </RecordContextProvider>
     </ResourceContext.Provider>
 );
+
+export const Nested = () => (
+    <ResourceContext.Provider value="books">
+        <RecordContextProvider value={record}>
+            <SimpleShowLayout>
+                <TextField source="title" />
+                <TextField source="summary" />
+                <SimpleShowLayout
+                    direction="row"
+                    sx={{
+                        padding: 0,
+                        '& .ra-field-id': { width: 50 },
+                        '& .ra-field-author': { width: 150 },
+                    }}
+                >
+                    <TextField source="id" />
+                    <TextField source="author" />
+                    <NumberField source="year" />
+                </SimpleShowLayout>
+            </SimpleShowLayout>
+        </RecordContextProvider>
+    </ResourceContext.Provider>
+);
diff --git a/packages/ra-ui-materialui/src/detail/SimpleShowLayout.tsx b/packages/ra-ui-materialui/src/detail/SimpleShowLayout.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Children, isValidElement, ReactNode } from 'react';
 import { styled } from '@mui/material/styles';
-import { Stack } from '@mui/material';
-import { ResponsiveStyleValue, SxProps } from '@mui/system';
+import { Stack, StackProps } from '@mui/material';
+import { SxProps } from '@mui/system';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import {
@@ -53,17 +53,17 @@ import { Labeled } from '../Labeled';
  * @param {Object} props.sx Custom style object.
  */
 export const SimpleShowLayout = (props: SimpleShowLayoutProps) => {
-    const { className, children, divider, spacing = 1, ...rest } = props;
+    const { className, children, spacing = 1, sx, ...rest } = props;
     const record = useRecordContext(props);
     if (!record) {
         return null;
     }
     return (
         <OptionalRecordContextProvider value={props.record}>
-            <Root className={className} {...sanitizeRestProps(rest)}>
+            <Root className={className} sx={sx}>
                 <Stack
                     spacing={spacing}
-                    divider={divider}
+                    {...sanitizeRestProps(rest)}
                     className={SimpleShowLayoutClasses.stack}
                 >
                     {Children.map(children, field =>
@@ -88,12 +88,10 @@ export const SimpleShowLayout = (props: SimpleShowLayoutProps) => {
     );
 };
 
-export interface SimpleShowLayoutProps {
+export interface SimpleShowLayoutProps extends StackProps {
     children: ReactNode;
     className?: string;
-    divider?: ReactNode;
     record?: RaRecord;
-    spacing?: ResponsiveStyleValue<number | string>;
     sx?: SxProps;
 }