[pickers] Use grid for modifying the layout (#6900)

Co-authored-by: Lukas <llukas.tyla@gmail.com>
mui · Dec 26, 2022 · 6cce314 · 6cce314
1 parent 7b36870
commit 6cce314
Show file tree

Hide file tree

Showing 137 changed files with 1,507 additions and 369 deletions.
diff --git a/docs/data/date-pickers/custom-components/custom-components.md b/docs/data/date-pickers/custom-components/custom-components.md
@@ -6,7 +6,7 @@ components: DateTimePickerTabs
 
 # Custom components
 
-<p class="description">The date picker lets users select a date from a menu.</p>
+<p class="description">The date picker lets you customize sub-components.</p>
 
 ## Overriding components
 

diff --git a/docs/data/date-pickers/custom-layout/AddComponent.js b/docs/data/date-pickers/custom-layout/AddComponent.js
@@ -0,0 +1,106 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers/StaticNextDatePicker';
+
+import RestaurantIcon from '@mui/icons-material/Restaurant';
+import {
+  usePickerLayout,
+  pickersLayoutClasses,
+  PickersLayoutRoot,
+  PickersLayoutContentWrapper,
+} from '@mui/x-date-pickers/PickersLayout';
+
+function ActionList(props) {
+  const { onAccept, onClear, onCancel, onSetToday } = props;
+  const actions = [
+    { text: 'Accept', method: onAccept },
+    { text: 'Clear', method: onClear },
+    { text: 'Cancel', method: onCancel },
+    { text: 'Today', method: onSetToday },
+  ];
+
+  return (
+    <List>
+      {actions.map(({ text, method }) => (
+        <ListItem key={text} disablePadding>
+          <ListItemButton onClick={method}>
+            <ListItemText primary={text} />
+          </ListItemButton>
+        </ListItem>
+      ))}
+    </List>
+  );
+}
+
+ActionList.propTypes = {
+  onAccept: PropTypes.func.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onClear: PropTypes.func.isRequired,
+  onSetToday: PropTypes.func.isRequired,
+};
+
+function RestaurantHeader() {
+  return (
+    <Box
+      sx={{
+        // Place the element in the grid layout
+        gridColumn: 1,
+        gridRow: 1,
+        // Center the icon
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <RestaurantIcon />
+    </Box>
+  );
+}
+
+function CustomLayout(props) {
+  const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+
+  return (
+    <PickersLayoutRoot
+      ownerState={props}
+      sx={{
+        [`.${pickersLayoutClasses.actionBar}`]: {
+          gridColumn: 1,
+          gridRow: 2,
+        },
+        [`.${pickersLayoutClasses.toolbar}`]: {
+          gridColumn: 2,
+          gridRow: 1,
+        },
+      }}
+    >
+      <RestaurantHeader />
+      {toolbar}
+      {actionBar}
+      <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
+        {tabs}
+        {content}
+      </PickersLayoutContentWrapper>
+    </PickersLayoutRoot>
+  );
+}
+export default function AddComponent() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticNextDatePicker
+        components={{
+          Layout: CustomLayout,
+          ActionBar: ActionList,
+        }}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx b/docs/data/date-pickers/custom-layout/AddComponent.tsx
@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers/StaticNextDatePicker';
+import { PickersActionBarProps } from '@mui/x-date-pickers/PickersActionBar';
+import RestaurantIcon from '@mui/icons-material/Restaurant';
+import {
+  PickersLayoutProps,
+  usePickerLayout,
+  pickersLayoutClasses,
+  PickersLayoutRoot,
+  PickersLayoutContentWrapper,
+} from '@mui/x-date-pickers/PickersLayout';
+import { DateView } from '@mui/x-date-pickers';
+
+function ActionList(props: PickersActionBarProps) {
+  const { onAccept, onClear, onCancel, onSetToday } = props;
+  const actions = [
+    { text: 'Accept', method: onAccept },
+    { text: 'Clear', method: onClear },
+    { text: 'Cancel', method: onCancel },
+    { text: 'Today', method: onSetToday },
+  ];
+  return (
+    <List>
+      {actions.map(({ text, method }) => (
+        <ListItem key={text} disablePadding>
+          <ListItemButton onClick={method}>
+            <ListItemText primary={text} />
+          </ListItemButton>
+        </ListItem>
+      ))}
+    </List>
+  );
+}
+
+function RestaurantHeader() {
+  return (
+    <Box
+      sx={{
+        // Place the element in the grid layout
+        gridColumn: 1,
+        gridRow: 1,
+        // Center the icon
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <RestaurantIcon />
+    </Box>
+  );
+}
+
+function CustomLayout(props: PickersLayoutProps<Dayjs | null, DateView>) {
+  const { toolbar, tabs, content, actionBar } = usePickerLayout(props);
+
+  return (
+    <PickersLayoutRoot
+      ownerState={props}
+      sx={{
+        [`.${pickersLayoutClasses.actionBar}`]: {
+          gridColumn: 1,
+          gridRow: 2,
+        },
+        [`.${pickersLayoutClasses.toolbar}`]: {
+          gridColumn: 2,
+          gridRow: 1,
+        },
+      }}
+    >
+      <RestaurantHeader />
+      {toolbar}
+      {actionBar}
+      <PickersLayoutContentWrapper className={pickersLayoutClasses.contentWrapper}>
+        {tabs}
+        {content}
+      </PickersLayoutContentWrapper>
+    </PickersLayoutRoot>
+  );
+}
+export default function AddComponent() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <StaticNextDatePicker
+        components={{
+          Layout: CustomLayout,
+          ActionBar: ActionList,
+        }}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/custom-layout/AddComponent.tsx.preview b/docs/data/date-pickers/custom-layout/AddComponent.tsx.preview
@@ -0,0 +1,6 @@
+<StaticNextDatePicker
+  components={{
+    Layout: CustomLayout,
+    ActionBar: ActionList,
+  }}
+/>
diff --git a/docs/data/date-pickers/custom-layout/LayoutBlocks.js b/docs/data/date-pickers/custom-layout/LayoutBlocks.js
@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Divider from '@mui/material/Divider';
+import { Unstable_StaticNextDatePicker as StaticNextDatePicker } from '@mui/x-date-pickers/StaticNextDatePicker';
+import { Unstable_StaticNextTimePicker as StaticNextTimePicker } from '@mui/x-date-pickers/StaticNextTimePicker';
+import { Unstable_StaticNextDateTimePicker as StaticNextDateTimePicker } from '@mui/x-date-pickers/StaticNextDateTimePicker';
+import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { pickersLayoutClasses } from '@mui/x-date-pickers/PickersLayout';
+
+const highlighLayout = {
+  sx: {
+    [`& .${pickersLayoutClasses.toolbar}`]: {
+      border: 'solid red 4px',
+    },
+    [`& .${pickersLayoutClasses.contentWrapper}`]: {
+      border: 'solid green 4px',
+    },
+    [`& .${pickersLayoutClasses.actionBar}`]: {
+      border: 'solid blue 4px',
+    },
+  },
+};
+
+export default function LayoutBlocks() {
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
+  const [currentComponent, setCurrentComponent] = React.useState('date');
+  const [orientation, setOrientation] = React.useState('portrait');
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Box
+        sx={{
+          flexGrow: 1,
+          width: '100%',
+          display: 'flex',
+          flexDirection: { xs: 'column', md: 'row' },
+        }}
+      >
+        <Box
+          sx={{
+            flexShrink: 0,
+            px: 3,
+            pb: 2,
+            minWidth: '150px',
+          }}
+        >
+          <Stack spacing={2} alignItems="center" direction="column">
+            <ToggleButtonGroup
+              size="small"
+              fullWidth
+              color="primary"
+              value={currentComponent}
+              orientation={isDesktop ? 'vertical' : 'horizontal'}
+              onChange={(event, value) => {
+                if (value !== null) {
+                  setCurrentComponent(value);
+                }
+              }}
+              exclusive
+            >
+              <ToggleButton value={'date'}>date picker</ToggleButton>
+              <ToggleButton value={'time'}>time picker</ToggleButton>
+              <ToggleButton value={'date-time'}>date time picker</ToggleButton>
+            </ToggleButtonGroup>
+
+            <ToggleButtonGroup
+              size="small"
+              fullWidth
+              color="primary"
+              value={orientation}
+              orientation={isDesktop ? 'vertical' : 'horizontal'}
+              onChange={(event, value) => {
+                if (value !== null) {
+                  setOrientation(value);
+                }
+              }}
+              exclusive
+            >
+              <ToggleButton value={'landscape'}>landscape</ToggleButton>
+              <ToggleButton value={'portrait'}>portrait</ToggleButton>
+            </ToggleButtonGroup>
+          </Stack>
+        </Box>
+        <Divider orientation={isDesktop ? 'vertical' : 'horizontal'} />
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            flexGrow: 999,
+            minWidth: 0,
+            p: 3,
+          }}
+        >
+          <Box sx={{ margin: 'auto' }}>
+            {currentComponent === 'date' && (
+              <StaticNextDatePicker
+                orientation={orientation}
+                componentsProps={{
+                  layout: highlighLayout,
+                }}
+              />
+            )}
+
+            {currentComponent === 'time' && (
+              <Box sx={{ position: 'relative' }}>
+                <StaticNextTimePicker
+                  orientation={orientation}
+                  componentsProps={{
+                    layout: highlighLayout,
+                  }}
+                />
+              </Box>
+            )}
+
+            {currentComponent === 'date-time' && (
+              <StaticNextDateTimePicker
+                orientation={orientation}
+                componentsProps={{
+                  layout: highlighLayout,
+                }}
+              />
+            )}
+          </Box>
+        </Box>
+      </Box>
+    </LocalizationProvider>
+  );
+}