From 88877c1c47840f5c058c2f2e8641eb6abddf23b7 Mon Sep 17 00:00:00 2001 From: Andrew Cherniavskii Date: Thu, 21 Nov 2024 15:23:59 +0100 Subject: [PATCH] [DataGrid] Set default overlay height in flex parent layout (#15535) --- ...oHeightOverlay.js => GridOverlayHeight.js} | 5 +- ...eightOverlay.tsx => GridOverlayHeight.tsx} | 5 +- ....preview => GridOverlayHeight.tsx.preview} | 1 - docs/data/data-grid/layout/layout.md | 22 +-- .../src/components/base/GridOverlays.tsx | 20 +-- .../src/hooks/features/rows/gridRowsUtils.ts | 6 +- .../virtualization/useGridVirtualScroller.tsx | 15 +- .../regressions/data-grid/DataGridOverlays.js | 168 ++++++++++++++++++ 8 files changed, 198 insertions(+), 44 deletions(-) rename docs/data/data-grid/layout/{AutoHeightOverlay.js => GridOverlayHeight.js} (95%) rename docs/data/data-grid/layout/{AutoHeightOverlay.tsx => GridOverlayHeight.tsx} (95%) rename docs/data/data-grid/layout/{AutoHeightOverlay.tsx.preview => GridOverlayHeight.tsx.preview} (93%) create mode 100644 test/regressions/data-grid/DataGridOverlays.js diff --git a/docs/data/data-grid/layout/AutoHeightOverlay.js b/docs/data/data-grid/layout/GridOverlayHeight.js similarity index 95% rename from docs/data/data-grid/layout/AutoHeightOverlay.js rename to docs/data/data-grid/layout/GridOverlayHeight.js index f1ffdc2f6344..385ed124616a 100644 --- a/docs/data/data-grid/layout/AutoHeightOverlay.js +++ b/docs/data/data-grid/layout/GridOverlayHeight.js @@ -56,11 +56,10 @@ function CustomNoRowsOverlay() { ); } -export default function AutoHeightOverlay() { +export default function GridOverlayHeight() { return ( - + + { function GridOverlayWrapper(props: React.PropsWithChildren) { const apiRef = useGridApiContext(); const rootProps = useGridRootProps(); - const currentPage = useGridVisibleRows(apiRef, rootProps); const dimensions = useGridSelector(apiRef, gridDimensionsSelector); - let height: React.CSSProperties['height'] = + let height: React.CSSProperties['height'] = Math.max( dimensions.viewportOuterSize.height - - dimensions.topContainerHeight - - dimensions.bottomContainerHeight - - (dimensions.hasScrollX ? dimensions.scrollbarSize : 0); + dimensions.topContainerHeight - + dimensions.bottomContainerHeight - + (dimensions.hasScrollX ? dimensions.scrollbarSize : 0), + 0, + ); - if ((rootProps.autoHeight && currentPage.rows.length === 0) || height === 0) { - height = getMinimalContentHeight(apiRef); + if (height === 0) { + height = minimalContentHeight; } const classes = useUtilityClasses({ ...props, classes: rootProps.classes }); diff --git a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts index 5630a73d551d..86be1ee37647 100644 --- a/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts +++ b/packages/x-data-grid/src/hooks/features/rows/gridRowsUtils.ts @@ -25,7 +25,6 @@ import { GridRowsPartialUpdateAction, } from './gridRowsInterfaces'; import { gridPinnedRowsSelector } from './gridRowsSelector'; -import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors'; export const GRID_ROOT_GROUP_ID: GridRowId = `auto-generated-group-node-root`; export const GRID_ID_AUTOGENERATED = Symbol('mui.id_autogenerated'); @@ -401,10 +400,7 @@ export function calculatePinnedRowsHeight(apiRef: React.MutableRefObject) { - const dimensions = gridDimensionsSelector(apiRef.current.state); - return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`; -} +export const minimalContentHeight = 'var(--DataGrid-overlayHeight, calc(var(--height) * 2))'; export function computeRowsUpdates( apiRef: React.MutableRefObject, 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 b5ae34dc7fc4..86435660917e 100644 --- a/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx +++ b/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx @@ -36,7 +36,6 @@ import type { import { selectedIdsLookupSelector } from '../rowSelection/gridRowSelectionSelector'; import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector'; import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; -import { getMinimalContentHeight } from '../rows/gridRowsUtils'; import { GridRowProps } from '../../../components/GridRow'; import { GridInfiniteLoaderPrivateApi } from '../../../models/api/gridInfiniteLoaderApi'; import { @@ -47,6 +46,7 @@ import { import { EMPTY_RENDER_CONTEXT } from './useGridVirtualization'; import { gridRowSpanningHiddenCellsOriginMapSelector } from '../rows/gridRowSpanningSelectors'; import { gridListColumnSelector } from '../listView/gridListViewSelectors'; +import { minimalContentHeight } from '../rows/gridRowsUtils'; const MINIMUM_COLUMN_WIDTH = 50; @@ -538,19 +538,12 @@ export const useGridVirtualScroller = () => { flexShrink: 0, }; - if (rootProps.autoHeight && currentPage.rows.length === 0) { - size.flexBasis = getMinimalContentHeight(apiRef); // Give room to show the overlay when there no rows. + if (size.flexBasis === 0) { + size.flexBasis = minimalContentHeight; // Give room to show the overlay when there no rows. } return size; - }, [ - apiRef, - columnsTotalWidth, - contentHeight, - needsHorizontalScrollbar, - rootProps.autoHeight, - currentPage.rows.length, - ]); + }, [columnsTotalWidth, contentHeight, needsHorizontalScrollbar]); React.useEffect(() => { apiRef.current.publishEvent('virtualScrollerContentSizeChange'); diff --git a/test/regressions/data-grid/DataGridOverlays.js b/test/regressions/data-grid/DataGridOverlays.js new file mode 100644 index 000000000000..a3afeee84d5b --- /dev/null +++ b/test/regressions/data-grid/DataGridOverlays.js @@ -0,0 +1,168 @@ +/* eslint-disable react/prop-types */ +import * as React from 'react'; +import { DataGrid } from '@mui/x-data-grid'; + +function FlexParent({ children, style }) { + return
{children}
; +} + +function FlexParentNoRowsOverlay() { + return ( +
+ FlexParentNoRowsOverlay + + + +
+ ); +} + +function FlexParentMinHeightNoRowsOverlay() { + return ( +
+ FlexParentMinHeightNoRowsOverlay + + + +
+ ); +} + +function FlexParentMaxHeightNoRowsOverlay() { + return ( +
+ FlexParentMaxHeightNoRowsOverlay + + + +
+ ); +} + +function AutoHeightNoRowsOverlay() { + return ( +
+ AutoHeightNoRowsOverlay +
+ +
+
+ ); +} + +function AutoHeightLoadingOverlay() { + return ( +
+ AutoHeightLoadingOverlay +
+ +
+
+ ); +} + +function PredefinedSizeNoRowsLoadingOverlay() { + return ( +
+ PredefinedSizeNoRowsLoadingOverlay +
+ +
+
+ ); +} + +function FlexParentSkeletonOverlay() { + return ( +
+ FlexParentSkeletonOverlay + + + +
+ ); +} + +function FlexParentMinHeightSkeletonOverlay() { + return ( +
+ FlexParentMinHeightSkeletonOverlay + + + +
+ ); +} + +function FlexParentMaxHeightSkeletonOverlay() { + return ( +
+ FlexParentMaxHeightSkeletonOverlay + + + +
+ ); +} + +function AutoHeightSkeletonOverlay() { + return ( +
+ AutoHeightSkeletonOverlay +
+ +
+
+ ); +} + +function PredefinedSizeSkeletonOverlay() { + return ( +
+ PredefinedSizeSkeletonOverlay +
+ +
+
+ ); +} + +export default function DataGridFlexParentOverlay() { + return ( +
+ + + + + + + + + + + + +
+ ); +}