🔥 Clean up cell content DOM

- move all logic related to content to the `EuiDataGridCellContent` component, including the wrapper let the parent cell pass down any needed refs + actions
elastic · Oct 4, 2023 · 2f6a07b · 2f6a07b
1 parent 9057663
commit 2f6a07b
Showing 1 changed file with 33 additions and 37 deletions.
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -17,6 +17,7 @@ import React, {
   KeyboardEvent,
   memo,
   MutableRefObject,
+  ReactNode,
 } from 'react';
 import { createPortal } from 'react-dom';
 import { tabbable } from 'tabbable';
@@ -48,18 +49,21 @@ const EuiDataGridCellContent: FunctionComponent<
   EuiDataGridCellValueProps & {
     setCellProps: EuiDataGridCellValueElementProps['setCellProps'];
     setCellContentsRef: EuiDataGridCell['setCellContentsRef'];
+    setPopoverAnchorRef: MutableRefObject<HTMLDivElement | null>;
     isExpanded: boolean;
     isControlColumn: boolean;
     isFocused: boolean;
     ariaRowIndex: number;
     rowHeight?: EuiDataGridRowHeightOption;
     cellHeightType: string;
+    cellActions?: ReactNode;
   }
 > = memo(
   ({
     renderCellValue,
     column,
     setCellContentsRef,
+    setPopoverAnchorRef,
     rowIndex,
     colIndex,
     ariaRowIndex,
@@ -68,12 +72,16 @@ const EuiDataGridCellContent: FunctionComponent<
     isControlColumn,
     isFocused,
     cellHeightType,
+    cellActions,
     ...rest
   }) => {
     // React is more permissible than the TS types indicate
     const CellElement =
       renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
 
+    // TODO: Clean up expand/content by height shenanigans
+    const wrapperClasses = classNames();
+
     const classes = classNames(
       `euiDataGridRowCell__${cellHeightType}Height`,
       !isControlColumn && {
@@ -125,10 +133,11 @@ const EuiDataGridCellContent: FunctionComponent<
     );
 
     return (
-      <>
+      <div ref={setPopoverAnchorRef} className={wrapperClasses}>
         {cellContent}
         {screenReaderText}
-      </>
+        {cellActions}
+      </div>
     );
   }
 );
@@ -671,11 +680,6 @@ export class EuiDataGridCell extends Component<
       }
     };
 
-    const isDefinedHeight = !!rowHeightUtils?.getRowHeightOption(
-      rowIndex,
-      rowHeightsOptions
-    );
-
     const rowHeight = rowHeightUtils?.getRowHeightOption(
       rowIndex,
       rowHeightsOptions
@@ -694,6 +698,7 @@ export class EuiDataGridCell extends Component<
       isDetails: false,
       isFocused: this.state.isFocused,
       setCellContentsRef: this.setCellContentsRef,
+      setPopoverAnchorRef: this.popoverAnchorRef,
       rowHeight,
       rowHeightUtils,
       isControlColumn: cellClasses.includes(
@@ -702,11 +707,6 @@ export class EuiDataGridCell extends Component<
       ariaRowIndex,
     };
 
-    const anchorClass = 'euiDataGridRowCell__expandFlex';
-    const expandClass = isDefinedHeight
-      ? 'euiDataGridRowCell__contentByHeight'
-      : 'euiDataGridRowCell__expandContent';
-
     let innerContent = (
       <EuiFocusTrap
         disabled={!this.state.isEntered}
@@ -716,36 +716,32 @@ export class EuiDataGridCell extends Component<
         }}
         clickOutsideDisables={true}
       >
-        <div className={anchorClass} ref={this.popoverAnchorRef}>
-          <div className={expandClass}>
-            <EuiDataGridCellContent {...cellContentProps} />
-          </div>
-        </div>
+        <EuiDataGridCellContent {...cellContentProps} />
       </EuiFocusTrap>
     );
 
     if (isExpandable) {
       innerContent = (
-        <div className={anchorClass} ref={this.popoverAnchorRef}>
-          <div className={expandClass}>
-            <EuiDataGridCellContent {...cellContentProps} />
-          </div>
-          {showCellActions && (
-            <EuiDataGridCellActions
-              rowIndex={rowIndex}
-              colIndex={colIndex}
-              column={column}
-              cellHeightType={cellHeightType}
-              onExpandClick={() => {
-                if (popoverIsOpen) {
-                  closeCellPopover();
-                } else {
-                  openCellPopover({ rowIndex: visibleRowIndex, colIndex });
-                }
-              }}
-            />
-          )}
-        </div>
+        <EuiDataGridCellContent
+          {...cellContentProps}
+          cellActions={
+            showCellActions && (
+              <EuiDataGridCellActions
+                rowIndex={rowIndex}
+                colIndex={colIndex}
+                column={column}
+                cellHeightType={cellHeightType}
+                onExpandClick={() => {
+                  if (popoverIsOpen) {
+                    closeCellPopover();
+                  } else {
+                    openCellPopover({ rowIndex: visibleRowIndex, colIndex });
+                  }
+                }}
+              />
+            )
+          }
+        />
       );
     }