Add support for rowClick="expand" in Datagrid

Closes #2765
marmelab · Jan 28, 2019 · d02111f · d02111f
1 parent a187c31
commit d02111f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/docs/List.md b/docs/List.md
@@ -817,6 +817,7 @@ export const PostList = (props) => (
 
 * "edit" to redirect to the edition vue
 * "show" to redirect to the show vue
+* "expand" to open the `expand` panel
 * a function `(id, basePath, record) => path` to redirect to a custom path
 
 **Tip**: If you pass a function, it can return `edit`, `show` or a router path. This allows to redirect to either `edit` or `show` after checking a condition on the record. For example:

diff --git a/examples/demo/src/invoices/InvoiceList.js b/examples/demo/src/invoices/InvoiceList.js
@@ -23,7 +23,7 @@ const ListFilters = props => (
 
 const InvoiceList = props => (
     <List {...props} filters={<ListFilters />} perPage={25}>
-        <Datagrid expand={<InvoiceShow />}>
+        <Datagrid rowClick="expand" expand={<InvoiceShow />}>
             <TextField source="id" />
             <DateField source="date" />
             <ReferenceField source="customer_id" reference="customers">

diff --git a/packages/ra-ui-materialui/src/list/DatagridRow.js b/packages/ra-ui-materialui/src/list/DatagridRow.js
@@ -57,21 +57,21 @@ class DatagridRow extends Component {
         event.stopPropagation();
     };
 
-    handleClick = async () => {
+    handleClick = async event => {
         const { basePath, rowClick, id, record } = this.props;
 
         if (!rowClick) return;
 
         if (typeof rowClick === 'function') {
             const path = await rowClick(id, basePath, record);
-            this.handleRedirection(path);
+            this.handleRedirection(path, event);
             return;
         }
 
-        this.handleRedirection(rowClick);
+        this.handleRedirection(rowClick, event);
     };
 
-    handleRedirection = path => {
+    handleRedirection = (path, event) => {
         const { basePath, id, push } = this.props;
 
         if (path === 'edit') {
@@ -82,6 +82,10 @@ class DatagridRow extends Component {
             push(linkToRecord(basePath, id, 'show'));
             return;
         }
+        if (path == 'expand') {
+            this.handleToggleExpanded(event);
+            return;
+        }
 
         push(path);
     };