diff --git a/packages/x-data-grid/src/components/GridRow.tsx b/packages/x-data-grid/src/components/GridRow.tsx index 35abd7ea5e7c..8c9b223454a4 100644 --- a/packages/x-data-grid/src/components/GridRow.tsx +++ b/packages/x-data-grid/src/components/GridRow.tsx @@ -23,7 +23,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 } from '../constants/gridDetailPanelToggleField'; -import type { GridVirtualizationState } from '../hooks/features/virtualization'; import type { GridDimensions } from '../hooks/features/dimensions'; import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector'; import { gridRowMaximumTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector'; @@ -43,7 +42,7 @@ export interface GridRowProps extends React.HTMLAttributes { index: number; rowHeight: number | 'auto'; top: number; - offsets: GridVirtualizationState['offsets']; + offsetLeft: number; dimensions: GridDimensions; firstColumnToRender: number; lastColumnToRender: number; @@ -120,13 +119,13 @@ const GridRow = React.forwardRef(function GridRow( row, index, style: styleProp, + top, rowHeight, className, visibleColumns, renderedColumns, pinnedColumns, - top, - offsets, + offsetLeft, dimensions, firstColumnToRender, lastColumnToRender, @@ -524,7 +523,7 @@ const GridRow = React.forwardRef(function GridRow(
{cells} {emptyCellWidth > 0 && } @@ -591,10 +590,7 @@ GridRow.propTypes = { isLastVisible: PropTypes.bool.isRequired, isNotVisible: PropTypes.bool, lastColumnToRender: PropTypes.number.isRequired, - offsets: PropTypes.shape({ - left: PropTypes.number.isRequired, - top: PropTypes.number.isRequired, - }).isRequired, + offsetLeft: PropTypes.number.isRequired, onClick: PropTypes.func, onDoubleClick: PropTypes.func, onMouseEnter: PropTypes.func, @@ -610,6 +606,7 @@ GridRow.propTypes = { * If `null`, no cell in this row is in the tab sequence. */ tabbableCell: PropTypes.string, + top: PropTypes.number.isRequired, visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired, } as any; 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 c1067c514edc..404dd8a94f13 100644 --- a/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx +++ b/packages/x-data-grid/src/hooks/features/columnHeaders/useGridColumnHeaders.tsx @@ -9,7 +9,7 @@ import { GridEventListener } from '../../../models/events'; import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColumnHeaderItem'; import { gridDimensionsSelector } from '../dimensions'; import { - gridOffsetsSelector, + gridOffsetLeftSelector, gridRenderContextColumnsSelector, gridVirtualizationColumnEnabledSelector, } from '../virtualization'; @@ -101,7 +101,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { const innerRef = React.useRef(null); const handleInnerRef = useForkRef(innerRefProp, innerRef); const dimensions = useGridSelector(apiRef, gridDimensionsSelector); - const offsets = useGridSelector(apiRef, gridOffsetsSelector); + const offsetLeft = useGridSelector(apiRef, gridOffsetLeftSelector); const renderContext = useGridSelector(apiRef, gridRenderContextColumnsSelector); const visiblePinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector); @@ -164,7 +164,7 @@ export const useGridColumnHeaders = (props: UseGridColumnHeadersProps) => { (visiblePinnedColumns.right.length > 0 && isPinnedRight) || (visiblePinnedColumns.right.length === 0 && isNotPinned); - const leftOffsetWidth = offsets.left - leftOverflow; + const leftOffsetWidth = offsetLeft - leftOverflow; return ( diff --git a/packages/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts b/packages/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts index 186b5e179335..44f9858c0743 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts +++ b/packages/x-data-grid/src/hooks/features/virtualization/gridVirtualizationSelectors.ts @@ -41,9 +41,9 @@ export const gridRenderContextSelector = createSelector( * @category Virtualization * @ignore - do not document. */ -export const gridOffsetsSelector = createSelector( +export const gridOffsetLeftSelector = createSelector( gridVirtualizationSelector, - (state) => state.offsets, + (state) => state.offsetLeft, ); /** 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 466e14bf3400..33ea9be195b4 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -32,7 +32,7 @@ import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; import { getMinimalContentHeight } from '../rows/gridRowsUtils'; import { GridRowProps } from '../../../components/GridRow'; import { - gridOffsetsSelector, + gridOffsetLeftSelector, gridRenderContextSelector, gridVirtualizationEnabledSelector, gridVirtualizationColumnEnabledSelector, @@ -76,7 +76,7 @@ export const useGridVirtualScroller = () => { const previousContext = React.useRef(EMPTY_RENDER_CONTEXT); const previousRowContext = React.useRef(EMPTY_RENDER_CONTEXT); - const offsets = useGridSelector(apiRef, gridOffsetsSelector); + const offsetLeft = useGridSelector(apiRef, gridOffsetLeftSelector); const renderContext = useGridSelector(apiRef, gridRenderContextSelector); const scrollPosition = React.useRef({ top: 0, left: 0 }).current; const prevTotalWidth = React.useRef(columnsTotalWidth); @@ -124,7 +124,7 @@ export const useGridVirtualScroller = () => { virtualization: { ...state.virtualization, renderContext: nextRenderContext, - offsets: nextOffsets, + offsetLeft: nextOffsets.left, }, }; }); @@ -292,8 +292,6 @@ export const useGridVirtualScroller = () => { ) { isRowWithFocusedCellNotInRange = true; - const rowWithFocusedCell = currentPage.rows[indexOfRowWithFocusedCell]; - if (indexOfRowWithFocusedCell > firstRowToRender) { renderedRowsIndex.current.push(indexOfRowWithFocusedCell); } else { @@ -433,7 +431,7 @@ export const useGridVirtualScroller = () => { lastColumnToRender={lastColumnToRender} selected={isSelected} top={rowsMeta.positions[rowIndexInPage]} - offsets={offsets} + offsetLeft={offsetLeft} dimensions={dimensions} isFirstVisible={isFirstVisible} isLastVisible={isLastVisible} diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx index f59725c74531..98829e0e9f8f 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualization.tsx @@ -11,12 +11,7 @@ export type GridVirtualizationState = { enabled: boolean; enabledForColumns: boolean; renderContext: GridRenderContext; - offsets: { top: number; left: number }; -}; - -export const EMPTY_OFFSETS = { - top: 0, - left: 0, + offsetLeft: number; }; export const EMPTY_RENDER_CONTEXT = { @@ -31,7 +26,7 @@ export const virtualizationStateInitializer: GridStateInitializer = ( enabled: !props.disableVirtualization, enabledForColumns: true, renderContext: EMPTY_RENDER_CONTEXT, - offsets: EMPTY_OFFSETS, + offsetLeft: 0, }; return {