fix: ensure gridStyle fontSize and cellPadding trigger recalculation …

…of cell line height
elastic · Jun 4, 2024 · de2cfd5 · de2cfd5
1 parent 742961a
commit de2cfd5
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 1 deletion.
diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell.tsx
@@ -318,6 +318,10 @@ export class EuiDataGridCell extends Component<
       this.recalculateLineHeight();
     }
 
+    if (this.props?.shouldUpdateLineHeight === true) {
+      this.recalculateLineHeight();
+    }
+
     if (
       (this.props.rowHeightUtils as RowHeightVirtualizationUtils)
         ?.compensateForLayoutShift &&

diff --git a/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx b/packages/eui/src/components/datagrid/body/cell/data_grid_cell_wrapper.tsx
@@ -75,6 +75,7 @@ export const CellWrapper: FunctionComponent<CellProps> = memo(
     rowHeightsOptions,
     rowHeightUtils,
     rowManager,
+    shouldUpdateLineHeight,
     ...rest
   }) => {
     const popoverContext = useContext(DataGridCellPopoverContext);
@@ -155,6 +156,7 @@ export const CellWrapper: FunctionComponent<CellProps> = memo(
           width={leadingColumn.width}
           renderCellValue={rowCellRender}
           isExpandable={false}
+          shouldUpdateLineHeight={shouldUpdateLineHeight}
           {...rest}
         />
       );
@@ -171,6 +173,7 @@ export const CellWrapper: FunctionComponent<CellProps> = memo(
           width={trailingColumn.width}
           renderCellValue={rowCellRender}
           isExpandable={false}
+          shouldUpdateLineHeight={shouldUpdateLineHeight}
           {...rest}
         />
       );
@@ -194,6 +197,7 @@ export const CellWrapper: FunctionComponent<CellProps> = memo(
           renderCellPopover={renderCellPopover}
           interactiveCellId={interactiveCellId}
           isExpandable={isExpandable}
+          shouldUpdateLineHeight={shouldUpdateLineHeight}
           {...rest}
         />
       );

diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx
@@ -42,11 +42,13 @@ import {
 } from '../utils/grid_height_width';
 import { useDefaultColumnWidth, useColumnWidths } from '../utils/col_widths';
 import { useRowHeightUtils, useDefaultRowHeight } from '../utils/row_heights';
+import { useShouldUpdateCellLineHeight } from '../utils/cell_heights';
 import { useScrollBars, useScroll } from '../utils/scrolling';
 import { IS_JEST_ENVIRONMENT } from '../../../utils';
 
 export const Cell: FunctionComponent<GridChildComponentProps> = memo(
   ({ columnIndex, rowIndex, style, data }) => {
+    const { gridStyles, ...cellData } = data;
     const memoizedStyles = useDeepEqual(style);
     const cellStyles = useMemo(() => {
       const { headerRowHeight } = data;
@@ -56,12 +58,15 @@ export const Cell: FunctionComponent<GridChildComponentProps> = memo(
       };
     }, [memoizedStyles, data]);
 
+    const shouldUpdateLineHeight = useShouldUpdateCellLineHeight(gridStyles);
+
     return (
       <CellWrapper
         colIndex={columnIndex}
         visibleRowIndex={rowIndex}
         style={cellStyles}
-        {...data}
+        shouldUpdateLineHeight={shouldUpdateLineHeight}
+        {...cellData}
       />
     );
   }
@@ -334,6 +339,7 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
           rowManager,
           pagination,
           headerRowHeight,
+          gridStyles,
         };
       }, [
         schemaDetectors,
@@ -354,6 +360,7 @@ export const EuiDataGridBodyVirtualized: FunctionComponent<EuiDataGridBodyProps>
         rowManager,
         pagination,
         headerRowHeight,
+        gridStyles,
       ]);
 
       const rowWrapperContextValue = useMemo(() => {

diff --git a/packages/eui/src/components/datagrid/data_grid_types.ts b/packages/eui/src/components/datagrid/data_grid_types.ts
@@ -640,6 +640,7 @@ export interface EuiDataGridCellProps {
   rowHeightUtils?: RowHeightUtilsType;
   rowManager?: EuiDataGridRowManager;
   pagination?: Required<EuiDataGridPaginationProps>;
+  shouldUpdateLineHeight?: boolean;
 }
 
 export interface EuiDataGridCellState {

diff --git a/packages/eui/src/components/datagrid/utils/cell_heights.ts b/packages/eui/src/components/datagrid/utils/cell_heights.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+
+import { EuiDataGridBodyProps } from '../data_grid_types';
+
+export const useShouldUpdateCellLineHeight = (
+  gridStyles: EuiDataGridBodyProps['gridStyles']
+) => {
+  const _gridStyles = useRef(gridStyles);
+  const [shouldUpdateLineHeight, setShouldUpdateLineHeight] = useState(false);
+
+  useEffect(() => {
+    if (
+      gridStyles &&
+      (_gridStyles.current?.fontSize || _gridStyles.current?.cellPadding)
+    ) {
+      const hasNewFontSize = _gridStyles.current?.fontSize
+        ? _gridStyles.current?.fontSize !== gridStyles?.fontSize
+        : false;
+      const hasNewCellPadding = _gridStyles.current?.cellPadding
+        ? _gridStyles.current?.cellPadding !== gridStyles?.cellPadding
+        : false;
+
+      setShouldUpdateLineHeight(hasNewFontSize || hasNewCellPadding);
+
+      _gridStyles.current = gridStyles;
+    }
+  }, [gridStyles]);
+
+  return shouldUpdateLineHeight;
+};