Skip to content

Commit

Permalink
[System] Fix nested grid v2 (#35994)
Browse files Browse the repository at this point in the history
  • Loading branch information
@siriwatknp
siriwatknp authored Feb 3, 2023
1 parent 3cc7932 commit ca8b908
Show file tree
Hide file tree
Showing 6 changed files with 222 additions and 148 deletions.
90 changes: 46 additions & 44 deletions docs/data/material/components/grid2/SpacingGrid.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Unstable_Grid2';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
Expand All @@ -20,51 +21,52 @@ export default function SpacingGrid() {
`;

return (
<Grid sx={{ flexGrow: 1 }} container spacing={2}>
<Grid xs={12}>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={{
height: 140,
width: 100,
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
}}
/>
</Grid>
))}
</Grid>
</Grid>
<Grid xs={12}>
<Paper sx={{ p: 2 }}>
<Grid container>
<Grid>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</FormControl>
</Grid>
<Box
sx={{
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
gap: 2,
pt: 2,
'&& pre': { margin: 0 },
}}
>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={{
height: 140,
width: 100,
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
}}
/>
</Grid>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
))}
</Grid>
</Grid>
<Paper sx={{ p: 2 }}>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</FormControl>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
</Box>
);
}
90 changes: 46 additions & 44 deletions docs/data/material/components/grid2/SpacingGrid.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Unstable_Grid2';
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
Expand All @@ -20,51 +21,52 @@ export default function SpacingGrid() {
`;

return (
<Grid sx={{ flexGrow: 1 }} container spacing={2}>
<Grid xs={12}>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={{
height: 140,
width: 100,
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
}}
/>
</Grid>
))}
</Grid>
</Grid>
<Grid xs={12}>
<Paper sx={{ p: 2 }}>
<Grid container>
<Grid>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</FormControl>
</Grid>
<Box
sx={{
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
gap: 2,
pt: 2,
'&& pre': { margin: 0 },
}}
>
<Grid container justifyContent="center" spacing={spacing}>
{[0, 1, 2].map((value) => (
<Grid key={value}>
<Paper
sx={{
height: 140,
width: 100,
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
}}
/>
</Grid>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
))}
</Grid>
</Grid>
<Paper sx={{ p: 2 }}>
<FormControl component="fieldset">
<FormLabel component="legend">spacing</FormLabel>
<RadioGroup
name="spacing"
aria-label="spacing"
value={spacing.toString()}
onChange={handleChange}
row
>
{[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => (
<FormControlLabel
key={value}
value={value.toString()}
control={<Radio />}
label={value.toString()}
/>
))}
</RadioGroup>
</FormControl>
</Paper>
<HighlightedCode code={jsx} language="jsx" />
</Box>
);
}
13 changes: 12 additions & 1 deletion packages/mui-system/src/Unstable_Grid/GridProps.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,18 @@ export interface GridBaseProps extends Breakpoints {
}

export interface GridOwnerState extends GridBaseProps {
nested: boolean;
/**
* The level of the grid starts from `0`
* and increases when the grid nests inside another grid regardless of container or item.
*
* ```js
* <Grid> // level 0
* <Grid> // level 1
* <Grid> // level 2
* <Grid> // level 1
* ```
*/
level: number;
gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
gridOffset: Partial<Record<Breakpoint, GridSize>>;
}
Expand Down
20 changes: 10 additions & 10 deletions packages/mui-system/src/Unstable_Grid/createGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export default function createGrid(
componentName = 'MuiGrid',
} = options;

const NestedContext = React.createContext(false);
const NestedContext = React.createContext<number>(0);
const OverflowContext = React.createContext<boolean | undefined>(undefined);

const useUtilityClasses = (ownerState: GridOwnerState, theme: typeof defaultTheme) => {
Expand Down Expand Up @@ -93,7 +93,7 @@ export default function createGrid(
const theme = useTheme();
const themeProps = useThemeProps<typeof inProps & { component?: React.ElementType }>(inProps);
const props = extendSxProp(themeProps) as Omit<typeof themeProps, 'color'>; // `color` type conflicts with html color attribute.
const nested = React.useContext(NestedContext);
const level = React.useContext(NestedContext);
const overflow = React.useContext(OverflowContext);
const {
className,
Expand All @@ -110,7 +110,7 @@ export default function createGrid(
} = props;
// Because `disableEqualOverflow` can be set from the theme's defaultProps, the **nested** grid should look at the instance props instead.
let disableEqualOverflow = themeDisableEqualOverflow;
if (nested && themeDisableEqualOverflow !== undefined) {
if (level && themeDisableEqualOverflow !== undefined) {
disableEqualOverflow = inProps.disableEqualOverflow;
}
// collect breakpoints related props because they can be customized from the theme.
Expand All @@ -128,15 +128,15 @@ export default function createGrid(
}
});

const columns = inProps.columns ?? (nested ? undefined : columnsProp);
const spacing = inProps.spacing ?? (nested ? undefined : spacingProp);
const columns = inProps.columns ?? (level ? undefined : columnsProp);
const spacing = inProps.spacing ?? (level ? undefined : spacingProp);
const rowSpacing =
inProps.rowSpacing ?? inProps.spacing ?? (nested ? undefined : rowSpacingProp);
inProps.rowSpacing ?? inProps.spacing ?? (level ? undefined : rowSpacingProp);
const columnSpacing =
inProps.columnSpacing ?? inProps.spacing ?? (nested ? undefined : columnSpacingProp);
inProps.columnSpacing ?? inProps.spacing ?? (level ? undefined : columnSpacingProp);
const ownerState = {
...props,
nested,
level,
columns,
container,
direction,
Expand All @@ -162,8 +162,8 @@ export default function createGrid(
/>
);

if (!nested) {
result = <NestedContext.Provider value>{result}</NestedContext.Provider>;
if (container) {
result = <NestedContext.Provider value={level + 1}>{result}</NestedContext.Provider>;
}

if (disableEqualOverflow !== undefined && disableEqualOverflow !== (overflow ?? false)) {
Expand Down
Loading

0 comments on commit ca8b908

Please sign in to comment.