From 8828ace85cc9fb20c1cf7bd6e6544883d38b8574 Mon Sep 17 00:00:00 2001 From: Matheus Wichman Date: Thu, 6 Jan 2022 09:12:00 -0300 Subject: [PATCH] subscribe to 'resize' asynchronously --- .../grid/components/ErrorOverlay.tsx | 1 + .../grid/components/base/GridBody.tsx | 4 ++- .../grid/components/base/GridErrorHandler.tsx | 25 ++++++++++++++++--- .../grid/components/base/GridOverlays.tsx | 1 + .../components/containers/GridOverlay.tsx | 16 +++++++++--- .../tests/columnHeaders.DataGridPro.test.tsx | 1 - .../tests/columnPinning.DataGridPro.test.tsx | 2 -- .../src/tests/pagination.DataGrid.test.tsx | 7 +----- 8 files changed, 40 insertions(+), 17 deletions(-) diff --git a/packages/grid/_modules_/grid/components/ErrorOverlay.tsx b/packages/grid/_modules_/grid/components/ErrorOverlay.tsx index 992ef441cce2..04f12fbed5cf 100644 --- a/packages/grid/_modules_/grid/components/ErrorOverlay.tsx +++ b/packages/grid/_modules_/grid/components/ErrorOverlay.tsx @@ -8,6 +8,7 @@ export interface ErrorOverlayProps extends GridOverlayProps { errorInfo: any; } +// TODO v6: rename to GridErrorOverlay export const ErrorOverlay = React.forwardRef( function ErrorOverlay(props: ErrorOverlayProps, ref) { const { message, hasError, errorInfo, ...other } = props; diff --git a/packages/grid/_modules_/grid/components/base/GridBody.tsx b/packages/grid/_modules_/grid/components/base/GridBody.tsx index 7df8df5d1128..312eb25caf10 100644 --- a/packages/grid/_modules_/grid/components/base/GridBody.tsx +++ b/packages/grid/_modules_/grid/components/base/GridBody.tsx @@ -67,7 +67,9 @@ function GridBody(props: GridBodyProps) { apiRef.current.renderingZoneRef = renderingZoneRef; // TODO remove, nobody should have access to internal parts of the virtualization const handleResize = React.useCallback( - (size: ElementSize) => apiRef.current.publishEvent(GridEvents.resize, size), + (size: ElementSize) => { + apiRef.current.publishEvent(GridEvents.resize, size); + }, [apiRef], ); diff --git a/packages/grid/_modules_/grid/components/base/GridErrorHandler.tsx b/packages/grid/_modules_/grid/components/base/GridErrorHandler.tsx index 74ba7f21c6cc..f2c3472cc3d1 100644 --- a/packages/grid/_modules_/grid/components/base/GridErrorHandler.tsx +++ b/packages/grid/_modules_/grid/components/base/GridErrorHandler.tsx @@ -4,6 +4,8 @@ import { useGridLogger } from '../../hooks/utils/useGridLogger'; import { GridMainContainer } from '../containers/GridMainContainer'; import { ErrorBoundary } from '../ErrorBoundary'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; +import { GridAutoSizer, AutoSizerSize } from '../GridAutoSizer'; +import { GridEvents } from '../../models/events/gridEvents'; export function GridErrorHandler(props) { const { children } = props; @@ -12,6 +14,13 @@ export function GridErrorHandler(props) { const rootProps = useGridRootProps(); const error = apiRef.current.state.error; + const handleResize = React.useCallback( + (size: AutoSizerSize) => { + apiRef.current.publishEvent(GridEvents.resize, size); + }, + [apiRef], + ); + return ( ( - + + {() => ( + + )} + )} > diff --git a/packages/grid/_modules_/grid/components/base/GridOverlays.tsx b/packages/grid/_modules_/grid/components/base/GridOverlays.tsx index 2bc837b1f1b6..f0de2879f2dd 100644 --- a/packages/grid/_modules_/grid/components/base/GridOverlays.tsx +++ b/packages/grid/_modules_/grid/components/base/GridOverlays.tsx @@ -28,5 +28,6 @@ export function GridOverlays() { if (rootProps.loading) { return ; } + return null; } diff --git a/packages/grid/_modules_/grid/components/containers/GridOverlay.tsx b/packages/grid/_modules_/grid/components/containers/GridOverlay.tsx index bc7d9bf58b4f..0eb8c89a3343 100644 --- a/packages/grid/_modules_/grid/components/containers/GridOverlay.tsx +++ b/packages/grid/_modules_/grid/components/containers/GridOverlay.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@mui/material'; import { alpha, styled } from '@mui/material/styles'; @@ -8,7 +9,6 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext'; import { getDataGridUtilityClass } from '../../gridClasses'; import { useGridRootProps } from '../../hooks/utils/useGridRootProps'; import { DataGridProcessedProps } from '../../models/props/DataGridProps'; -import { useGridApiEventHandler } from '../../hooks/utils/useGridApiEventHandler'; import { GridEvents } from '../../models/events'; export type GridOverlayProps = React.HTMLAttributes; @@ -57,16 +57,26 @@ export const GridOverlay = React.forwardRef(fu () => apiRef.current.getRootDimensions()?.viewportInnerSize ?? null, ); - const handleViewportSizeChangeTest = () => + const handleViewportSizeChange = React.useCallback(() => { setViewportInnerSize(apiRef.current.getRootDimensions()?.viewportInnerSize ?? null); + }, [apiRef]); - useGridApiEventHandler(apiRef, GridEvents.viewportInnerSizeChange, handleViewportSizeChangeTest); + useEnhancedEffect(() => { + return apiRef.current.subscribeEvent( + GridEvents.viewportInnerSizeChange, + handleViewportSizeChange, + ); + }, [apiRef, handleViewportSizeChange]); let height: React.CSSProperties['height'] = viewportInnerSize?.height ?? 0; if (rootProps.autoHeight && height === 0) { height = 'auto'; } + if (!viewportInnerSize) { + return null; + } + return ( - Column Headers', () => { ); const columnCell = getColumnHeaderCell(0); - const menuIconButton = columnCell.querySelector('button[aria-label="Menu"]'); fireEvent.click(menuIconButton); diff --git a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx index fc8931ec8977..391ad6d6da2f 100644 --- a/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx +++ b/packages/grid/x-data-grid-pro/src/tests/columnPinning.DataGridPro.test.tsx @@ -146,7 +146,6 @@ describe(' - Column pinning', () => { this.skip(); } render(); - clock.runToLast(); const columnHeader = getColumnHeaderCell(2); // @ts-expect-error need to migrate helpers to TypeScript expect(columnHeader).toHaveInlineStyle({ width: '100px' }); @@ -167,7 +166,6 @@ describe(' - Column pinning', () => { this.skip(); } render(); - clock.runToLast(); const columnHeader = getColumnHeaderCell(2); // @ts-expect-error need to migrate helpers to TypeScript expect(columnHeader).toHaveInlineStyle({ width: '100px' }); diff --git a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx index 7a6a5ac747d8..a4f54d317c3f 100644 --- a/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx +++ b/packages/grid/x-data-grid/src/tests/pagination.DataGrid.test.tsx @@ -15,7 +15,7 @@ import { useData } from 'packages/storybook/src/hooks/useData'; const isJSDOM = /jsdom/.test(window.navigator.userAgent); describe(' - Pagination', () => { - const { render, clock } = createRenderer({ clock: 'fake' }); + const { render } = createRenderer({ clock: 'fake' }); const BaselineTestCase = ( props: Omit & { height?: number }, @@ -248,7 +248,6 @@ describe(' - Pagination', () => { it('should apply the new pageSize when clicking on a page size option and onPageSizeChanged is not defined and pageSize is not controlled', () => { render(); - clock.runToLast(); // Run the timer to cleanup the listeners registered by StrictMode fireEvent.mouseDown(screen.queryByLabelText('Rows per page:')); expect(screen.queryAllByRole('option').length).to.equal(4); @@ -265,7 +264,6 @@ describe(' - Pagination', () => { rowsPerPageOptions={[1, 2, 3, 100]} />, ); - clock.runToLast(); // Run the timer to cleanup the listeners registered by StrictMode fireEvent.mouseDown(screen.queryByLabelText('Rows per page:')); expect(screen.queryAllByRole('option').length).to.equal(4); @@ -477,8 +475,6 @@ describe(' - Pagination', () => { />, ); - clock.runToLast(); // Run the timer to cleanup the listeners registered by StrictMode - const footerHeight = document.querySelector('.MuiDataGrid-footerContainer')!.clientHeight; const expectedViewportRowsLengthBefore = Math.floor( (heightBefore - headerHeight - footerHeight) / rowHeight, @@ -638,7 +634,6 @@ describe(' - Pagination', () => { expect(getColumnValues(0)).to.deep.equal(['0', '1']); - clock.runToLast(); // Run the timer to cleanup the listeners registered by StrictMode fireEvent.mouseDown(screen.queryByLabelText('Rows per page:')); expect(screen.queryAllByRole('option').length).to.equal(2); fireEvent.click(screen.queryAllByRole('option')[1]);