please thy ci

mui · Nov 26, 2024 · 71a8b31 · 71a8b31
1 parent 89579c7
commit 71a8b31
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 88 deletions.
diff --git a/docs/data/data-grid/scrolling/ScrollRestoration.js b/docs/data/data-grid/scrolling/ScrollRestoration.js
@@ -1,19 +1,14 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import HomeIcon from '@mui/icons-material/Home';
 import {
   DataGridPro,
   useGridApiRef,
-  gridExpandedRowCountSelector,
   gridVisibleColumnDefinitionsSelector,
   gridExpandedSortedRowIdsSelector,
 } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
-export default function ScrollPlayground() {
+export default function ScrollRestoration() {
   const apiRef = useGridApiRef();
 
   const [coordinates, setCoordinates] = React.useState({
@@ -34,26 +29,6 @@ export default function ScrollPlayground() {
     apiRef.current.setCellFocus(id, column.field);
   }, [apiRef, coordinates]);
 
-  const handleClick = (position) => () => {
-    const maxRowIndex = gridExpandedRowCountSelector(apiRef) - 1;
-    const maxColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
-
-    setCoordinates((coords) => {
-      switch (position) {
-        case 'top':
-          return { ...coords, rowIndex: Math.max(0, coords.rowIndex - 1) };
-        case 'bottom':
-          return { ...coords, rowIndex: Math.min(maxRowIndex, coords.rowIndex + 1) };
-        case 'left':
-          return { ...coords, colIndex: Math.max(0, coords.colIndex - 1) };
-        case 'right':
-          return { ...coords, colIndex: Math.min(maxColIndex, coords.colIndex + 1) };
-        default:
-          return { ...coords, rowIndex: 0, colIndex: 0 };
-      }
-    });
-  };
-
   const handleCellClick = (params) => {
     const rowIndex = gridExpandedSortedRowIdsSelector(apiRef).findIndex(
       (id) => id === params.id,
@@ -66,45 +41,17 @@ export default function ScrollPlayground() {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <Box sx={{ width: 300, margin: '0 auto 16px' }}>
-        <Grid container justifyContent="center">
-          <Grid item>
-            <Button onClick={handleClick('top')}>top</Button>
-          </Grid>
-        </Grid>
-        <Grid container textAlign="center">
-          <Grid item xs={4}>
-            <Button onClick={handleClick('left')}>left</Button>
-          </Grid>
-          <Grid item xs={4}>
-            <IconButton
-              color="primary"
-              aria-label="home"
-              onClick={handleClick('home')}
-            >
-              <HomeIcon />
-            </IconButton>
-          </Grid>
-          <Grid item xs={4}>
-            <Button onClick={handleClick('right')}>right</Button>
-          </Grid>
-        </Grid>
-        <Grid container justifyContent="center">
-          <Grid item>
-            <Button onClick={handleClick('bottom')}>bottom</Button>
-          </Grid>
-        </Grid>
-      </Box>
       <Box sx={{ height: 400 }}>
         <DataGridPro
           apiRef={apiRef}
           onCellClick={handleCellClick}
           hideFooter
           loading={loading}
+          {...data}
           initialState={{
-            scroll: { top: 100, left: 100 },
+            ...data.initialState,
+            scroll: { top: 1000, left: 1000 },
           }}
-          {...data}
         />
       </Box>
     </Box>

diff --git a/docs/data/data-grid/scrolling/ScrollRestoration.tsx b/docs/data/data-grid/scrolling/ScrollRestoration.tsx
@@ -1,20 +1,15 @@
 import * as React from 'react';
-import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import IconButton from '@mui/material/IconButton';
-import HomeIcon from '@mui/icons-material/Home';
 import {
   DataGridPro,
   useGridApiRef,
-  gridExpandedRowCountSelector,
   gridVisibleColumnDefinitionsSelector,
   gridExpandedSortedRowIdsSelector,
   GridCellParams,
 } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
-export default function ScrollPlayground() {
+export default function ScrollRestoration() {
   const apiRef = useGridApiRef();
 
   const [coordinates, setCoordinates] = React.useState({
@@ -35,26 +30,6 @@ export default function ScrollPlayground() {
     apiRef.current.setCellFocus(id, column.field);
   }, [apiRef, coordinates]);
 
-  const handleClick = (position: string) => () => {
-    const maxRowIndex = gridExpandedRowCountSelector(apiRef) - 1;
-    const maxColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
-
-    setCoordinates((coords) => {
-      switch (position) {
-        case 'top':
-          return { ...coords, rowIndex: Math.max(0, coords.rowIndex - 1) };
-        case 'bottom':
-          return { ...coords, rowIndex: Math.min(maxRowIndex, coords.rowIndex + 1) };
-        case 'left':
-          return { ...coords, colIndex: Math.max(0, coords.colIndex - 1) };
-        case 'right':
-          return { ...coords, colIndex: Math.min(maxColIndex, coords.colIndex + 1) };
-        default:
-          return { ...coords, rowIndex: 0, colIndex: 0 };
-      }
-    });
-  };
-
   const handleCellClick = (params: GridCellParams) => {
     const rowIndex = gridExpandedSortedRowIdsSelector(apiRef).findIndex(
       (id) => id === params.id,

diff --git a/docs/data/data-grid/scrolling/ScrollRestoration.tsx.preview b/docs/data/data-grid/scrolling/ScrollRestoration.tsx.preview
@@ -0,0 +1,13 @@
+<Box sx={{ height: 400 }}>
+  <DataGridPro
+    apiRef={apiRef}
+    onCellClick={handleCellClick}
+    hideFooter
+    loading={loading}
+    {...data}
+    initialState={{
+      ...data.initialState,
+      scroll: { top: 1000, left: 1000 },
+    }}
+  />
+</Box>
diff --git a/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx b/packages/x-data-grid/src/components/virtualization/GridVirtualScrollerContent.tsx
@@ -2,10 +2,10 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled, SxProps, Theme } from '@mui/system';
 import composeClasses from '@mui/utils/composeClasses';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
-import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 
 type OwnerState = DataGridProcessedProps;
@@ -37,7 +37,7 @@ const GridVirtualScrollerContent = React.forwardRef<
 
   useEnhancedEffect(() => {
     apiRef.current.publishEvent('virtualScrollerContentSizeChange');
-  }, [props.style]);
+  }, [apiRef, props.style]);
 
   return (
     <VirtualScrollerContentRoot

diff --git a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx
@@ -48,7 +48,6 @@ import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization';
 import { gridRowSpanningHiddenCellsOriginMapSelector } from '../rows/gridRowSpanningSelectors';
 import { gridListColumnSelector } from '../listView/gridListViewSelectors';
 import { minimalContentHeight } from '../rows/gridRowsUtils';
-import { unstable_useForkRef as useForkRef } from '@mui/utils';
 
 const MINIMUM_COLUMN_WIDTH = 50;
 
@@ -128,7 +127,6 @@ export const useGridVirtualScroller = () => {
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
   const currentPage = useGridVisibleRows(apiRef, rootProps);
-  const gridRootRef = apiRef.current.rootElementRef;
   const mainRef = apiRef.current.mainElementRef;
   const scrollerRef = apiRef.current.virtualScrollerRef;
   const scrollbarVerticalRef = apiRef.current.virtualScrollbarVerticalRef;

diff --git a/packages/x-data-grid/src/models/api/gridCoreApi.ts b/packages/x-data-grid/src/models/api/gridCoreApi.ts
@@ -71,7 +71,7 @@ export interface GridCorePrivateApi<
   /**
    * The React ref of the grid's virtual scroller container element.
    */
-  virtualScrollerRef: React.MutableRefObject<HTMLDivElement | null>;
+  virtualScrollerRef: React.RefObject<HTMLDivElement>;
   /**
    * The React ref of the grid's vertical virtual scrollbar container element.
    */