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] Refactor: move progress components to leaf import #15914

Merged
merged 10 commits into from
Dec 20, 2024
Merged

[DataGrid] Refactor: move progress components to leaf import #15914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
91809ac
refactor: move progress components to leaf import
romgrk Dec 17, 2024
43fefab
refactor: slotProps overrides
romgrk Dec 17, 2024
945b4ac
lint: jsdoc
romgrk Dec 17, 2024
7890fb3
lint
romgrk Dec 17, 2024
d2a21ee
lint
romgrk Dec 17, 2024
bed4dae
ci: run (empty commit)
romgrk Dec 17, 2024
8313dcb
Update packages/x-data-grid/src/models/gridBaseSlots.ts
romgrk Dec 18, 2024
653959d
ci: run (empty commit)
romgrk Dec 19, 2024
b50ea93
Merge branch 'refactor-agnostic-progress' of github.com:romgrk/mui-x …
romgrk Dec 19, 2024
8319f99
ci: run (empty commit)
romgrk Dec 19, 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
12 changes: 12 additions & 0 deletions docs/pages/x/api/data-grid/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
12 changes: 12 additions & 0 deletions docs/pages/x/api/data-grid/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
12 changes: 12 additions & 0 deletions docs/pages/x/api/data-grid/data-grid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
2 changes: 2 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
2 changes: 2 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
2 changes: 2 additions & 0 deletions docs/translations/api-docs/data-grid/data-grid/data-grid.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand Down
3 changes: 1 addition & 2 deletions packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -67,7 +66,7 @@ function GridGroupingCriteriaCellIcon(props: GridGroupingCriteriaCellIconProps)
if (isDataLoading) {
return (
<div className={classes.loadingContainer}>
<CircularProgress size="1rem" color="inherit" />
<rootProps.slots.baseCircularProgress size="1rem" color="inherit" />
Copy link
Member

@oliviertassinari oliviertassinari Dec 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx will be unstyled, this should be, no?

Suggested change
<rootProps.slots.baseCircularProgress size="1rem" color="inherit" />
<rootProps.slots.baseCircularProgress

Copy link
Member

@oliviertassinari oliviertassinari Dec 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, I wonder if the unstyled slot shouldn't also include <div className={classes.loadingContainer}> in a slot like this? It doesn't feel clear that this DOM CSS should be part of the unstyled grid CSS file. A developer might also want to add my own div / tailwind class name on this DOM.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx will be unstyled, this should be, no?

Hard to say, I don't think there's a good answer to that. We still want to fine-tune components, but at the same time we want other design systems to be able to control anything from the outside, and those objectives are somewhat in conflict. For now I've mostly used material-ui API and left thing as-is (unless I saw a blocker for other design systems). I think I'd keep with the current refactoring approach just to get us to a point where we can set up the grid with mantine or shadcn, and then if we need to rework things a bit to allow more external control we can take that decision from there.

</div>
);
}
Expand Down
3 changes: 1 addition & 2 deletions packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -74,7 +73,7 @@ function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps)
if (isDataLoading) {
return (
<div className={classes.loadingContainer}>
<CircularProgress size="1rem" color="inherit" />
<rootProps.slots.baseCircularProgress size="1rem" color="inherit" />
</div>
);
}
Expand Down
16 changes: 9 additions & 7 deletions packages/x-data-grid/src/components/GridLoadingOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -25,20 +25,20 @@ export interface GridLoadingOverlayProps extends GridOverlayProps {
const LOADING_VARIANTS: Record<
GridLoadingOverlayVariant,
{
component: React.ComponentType;
component: (rootProps: DataGridProcessedProps) => React.ComponentType;
romgrk marked this conversation as resolved.
Show resolved Hide resolved
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' },
},
};
Expand All @@ -47,12 +47,14 @@ const GridLoadingOverlay = React.forwardRef<HTMLDivElement, GridLoadingOverlayPr
function GridLoadingOverlay(props, ref) {
const { variant = 'linear-progress', noRowsVariant = 'skeleton', style, ...other } = props;
const apiRef = useGridApiContext();
const rootProps = useGridRootProps();
const rowsCount = useGridSelector(apiRef, gridRowCountSelector);
const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
const Component = activeVariant.component(rootProps);

return (
<GridOverlay ref={ref} style={{ ...activeVariant.style, ...style }} {...other}>
<activeVariant.component />
<Component />
</GridOverlay>
);
},
Expand Down
4 changes: 4 additions & 0 deletions packages/x-data-grid/src/material/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand Down
12 changes: 12 additions & 0 deletions packages/x-data-grid/src/models/gridBaseSlots.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
10 changes: 10 additions & 0 deletions packages/x-data-grid/src/models/gridSlotsComponent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@ export interface GridBaseSlots {
* @default Checkbox
*/
baseCheckbox: React.JSXElementConstructor<GridSlotProps['baseCheckbox']>;
/**
* The custom CircularProgress component used in the grid.
* @default CircularProgress
*/
baseCircularProgress: React.JSXElementConstructor<GridSlotProps['baseCircularProgress']>;
/**
* The custom Chip component used in the grid.
* @default Chip
Expand All @@ -25,6 +30,11 @@ export interface GridBaseSlots {
* @default Divider
*/
baseDivider: React.JSXElementConstructor<GridSlotProps['baseDivider']>;
/**
* The custom LinearProgress component used in the grid.
* @default LinearProgress
*/
baseLinearProgress: React.JSXElementConstructor<GridSlotProps['baseLinearProgress']>;
/**
* The custom MenuList component used in the grid.
* @default MenuList
Expand Down
17 changes: 16 additions & 1 deletion packages/x-data-grid/src/models/gridSlotsComponentsProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -33,15 +35,23 @@ 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<HTMLDivElement> & Record<`data-${string}`, string>;
type MainProps = React.HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, 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 {}
Expand All @@ -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 {}
Expand All @@ -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;
Expand All @@ -102,6 +115,8 @@ interface BaseSlotProps {

interface MaterialSlotProps {
baseBadge: MUIBadgeProps;
baseCircularProgress: MUICircularProgressProps;
baseLinearProgress: MUILinearProgressProps;
baseMenuItem: MUIMenuItemProps;
}

Expand Down
2 changes: 2 additions & 0 deletions scripts/x-data-grid-premium.exports.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down
2 changes: 2 additions & 0 deletions scripts/x-data-grid-pro.exports.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down
2 changes: 2 additions & 0 deletions scripts/x-data-grid.exports.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" },
Expand Down
Loading