fix(ui-commons): use props values to calculate the height

AntaresSimulatorTeam · Jan 30, 2025 · ff75e42 · ff75e42
1 parent be08fb8
commit ff75e42
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/webapp/src/components/common/DataGrid.tsx b/webapp/src/components/common/DataGrid.tsx
@@ -26,6 +26,8 @@ import { useCallback, useState } from "react";
 import { voidFn } from "@/utils/fnUtils";
 import { darkTheme } from "./Matrix/styles";
 import { useUpdateEffect } from "react-use";
+import * as RA from "ramda-adjunct";
+import { hasGroup } from "@/utils/dataGridUtils";
 
 interface StringRowMarkerOptions {
   kind: "string" | "clickable-string";
@@ -66,6 +68,11 @@ function DataGrid({
   onGridSelectionChange,
   enableColumnResize = true,
   freezeColumns,
+  height: heightFromProps,
+  groupHeaderHeight = ROW_HEIGHT,
+  headerHeight = ROW_HEIGHT,
+  rowHeight = ROW_HEIGHT,
+  overscrollY = OVERSCROLL,
   rows,
   ...rest
 }: DataGridProps) {
@@ -75,17 +82,19 @@ function DataGrid({
   const isStringRowMarkers = isStringRowMarkerOptions(rowMarkersOptions);
   const adjustedFreezeColumns = isStringRowMarkers ? (freezeColumns || 0) + 1 : freezeColumns;
 
-  // Manually calculate the height allows to remove the blank space at the bottom of the grid
-  // when there is no scrollbar. Header is included in the height calculation.
-  //! Group header is not included, fix it when needed.
-  const height = ROW_HEIGHT * (rows + 1) + OVERSCROLL;
-
   const [columns, setColumns] = useState(initColumns);
   const [gridSelection, setGridSelection] = useState<GridSelection>({
     rows: CompactSelection.empty(),
     columns: CompactSelection.empty(),
   });
 
+  // Manually calculate the height allows to remove the blank space at the bottom of the grid
+  // when there is no scrollbar
+  const height =
+    RA.isUndefined(heightFromProps) && RA.isNumber(rowHeight)
+      ? rowHeight * rows + headerHeight + overscrollY + (hasGroup(columns) ? groupHeaderHeight : 0)
+      : heightFromProps;
+
   useUpdateEffect(() => {
     setColumns(initColumns());
   }, [columnsFromProps, isStringRowMarkers]);
@@ -276,17 +285,16 @@ function DataGrid({
 
   return (
     <DataEditor
-      groupHeaderHeight={ROW_HEIGHT}
-      headerHeight={ROW_HEIGHT}
-      rowHeight={ROW_HEIGHT}
+      groupHeaderHeight={groupHeaderHeight}
+      headerHeight={headerHeight}
+      rowHeight={rowHeight}
       smoothScrollX
       smoothScrollY
       overscrollX={OVERSCROLL}
-      overscrollY={OVERSCROLL}
+      overscrollY={overscrollY}
       width="100%"
       height={height}
       theme={darkTheme}
-      {...rest}
       rows={rows}
       columns={columns}
       rowMarkers={isStringRowMarkers ? "none" : rowMarkersOptions}
@@ -299,6 +307,7 @@ function DataGrid({
       gridSelection={gridSelection}
       onGridSelectionChange={handleGridSelectionChange}
       freezeColumns={adjustedFreezeColumns}
+      {...rest}
     />
   );
 }

diff --git a/webapp/src/utils/dataGridUtils.ts b/webapp/src/utils/dataGridUtils.ts
@@ -14,6 +14,7 @@
 
 import type { GridColumn } from "@glideapps/glide-data-grid";
 import { measureTextWidth } from "./domUtils";
+import * as RA from "ramda-adjunct";
 
 /**
  * Gets the width of the given column.
@@ -36,3 +37,13 @@ export function getColumnWidth(column: GridColumn, values: () => string[]) {
   // Under 110px, add a margin to the width to prevent text from being cut off
   return width < 110 ? width + 15 : width;
 }
+
+/**
+ * Checks if any of the specified columns have a group.
+ *
+ * @param columns - The columns to check.
+ * @returns True if any of the columns have a group, false otherwise.
+ */
+export function hasGroup(columns: GridColumn[] | readonly GridColumn[]) {
+  return columns.some(({ group }) => RA.isString(group));
+}