Merge pull request #9719 from marmelab/Do-not-clone-datagrid-expand-p…

…anel Remove props injection in `<Datagrid expand>` components
marmelab · Mar 14, 2024 · b102283 · b102283
2 parents 1509bed + 3badd55
commit b102283
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 28 deletions.
diff --git a/docs/Upgrade.md b/docs/Upgrade.md
@@ -449,6 +449,22 @@ We've changed the implementation of `<SimpleFormIterator>`, the companion child
 </ArrayInput>
 ```
 
+## `<Datagrid expand>` Components No Longer Receive Any Props
+
+An undocumented features allowed datagrid expand panels to read the current resource, record, and id from their props. This is no longer the case in v5, as expand panels are now rendered without props by `<Datagrid>`. 
+
+If you used these props in your expand components, you'll have to use the `useRecordContext` hook instead:
+
+```diff
+-const PostExpandPanel = ({ record, resource, id }) => {
++const PostExpandPanel = () => {
++   const record = useRecordContext();
++   const resource = useResourceContext();
++   const id = record?.id;
+    // ...
+}
+```
+
 ## `<FormDataConsumer>` no longer passes a `getSource` function
 
 When using `<FormDataConsumer>` inside an `<ArrayInput>`, the child function no longer receives a `getSource` callback. We've made all Input components able to work seamlessly inside an `<ArrayInput>`, so it's no longer necessary to transform their source with `getSource`:

diff --git a/examples/simple/src/posts/PostList.tsx b/examples/simple/src/posts/PostList.tsx
@@ -30,6 +30,7 @@ import {
     TextField,
     TextInput,
     TopToolbar,
+    useRecordContext,
     useTranslate,
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
 
@@ -147,9 +148,10 @@ const rowClick = (_id, _resource, record) => {
     return 'show';
 };
 
-const PostPanel = ({ record }) => (
-    <div dangerouslySetInnerHTML={{ __html: record.body }} />
-);
+const PostPanel = () => {
+    const record = useRecordContext();
+    return <div dangerouslySetInnerHTML={{ __html: record?.body }} />;
+};
 
 const tagSort = { field: 'name.en', order: 'ASC' } as const;
 

diff --git a/examples/simple/src/users/UserEditEmbedded.tsx b/examples/simple/src/users/UserEditEmbedded.tsx
@@ -1,20 +1,30 @@
 /* eslint react/jsx-key: off */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Edit, Identifier, SimpleForm, TextInput, required } from 'react-admin';
+import {
+    Edit,
+    SimpleForm,
+    TextInput,
+    required,
+    useRecordContext,
+} from 'react-admin';
 
-const UserEditEmbedded = ({ id }: { id?: Identifier }) => (
-    /* Passing " " as title disables the custom title */
-    <Edit title=" " id={id}>
-        <SimpleForm defaultValues={{ role: 'user' }}>
-            <TextInput
-                source="name"
-                defaultValue="slim shady"
-                validate={required()}
-            />
-        </SimpleForm>
-    </Edit>
-);
+const UserEditEmbedded = () => {
+    const record = useRecordContext();
+    if (!record) return null;
+    return (
+        /* Passing " " as title disables the custom title */
+        <Edit title=" " id={record.id} actions={false}>
+            <SimpleForm defaultValues={{ role: 'user' }}>
+                <TextInput
+                    source="name"
+                    defaultValue="slim shady"
+                    validate={required()}
+                />
+            </SimpleForm>
+        </Edit>
+    );
+};
 
 UserEditEmbedded.propTypes = {
     record: PropTypes.object,

diff --git a/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx b/packages/ra-ui-materialui/src/list/datagrid/DatagridRow.tsx
@@ -221,19 +221,9 @@ const DatagridRow: FC<DatagridRowProps> = React.forwardRef((props, ref) => {
                 >
                     <TableCell colSpan={nbColumns}>
                         {isElement(expand)
-                            ? cloneElement(expand as React.ReactElement<any>, {
-                                  // @ts-ignore
-                                  record,
-                                  resource,
-                                  id: String(id),
-                              })
+                            ? expand
                             : createElement(
-                                  expand as React.FunctionComponent<any>,
-                                  {
-                                      record,
-                                      resource,
-                                      id: String(id),
-                                  }
+                                  expand as React.FunctionComponent<any>
                               )}
                     </TableCell>
                 </TableRow>