Skip to content

Commit

Permalink
[pickers] Remove orientation, isLandscape, isRtl, wrapperVariant and …
Browse files Browse the repository at this point in the history
…disabled props from PickersLayout
  • Loading branch information
flaviendelangle committed Nov 19, 2024
1 parent c73f6af commit 6fb5cef
Show file tree
Hide file tree
Showing 22 changed files with 136 additions and 423 deletions.
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 }) => ({
actions: variant === 'desktop' ? [] : ['clear'],
}),
}}
/>
Expand Down
4 changes: 2 additions & 2 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 Down
4 changes: 2 additions & 2 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 Down
4 changes: 2 additions & 2 deletions docs/data/date-pickers/custom-layout/custom-layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,11 @@ 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}>
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"
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 @@ -171,7 +171,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
46 changes: 46 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,19 @@ const theme = createTheme({

### Slot: `layout`

- The `PickersLayoutRoot` must now receive the `ownerState` returned by `usePickerLayout` instead of its 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
</PickersLayoutRoot>
);
```

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

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

- The component passed to the `layout` slot no longer receives a `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 `usePickersContext` hook:

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

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

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

### Slot: `toolbar`

- The component passed to the `toolbar` slot no longer receives a `disabled` prop, instead you can use the `usePickersContext` 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
4 changes: 2 additions & 2 deletions docs/src/modules/components/overview/mainDemo/Clock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ const StyledLayout = styled(PickersLayoutRoot)({
});

function CustomLayout(props: PickersLayoutProps<Dayjs | null, TimeView>) {
const { actionBar, content, toolbar } = usePickerLayout(props);
const { actionBar, content, toolbar, ownerState } = usePickerLayout(props);
return (
<StyledLayout ownerState={props}>
<StyledLayout ownerState={ownerState}>
{toolbar}
<PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
{content}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,11 @@ interface CustomLayoutProps extends PickersLayoutProps<DateRange<Dayjs>, 'day'>
}
function CustomLayout(props: CustomLayoutProps) {
const { isHorizontal, ...other } = props;
const { tabs, content, shortcuts } = usePickerLayout(other);
const { tabs, content, shortcuts, ownerState } = usePickerLayout(other);

return (
<PickersLayoutRoot
ownerState={props}
ownerState={ownerState}
sx={{
overflow: 'auto',
[`.${pickersLayoutClasses.shortcuts}`]: isHorizontal
Expand Down
Loading

0 comments on commit 6fb5cef

Please sign in to comment.