[pickers] Add new DigitalClock desktop time picking experience (#7958)

Signed-off-by: Lukas <[email protected]> Co-authored-by: José Rodolfo Freitas <[email protected]> Co-authored-by: Alexandre Fauquette <[email protected]>
mui · Apr 27, 2023 · 0cb20a0 · 0cb20a0
1 parent 79efe97
commit 0cb20a0
Show file tree

Hide file tree

Showing 150 changed files with 4,153 additions and 460 deletions.
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockAmPm.js b/docs/data/date-pickers/digital-clock/DigitalClockAmPm.js
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import Typography from '@mui/material/Typography';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+
+export default function DigitalClockAmPm() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer
+        components={[
+          'DigitalClock',
+          'MultiSectionDigitalClock',
+          'DigitalClock',
+          'MultiSectionDigitalClock',
+          'DigitalClock',
+          'MultiSectionDigitalClock',
+        ]}
+      >
+        <DemoItem>
+          <Typography variant="body2">
+            Locale default behavior (enabled for enUS)
+          </Typography>
+          <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
+            <DemoItem>
+              <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
+            </DemoItem>
+            <DemoItem>
+              <MultiSectionDigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
+            </DemoItem>
+          </DemoContainer>
+        </DemoItem>
+        <DemoItem>
+          <Typography variant="body2">AM PM enabled</Typography>
+          <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
+            <DemoItem>
+              <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} ampm />
+            </DemoItem>
+            <DemoItem>
+              <MultiSectionDigitalClock
+                defaultValue={dayjs('2022-04-17T15:30')}
+                ampm
+              />
+            </DemoItem>
+          </DemoContainer>
+        </DemoItem>
+        <DemoItem>
+          <Typography variant="body2">AM PM disabled</Typography>
+          <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
+            <DemoItem>
+              <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} ampm={false} />
+            </DemoItem>
+            <DemoItem>
+              <MultiSectionDigitalClock
+                defaultValue={dayjs('2022-04-17T15:30')}
+                ampm={false}
+              />
+            </DemoItem>
+          </DemoContainer>
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockAmPm.tsx b/docs/data/date-pickers/digital-clock/DigitalClockAmPm.tsx
@@ -0,0 +1,67 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import Typography from '@mui/material/Typography';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+
+export default function DigitalClockAmPm() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer
+        components={[
+          'DigitalClock',
+          'MultiSectionDigitalClock',
+          'DigitalClock',
+          'MultiSectionDigitalClock',
+          'DigitalClock',
+          'MultiSectionDigitalClock',
+        ]}
+      >
+        <DemoItem>
+          <Typography variant="body2">
+            Locale default behavior (enabled for enUS)
+          </Typography>
+          <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
+            <DemoItem>
+              <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
+            </DemoItem>
+            <DemoItem>
+              <MultiSectionDigitalClock defaultValue={dayjs('2022-04-17T15:30')} />
+            </DemoItem>
+          </DemoContainer>
+        </DemoItem>
+        <DemoItem>
+          <Typography variant="body2">AM PM enabled</Typography>
+          <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
+            <DemoItem>
+              <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} ampm />
+            </DemoItem>
+            <DemoItem>
+              <MultiSectionDigitalClock
+                defaultValue={dayjs('2022-04-17T15:30')}
+                ampm
+              />
+            </DemoItem>
+          </DemoContainer>
+        </DemoItem>
+        <DemoItem>
+          <Typography variant="body2">AM PM disabled</Typography>
+          <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
+            <DemoItem>
+              <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} ampm={false} />
+            </DemoItem>
+            <DemoItem>
+              <MultiSectionDigitalClock
+                defaultValue={dayjs('2022-04-17T15:30')}
+                ampm={false}
+              />
+            </DemoItem>
+          </DemoContainer>
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockBasic.js b/docs/data/date-pickers/digital-clock/DigitalClockBasic.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+
+export default function DigitalClockBasic() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
+        <DemoItem label="Digital clock">
+          <DigitalClock />
+        </DemoItem>
+        <DemoItem label="Multi section digital clock">
+          <MultiSectionDigitalClock />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockBasic.tsx b/docs/data/date-pickers/digital-clock/DigitalClockBasic.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+
+export default function DigitalClockBasic() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
+        <DemoItem label="Digital clock">
+          <DigitalClock />
+        </DemoItem>
+        <DemoItem label="Multi section digital clock">
+          <MultiSectionDigitalClock />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockBasic.tsx.preview b/docs/data/date-pickers/digital-clock/DigitalClockBasic.tsx.preview
@@ -0,0 +1,6 @@
+<DemoItem label="Digital clock">
+  <DigitalClock />
+</DemoItem>
+<DemoItem label="Multi section digital clock">
+  <MultiSectionDigitalClock />
+</DemoItem>
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockFormProps.js b/docs/data/date-pickers/digital-clock/DigitalClockFormProps.js
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+
+export default function DigitalClockFormProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer
+        components={[
+          'DigitalClock',
+          'DigitalClock',
+          'MultiSectionDigitalClock',
+          'MultiSectionDigitalClock',
+        ]}
+      >
+        <DemoContainer components={['DigitalClock', 'DigitalClock']}>
+          <DemoItem label="Digital clock disabled">
+            <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} disabled />
+          </DemoItem>
+          <DemoItem label="Digital clock readOnly">
+            <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} readOnly />
+          </DemoItem>
+        </DemoContainer>
+        <DemoContainer
+          components={['MultiSectionDigitalClock', 'MultiSectionDigitalClock']}
+        >
+          <DemoItem label="Multi section digital clock disabled">
+            <MultiSectionDigitalClock
+              defaultValue={dayjs('2022-04-17T15:30')}
+              disabled
+            />
+          </DemoItem>
+          <DemoItem label="Multi section digital clock readOnly">
+            <MultiSectionDigitalClock
+              defaultValue={dayjs('2022-04-17T15:30')}
+              readOnly
+            />
+          </DemoItem>
+        </DemoContainer>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockFormProps.tsx b/docs/data/date-pickers/digital-clock/DigitalClockFormProps.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+
+export default function DigitalClockFormProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer
+        components={[
+          'DigitalClock',
+          'DigitalClock',
+          'MultiSectionDigitalClock',
+          'MultiSectionDigitalClock',
+        ]}
+      >
+        <DemoContainer components={['DigitalClock', 'DigitalClock']}>
+          <DemoItem label="Digital clock disabled">
+            <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} disabled />
+          </DemoItem>
+          <DemoItem label="Digital clock readOnly">
+            <DigitalClock defaultValue={dayjs('2022-04-17T15:30')} readOnly />
+          </DemoItem>
+        </DemoContainer>
+        <DemoContainer
+          components={['MultiSectionDigitalClock', 'MultiSectionDigitalClock']}
+        >
+          <DemoItem label="Multi section digital clock disabled">
+            <MultiSectionDigitalClock
+              defaultValue={dayjs('2022-04-17T15:30')}
+              disabled
+            />
+          </DemoItem>
+          <DemoItem label="Multi section digital clock readOnly">
+            <MultiSectionDigitalClock
+              defaultValue={dayjs('2022-04-17T15:30')}
+              readOnly
+            />
+          </DemoItem>
+        </DemoContainer>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.js b/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.js
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+
+const shouldDisableTime = (value, view) => {
+  const hour = value.hour();
+  if (view === 'hours') {
+    return hour < 9 || hour > 13;
+  }
+  if (view === 'minutes') {
+    const minute = value.minute();
+    return minute > 20 && hour === 13;
+  }
+  return false;
+};
+
+export default function DigitalClockSkipDisabled() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
+        <DemoItem label="Digital clock">
+          <DigitalClock
+            skipDisabled
+            minTime={dayjs('2022-04-17T09:00')}
+            timeStep={60}
+          />
+        </DemoItem>
+        <DemoItem label="Multi section digital clock">
+          <MultiSectionDigitalClock
+            skipDisabled
+            shouldDisableTime={shouldDisableTime}
+            ampm={false}
+          />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.tsx b/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import { DemoContainer, DemoItem } from '@mui/x-date-pickers/internals/demo';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DigitalClock } from '@mui/x-date-pickers/DigitalClock';
+import { MultiSectionDigitalClock } from '@mui/x-date-pickers/MultiSectionDigitalClock';
+import { TimeView } from '@mui/x-date-pickers/models';
+
+const shouldDisableTime = (value: Dayjs, view: TimeView) => {
+  const hour = value.hour();
+  if (view === 'hours') {
+    return hour < 9 || hour > 13;
+  }
+  if (view === 'minutes') {
+    const minute = value.minute();
+    return minute > 20 && hour === 13;
+  }
+  return false;
+};
+
+export default function DigitalClockSkipDisabled() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DigitalClock', 'MultiSectionDigitalClock']}>
+        <DemoItem label="Digital clock">
+          <DigitalClock
+            skipDisabled
+            minTime={dayjs('2022-04-17T09:00')}
+            timeStep={60}
+          />
+        </DemoItem>
+        <DemoItem label="Multi section digital clock">
+          <MultiSectionDigitalClock
+            skipDisabled
+            shouldDisableTime={shouldDisableTime}
+            ampm={false}
+          />
+        </DemoItem>
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}
diff --git a/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.tsx.preview b/docs/data/date-pickers/digital-clock/DigitalClockSkipDisabled.tsx.preview
@@ -0,0 +1,14 @@
+<DemoItem label="Digital clock">
+  <DigitalClock
+    skipDisabled
+    minTime={dayjs('2022-04-17T09:00')}
+    timeStep={60}
+  />
+</DemoItem>
+<DemoItem label="Multi section digital clock">
+  <MultiSectionDigitalClock
+    skipDisabled
+    shouldDisableTime={shouldDisableTime}
+    ampm={false}
+  />
+</DemoItem>