From 562675c30f18031450fc9f89406b15fa7d867add Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 20 Dec 2024 17:43:15 -0500 Subject: [PATCH] [DataGrid] Refactor: move progress components to leaf import (#15914) Signed-off-by: Rom Grk Co-authored-by: Olivier Tassinari Co-authored-by: Kenan Yusuf --- .../x/api/data-grid/data-grid-premium.json | 12 ++++++++++++ docs/pages/x/api/data-grid/data-grid-pro.json | 12 ++++++++++++ docs/pages/x/api/data-grid/data-grid.json | 12 ++++++++++++ .../data-grid-premium/data-grid-premium.json | 2 ++ .../data-grid/data-grid-pro/data-grid-pro.json | 2 ++ .../api-docs/data-grid/data-grid/data-grid.json | 2 ++ .../GridDataSourceGroupingCriteriaCell.tsx | 3 +-- .../GridDataSourceTreeDataGroupingCell.tsx | 3 +-- .../src/components/GridLoadingOverlay.tsx | 16 +++++++++------- packages/x-data-grid/src/material/index.tsx | 4 ++++ .../x-data-grid/src/models/gridBaseSlots.ts | 12 ++++++++++++ .../src/models/gridSlotsComponent.ts | 10 ++++++++++ .../src/models/gridSlotsComponentsProps.ts | 17 ++++++++++++++++- scripts/x-data-grid-premium.exports.json | 2 ++ scripts/x-data-grid-pro.exports.json | 2 ++ scripts/x-data-grid.exports.json | 2 ++ 16 files changed, 101 insertions(+), 12 deletions(-) diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 6781abc79ef0e..e0fefac2d87bf 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -798,12 +798,24 @@ "default": "Checkbox", "class": null }, + { + "name": "baseCircularProgress", + "description": "The custom CircularProgress component used in the grid.", + "default": "CircularProgress", + "class": null + }, { "name": "baseDivider", "description": "The custom Divider component used in the grid.", "default": "Divider", "class": null }, + { + "name": "baseLinearProgress", + "description": "The custom LinearProgress component used in the grid.", + "default": "LinearProgress", + "class": null + }, { "name": "baseMenuList", "description": "The custom MenuList component used in the grid.", diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 1799239dd781d..37584164686e3 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -733,12 +733,24 @@ "default": "Checkbox", "class": null }, + { + "name": "baseCircularProgress", + "description": "The custom CircularProgress component used in the grid.", + "default": "CircularProgress", + "class": null + }, { "name": "baseDivider", "description": "The custom Divider component used in the grid.", "default": "Divider", "class": null }, + { + "name": "baseLinearProgress", + "description": "The custom LinearProgress component used in the grid.", + "default": "LinearProgress", + "class": null + }, { "name": "baseMenuList", "description": "The custom MenuList component used in the grid.", diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 4fb963ffeb3a2..1fca1f7ac9195 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -619,12 +619,24 @@ "default": "Checkbox", "class": null }, + { + "name": "baseCircularProgress", + "description": "The custom CircularProgress component used in the grid.", + "default": "CircularProgress", + "class": null + }, { "name": "baseDivider", "description": "The custom Divider component used in the grid.", "default": "Divider", "class": null }, + { + "name": "baseLinearProgress", + "description": "The custom LinearProgress component used in the grid.", + "default": "LinearProgress", + "class": null + }, { "name": "baseMenuList", "description": "The custom MenuList component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json index c9295072500c7..baa4a98ce7ab1 100644 --- a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json +++ b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json @@ -1262,11 +1262,13 @@ "baseButton": "The custom Button component used in the grid.", "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseChip": "The custom Chip component used in the grid.", + "baseCircularProgress": "The custom CircularProgress component used in the grid.", "baseDivider": "The custom Divider component used in the grid.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", "baseInputAdornment": "The custom InputAdornment component used in the grid.", "baseInputLabel": "The custom InputLabel component used in the grid.", + "baseLinearProgress": "The custom LinearProgress component used in the grid.", "baseMenuItem": "The custom MenuItem component used in the grid.", "baseMenuList": "The custom MenuList component used in the grid.", "basePopper": "The custom Popper component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json index 23d8ffe2fce32..f25678416be30 100644 --- a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json +++ b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json @@ -1200,11 +1200,13 @@ "baseButton": "The custom Button component used in the grid.", "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseChip": "The custom Chip component used in the grid.", + "baseCircularProgress": "The custom CircularProgress component used in the grid.", "baseDivider": "The custom Divider component used in the grid.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", "baseInputAdornment": "The custom InputAdornment component used in the grid.", "baseInputLabel": "The custom InputLabel component used in the grid.", + "baseLinearProgress": "The custom LinearProgress component used in the grid.", "baseMenuItem": "The custom MenuItem component used in the grid.", "baseMenuList": "The custom MenuList component used in the grid.", "basePopper": "The custom Popper component used in the grid.", diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json index 75fbd4a454b9f..255e6347c8a46 100644 --- a/docs/translations/api-docs/data-grid/data-grid/data-grid.json +++ b/docs/translations/api-docs/data-grid/data-grid/data-grid.json @@ -1074,11 +1074,13 @@ "baseButton": "The custom Button component used in the grid.", "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", "baseChip": "The custom Chip component used in the grid.", + "baseCircularProgress": "The custom CircularProgress component used in the grid.", "baseDivider": "The custom Divider component used in the grid.", "baseFormControl": "The custom FormControl component used in the grid.", "baseIconButton": "The custom IconButton component used in the grid.", "baseInputAdornment": "The custom InputAdornment component used in the grid.", "baseInputLabel": "The custom InputLabel component used in the grid.", + "baseLinearProgress": "The custom LinearProgress component used in the grid.", "baseMenuItem": "The custom MenuItem component used in the grid.", "baseMenuList": "The custom MenuList component used in the grid.", "basePopper": "The custom Popper component used in the grid.", diff --git a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx index 0f7f159ee84c8..a9e17d5517881 100644 --- a/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx +++ b/packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import Box from '@mui/material/Box'; -import CircularProgress from '@mui/material/CircularProgress'; import { useGridPrivateApiContext } from '@mui/x-data-grid-pro/internals'; import { useGridSelector, @@ -67,7 +66,7 @@ function GridGroupingCriteriaCellIcon(props: GridGroupingCriteriaCellIconProps) if (isDataLoading) { return (
- +
); } diff --git a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx index 483958e66591d..bb2c28cfb1a53 100644 --- a/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx +++ b/packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx @@ -7,7 +7,6 @@ import { GridDataSourceGroupNode, useGridSelector, } from '@mui/x-data-grid'; -import CircularProgress from '@mui/material/CircularProgress'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { useGridPrivateApiContext } from '../hooks/utils/useGridPrivateApiContext'; import { DataGridProProcessedProps } from '../models/dataGridProProps'; @@ -74,7 +73,7 @@ function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps) if (isDataLoading) { return (
- +
); } diff --git a/packages/x-data-grid/src/components/GridLoadingOverlay.tsx b/packages/x-data-grid/src/components/GridLoadingOverlay.tsx index 19b85022d6bed..a5a9377f04179 100644 --- a/packages/x-data-grid/src/components/GridLoadingOverlay.tsx +++ b/packages/x-data-grid/src/components/GridLoadingOverlay.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import LinearProgress from '@mui/material/LinearProgress'; -import CircularProgress from '@mui/material/CircularProgress'; +import type { DataGridProcessedProps } from '../models/props/DataGridProps'; +import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { GridOverlay, GridOverlayProps } from './containers/GridOverlay'; import { GridSkeletonLoadingOverlay } from './GridSkeletonLoadingOverlay'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; @@ -25,20 +25,20 @@ export interface GridLoadingOverlayProps extends GridOverlayProps { const LOADING_VARIANTS: Record< GridLoadingOverlayVariant, { - component: React.ComponentType; + component: (rootProps: DataGridProcessedProps) => React.ComponentType; style: React.CSSProperties; } > = { 'circular-progress': { - component: CircularProgress, + component: (rootProps: DataGridProcessedProps) => rootProps.slots.baseCircularProgress, style: {}, }, 'linear-progress': { - component: LinearProgress, + component: (rootProps: DataGridProcessedProps) => rootProps.slots.baseLinearProgress, style: { display: 'block' }, }, skeleton: { - component: GridSkeletonLoadingOverlay, + component: () => GridSkeletonLoadingOverlay, style: { display: 'block' }, }, }; @@ -47,12 +47,14 @@ const GridLoadingOverlay = React.forwardRef - + ); }, diff --git a/packages/x-data-grid/src/material/index.tsx b/packages/x-data-grid/src/material/index.tsx index 6465357645d4c..fb2e9191eb826 100644 --- a/packages/x-data-grid/src/material/index.tsx +++ b/packages/x-data-grid/src/material/index.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import MUIBadge from '@mui/material/Badge'; import MUICheckbox from '@mui/material/Checkbox'; +import MUICircularProgress from '@mui/material/CircularProgress'; import MUIDivider from '@mui/material/Divider'; +import MUILinearProgress from '@mui/material/LinearProgress'; import MUIListItemIcon from '@mui/material/ListItemIcon'; import MUIListItemText from '@mui/material/ListItemText'; import MUIMenuList from '@mui/material/MenuList'; @@ -90,7 +92,9 @@ const iconSlots: GridIconSlotsComponent = { const baseSlots: GridBaseSlots = { baseBadge: MUIBadge, baseCheckbox: MUICheckbox, + baseCircularProgress: MUICircularProgress, baseDivider: MUIDivider, + baseLinearProgress: MUILinearProgress, baseMenuList: MUIMenuList, baseMenuItem: BaseMenuItem, baseTextField: MUITextField, diff --git a/packages/x-data-grid/src/models/gridBaseSlots.ts b/packages/x-data-grid/src/models/gridBaseSlots.ts index 67eb9713d954d..b09fda68b6334 100644 --- a/packages/x-data-grid/src/models/gridBaseSlots.ts +++ b/packages/x-data-grid/src/models/gridBaseSlots.ts @@ -21,3 +21,15 @@ export type MenuItemProps = { selected?: boolean; value?: number | string | readonly string[]; }; + +export type CircularProgressProps = { + /** + * Pixels or CSS value. + * @default 40 + */ + size?: number | string; + /** @default 'primary' */ + color?: 'inherit' | 'primary'; +}; + +export type LinearProgressProps = {}; diff --git a/packages/x-data-grid/src/models/gridSlotsComponent.ts b/packages/x-data-grid/src/models/gridSlotsComponent.ts index c9c38a0fe3566..0debed33c4e0d 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponent.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponent.ts @@ -15,6 +15,11 @@ export interface GridBaseSlots { * @default Checkbox */ baseCheckbox: React.JSXElementConstructor; + /** + * The custom CircularProgress component used in the grid. + * @default CircularProgress + */ + baseCircularProgress: React.JSXElementConstructor; /** * The custom Chip component used in the grid. * @default Chip @@ -25,6 +30,11 @@ export interface GridBaseSlots { * @default Divider */ baseDivider: React.JSXElementConstructor; + /** + * The custom LinearProgress component used in the grid. + * @default LinearProgress + */ + baseLinearProgress: React.JSXElementConstructor; /** * The custom MenuList component used in the grid. * @default MenuList diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts index 1f9f2fcc44020..f0a43ca1c4045 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -1,6 +1,8 @@ import * as React from 'react'; import type { BadgeProps as MUIBadgeProps } from '@mui/material/Badge'; import type { CheckboxProps } from '@mui/material/Checkbox'; +import type { CircularProgressProps as MUICircularProgressProps } from '@mui/material/CircularProgress'; +import type { LinearProgressProps as MUILinearProgressProps } from '@mui/material/LinearProgress'; import type { MenuListProps } from '@mui/material/MenuList'; import type { MenuItemProps as MUIMenuItemProps } from '@mui/material/MenuItem'; import type { TextFieldProps } from '@mui/material/TextField'; @@ -33,7 +35,13 @@ import type { GridColumnsManagementProps } from '../components/columnsManagement import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay'; import type { GridRowCountProps } from '../components/GridRowCount'; import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon'; -import type { BadgeProps, DividerProps, MenuItemProps } from './gridBaseSlots'; +import type { + BadgeProps, + CircularProgressProps, + DividerProps, + LinearProgressProps, + MenuItemProps, +} from './gridBaseSlots'; type RootProps = React.HTMLAttributes & Record<`data-${string}`, string>; type MainProps = React.HTMLAttributes & Record<`data-${string}`, string>; @@ -41,7 +49,9 @@ type MainProps = React.HTMLAttributes & Record<`data-${string}`, // Overrides for module augmentation export interface BaseBadgePropsOverrides {} export interface BaseCheckboxPropsOverrides {} +export interface BaseCircularProgressPropsOverrides {} export interface BaseDividerPropsOverrides {} +export interface BaseLinearProgressPropsOverrides {} export interface BaseMenuListPropsOverrides {} export interface BaseMenuItemPropsOverrides {} export interface BaseTextFieldPropsOverrides {} @@ -56,6 +66,7 @@ export interface BasePopperPropsOverrides {} export interface BaseInputLabelPropsOverrides {} export interface BaseSelectOptionPropsOverrides {} export interface BaseChipPropsOverrides {} + export interface CellPropsOverrides {} export interface ToolbarPropsOverrides {} export interface ColumnHeaderFilterIconButtonPropsOverrides {} @@ -79,7 +90,9 @@ export interface RowPropsOverrides {} interface BaseSlotProps { baseBadge: BadgeProps & BaseBadgePropsOverrides; baseCheckbox: CheckboxProps & BaseCheckboxPropsOverrides; + baseCircularProgress: CircularProgressProps & BaseCircularProgressPropsOverrides; baseDivider: DividerProps & BaseDividerPropsOverrides; + baseLinearProgress: LinearProgressProps & BaseLinearProgressPropsOverrides; baseMenuList: MenuListProps & BaseMenuListPropsOverrides; baseMenuItem: MenuItemProps & BaseMenuItemPropsOverrides; baseTextField: TextFieldProps & BaseTextFieldPropsOverrides; @@ -102,6 +115,8 @@ interface BaseSlotProps { interface MaterialSlotProps { baseBadge: MUIBadgeProps; + baseCircularProgress: MUICircularProgressProps; + baseLinearProgress: MUILinearProgressProps; baseMenuItem: MUIMenuItemProps; } diff --git a/scripts/x-data-grid-premium.exports.json b/scripts/x-data-grid-premium.exports.json index 8a40105fbd394..e1d56cfb4f713 100644 --- a/scripts/x-data-grid-premium.exports.json +++ b/scripts/x-data-grid-premium.exports.json @@ -3,11 +3,13 @@ { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseChipPropsOverrides", "kind": "Interface" }, + { "name": "BaseCircularProgressPropsOverrides", "kind": "Interface" }, { "name": "BaseDividerPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, + { "name": "BaseLinearProgressPropsOverrides", "kind": "Interface" }, { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" }, { "name": "BaseMenuListPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, diff --git a/scripts/x-data-grid-pro.exports.json b/scripts/x-data-grid-pro.exports.json index 4ba7e2f6454b8..5efdd0168fa30 100644 --- a/scripts/x-data-grid-pro.exports.json +++ b/scripts/x-data-grid-pro.exports.json @@ -3,11 +3,13 @@ { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseChipPropsOverrides", "kind": "Interface" }, + { "name": "BaseCircularProgressPropsOverrides", "kind": "Interface" }, { "name": "BaseDividerPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, + { "name": "BaseLinearProgressPropsOverrides", "kind": "Interface" }, { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" }, { "name": "BaseMenuListPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" }, diff --git a/scripts/x-data-grid.exports.json b/scripts/x-data-grid.exports.json index 6f8e730aff19a..88c0c6edc1bfd 100644 --- a/scripts/x-data-grid.exports.json +++ b/scripts/x-data-grid.exports.json @@ -3,11 +3,13 @@ { "name": "BaseButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseCheckboxPropsOverrides", "kind": "Interface" }, { "name": "BaseChipPropsOverrides", "kind": "Interface" }, + { "name": "BaseCircularProgressPropsOverrides", "kind": "Interface" }, { "name": "BaseDividerPropsOverrides", "kind": "Interface" }, { "name": "BaseFormControlPropsOverrides", "kind": "Interface" }, { "name": "BaseIconButtonPropsOverrides", "kind": "Interface" }, { "name": "BaseInputAdornmentPropsOverrides", "kind": "Interface" }, { "name": "BaseInputLabelPropsOverrides", "kind": "Interface" }, + { "name": "BaseLinearProgressPropsOverrides", "kind": "Interface" }, { "name": "BaseMenuItemPropsOverrides", "kind": "Interface" }, { "name": "BaseMenuListPropsOverrides", "kind": "Interface" }, { "name": "BasePopperPropsOverrides", "kind": "Interface" },