Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Remove GridOverlays export #15573

Merged
merged 5 commits into from
Nov 25, 2024
+27 −42
Merged

[DataGrid] Remove GridOverlays export #15573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ac94391
remove GridOverlays export
k-rajat19 Nov 23, 2024
72c1a3e
docs:api
k-rajat19 Nov 23, 2024
b807ef2
fixup eslint
k-rajat19 Nov 23, 2024
aeab112
Merge branch 'master' into remove-grid-overlays
cherniavskii Nov 25, 2024
d877a2e
return back GridOverlays file to persist changes history
cherniavskii Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 6 additions & 29 deletions packages/x-data-grid/src/components/base/GridOverlays.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,16 @@ import clsx from 'clsx';
import { minimalContentHeight } from '../../hooks/features/rows/gridRowsUtils';
import { useGridSelector } from '../../hooks/utils/useGridSelector';
import { gridDimensionsSelector } from '../../hooks/features/dimensions';
import { GridOverlayType } from '../../hooks/features/overlays/useGridOverlays';
import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
import { DataGridProcessedProps } from '../../models/props/DataGridProps';
import { getDataGridUtilityClass } from '../../constants/gridClasses';
import { GridLoadingOverlayVariant } from '../GridLoadingOverlay';
import { GridSlotsComponent } from '../../models';

export type GridOverlayType =
| keyof Pick<GridSlotsComponent, 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'>
| null;

interface GridOverlaysProps {
overlayType: GridOverlayType;
Expand Down Expand Up @@ -66,7 +70,7 @@ const useUtilityClasses = (ownerState: OwnerState) => {
return composeClasses(slots, getDataGridUtilityClass, classes);
};

function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>) {
export function GridOverlayWrapper(props: React.PropsWithChildren<GridOverlaysProps>) {
const apiRef = useGridApiContext();
const rootProps = useGridRootProps();
const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
Expand Down Expand Up @@ -111,30 +115,3 @@ GridOverlayWrapper.propTypes = {
loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay']),
} as any;

GridOverlays.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
loadingOverlayVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
overlayType: PropTypes.oneOf(['loadingOverlay', 'noResultsOverlay', 'noRowsOverlay']),
} as any;

export function GridOverlays(props: GridOverlaysProps) {
const { overlayType } = props;
const rootProps = useGridRootProps();

if (!overlayType) {
return null;
}

const Overlay = rootProps.slots?.[overlayType];
const overlayProps = rootProps.slotProps?.[overlayType];

return (
<GridOverlayWrapper {...props}>
<Overlay {...overlayProps} />
</GridOverlayWrapper>
);
}
1 change: 0 additions & 1 deletion packages/x-data-grid/src/components/base/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
export * from './GridBody';
export * from './GridFooterPlaceholder';
export * from './GridOverlays';
5 changes: 2 additions & 3 deletions packages/x-data-grid/src/components/virtualization/GridVirtualScroller.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { DataGridProcessedProps } from '../../models/props/DataGridProps';
import { GridDimensions, gridDimensionsSelector } from '../../hooks/features/dimensions';
import { useGridVirtualScroller } from '../../hooks/features/virtualization/useGridVirtualScroller';
import { useGridOverlays } from '../../hooks/features/overlays/useGridOverlays';
import { GridOverlays as Overlays } from '../base/GridOverlays';
import { GridHeaders } from '../GridHeaders';
import { GridMainContainer as Container } from './GridMainContainer';
import { GridTopContainer as TopContainer } from './GridTopContainer';
Expand Down Expand Up @@ -73,7 +72,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
const apiRef = useGridApiContext();
const rootProps = useGridRootProps();
const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
const overlaysProps = useGridOverlays();
const { getOverlay, overlaysProps } = useGridOverlays();
const classes = useUtilityClasses(rootProps, dimensions, overlaysProps.loadingOverlayVariant);

const virtualScroller = useGridVirtualScroller();
Expand All @@ -99,7 +98,7 @@ function GridVirtualScroller(props: GridVirtualScrollerProps) {
<rootProps.slots.pinnedRows position="top" virtualScroller={virtualScroller} />
</TopContainer>

<Overlays {...overlaysProps} />
{getOverlay()}

<Content {...getContentProps()}>
<RenderZone {...getRenderZoneProps()}>
Expand Down
25 changes: 19 additions & 6 deletions ...ooks/features/overlays/useGridOverlays.ts → ...oks/features/overlays/useGridOverlays.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
import * as React from 'react';
import { useGridSelector } from '../../utils';
import { useGridApiContext } from '../../utils/useGridApiContext';
import { useGridRootProps } from '../../utils/useGridRootProps';
import { gridExpandedRowCountSelector } from '../filter';
import { gridRowCountSelector, gridRowsLoadingSelector } from '../rows';
import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay';
import { GridSlotsComponent } from '../../../models/gridSlotsComponent';

export type GridOverlayType =
| keyof Pick<GridSlotsComponent, 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'>
| null;
import { GridOverlayWrapper } from '../../../components/base/GridOverlays';
import type { GridOverlayType } from '../../../components/base/GridOverlays';

/**
* Uses the grid state to determine which overlay to display.
Expand Down Expand Up @@ -43,5 +41,20 @@ export const useGridOverlays = () => {
rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
}

return { overlayType, loadingOverlayVariant };
const overlaysProps = { overlayType, loadingOverlayVariant };

const getOverlay = () => {
if (!overlayType) {
return null;
}
const Overlay = rootProps.slots?.[overlayType];
const overlayProps = rootProps.slotProps?.[overlayType];
return (
<GridOverlayWrapper {...overlaysProps}>
<Overlay {...overlayProps} />
</GridOverlayWrapper>
);
};

return { getOverlay, overlaysProps };
};
1 change: 0 additions & 1 deletion scripts/x-data-grid-premium.exports.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,7 +423,6 @@
{ "name": "gridNumberComparator", "kind": "Variable" },
{ "name": "GridOverlay", "kind": "Variable" },
{ "name": "GridOverlayProps", "kind": "TypeAlias" },
{ "name": "GridOverlays", "kind": "Function" },
{ "name": "gridPageCountSelector", "kind": "Variable" },
{ "name": "gridPageSelector", "kind": "Variable" },
{ "name": "gridPageSizeSelector", "kind": "Variable" },
Expand Down
1 change: 0 additions & 1 deletion scripts/x-data-grid-pro.exports.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,7 +386,6 @@
{ "name": "gridNumberComparator", "kind": "Variable" },
{ "name": "GridOverlay", "kind": "Variable" },
{ "name": "GridOverlayProps", "kind": "TypeAlias" },
{ "name": "GridOverlays", "kind": "Function" },
{ "name": "gridPageCountSelector", "kind": "Variable" },
{ "name": "gridPageSelector", "kind": "Variable" },
{ "name": "gridPageSizeSelector", "kind": "Variable" },
Expand Down
1 change: 0 additions & 1 deletion scripts/x-data-grid.exports.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,7 +348,6 @@
{ "name": "gridNumberComparator", "kind": "Variable" },
{ "name": "GridOverlay", "kind": "Variable" },
{ "name": "GridOverlayProps", "kind": "TypeAlias" },
{ "name": "GridOverlays", "kind": "Function" },
{ "name": "gridPageCountSelector", "kind": "Variable" },
{ "name": "gridPageSelector", "kind": "Variable" },
{ "name": "gridPageSizeSelector", "kind": "Variable" },
Expand Down