[DataGrid] Fix error overlay not visible when autoHeight is enabled (…

…mui#4110)
m4theushw · Mar 11, 2022 · 50f084d · 50f084d
1 parent 3d85cc0
commit 50f084d
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 40 deletions.
diff --git a/packages/grid/x-data-grid/src/components/ErrorOverlay.tsx b/packages/grid/x-data-grid/src/components/ErrorOverlay.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridOverlay, GridOverlayProps } from './containers/GridOverlay';
+import { useGridSelector } from '../hooks/utils/useGridSelector';
+import { gridDensityRowHeightSelector } from '../hooks/features/density/densitySelector';
 
 export interface ErrorOverlayProps extends GridOverlayProps {
   message?: string;
@@ -14,9 +16,10 @@ export const ErrorOverlay = React.forwardRef<HTMLDivElement, ErrorOverlayProps>(
     const { message, hasError, errorInfo, ...other } = props;
     const apiRef = useGridApiContext();
     const defaultLabel = apiRef.current.getLocaleText('errorOverlayDefaultLabel');
+    const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
 
     return (
-      <GridOverlay ref={ref} {...other}>
+      <GridOverlay ref={ref} sx={{ width: '100%', minHeight: 2 * rowHeight }} {...other}>
         {message || defaultLabel}
       </GridOverlay>
     );

diff --git a/packages/grid/x-data-grid/src/components/GridLoadingOverlay.tsx b/packages/grid/x-data-grid/src/components/GridLoadingOverlay.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import CircularProgress from '@mui/material/CircularProgress';
 import { GridOverlay, GridOverlayProps } from './containers/GridOverlay';
 
-export const GridLoadingOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(
+const GridLoadingOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(
   function GridLoadingOverlay(props, ref) {
     return (
       <GridOverlay ref={ref} {...props}>
@@ -11,3 +12,17 @@ export const GridLoadingOverlay = React.forwardRef<HTMLDivElement, GridOverlayPr
     );
   },
 );
+
+GridLoadingOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+} as any;
+
+export { GridLoadingOverlay };
diff --git a/packages/grid/x-data-grid/src/components/GridNoRowsOverlay.tsx b/packages/grid/x-data-grid/src/components/GridNoRowsOverlay.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { GridOverlay, GridOverlayProps } from './containers/GridOverlay';
 
-export const GridNoRowsOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(
+const GridNoRowsOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(
   function GridNoRowsOverlay(props, ref) {
     const apiRef = useGridApiContext();
     const noRowsLabel = apiRef.current.getLocaleText('noRowsLabel');
@@ -14,3 +15,17 @@ export const GridNoRowsOverlay = React.forwardRef<HTMLDivElement, GridOverlayPro
     );
   },
 );
+
+GridNoRowsOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+} as any;
+
+export { GridNoRowsOverlay };
diff --git a/packages/grid/x-data-grid/src/components/base/GridErrorHandler.tsx b/packages/grid/x-data-grid/src/components/base/GridErrorHandler.tsx
@@ -1,20 +1,10 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 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';
-
-const ErrorOverlayWrapper = styled('div')({
-  position: 'absolute',
-  top: 0,
-  width: '100%',
-  height: '100%',
-});
 
 function GridErrorHandler(props: { children: React.ReactNode }) {
   const { children } = props;
@@ -23,13 +13,6 @@ function GridErrorHandler(props: { children: React.ReactNode }) {
   const rootProps = useGridRootProps();
   const error = apiRef.current.state.error;
 
-  const handleResize = React.useCallback(
-    (size: AutoSizerSize) => {
-      apiRef.current.publishEvent(GridEvents.resize, size);
-    },
-    [apiRef],
-  );
-
   return (
     <ErrorBoundary
       hasError={error != null}
@@ -38,20 +21,10 @@ function GridErrorHandler(props: { children: React.ReactNode }) {
       logger={logger}
       render={(errorProps) => (
         <GridMainContainer>
-          <GridAutoSizer
-            nonce={rootProps.nonce}
-            disableHeight={rootProps.autoHeight}
-            onResize={handleResize}
-          >
-            {() => (
-              <ErrorOverlayWrapper>
-                <rootProps.components.ErrorOverlay
-                  {...errorProps}
-                  {...rootProps.componentsProps?.errorOverlay}
-                />
-              </ErrorOverlayWrapper>
-            )}
-          </GridAutoSizer>
+          <rootProps.components.ErrorOverlay
+            {...errorProps}
+            {...rootProps.componentsProps?.errorOverlay}
+          />
         </GridMainContainer>
       )}
     >

diff --git a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
@@ -1,12 +1,16 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { alpha, styled } from '@mui/material/styles';
+import { SxProps } from '@mui/system';
+import { Theme, alpha, styled } from '@mui/material/styles';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 
-export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement>;
+export type GridOverlayProps = React.HTMLAttributes<HTMLDivElement> & {
+  sx?: SxProps<Theme>;
+};
 
 type OwnerState = { classes: DataGridProcessedProps['classes'] };
 
@@ -33,7 +37,7 @@ const GridOverlayRoot = styled('div', {
   backgroundColor: alpha(theme.palette.background.default, theme.palette.action.disabledOpacity),
 }));
 
-export const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(function GridOverlay(
+const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(function GridOverlay(
   props: GridOverlayProps,
   ref,
 ) {
@@ -44,3 +48,17 @@ export const GridOverlay = React.forwardRef<HTMLDivElement, GridOverlayProps>(fu
 
   return <GridOverlayRoot ref={ref} className={clsx(classes.root, className)} {...other} />;
 });
+
+GridOverlay.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+} as any;
+
+export { GridOverlay };
diff --git a/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/layout.DataGrid.test.tsx
@@ -809,9 +809,29 @@ describe('<DataGrid /> - Layout & Warnings', () => {
             <DataGrid {...baselineProps} rows={[]} rowHeight={rowHeight} autoHeight />
           </div>,
         );
-        expect(document.querySelectorAll('.MuiDataGrid-overlay')[0].clientHeight).to.equal(
-          rowHeight * 2,
+        expect(
+          (document.querySelector('.MuiDataGrid-overlay') as HTMLElement).clientHeight,
+        ).to.equal(rowHeight * 2);
+      });
+
+      it('should expand content height to one row height when there is an error', () => {
+        const error = { message: 'ERROR' };
+        const rowHeight = 50;
+
+        render(
+          <div style={{ width: 150 }}>
+            <DataGrid
+              columns={[{ field: 'brand' }]}
+              rows={[]}
+              autoHeight
+              error={error}
+              rowHeight={rowHeight}
+            />
+          </div>,
         );
+        const errorOverlayElement = document.querySelector('.MuiDataGrid-overlay') as HTMLElement;
+        expect(errorOverlayElement.textContent).to.equal(error.message);
+        expect(errorOverlayElement.offsetHeight).to.equal(2 * rowHeight);
       });
     });
 
@@ -984,7 +1004,9 @@ describe('<DataGrid /> - Layout & Warnings', () => {
           <DataGrid {...baselineProps} error={{ message }} />
         </div>,
       );
-      expect(document.querySelectorAll('.MuiDataGrid-overlay')[0].textContent).to.equal(message);
+      expect((document.querySelector('.MuiDataGrid-overlay') as HTMLElement).textContent).to.equal(
+        message,
+      );
     });
   });
 

diff --git a/packages/storybook/src/stories/grid-error.stories.tsx b/packages/storybook/src/stories/grid-error.stories.tsx
@@ -112,6 +112,17 @@ export const ThrowException = () => {
   );
 };
 
+export const ErrorWithAutoHeight = () => {
+  const rows = React.useMemo(() => getRows(), []);
+  const cols = React.useMemo(() => getColumns(), []);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <DataGridPro rows={rows} columns={cols} autoHeight error={{ message: 'ERROR' }} />
+    </div>
+  );
+};
+
 export const ShowErrorApi = () => {
   const api = useGridApiRef();
   const rows = React.useMemo(() => getRows(), []);