Skip to content

Commit

Permalink
Add ownerState to <PickersLayoutContentWrapper />
Browse files Browse the repository at this point in the history
  • Loading branch information
flaviendelangle committed Nov 21, 2024
1 parent f825b20 commit e98f435
Show file tree
Hide file tree
Showing 9 changed files with 32 additions and 10 deletions.
5 changes: 4 additions & 1 deletion docs/data/date-pickers/custom-layout/AddComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,10 @@ function CustomLayout(props) {
<RestaurantHeader />
{toolbar}
{actionBar}
<PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
<PickersLayoutContentWrapper
className={pickersLayoutClasses.contentWrapper}
ownerState={ownerState}
>
{tabs}
{content}
</PickersLayoutContentWrapper>
Expand Down
5 changes: 4 additions & 1 deletion docs/data/date-pickers/custom-layout/AddComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,10 @@ function CustomLayout(props: PickersLayoutProps<Dayjs | null, DateView>) {
<RestaurantHeader />
{toolbar}
{actionBar}
<PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
<PickersLayoutContentWrapper
className={pickersLayoutClasses.contentWrapper}
ownerState={ownerState}
>
{tabs}
{content}
</PickersLayoutContentWrapper>
Expand Down
5 changes: 4 additions & 1 deletion docs/data/date-pickers/custom-layout/custom-layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,10 @@ function MyCustomLayout(props) {
<PickersLayoutRoot className={pickersLayoutClasses.root} ownerState={ownerState}>
{toolbar}
{actionBar}
<PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
<PickersLayoutContentWrapper
className={pickersLayoutClasses.contentWrapper}
ownerState={ownerState}
>
{tabs}
{content}
</PickersLayoutContentWrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -258,15 +258,18 @@ const theme = createTheme({

### Slot: `layout`

- The `PickersLayoutRoot` must now receive the `ownerState` returned by `usePickerLayout` instead of its props:
- The `<PickersLayoutRoot />` and `<PickersLayoutContentWrapper />` components must now receive the `ownerState` returned by `usePickerLayout` instead of their props:

```diff
-const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);

return (
- <PickersLayoutRoot ownerState={props}>
+ <PickersLayoutRoot ownerState={ownerState}>
Layout content
- <PickersLayoutContentWrapper>
+ <PickersLayoutContentWrapper ownerState={ownerState}>
</PickersLayoutContentWrapper>
</PickersLayoutRoot>
);
```
Expand Down
5 changes: 4 additions & 1 deletion docs/src/modules/components/overview/mainDemo/Clock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,10 @@ function CustomLayout(props: PickersLayoutProps<Dayjs | null, TimeView>) {
return (
<StyledLayout ownerState={ownerState}>
{toolbar}
<PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
<PickersLayoutContentWrapper
className={pickersLayoutClasses.contentWrapper}
ownerState={ownerState}
>
{content}
{actionBar}
</PickersLayoutContentWrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,10 @@ function CustomLayout(props: CustomLayoutProps) {
}}
>
{shortcuts}
<PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
<PickersLayoutContentWrapper
className={pickersLayoutClasses.contentWrapper}
ownerState={ownerState}
>
{tabs}
{content}
</PickersLayoutContentWrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,10 @@ function CustomLayout(props: PickersLayoutProps<Dayjs | null, TimeView>) {
const { actionBar, content, ownerState } = usePickerLayout(props);
return (
<StyledLayout ownerState={ownerState}>
<PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
<PickersLayoutContentWrapper
className={pickersLayoutClasses.contentWrapper}
ownerState={ownerState}
>
{content}
{actionBar}
</PickersLayoutContentWrapper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const DesktopDateTimePickerLayout = React.forwardRef(function DesktopDateTimePic
{orientation === 'landscape' ? toolbar : shortcuts}
<PickersLayoutContentWrapper
className={clsx(pickersLayoutClasses.contentWrapper, classes?.contentWrapper)}
ownerState={ownerState}
sx={{ display: 'grid' }}
>
{content}
Expand Down
4 changes: 2 additions & 2 deletions packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const PickersLayoutContentWrapper = styled('div', {
name: 'MuiPickersLayout',
slot: 'ContentWrapper',
overridesResolver: (props, styles) => styles.contentWrapper,
})({
})<{ ownerState: PickerLayoutOwnerState }>({
gridColumn: 2,
gridRow: 2,
display: 'flex',
Expand Down Expand Up @@ -121,7 +121,7 @@ const PickersLayout = React.forwardRef(function PickersLayout<
>
{orientation === 'landscape' ? shortcuts : toolbar}
{orientation === 'landscape' ? toolbar : shortcuts}
<PickersLayoutContentWrapper className={classes.contentWrapper}>
<PickersLayoutContentWrapper className={classes.contentWrapper} ownerState={ownerState}>
{variant === 'desktop' ? (
<React.Fragment>
{content}
Expand Down

0 comments on commit e98f435

Please sign in to comment.