Merge pull request #5202 from jeiea/next

Forward ref in data grid element
marmelab · Aug 31, 2020 · ede187b · ede187b
2 parents d580844 + 409a7af
commit ede187b
Show file tree

Hide file tree

Showing 4 changed files with 240 additions and 213 deletions.
diff --git a/packages/ra-ui-materialui/src/list/Datagrid.tsx b/packages/ra-ui-materialui/src/list/Datagrid.tsx
@@ -63,7 +63,7 @@ import { ClassesOverride } from '../types';
  *     </Datagrid>
  * </ReferenceManyField>
  */
-const Datagrid: FC<DatagridProps> = props => {
+const Datagrid: FC<DatagridProps> = React.forwardRef((props, ref) => {
     const classes = useDatagridStyles(props);
     const {
         optimized = false,
@@ -168,6 +168,7 @@ const Datagrid: FC<DatagridProps> = props => {
      */
     return (
         <Table
+            ref={ref}
             className={classnames(classes.table, className)}
             size={size}
             {...sanitizeListRestProps(rest)}
@@ -244,7 +245,7 @@ const Datagrid: FC<DatagridProps> = props => {
             )}
         </Table>
     );
-};
+});
 
 Datagrid.propTypes = {
     basePath: PropTypes.string,

diff --git a/packages/ra-ui-materialui/src/list/DatagridBody.tsx b/packages/ra-ui-materialui/src/list/DatagridBody.tsx
@@ -9,54 +9,64 @@ import { Identifier, Record, RecordMap } from 'ra-core';
 import DatagridRow, { PureDatagridRow } from './DatagridRow';
 import useDatagridStyles from './useDatagridStyles';
 
-const DatagridBody: FC<DatagridBodyRow> = ({
-    basePath,
-    children,
-    classes,
-    className,
-    data,
-    expand,
-    hasBulkActions,
-    hover,
-    ids,
-    onToggleItem,
-    resource,
-    row,
-    rowClick,
-    rowStyle,
-    selectedIds,
-    isRowSelectable,
-    ...rest
-}) => (
-    <TableBody className={classnames('datagrid-body', className)} {...rest}>
-        {ids.map((id, rowIndex) =>
-            cloneElement(
-                row,
-                {
-                    basePath,
-                    classes,
-                    className: classnames(classes.row, {
-                        [classes.rowEven]: rowIndex % 2 === 0,
-                        [classes.rowOdd]: rowIndex % 2 !== 0,
-                        [classes.clickableRow]: rowClick,
-                    }),
-                    expand,
-                    hasBulkActions,
-                    hover,
-                    id,
-                    key: id,
-                    onToggleItem,
-                    record: data[id],
-                    resource,
-                    rowClick,
-                    selectable: !isRowSelectable || isRowSelectable(data[id]),
-                    selected: selectedIds.includes(id),
-                    style: rowStyle ? rowStyle(data[id], rowIndex) : null,
-                },
-                children
-            )
-        )}
-    </TableBody>
+const DatagridBody: FC<DatagridBodyRow> = React.forwardRef(
+    (
+        {
+            basePath,
+            children,
+            classes,
+            className,
+            data,
+            expand,
+            hasBulkActions,
+            hover,
+            ids,
+            onToggleItem,
+            resource,
+            row,
+            rowClick,
+            rowStyle,
+            selectedIds,
+            isRowSelectable,
+            ...rest
+        },
+        ref
+    ) => (
+        <TableBody
+            ref={ref}
+            className={classnames('datagrid-body', className)}
+            {...rest}
+        >
+            {ids.map((id, rowIndex) =>
+                cloneElement(
+                    row,
+                    {
+                        basePath,
+                        classes,
+                        className: classnames(classes.row, {
+                            [classes.rowEven]: rowIndex % 2 === 0,
+                            [classes.rowOdd]: rowIndex % 2 !== 0,
+                            [classes.clickableRow]: rowClick,
+                        }),
+                        expand,
+                        hasBulkActions,
+                        hover,
+                        id,
+                        key: id,
+                        onToggleItem,
+                        record: data[id],
+                        resource,
+                        rowClick,
+                        selectable:
+                            !isRowSelectable || isRowSelectable(data[id]),
+                        selected: selectedIds.includes(id),
+                        style: rowStyle ? rowStyle(data[id], rowIndex) : null,
+                    },
+                    children
+                )
+            )}
+        </TableBody>
+    )
 );
 
 DatagridBody.propTypes = {

diff --git a/...ra-ui-materialui/src/list/DatagridCell.js → ...a-ui-materialui/src/list/DatagridCell.tsx b/...ra-ui-materialui/src/list/DatagridCell.js → ...a-ui-materialui/src/list/DatagridCell.tsx
@@ -1,8 +1,15 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import TableCell from '@material-ui/core/TableCell';
+import TableCell, { TableCellProps } from '@material-ui/core/TableCell';
 import classnames from 'classnames';
 
+export type DatagridCellProps = {
+    field: React.ReactElement;
+    record: Record<string, any>;
+    basePath: string;
+    resource: string;
+} & TableCellProps;
+
 const sanitizeRestProps = ({
     cellClassName,
     className,
@@ -13,17 +20,14 @@ const sanitizeRestProps = ({
     basePath,
     resource,
     ...rest
-}) => rest;
+}: Record<string, any>) => rest;
 
-const DatagridCell = ({
-    className,
-    field,
-    record,
-    basePath,
-    resource,
-    ...rest
-}) => (
+const DatagridCell: React.FC<DatagridCellProps> = React.forwardRef<
+    HTMLTableCellElement,
+    DatagridCellProps
+>(({ className, field, record, basePath, resource, ...rest }, ref) => (
     <TableCell
+        ref={ref}
         className={classnames(className, field.props.cellClassName)}
         align={field.props.textAlign}
         {...sanitizeRestProps(rest)}
@@ -34,7 +38,7 @@ const DatagridCell = ({
             resource,
         })}
     </TableCell>
-);
+));
 
 DatagridCell.propTypes = {
     className: PropTypes.string,