feat(sanity): use time input in calendar (#8921)

Author: juice49

packages/sanity/src/core/components/inputs/DateInputs/calendar/Calendar.tsx

@@ -1,7 +1,16 @@
 import {ChevronLeftIcon, ChevronRightIcon, EarthGlobeIcon} from '@sanity/icons'
 import {Box, Flex, Grid, Select, Text} from '@sanity/ui'
-import {addDays, addMonths, setDate, setHours, setMinutes, setMonth, setYear} from 'date-fns'
-import {range} from 'lodash'
+import {
+  addDays,
+  addMonths,
+  format,
+  parse,
+  setDate,
+  setHours,
+  setMinutes,
+  setMonth,
+  setYear,
+} from 'date-fns'
 import {
   type ComponentProps,
   type FormEvent,
@@ -19,8 +28,9 @@ import {Button} from '../../../../../ui-components/button/Button'
 import {TooltipDelayGroupProvider} from '../../../../../ui-components/tooltipDelayGroupProvider/TooltipDelayGroupProvider'
 import useDialogTimeZone from '../../../../scheduledPublishing/hooks/useDialogTimeZone'
 import useTimeZone from '../../../../scheduledPublishing/hooks/useTimeZone'
+import {TimeInput} from '../TimeInput'
 import {CalendarMonth} from './CalendarMonth'
-import {ARROW_KEYS, DEFAULT_TIME_PRESETS, HOURS_24} from './constants'
+import {ARROW_KEYS, DEFAULT_TIME_PRESETS} from './constants'
 import {features} from './features'
 import {type CalendarLabels, type MonthNames} from './types'
 import {formatTime} from './utils'
@@ -119,29 +129,21 @@ export const Calendar = forwardRef(function Calendar(
     [onSelect, selectedDate],
   )
 
-  const handleMinutesChange = useCallback(
-    (event: FormEvent<HTMLSelectElement>) => {
-      const m = Number(event.currentTarget.value)
-      onSelect(setMinutes(selectedDate, m))
-    },
-    [onSelect, selectedDate],
-  )
-
-  const handleHoursChange = useCallback(
-    (event: FormEvent<HTMLSelectElement>) => {
-      const m = Number(event.currentTarget.value)
-      onSelect(setHours(selectedDate, m))
-    },
-    [onSelect, selectedDate],
-  )
-
   const handleTimeChange = useCallback(
     (hours: number, mins: number) => {
       onSelect(setHours(setMinutes(selectedDate, mins), hours))
     },
     [onSelect, selectedDate],
   )
 
+  const handleTimeChangeInputChange = useCallback(
+    (event: FormEvent<HTMLInputElement>) => {
+      const date = parse(event.currentTarget.value, 'HH:mm', new Date())
+      handleTimeChange(date.getHours(), date.getMinutes())
+    },
+    [handleTimeChange],
+  )
+
   const ref = useRef<HTMLDivElement | null>(null)
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
@@ -328,46 +330,11 @@ export const Calendar = forwardRef(function Calendar(
           {selectTime && (
             <>
               <Flex align="center">
-                <Flex align="center" flex={1}>
-                  <Box>
-                    <Select
-                      aria-label={labels.selectHour}
-                      fontSize={1}
-                      padding={2}
-                      radius={2}
-                      value={selectedDate?.getHours()}
-                      onChange={handleHoursChange}
-                    >
-                      {HOURS_24.map((h) => (
-                        <option key={h} value={h}>
-                          {`${h}`.padStart(2, '0')}
-                        </option>
-                      ))}
-                    </Select>
-                  </Box>
-
-                  <Box paddingX={1}>
-                    <Text size={1}>:</Text>
-                  </Box>
-
-                  <Box>
-                    <Select
-                      aria-label={labels.selectMinute}
-                      fontSize={1}
-                      padding={2}
-                      radius={2}
-                      value={selectedDate?.getMinutes()}
-                      onChange={handleMinutesChange}
-                    >
-                      {range(0, 60, timeStep).map((m) => (
-                        <option key={m} value={m}>
-                          {`${m}`.padStart(2, '0')}
-                        </option>
-                      ))}
-                    </Select>
-                  </Box>
-                </Flex>
-
+                <TimeInput
+                  aria-label={labels.selectTime}
+                  value={format(selectedDate, 'HH:mm')}
+                  onChange={handleTimeChangeInputChange}
+                />
                 <Box marginLeft={2}>
                   <Button text={labels.setToCurrentTime} mode="bleed" onClick={handleNowClick} />
                 </Box>

packages/sanity/src/core/components/inputs/DateInputs/calendar/constants.ts

@@ -1,5 +1,3 @@
-import {range} from 'lodash'
-
 export const DEFAULT_MONTH_NAMES = [
   'January',
   'February',
@@ -17,8 +15,6 @@ export const DEFAULT_MONTH_NAMES = [
 
 export const DEFAULT_WEEK_DAY_NAMES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 
-export const HOURS_24 = range(0, 24)
-
 export const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
 
 export const DEFAULT_TIME_PRESETS = [

packages/sanity/src/core/components/inputs/DateInputs/calendar/types.ts

@@ -7,8 +7,7 @@ export interface CalendarLabels {
   goToNextYear: string
   goToPreviousMonth: string
   goToNextMonth: string
-  selectHour: string
-  selectMinute: string
+  selectTime: string
   setToCurrentTime: string
   tooltipText: string
   monthNames: MonthNames

packages/sanity/src/core/form/inputs/DateInputs/__tests__/CommonDateTimeInput.test.tsx

@@ -42,8 +42,7 @@ const CALENDAR_LABELS: CalendarLabels = {
   goToNextYear: 'Next year',
   goToNextMonth: 'Go to next month',
   goToPreviousMonth: 'Go to previous month',
-  selectHour: 'Select hour',
-  selectMinute: 'Select minute',
+  selectTime: 'Select time',
   setToCurrentTime: 'Set to current time',
   monthNames: [
     'January',

packages/sanity/src/core/form/inputs/DateInputs/utils.ts

@@ -20,8 +20,7 @@ export function getCalendarLabels(
     goToNextYear: t('calendar.action.go-to-next-year'),
     goToPreviousYear: t('calendar.action.go-to-previous-year'),
     setToCurrentTime: t('calendar.action.set-to-current-time'),
-    selectHour: t('calendar.action.select-hour'),
-    selectMinute: t('calendar.action.select-minute'),
+    selectTime: t('calendar.action.select-time'),
     tooltipText: t('calendar.button.tooltip-text'),
     monthNames: [
       t('calendar.month-names.january'),

packages/sanity/src/core/i18n/bundles/studio.ts

@@ -147,10 +147,8 @@ export const studioLocaleStrings = defineLocalesResources('studio', {
   'calendar.action.go-to-yesterday': 'Yesterday',
   /** Label for switch that controls whether or not to include time in given timestamp */
   'calendar.action.include-time-label': 'Include time',
-  /** Action message for selecting the hour */
-  'calendar.action.select-hour': 'Select hour',
-  /** Action message for selecting the minute */
-  'calendar.action.select-minute': 'Select minute',
+  /** Action message for selecting the time */
+  'calendar.action.select-time': 'Select time',
   /** Action message for setting to the current time */
   'calendar.action.set-to-current-time': 'Set to current time',
   /** Label for selecting an hour preset. Receives a `time` param as a string on hh:mm format and a `date` param as a Date instance denoting the preset date */

packages/sanity/src/core/releases/tool/detail/__tests__/ReleaseTypePicker.test.tsx

@@ -152,8 +152,8 @@ describe('ReleaseTypePicker', () => {
       // Select the 10th day in the calendar month
       fireEvent.click(within(Calendar).getByTestId('calendar-next-month'))
       fireEvent.click(within(CalendarMonth).getByText('10'))
-      fireEvent.change(screen.getByLabelText('Select hour'), {target: {value: 10}})
-      fireEvent.change(screen.getByLabelText('Select minute'), {target: {value: 55}})
+      fireEvent.change(screen.getByLabelText('Select time'), {target: {value: '10:55'}})
+      fireEvent.blur(screen.getByLabelText('Select time'))
       expect(mockUpdateRelease).not.toHaveBeenCalled()
 
       // Close the popup and check if the release is updated