Clean up shared cell props

- Pull out shared/same props into a single obj instead of repeating it 3x & making it less clear which props are different depending on the cell type - remove getRowHeight fn from being passed down; it's not being used - pass setRowHeight only to first column as a performance optimization; this will be used for lineCount heights and since lineCount heights are all the same, we really only need to run it once - clean up footer row cells as well while we're here
elastic · Oct 29, 2021 · f4a2923 · f4a2923
1 parent aa856e6
commit f4a2923
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 52 deletions.
diff --git a/src/components/datagrid/body/data_grid_body.tsx b/src/components/datagrid/body/data_grid_body.tsx
@@ -70,7 +70,6 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
     setRowHeight,
     schemaDetectors,
     rowHeightsOptions,
-    getRowHeight,
     rowHeightUtils,
   } = data;
 
@@ -119,30 +118,33 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
     [`euiDataGridRowCell--${textTransform}`]: textTransform,
   });
 
+  const sharedCellProps = {
+    rowIndex,
+    visibleRowIndex,
+    colIndex: columnIndex,
+    interactiveCellId,
+    className: classes,
+    style: {
+      ...style,
+      top: `${parseFloat(style.top as string) + headerRowHeight}px`,
+    },
+    rowHeightsOptions,
+    rowHeightUtils,
+    setRowHeight: isFirstColumn ? setRowHeight : undefined,
+  };
+
   if (isLeadingControlColumn) {
     const leadingColumn = leadingControlColumns[columnIndex];
     const { id, rowCellRender } = leadingColumn;
 
     cellContent = (
       <EuiDataGridCell
-        rowIndex={rowIndex}
-        visibleRowIndex={visibleRowIndex}
-        colIndex={columnIndex}
+        {...sharedCellProps}
         columnId={id}
         popoverContent={DefaultColumnFormatter}
         width={leadingColumn.width}
         renderCellValue={rowCellRender}
-        interactiveCellId={interactiveCellId}
         isExpandable={false}
-        className={classes}
-        setRowHeight={setRowHeight}
-        getRowHeight={getRowHeight}
-        rowHeightsOptions={rowHeightsOptions}
-        rowHeightUtils={rowHeightUtils}
-        style={{
-          ...style,
-          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
-        }}
       />
     );
   } else if (isTrailingControlColumn) {
@@ -153,23 +155,12 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
 
     cellContent = (
       <EuiDataGridCell
-        rowIndex={rowIndex}
-        visibleRowIndex={visibleRowIndex}
-        colIndex={columnIndex}
+        {...sharedCellProps}
         columnId={id}
         popoverContent={DefaultColumnFormatter}
         width={trailingColumn.width}
         renderCellValue={rowCellRender}
-        interactiveCellId={interactiveCellId}
         isExpandable={false}
-        className={classes}
-        rowHeightsOptions={rowHeightsOptions}
-        getRowHeight={getRowHeight}
-        rowHeightUtils={rowHeightUtils}
-        style={{
-          ...style,
-          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
-        }}
       />
     );
   } else {
@@ -188,9 +179,7 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
 
     cellContent = (
       <EuiDataGridCell
-        rowIndex={rowIndex}
-        visibleRowIndex={visibleRowIndex}
-        colIndex={columnIndex}
+        {...sharedCellProps}
         columnId={columnId}
         column={column}
         columnType={columnType}
@@ -199,14 +188,6 @@ export const Cell: FunctionComponent<GridChildComponentProps> = ({
         renderCellValue={renderCellValue}
         interactiveCellId={interactiveCellId}
         isExpandable={isExpandable}
-        className={classes}
-        rowHeightsOptions={rowHeightsOptions}
-        getRowHeight={getRowHeight}
-        rowHeightUtils={rowHeightUtils}
-        style={{
-          ...style,
-          top: `${parseFloat(style.top as string) + headerRowHeight}px`,
-        }}
       />
     );
   }
@@ -700,7 +681,6 @@ export const EuiDataGridBody: FunctionComponent<EuiDataGridBodyProps> = (
                 itemData={{
                   schemaDetectors,
                   setRowHeight,
-                  getRowHeight,
                   getCorrectRowIndex,
                   rowMap,
                   rowOffset: pagination

diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx
@@ -176,7 +176,6 @@ describe('EuiDataGridCell', () => {
 
         const component = mountEuiDataGridCellWithContext({
           rowHeightsOptions: { defaultHeight: 'auto' },
-          getRowHeight: jest.fn(() => 50),
         });
 
         triggerUpdate(component);
@@ -188,7 +187,6 @@ describe('EuiDataGridCell', () => {
 
         const component = mountEuiDataGridCellWithContext({
           rowHeightsOptions: { defaultHeight: 34 },
-          getRowHeight: jest.fn(() => 50),
         });
 
         triggerUpdate(component);

diff --git a/src/components/datagrid/body/data_grid_footer_row.tsx b/src/components/datagrid/body/data_grid_footer_row.tsx
@@ -40,6 +40,13 @@ const EuiDataGridFooterRow = memo(
       );
       const dataTestSubj = classnames('dataGridRow', _dataTestSubj);
 
+      const sharedCellProps = {
+        rowIndex,
+        visibleRowIndex,
+        interactiveCellId,
+        isExpandable: true,
+      };
+
       return (
         <div
           ref={ref}
@@ -50,16 +57,13 @@ const EuiDataGridFooterRow = memo(
         >
           {leadingControlColumns.map(({ id, width }, i) => (
             <EuiDataGridCell
+              {...sharedCellProps}
               key={`${id}-${rowIndex}`}
-              rowIndex={rowIndex}
-              visibleRowIndex={visibleRowIndex}
               colIndex={i}
               columnId={id}
               popoverContent={DefaultColumnFormatter}
               width={width}
               renderCellValue={() => null}
-              interactiveCellId={interactiveCellId}
-              isExpandable={true}
               className="euiDataGridFooterCell euiDataGridRowCell--controlColumn"
             />
           ))}
@@ -74,17 +78,14 @@ const EuiDataGridFooterRow = memo(
 
             return (
               <EuiDataGridCell
+                {...sharedCellProps}
                 key={`${id}-${rowIndex}`}
-                rowIndex={rowIndex}
-                visibleRowIndex={visibleRowIndex}
                 colIndex={columnPosition}
                 columnId={id}
                 columnType={columnType}
                 popoverContent={popoverContent}
                 width={width || undefined}
                 renderCellValue={renderCellValue}
-                interactiveCellId={interactiveCellId}
-                isExpandable={true}
                 className="euiDataGridFooterCell"
               />
             );
@@ -94,16 +95,13 @@ const EuiDataGridFooterRow = memo(
 
             return (
               <EuiDataGridCell
+                {...sharedCellProps}
                 key={`${id}-${rowIndex}`}
-                rowIndex={rowIndex}
-                visibleRowIndex={visibleRowIndex}
                 colIndex={colIndex}
                 columnId={id}
                 popoverContent={DefaultColumnFormatter}
                 width={width}
                 renderCellValue={() => null}
-                interactiveCellId={interactiveCellId}
-                isExpandable={true}
                 className="euiDataGridFooterCell euiDataGridRowCell--controlColumn"
               />
             );