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.

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

[pickers] Remove orientation, isLandscape, isRtl, wrapperVariant and disabled props from PickersLayout #15494

Merged
4 changes: 2 additions & 2 deletions docs/data/date-pickers/custom-components/custom-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ You can override the actions displayed by passing the `actions` prop to the `act
actions: ['clear'],
},
// The actions will be different between desktop and mobile
actionBar: ({ wrapperVariant }) => ({
actions: wrapperVariant === 'desktop' ? [] : ['clear'],
actionBar: ({ variant }) => ({
Copy link
Member Author

Choose a reason for hiding this comment

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

I will try to write a first migration guide for the new ownerState now that we migrated a good portion of the components.

This will be done in a follow up 👍

actions: variant === 'desktop' ? [] : ['clear'],
}),
}}
/>
Expand Down
9 changes: 6 additions & 3 deletions docs/data/date-pickers/custom-layout/AddComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@ function RestaurantHeader() {
}

function CustomLayout(props) {
const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);

return (
<PickersLayoutRoot
ownerState={props}
ownerState={ownerState}
sx={{
overflow: 'auto',
[`.${pickersLayoutClasses.actionBar}`]: {
Expand All @@ -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
9 changes: 6 additions & 3 deletions docs/data/date-pickers/custom-layout/AddComponent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,11 +59,11 @@ function RestaurantHeader() {
}

function CustomLayout(props: PickersLayoutProps<Dayjs | null, DateView>) {
const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);

return (
<PickersLayoutRoot
ownerState={props}
ownerState={ownerState}
sx={{
overflow: 'auto',
[`.${pickersLayoutClasses.actionBar}`]: {
Expand All @@ -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
9 changes: 6 additions & 3 deletions docs/data/date-pickers/custom-layout/custom-layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,14 +86,17 @@ import {
} from '@mui/x-date-pickers/PickersLayout';

function MyCustomLayout(props) {
const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
const { toolbar, tabs, content, actionBar, ownerState } = usePickerLayout(props);

// Put the action bar before the content
return (
<PickersLayoutRoot className={pickersLayoutClasses.root} ownerState={props}>
<PickersLayoutRoot className={pickersLayoutClasses.root} ownerState={ownerState}>
{toolbar}
{actionBar}
<PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
<PickersLayoutContentWrapper
className={pickersLayoutClasses.contentWrapper}
ownerState={ownerState}
>
{tabs}
{content}
</PickersLayoutContentWrapper>
Expand Down
104 changes: 10 additions & 94 deletions docs/data/migration/migration-pickers-v5/MobileKeyboardView.js
Original file line number Diff line number Diff line change
@@ -1,100 +1,16 @@
import * as React from 'react';

import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import ModeEditIcon from '@mui/icons-material/ModeEdit';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

import {
pickersLayoutClasses,
PickersLayoutContentWrapper,
PickersLayoutRoot,
usePickerLayout,
} from '@mui/x-date-pickers/PickersLayout';
import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
import { DateField } from '@mui/x-date-pickers/DateField';
import { DatePickerToolbar } from '@mui/x-date-pickers/DatePicker';

function LayoutWithKeyboardView(props) {
const { value, onChange } = props;
const [showKeyboardView, setShowKeyboardView] = React.useState(false);

const { toolbar, tabs, content, actionBar } = usePickerLayout({
...props,
slotProps: {
...props.slotProps,
toolbar: {
...props.slotProps?.toolbar,
// @ts-ignore
showKeyboardViewSwitch: props.wrapperVariant === 'mobile',
showKeyboardView,
setShowKeyboardView,
},
},
});

return (
<PickersLayoutRoot ownerState={props}>
{toolbar}
{actionBar}
<PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
{tabs}
{showKeyboardView ? (
<Box sx={{ mx: 3, my: 2, width: 272 }}>
<DateField value={value} onChange={onChange} sx={{ width: '100%' }} />
</Box>
) : (
content
)}
</PickersLayoutContentWrapper>
</PickersLayoutRoot>
);
}

function ToolbarWithKeyboardViewSwitch(props) {
const { showKeyboardViewSwitch, showKeyboardView, setShowKeyboardView, ...other } =
props;

if (showKeyboardViewSwitch) {
return (
<Stack
spacing={2}
direction={other.isLandscape ? 'column' : 'row'}
alignItems="center"
sx={
other.isLandscape
? {
gridColumn: 1,
gridRow: '1 / 3',
}
: { gridColumn: '1 / 4', gridRow: 1, mr: 1 }
}
>
<DatePickerToolbar {...other} sx={{ flex: '1 1 100%' }} />
<IconButton
color="inherit"
onClick={() => setShowKeyboardView((prev) => !prev)}
>
{showKeyboardView ? <CalendarMonthIcon /> : <ModeEditIcon />}
</IconButton>
</Stack>
);
}

return <DatePickerToolbar {...other} />;
}
export default function MobileKeyboardView() {
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<MobileDatePicker
slots={{
layout: LayoutWithKeyboardView,
toolbar: ToolbarWithKeyboardViewSwitch,
}}
/>
</LocalizationProvider>
<iframe
title="codesandbox"
src="https://codesandbox.io/embed/https-mui-com-x-migration-migration-pickers-v7-forked-9fz6f6?hidenavigation=1&fontsize=14&view=preview"
Copy link
Member Author

Choose a reason for hiding this comment

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

I'm breaking APIs that were used in the demo, and we want this demo to still use only v6 API,s not v8 APIs.

The layout is not great
It's the same as in https://mui.com/x/migration/migration-data-grid-v4/#using-mui-core-v4-with-v5 and since it's an old migration guide I think it's sufficient

Copy link
Contributor

Choose a reason for hiding this comment

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

This feels fine to me 👌

style={{
width: '100%',
height: 520,
border: 0,
}}
sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
/>
);
}
110 changes: 0 additions & 110 deletions docs/data/migration/migration-pickers-v5/MobileKeyboardView.tsx

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ The picker components no longer have a keyboard view to render the input inside

- If you want to keep the old keyboard view, you can pass a custom `Layout` component slot to re-introduce the keyboard view.

{{"demo": "MobileKeyboardView.js", "defaultCodeOpen": false}}
{{"demo": "MobileKeyboardView.js", "hideToolbar": true, "bg": true}}

:::info
At some point, the mobile pickers should have a prop allowing to have an editable field without opening the modal.
Expand Down
49 changes: 49 additions & 0 deletions docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,22 @@ const theme = createTheme({

### Slot: `layout`

- 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}>
- <PickersLayoutContentWrapper>
+ <PickersLayoutContentWrapper ownerState={ownerState}>
</PickersLayoutContentWrapper>
</PickersLayoutRoot>
);
```

- The component passed to the `layout` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook:

```diff
Expand All @@ -276,6 +292,39 @@ const theme = createTheme({
+console.log(readOnly);
```

- The component passed to the `layout` slot no longer receives an `isRtl` prop. If you need to access this information, you can use the `useRtl` hook from `@mui/system`:

```diff
+import { useRtl } from '@mui/system/RtlProvider';
function CustomLayout(props) {
- console.log(props.isRtl);
+ const isRtl = useRtl();
+ console.log(isRtl);
}
```

- The component passed to the `layout` slot no longer receives an `orientation` and the `isLandscape` props, instead you can use the `usePickerContext` hook:

```diff
-console.log(props.orientation);
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
+const { orientation } = usePickerContext();
+console.log(orientation);
-console.log(props.isLandscape);
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
+const { orientation } = usePickerContext();
+console.log(orientation === 'landscape');
```

- The component passed to the `layout` slot no longer receives a `wrapperVariant` prop, instead you can use the `usePickerContext` hook:

```diff
-console.log(props.wrapperVariant);
+import { usePickerContext } from '@mui/x-date-pickers/hooks';
+const { variant } = usePickerContext();
+console.log(variant);
```

### Slot: `toolbar`

- The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickerContext` hook:
Expand Down
4 changes: 0 additions & 4 deletions docs/pages/x/api/date-pickers/pickers-layout.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
{
"props": {
"isRtl": { "type": { "name": "bool" }, "required": true },
"classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
"orientation": {
"type": { "name": "enum", "description": "'landscape'<br>&#124;&nbsp;'portrait'" }
},
"slotProps": { "type": { "name": "object" }, "default": "{}" },
"slots": {
"type": { "name": "object" },
Expand Down
Loading