pass only necessary dimensions into the GridRow

mui · Dec 19, 2024 · f753c2c · f753c2c
1 parent b394a0d
commit f753c2c
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 20 deletions.
diff --git a/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid-pro/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -120,12 +120,14 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
       const item = getFilterItem(colDef);
 
       const pinnedPosition = params?.position;
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
       const pinnedOffset = getPinnedCellOffset(
         pinnedPosition,
         colDef.computedWidth,
         columnIndex,
         columnPositions,
-        dimensions,
+        dimensions.columnsTotalWidth,
+        scrollbarWidth,
       );
 
       const indexInSection = i;

diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx
@@ -20,7 +20,6 @@ import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, PinnedColumnPosition } from '../internals/constants';
-import type { GridDimensions } from '../hooks/features/dimensions';
 import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
 import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { gridEditRowsStateSelector } from '../hooks/features/editing/gridEditingSelectors';
@@ -41,7 +40,7 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   rowHeight: number | 'auto';
   offsetTop: number | undefined;
   offsetLeft: number;
-  dimensions: GridDimensions;
+  columnsTotalWidth: number;
   firstColumnIndex: number;
   lastColumnIndex: number;
   visibleColumns: GridStateColDef[];
@@ -55,6 +54,8 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   isLastVisible: boolean;
   isNotVisible: boolean;
   showBottomBorder: boolean;
+  scrollbarWidth: number;
+  gridHasFiller: boolean;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
@@ -75,14 +76,16 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
     pinnedColumns,
     offsetTop,
     offsetLeft,
-    dimensions,
+    columnsTotalWidth,
     firstColumnIndex,
     lastColumnIndex,
     focusedColumnIndex,
     isFirstVisible,
     isLastVisible,
     isNotVisible,
     showBottomBorder,
+    scrollbarWidth,
+    gridHasFiller,
     onClick,
     onDoubleClick,
     onMouseEnter,
@@ -102,8 +105,6 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
   const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   const handleRef = useForkRef(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
-  const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const editing = apiRef.current.getRowMode(rowId) === GridRowModes.Edit;
   const editable = rootProps.editMode === GridEditModes.Row;
 
@@ -296,7 +297,8 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
       column.computedWidth,
       indexRelativeToAllColumns,
       columnPositions,
-      dimensions,
+      columnsTotalWidth,
+      scrollbarWidth,
     );
 
     if (rowNode?.type === 'skeletonRow') {

diff --git a/packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx b/packages/x-data-grid/src/components/GridSkeletonLoadingOverlay.tsx
@@ -109,6 +109,7 @@ const GridSkeletonLoadingOverlay = React.forwardRef<
         const sectionIndex = pinnedSide
           ? pinnedColumns[pinnedSide].findIndex((col) => col.field === column.field) // pinned section
           : colIndex - pinnedColumns.left.length; // middle section
+        const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
         const pinnedStyle = attachPinnedStyle(
           {},
           pinnedSide,
@@ -117,7 +118,8 @@ const GridSkeletonLoadingOverlay = React.forwardRef<
             column.computedWidth,
             colIndex,
             positions,
-            dimensions,
+            dimensions.columnsTotalWidth,
+            scrollbarWidth,
           ),
         );
         const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
@@ -138,7 +140,6 @@ const GridSkeletonLoadingOverlay = React.forwardRef<
         const emptyCell = (
           <slots.skeletonCell key={`skeleton-filler-column-${i}`} width={emptyCellWidth} empty />
         );
-        const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
         const hasScrollbarFiller = isLastColumn && scrollbarWidth !== 0;
 
         if (hasFillerBefore) {

diff --git a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx
@@ -232,12 +232,14 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
       const hasFocus = columnHeaderFocus !== null && columnHeaderFocus.field === colDef.field;
       const open = columnMenuState.open && columnMenuState.field === colDef.field;
       const pinnedPosition = params?.position;
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
       const pinnedOffset = getPinnedCellOffset(
         pinnedPosition,
         colDef.computedWidth,
         columnIndex,
         columnPositions,
-        dimensions,
+        dimensions.columnsTotalWidth,
+        scrollbarWidth,
       );
 
       const siblingWithBorderingSeparator =
@@ -409,12 +411,14 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => {
       };
 
       const pinnedPosition = params.position;
+      const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
       const pinnedOffset = getPinnedCellOffset(
         pinnedPosition,
         headerInfo.width,
         columnIndex,
         columnPositions,
-        dimensions,
+        dimensions.columnsTotalWidth,
+        scrollbarWidth,
       );
 
       columnIndex += columnFields.length;

diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -526,7 +526,7 @@ export const useGridVirtualScroller = () => {
           selected={isSelected}
           offsetTop={params.rows ? undefined : rowsMeta.positions[rowIndexInPage]}
           offsetLeft={offsetLeft}
-          dimensions={dimensions}
+          columnsTotalWidth={dimensions.columnsTotalWidth}
           rowHeight={baseRowHeight}
           pinnedColumns={pinnedColumns}
           visibleColumns={visibleColumns}
@@ -537,6 +537,8 @@ export const useGridVirtualScroller = () => {
           isLastVisible={isLastVisible}
           isNotVisible={isVirtualFocusRow}
           showBottomBorder={showBottomBorder}
+          scrollbarWidth={dimensions.hasScrollY ? dimensions.scrollbarSize : 0}
+          gridHasFiller={dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width}
           {...rowProps}
         />,
       );

diff --git a/packages/x-data-grid/src/internals/utils/getPinnedCellOffset.ts b/packages/x-data-grid/src/internals/utils/getPinnedCellOffset.ts
@@ -1,27 +1,22 @@
 import { PinnedColumnPosition } from '../constants';
 import { gridColumnPositionsSelector } from '../../hooks/features/columns';
-import type { GridDimensions } from '../../hooks/features/dimensions';
 
 export const getPinnedCellOffset = (
   pinnedPosition: PinnedColumnPosition | undefined,
   computedWidth: number,
   columnIndex: number,
   columnPositions: ReturnType<typeof gridColumnPositionsSelector>,
-  dimensions: GridDimensions,
+  columnsTotalWidth: number,
+  scrollbarWidth: number,
 ) => {
-  const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
-
   let pinnedOffset: number | undefined;
   switch (pinnedPosition) {
     case PinnedColumnPosition.LEFT:
       pinnedOffset = columnPositions[columnIndex];
       break;
     case PinnedColumnPosition.RIGHT:
       pinnedOffset =
-        dimensions.columnsTotalWidth -
-        columnPositions[columnIndex] -
-        computedWidth +
-        scrollbarWidth;
+        columnsTotalWidth - columnPositions[columnIndex] - computedWidth + scrollbarWidth;
       break;
     default:
       pinnedOffset = undefined;