[WIP] hello darkness my old friend...

elastic · Oct 28, 2021 · 2655093 · 2655093
1 parent 8cbe865
commit 2655093
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js
@@ -418,6 +418,7 @@ export default () => {
           onChangePage: onChangePage,
         }}
         onColumnResize={onColumnResize.current}
+        rowHeightsOptions={{ defaultHeight: { lineCount: 10 } }}
       />
     </DataContext.Provider>
   );

diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
@@ -201,13 +201,13 @@ export class EuiDataGridCell extends Component<
       rowHeightUtils?.shouldCacheCellHeight(rowIndex, rowHeightsOptions)
     ) {
       const { columnId, visibleRowIndex } = this.props;
-      const rowHeight = this.cellContentsRef.offsetHeight;
 
       rowHeightUtils.setRowHeight(
         rowIndex,
         columnId,
-        rowHeight,
-        visibleRowIndex
+        this.cellContentsRef,
+        visibleRowIndex,
+        rowHeightsOptions
       );
     }
   };

diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts
@@ -45,20 +45,38 @@ export class RowHeightUtils {
   setRowHeight(
     rowIndex: number,
     colId: string,
-    height: number = DEFAULT_ROW_HEIGHT,
-    visibleRowIndex: number
+    cellRef: HTMLElement,
+    visibleRowIndex: number,
+    rowHeightsOptions?: EuiDataGridRowHeightsOptions
   ) {
+    const heightOption = this.getRowHeightOption(rowIndex, rowHeightsOptions);
+    const cellHeight = cellRef.offsetHeight || DEFAULT_ROW_HEIGHT;
+    let updatedHeight;
+
+    if (this.isLineCount(heightOption)) {
+      const { lineCount } = heightOption as { lineCount: number };
+
+      const styles = window.getComputedStyle(cellRef, null);
+      const lineHeight = parseInt(styles.lineHeight, 10) || 24;
+
+      updatedHeight = Math.ceil(
+        lineCount * lineHeight +
+          this.styles.paddingTop +
+          this.styles.paddingBottom
+      );
+    } else {
+      updatedHeight = Math.ceil(
+        cellHeight + this.styles.paddingTop + this.styles.paddingBottom
+      );
+    }
+
     const rowHeights =
       this.heightsCache.get(rowIndex) || new Map<string, number>();
-    const adaptedHeight = Math.ceil(
-      height + this.styles.paddingTop + this.styles.paddingBottom
-    );
-
-    if (rowHeights.get(colId) === adaptedHeight) {
+    if (rowHeights.get(colId) === updatedHeight) {
       return;
     }
 
-    rowHeights.set(colId, adaptedHeight);
+    rowHeights.set(colId, updatedHeight);
     this.heightsCache.set(rowIndex, rowHeights);
     this.resetRow(visibleRowIndex);
   }