add utility function to extract left and right freeze, minor fixes

Author: Mihran Margaryan

packages/core/src/common/utils.tsx

@@ -282,3 +282,10 @@ export function useDeepMemo<T>(value: T): T {
 
     return ref.current;
 }
+
+export function normalizeFreezeColumns(freezeColumns: number | readonly [number, number]): readonly [number, number] {
+    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
+    const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
+
+    return [freezeLeftColumns, freezeRightColumns];
+}

packages/core/src/data-editor/data-editor.tsx

@@ -44,7 +44,7 @@ import {
     mergeAndRealizeTheme,
 } from "../common/styles.js";
 import type { DataGridRef } from "../internal/data-grid/data-grid.js";
-import { getScrollBarWidth, useEventListener, whenDefined } from "../common/utils.js";
+import { getScrollBarWidth, useEventListener, normalizeFreezeColumns, whenDefined } from "../common/utils.js";
 import {
     isGroupEqual,
     itemsAreEqual,
@@ -911,8 +911,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const maxColumnWidth = Math.max(maxColumnWidthIn, minColumnWidth);
     const maxColumnAutoWidth = Math.max(maxColumnAutoWidthIn ?? maxColumnWidth, minColumnWidth);
 
-    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
-    const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
+    const [freezeLeftColumns, freezeRightColumns] = normalizeFreezeColumns(freezeColumns);
 
     const docStyle = React.useMemo(() => {
         if (typeof window === "undefined") return { fontSize: "16px" };
@@ -1567,7 +1566,7 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
                             frozenLeftWidth += columns[i].width;
                         }
                         let frozenRightWidth = 0;
-                        for (let i = columns.length - 1; i >= columns.length - 1 - freezeRightColumns; i--) {
+                        for (let i = columns.length - 1; i >= columns.length - freezeRightColumns; i--) {
                             frozenRightWidth += columns[i].width;
                         }
                         let trailingRowHeight = 0;

packages/core/src/internal/data-grid/data-grid.tsx

@@ -26,7 +26,13 @@ import {
 } from "./data-grid-types.js";
 import { CellSet } from "./cell-set.js";
 import { SpriteManager, type SpriteMap } from "./data-grid-sprites.js";
-import { direction, getScrollBarWidth, useDebouncedMemo, useEventListener } from "../../common/utils.js";
+import {
+    direction,
+    getScrollBarWidth,
+    useDebouncedMemo,
+    useEventListener,
+    normalizeFreezeColumns,
+} from "../../common/utils.js";
 import clamp from "lodash/clamp.js";
 import makeRange from "lodash/range.js";
 import { drawGrid } from "./render/data-grid-render.js";
@@ -403,8 +409,7 @@ const DataGrid: React.ForwardRefRenderFunction<DataGridRef, DataGridProps> = (p,
     } = p;
     const translateX = p.translateX ?? 0;
     const translateY = p.translateY ?? 0;
-    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
-    const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
+    const [freezeLeftColumns, freezeRightColumns] = normalizeFreezeColumns(freezeColumns);
     const cellXOffset = Math.max(freezeLeftColumns, Math.min(columns.length - 1, cellXOffsetReal));
 
     const ref = React.useRef<HTMLCanvasElement | null>(null);

packages/core/src/internal/data-grid/render/data-grid-lib.ts

@@ -8,7 +8,7 @@ import {
     type Rectangle,
     type BaseGridCell,
 } from "../data-grid-types.js";
-import { direction } from "../../../common/utils.js";
+import { direction, normalizeFreezeColumns } from "../../../common/utils.js";
 import React from "react";
 import type { BaseDrawArgs, PrepResult } from "../../../cells/cell-types.js";
 import { split as splitText, clearCache } from "canvas-hypertxt";
@@ -232,8 +232,7 @@ export function getEffectiveColumns(
 ): readonly MappedGridColumn[] {
     const mappedCols = remapForDnDState(columns, dndState);
 
-    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
-    const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
+    const [freezeLeftColumns, freezeRightColumns] = normalizeFreezeColumns(freezeColumns);
 
     const sticky: MappedGridColumn[] = [];
     for (let i = 0; i < freezeLeftColumns; i++) {
@@ -829,8 +828,7 @@ export function computeBounds(
         height: 0,
     };
 
-    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
-    const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
+    const [freezeLeftColumns, freezeRightColumns] = normalizeFreezeColumns(freezeColumns);
     const column = mappedColumns[col];
 
     if (col >= mappedColumns.length || row >= rows || row < -2 || col < 0) {

packages/core/src/internal/data-grid/render/data-grid-render.ts

@@ -12,6 +12,7 @@ import { drawGridHeaders } from "./data-grid-render.header.js";
 import { drawGridLines, overdrawStickyBoundaries, drawBlanks, drawExtraRowThemes } from "./data-grid-render.lines.js";
 import { blitLastFrame, blitResizedCol, computeCanBlit } from "./data-grid-render.blit.js";
 import { drawHighlightRings, drawFillHandle, drawColumnResizeOutline } from "./data-grid.render.rings.js";
+import { normalizeFreezeColumns } from "../../../common/utils.js";
 
 // Future optimization opportunities
 // - Create a cache of a buffer used to render the full view of a partially displayed column so that when
@@ -188,8 +189,7 @@ export function drawGrid(arg: DrawGridArg, lastArg: DrawGridArg | undefined) {
     const doubleBuffer = renderStrategy === "double-buffer";
     const dpr = Math.min(maxScaleFactor, Math.ceil(window.devicePixelRatio ?? 1));
 
-    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
-    const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
+    const [freezeLeftColumns, freezeRightColumns] = normalizeFreezeColumns(freezeColumns);
 
     // if we are double buffering we need to make sure we can blit. If we can't we need to redraw the whole thing
     const canBlit = renderStrategy !== "direct" && computeCanBlit(arg, lastArg);

packages/core/src/internal/data-grid/render/data-grid.render.rings.ts

@@ -7,6 +7,7 @@ import { blend, withAlpha } from "../color-parser.js";
 import { hugRectToTarget, intersectRect, rectContains, splitRectIntoRegions } from "../../../common/math.js";
 import { getSpanBounds, walkColumns, walkRowsInCol } from "./data-grid-render.walk.js";
 import { type Highlight } from "./data-grid-render.cells.js";
+import { normalizeFreezeColumns } from "../../../common/utils.js";
 
 export function drawHighlightRings(
     ctx: CanvasRenderingContext2D,
@@ -27,8 +28,7 @@ export function drawHighlightRings(
     theme: FullTheme
 ): (() => void) | undefined {
     const highlightRegions = allHighlightRegions?.filter(x => x.style !== "no-outline");
-    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
-    const freezeRightColumns = typeof freezeColumns === "number" ? 0 : freezeColumns[1];
+    const [freezeLeftColumns, freezeRightColumns] = normalizeFreezeColumns(freezeColumns);
 
     if (highlightRegions === undefined || highlightRegions.length === 0) return undefined;
 

packages/core/src/internal/scrolling-data-grid/scrolling-data-grid.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import DataGridDnd, { type DataGridDndProps } from "../data-grid-dnd/data-grid-dnd.js";
 import type { Rectangle } from "../data-grid/data-grid-types.js";
 import { InfiniteScroller } from "./infinite-scroller.js";
+import { normalizeFreezeColumns } from "../../common/utils.js";
 
 type Props = Omit<DataGridDndProps, "width" | "height" | "eventTargetRef">;
 
@@ -102,7 +103,7 @@ const GridScroller: React.FunctionComponent<ScrollingDataGridProps> = p => {
     const lastY = React.useRef<number | undefined>();
     const lastSize = React.useRef<readonly [number, number] | undefined>();
 
-    const freezeLeftColumns = typeof freezeColumns === "number" ? freezeColumns : freezeColumns[0];
+    const [freezeLeftColumns] = normalizeFreezeColumns(freezeColumns);
 
     const width = nonGrowWidth + Math.max(0, overscrollX ?? 0);
 

packages/source/src/use-collapsing-groups.ts

@@ -34,7 +34,7 @@ export function useCollapsingGroups(props: Props): Result {
         const result: [number, number][] = [];
         let current: [number, number] = [-1, -1];
         let lastGroup: string | undefined;
-        for (let i = freezeColumnsLeft as number; i < columnsIn.length - freezeColumnsRight; i++) {
+        for (let i = freezeColumnsLeft; i < columnsIn.length - freezeColumnsRight; i++) {
             const c = columnsIn[i];
             const group = c.group ?? "";
             const isCollapsed = collapsed.includes(group);
@@ -121,8 +121,8 @@ export function useCollapsingGroups(props: Props): Result {
                 name: group,
                 overrideTheme: collapsed.includes(group ?? "")
                     ? {
-                        bgHeader: theme.bgHeaderHasFocus,
-                    }
+                          bgHeader: theme.bgHeaderHasFocus,
+                      }
                     : undefined,
             };
         },