diff --git a/packages/core/src/components/TimePicker/TimePicker.stories.mdx b/packages/core/src/components/TimePicker/TimePicker.stories.mdx index ce8c21f4c..a3fb5f4be 100644 --- a/packages/core/src/components/TimePicker/TimePicker.stories.mdx +++ b/packages/core/src/components/TimePicker/TimePicker.stories.mdx @@ -47,6 +47,7 @@ const Component = () => { variant={select('variant', variants, 'outlined')} disableFutureTime={boolean('Disable future time', false)} disablePastTime={boolean('Disable past time', false)} + showCurrentTimeAsDefault={boolean('Show current time as default time', false)} popoverPlacement={select('Popover placement', placements, 'bottom-start')} /> ); diff --git a/packages/core/src/components/TimePicker/TimePicker.tsx b/packages/core/src/components/TimePicker/TimePicker.tsx index 0d70699fe..b008c1125 100644 --- a/packages/core/src/components/TimePicker/TimePicker.tsx +++ b/packages/core/src/components/TimePicker/TimePicker.tsx @@ -26,6 +26,7 @@ const Component: FC = memo( disableFutureTime, disablePastTime, clearOnCancel, + showCurrentTimeAsDefault, ...restProps } = props; @@ -71,6 +72,7 @@ const Component: FC = memo( popoverPlacement={popoverPlacement} disableFutureTime={disableFutureTime} disablePastTime={disablePastTime} + showCurrentTimeAsDefault={showCurrentTimeAsDefault} /> )} diff --git a/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx b/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx index cb43f2cb7..e5a1088a2 100644 --- a/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx +++ b/packages/core/src/components/TimePicker/TimePickerPopup/TimePickerPopup.tsx @@ -15,13 +15,18 @@ export const Component: FC = ({ popoverDistance, popoverPlacement, disableFutureTime, - disablePastTime + disablePastTime, + showCurrentTimeAsDefault }) => { + const now = new Date(); const hourRef = useRef(null); const minutesRef = useRef(null); const periodRef = useRef(null); const [open, setPopupState] = useContext(Popover.Context); - const [{ hour, minutes, period }, setValues] = useState({ hour: 1, minutes: 0, period: 0 }); + const defaultTime = showCurrentTimeAsDefault + ? { hour: now.getHours(), minutes: now.getMinutes(), period: now.getHours() < 12 ? 0 : 1 } + : { hour: 10, minutes: 0, period: 0 }; + const [{ hour, minutes, period }, setValues] = useState(defaultTime); const isFutureTime = useMemo(() => { const currentTime = new Date(); const currentHour = currentTime.getHours(); @@ -62,20 +67,22 @@ export const Component: FC = ({ }; useEffect(() => { + let { hour, minutes, period } = defaultTime; if (value) { const time = value.split(':'); - const hour = Number(time[0]); - const minutes = Number(time[1]); - const period = hour < 12 ? 0 : 1; - const height = (hourRef.current?.scrollHeight || 1) / 16; - const hourScroll = hour % 12 === 0 ? 11 : (hour % 12) - 1; - // @ts-ignore - hourRef.current?.scrollTo({ top: hourScroll * height, behavior: 'instant' }); - // @ts-ignore - minutesRef.current?.scrollTo({ top: minutes * height, behavior: 'instant' }); - // @ts-ignore - periodRef.current?.scrollTo({ top: period * height, behavior: 'instant' }); + hour = Number(time[0]); + minutes = Number(time[1]); + period = hour < 12 ? 0 : 1; } + const height = (hourRef.current?.scrollHeight || 1) / 16; + const hourScroll = hour % 12 === 0 ? 11 : (hour % 12) - 1; + + // @ts-ignore + hourRef.current?.scrollTo({ top: hourScroll * height, behavior: 'instant' }); + // @ts-ignore + minutesRef.current?.scrollTo({ top: minutes * height, behavior: 'instant' }); + // @ts-ignore + periodRef.current?.scrollTo({ top: period * height, behavior: 'instant' }); }, [open, value]); return ( diff --git a/packages/core/src/components/TimePicker/TimePickerPopup/types.ts b/packages/core/src/components/TimePicker/TimePickerPopup/types.ts index 603646381..662f48595 100644 --- a/packages/core/src/components/TimePicker/TimePickerPopup/types.ts +++ b/packages/core/src/components/TimePicker/TimePickerPopup/types.ts @@ -8,4 +8,5 @@ export type TimePickerPopupProps = { popoverPlacement?: Placement; disableFutureTime?: boolean; disablePastTime?: boolean; + showCurrentTimeAsDefault?: Date; }; diff --git a/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap index 349ea852d..4c9350374 100644 --- a/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap +++ b/packages/core/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap @@ -897,7 +897,7 @@ exports[`TimePicker should render properly 1`] = ` />
  • 01
  • @@ -951,7 +951,7 @@ exports[`TimePicker should render properly 1`] = `
  • 10
  • diff --git a/packages/core/src/components/TimePicker/types.ts b/packages/core/src/components/TimePicker/types.ts index 844058eb7..0405340b1 100644 --- a/packages/core/src/components/TimePicker/types.ts +++ b/packages/core/src/components/TimePicker/types.ts @@ -19,4 +19,6 @@ export interface TimePickerProps extends Omit