From 409a7afeac2dcbee4062f418b72e64195d222ad5 Mon Sep 17 00:00:00 2001
From: jeiea <solum5013@gmail.com>
Date: Sat, 29 Aug 2020 14:28:44 +0900
Subject: [PATCH] Forward ref in data grid element

---
 .../ra-ui-materialui/src/list/Datagrid.tsx    |   5 +-
 .../src/list/DatagridBody.tsx                 | 106 +++---
 .../{DatagridCell.js => DatagridCell.tsx}     |  26 +-
 .../ra-ui-materialui/src/list/DatagridRow.tsx | 316 +++++++++---------
 4 files changed, 240 insertions(+), 213 deletions(-)
 rename packages/ra-ui-materialui/src/list/{DatagridCell.js => DatagridCell.tsx} (67%)

diff --git a/packages/ra-ui-materialui/src/list/Datagrid.tsx b/packages/ra-ui-materialui/src/list/Datagrid.tsx
index 37fc93babc2..7d6c4fb37d7 100644
--- 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
index 418c55afd1f..5be95d1dc60 100644
--- 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/packages/ra-ui-materialui/src/list/DatagridCell.js b/packages/ra-ui-materialui/src/list/DatagridCell.tsx
similarity index 67%
rename from packages/ra-ui-materialui/src/list/DatagridCell.js
rename to packages/ra-ui-materialui/src/list/DatagridCell.tsx
index 1430b48494c..a478268cfc6 100644
--- a/packages/ra-ui-materialui/src/list/DatagridCell.js
+++ b/packages/ra-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,
diff --git a/packages/ra-ui-materialui/src/list/DatagridRow.tsx b/packages/ra-ui-materialui/src/list/DatagridRow.tsx
index 72f1f4ac5e0..c6914b92c3b 100644
--- a/packages/ra-ui-materialui/src/list/DatagridRow.tsx
+++ b/packages/ra-ui-materialui/src/list/DatagridRow.tsx
@@ -35,166 +35,178 @@ const computeNbColumns = (expand, children, hasBulkActions) =>
 
 const defaultClasses = { expandIconCell: '', checkbox: '', rowCell: '' };
 
-const DatagridRow: FC<DatagridRowProps> = ({
-    basePath,
-    children,
-    classes = defaultClasses,
-    className,
-    expand,
-    hasBulkActions,
-    hover,
-    id,
-    onToggleItem,
-    record,
-    resource,
-    rowClick,
-    selected,
-    style,
-    selectable,
-    ...rest
-}) => {
-    const [expanded, toggleExpanded] = useExpanded(resource, id);
-    const [nbColumns, setNbColumns] = useState(
-        computeNbColumns(expand, children, hasBulkActions)
-    );
-    useEffect(() => {
-        // Fields can be hidden dynamically based on permissions;
-        // The expand panel must span over the remaining columns
-        // So we must recompute the number of columns to span on
-        const newNbColumns = computeNbColumns(expand, children, hasBulkActions);
-        if (newNbColumns !== nbColumns) {
-            setNbColumns(newNbColumns);
-        }
-    }, [expand, nbColumns, children, hasBulkActions]);
-
-    const history = useHistory();
-
-    const handleToggleExpand = useCallback(
-        event => {
-            toggleExpanded();
-            event.stopPropagation();
-        },
-        [toggleExpanded]
-    );
-    const handleToggleSelection = useCallback(
-        event => {
-            if (!selectable) return;
-            onToggleItem(id);
-            event.stopPropagation();
-        },
-        [id, onToggleItem, selectable]
-    );
-    const handleClick = useCallback(
-        async event => {
-            if (!rowClick) return;
-            event.persist();
-
-            const effect =
-                typeof rowClick === 'function'
-                    ? await rowClick(id, basePath, record)
-                    : rowClick;
-            switch (effect) {
-                case 'edit':
-                    history.push(linkToRecord(basePath, id));
-                    return;
-                case 'show':
-                    history.push(linkToRecord(basePath, id, 'show'));
-                    return;
-                case 'expand':
-                    handleToggleExpand(event);
-                    return;
-                case 'toggleSelection':
-                    handleToggleSelection(event);
-                    return;
-                default:
-                    if (effect) history.push(effect);
-                    return;
-            }
-        },
-        [
+const DatagridRow: FC<DatagridRowProps> = React.forwardRef(
+    (
+        {
             basePath,
-            history,
-            handleToggleExpand,
-            handleToggleSelection,
+            children,
+            classes = defaultClasses,
+            className,
+            expand,
+            hasBulkActions,
+            hover,
             id,
+            onToggleItem,
             record,
+            resource,
             rowClick,
-        ]
-    );
+            selected,
+            style,
+            selectable,
+            ...rest
+        },
+        ref
+    ) => {
+        const [expanded, toggleExpanded] = useExpanded(resource, id);
+        const [nbColumns, setNbColumns] = useState(
+            computeNbColumns(expand, children, hasBulkActions)
+        );
+        useEffect(() => {
+            // Fields can be hidden dynamically based on permissions;
+            // The expand panel must span over the remaining columns
+            // So we must recompute the number of columns to span on
+            const newNbColumns = computeNbColumns(
+                expand,
+                children,
+                hasBulkActions
+            );
+            if (newNbColumns !== nbColumns) {
+                setNbColumns(newNbColumns);
+            }
+        }, [expand, nbColumns, children, hasBulkActions]);
 
-    return (
-        <Fragment>
-            <TableRow
-                className={className}
-                key={id}
-                style={style}
-                hover={hover}
-                onClick={handleClick}
-                {...rest}
-            >
-                {expand && (
-                    <TableCell
-                        padding="none"
-                        className={classes.expandIconCell}
-                    >
-                        <ExpandRowButton
-                            classes={classes}
-                            expanded={expanded}
-                            onClick={handleToggleExpand}
-                            expandContentId={`${id}-expand`}
-                        />
-                    </TableCell>
-                )}
-                {hasBulkActions && (
-                    <TableCell padding="checkbox">
-                        {selectable && (
-                            <Checkbox
-                                color="primary"
-                                className={`select-item ${classes.checkbox}`}
-                                checked={selected}
-                                onClick={handleToggleSelection}
+        const history = useHistory();
+
+        const handleToggleExpand = useCallback(
+            event => {
+                toggleExpanded();
+                event.stopPropagation();
+            },
+            [toggleExpanded]
+        );
+        const handleToggleSelection = useCallback(
+            event => {
+                if (!selectable) return;
+                onToggleItem(id);
+                event.stopPropagation();
+            },
+            [id, onToggleItem, selectable]
+        );
+        const handleClick = useCallback(
+            async event => {
+                if (!rowClick) return;
+                event.persist();
+
+                const effect =
+                    typeof rowClick === 'function'
+                        ? await rowClick(id, basePath, record)
+                        : rowClick;
+                switch (effect) {
+                    case 'edit':
+                        history.push(linkToRecord(basePath, id));
+                        return;
+                    case 'show':
+                        history.push(linkToRecord(basePath, id, 'show'));
+                        return;
+                    case 'expand':
+                        handleToggleExpand(event);
+                        return;
+                    case 'toggleSelection':
+                        handleToggleSelection(event);
+                        return;
+                    default:
+                        if (effect) history.push(effect);
+                        return;
+                }
+            },
+            [
+                basePath,
+                history,
+                handleToggleExpand,
+                handleToggleSelection,
+                id,
+                record,
+                rowClick,
+            ]
+        );
+
+        return (
+            <Fragment>
+                <TableRow
+                    ref={ref}
+                    className={className}
+                    key={id}
+                    style={style}
+                    hover={hover}
+                    onClick={handleClick}
+                    {...rest}
+                >
+                    {expand && (
+                        <TableCell
+                            padding="none"
+                            className={classes.expandIconCell}
+                        >
+                            <ExpandRowButton
+                                classes={classes}
+                                expanded={expanded}
+                                onClick={handleToggleExpand}
+                                expandContentId={`${id}-expand`}
                             />
-                        )}
-                    </TableCell>
-                )}
-                {React.Children.map(children, (field, index) =>
-                    isValidElement(field) ? (
-                        <DatagridCell
-                            key={`${id}-${(field.props as any).source ||
-                                index}`}
-                            className={classnames(
-                                `column-${(field.props as any).source}`,
-                                classes.rowCell
+                        </TableCell>
+                    )}
+                    {hasBulkActions && (
+                        <TableCell padding="checkbox">
+                            {selectable && (
+                                <Checkbox
+                                    color="primary"
+                                    className={`select-item ${
+                                        classes.checkbox
+                                    }`}
+                                    checked={selected}
+                                    onClick={handleToggleSelection}
+                                />
                             )}
-                            record={record}
-                            {...{ field, basePath, resource }}
-                        />
-                    ) : null
-                )}
-            </TableRow>
-            {expand && expanded && (
-                <TableRow key={`${id}-expand`} id={`${id}-expand`}>
-                    <TableCell colSpan={nbColumns}>
-                        {isValidElement(expand)
-                            ? cloneElement(expand, {
-                                  // @ts-ignore
-                                  record,
-                                  basePath,
-                                  resource,
-                                  id: String(id),
-                              })
-                            : createElement(expand, {
-                                  record,
-                                  basePath,
-                                  resource,
-                                  id: String(id),
-                              })}
-                    </TableCell>
+                        </TableCell>
+                    )}
+                    {React.Children.map(children, (field, index) =>
+                        isValidElement(field) ? (
+                            <DatagridCell
+                                key={`${id}-${(field.props as any).source ||
+                                    index}`}
+                                className={classnames(
+                                    `column-${(field.props as any).source}`,
+                                    classes.rowCell
+                                )}
+                                record={record}
+                                {...{ field, basePath, resource }}
+                            />
+                        ) : null
+                    )}
                 </TableRow>
-            )}
-        </Fragment>
-    );
-};
+                {expand && expanded && (
+                    <TableRow key={`${id}-expand`} id={`${id}-expand`}>
+                        <TableCell colSpan={nbColumns}>
+                            {isValidElement(expand)
+                                ? cloneElement(expand, {
+                                      // @ts-ignore
+                                      record,
+                                      basePath,
+                                      resource,
+                                      id: String(id),
+                                  })
+                                : createElement(expand, {
+                                      record,
+                                      basePath,
+                                      resource,
+                                      id: String(id),
+                                  })}
+                        </TableCell>
+                    </TableRow>
+                )}
+            </Fragment>
+        );
+    }
+);
 
 DatagridRow.propTypes = {
     basePath: PropTypes.string,