Add ability to add seconds to DateTimePicker view

- Add seconds as an available view in DateTimePickerView - Use DateTimePickerView type as the type for views and openTo - Change typography variant depending on whether seconds are being displayed or not - set number of grid elements depending on seconds view
mui · Jul 6, 2020 · 17a4e46 · 17a4e46
1 parent 32a3a18
commit 17a4e46
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 12 deletions.
diff --git a/docs/prop-types.json b/docs/prop-types.json
@@ -2662,7 +2662,7 @@
       },
       "required": false,
       "type": {
-        "name": "(\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\")[]"
+        "name": "DateTimePickerView[]"
       }
     },
     "openTo": {
@@ -2675,7 +2675,7 @@
       },
       "required": false,
       "type": {
-        "name": "\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\""
+        "name": "\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\" | \"seconds\""
       }
     },
     "hideTabs": {
@@ -3432,7 +3432,7 @@
       },
       "required": false,
       "type": {
-        "name": "(\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\")[]"
+        "name": "DateTimePickerView[]"
       }
     },
     "openTo": {
@@ -3445,7 +3445,7 @@
       },
       "required": false,
       "type": {
-        "name": "\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\""
+        "name": "\"date\" | \"year\" | \"month\" | \"hours\" | \"minutes\" | \"seconds\""
       }
     },
     "hideTabs": {

diff --git a/lib/src/DateTimePicker/DateTimePicker.tsx b/lib/src/DateTimePicker/DateTimePicker.tsx
@@ -14,15 +14,15 @@ import {
   WithPureInputProps,
 } from '../Picker/makePickerWithState';
 
-export type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | 'minutes';
+export type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds';
 
 export type BaseDateTimePickerProps = BaseTimePickerProps & BaseDatePickerProps;
 
 export interface DateTimePickerViewsProps extends BaseDateTimePickerProps {
   /** Array of views to show */
-  views?: ('year' | 'date' | 'month' | 'hours' | 'minutes')[];
+  views?: DateTimePickerView[];
   /** First view to show in DatePicker */
-  openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes';
+  openTo?: DateTimePickerView;
   /** To show tabs */
   hideTabs?: boolean;
   /** Date tab icon */
@@ -40,7 +40,7 @@ const defaultProps = {
   wider: true,
   orientation: 'portrait' as const,
   openTo: 'date' as DateTimePickerView,
-  views: ['year', 'date', 'hours', 'minutes'] as DateTimePickerView[],
+  views: ['year', 'date', 'hours', 'minutes', 'seconds'] as DateTimePickerView[],
 };
 
 function useOptions(props: DateTimePickerProps | KeyboardDateTimePickerProps) {

diff --git a/lib/src/DateTimePicker/DateTimePickerToolbar.tsx b/lib/src/DateTimePicker/DateTimePickerToolbar.tsx
@@ -9,6 +9,8 @@ import { DateTimePickerView } from './DateTimePicker';
 import { ToolbarComponentProps } from '../Picker/Picker';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useMeridiemMode } from '../TimePicker/TimePickerToolbar';
+import { arrayIncludes } from '../_helpers/utils';
+import { useMemo } from 'react';
 
 export const useStyles = makeStyles(
   _ => ({
@@ -34,6 +36,7 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
   dateRangeIcon,
   timeIcon,
   onChange,
+  views,
 }) => {
   const utils = useUtils();
   const classes = useStyles();
@@ -42,6 +45,9 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
   const theme = useTheme();
   const rtl = theme.direction === 'rtl';
 
+  const isSeconds = useMemo(() => arrayIncludes(views, 'seconds'), [views]);
+  const timeTypographyText = isSeconds ? 'h4' : 'h3';
+
   return (
     <>
       <PickerToolbar isLandscape={false} className={classes.toolbar}>
@@ -68,26 +74,39 @@ export const DateTimePickerToolbar: React.FC<ToolbarComponentProps> = ({
           <Grid
             item
             container
-            xs={6}
+            xs={isSeconds ? 9 : 6}
             justify="center"
             alignItems="flex-end"
             direction={rtl ? 'row-reverse' : 'row'}
           >
             <ToolbarButton
-              variant="h3"
+              variant={timeTypographyText}
               onClick={() => setOpenView('hours')}
               selected={openView === 'hours'}
               label={utils.getHourText(date, ampm!)}
             />
 
-            <ToolbarText variant="h3" label=":" className={classes.separator} />
+            <ToolbarText variant={timeTypographyText} label=":" className={classes.separator} />
 
             <ToolbarButton
-              variant="h3"
+              variant={timeTypographyText}
               onClick={() => setOpenView('minutes')}
               selected={openView === 'minutes'}
               label={utils.getMinuteText(date)}
             />
+
+            {isSeconds && (
+              <>
+                <ToolbarText variant={timeTypographyText} label=":" className={classes.separator} />
+
+                <ToolbarButton
+                  variant={timeTypographyText}
+                  onClick={() => setOpenView('seconds')}
+                  selected={openView === 'seconds'}
+                  label={utils.getSecondText(date)}
+                />
+              </>
+            )}
           </Grid>
 
           {ampm && (