From f753c2cff08c644f8ab3e655c2528ca7883790de Mon Sep 17 00:00:00 2001 From: lauri865 Date: Thu, 19 Dec 2024 16:58:18 +0100 Subject: [PATCH] pass only necessary dimensions into the GridRow --- .../columnHeaders/useGridColumnHeaders.tsx | 4 +++- packages/x-data-grid/src/components/GridRow.tsx | 14 ++++++++------ .../src/components/GridSkeletonLoadingOverlay.tsx | 5 +++-- .../columnHeaders/useGridColumnHeaders.tsx | 8 ++++++-- .../virtualization/useGridVirtualScroller.tsx | 4 +++- .../src/internals/utils/getPinnedCellOffset.ts | 11 +++-------- 6 files changed, 26 insertions(+), 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 index e8948063ef5d7..66b8d90ac05f5 100644 --- 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 index 035529f9b2c2b..0e9eb3afb545f 100644 --- 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 { 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 { isLastVisible: boolean; isNotVisible: boolean; showBottomBorder: boolean; + scrollbarWidth: number; + gridHasFiller: boolean; onClick?: React.MouseEventHandler; onDoubleClick?: React.MouseEventHandler; onMouseEnter?: React.MouseEventHandler; @@ -75,7 +76,7 @@ const GridRow = React.forwardRef(function GridRow( pinnedColumns, offsetTop, offsetLeft, - dimensions, + columnsTotalWidth, firstColumnIndex, lastColumnIndex, focusedColumnIndex, @@ -83,6 +84,8 @@ const GridRow = React.forwardRef(function GridRow( isLastVisible, isNotVisible, showBottomBorder, + scrollbarWidth, + gridHasFiller, onClick, onDoubleClick, onMouseEnter, @@ -102,8 +105,6 @@ const GridRow = React.forwardRef(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(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 index d8f66a596a970..6b6106e6ffc99 100644 --- 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 = ( ); - 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 index c22436071d2d9..49937d7cd668c 100644 --- 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 index 7689d0ef53967..590e8ba49cf69 100644 --- 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 index 773c1e092189c..36de771547a59 100644 --- a/packages/x-data-grid/src/internals/utils/getPinnedCellOffset.ts +++ b/packages/x-data-grid/src/internals/utils/getPinnedCellOffset.ts @@ -1,16 +1,14 @@ 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, - dimensions: GridDimensions, + columnsTotalWidth: number, + scrollbarWidth: number, ) => { - const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0; - let pinnedOffset: number | undefined; switch (pinnedPosition) { case PinnedColumnPosition.LEFT: @@ -18,10 +16,7 @@ export const getPinnedCellOffset = ( break; case PinnedColumnPosition.RIGHT: pinnedOffset = - dimensions.columnsTotalWidth - - columnPositions[columnIndex] - - computedWidth + - scrollbarWidth; + columnsTotalWidth - columnPositions[columnIndex] - computedWidth + scrollbarWidth; break; default: pinnedOffset = undefined;