feat: add showCurrentTimeAsDefault prop in Timepicker component

affects: @medly-components/core, @medly-components/forms
medly · Nov 2, 2024 · 4815144 · 4815144
1 parent 60c26d6
commit 4815144
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 15 deletions.
diff --git 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
@@ -26,6 +26,7 @@ const Component: FC<TimePickerProps> = memo(
             disableFutureTime,
             disablePastTime,
             clearOnCancel,
+            showCurrentTimeAsDefault,
             ...restProps
         } = props;
 
@@ -71,6 +72,7 @@ const Component: FC<TimePickerProps> = memo(
                         popoverPlacement={popoverPlacement}
                         disableFutureTime={disableFutureTime}
                         disablePastTime={disablePastTime}
+                        showCurrentTimeAsDefault={showCurrentTimeAsDefault}
                     />
                 )}
             </TimePickerWrapper>

diff --git 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<TimePickerPopupProps> = ({
     popoverDistance,
     popoverPlacement,
     disableFutureTime,
-    disablePastTime
+    disablePastTime,
+    showCurrentTimeAsDefault
 }) => {
+    const now = new Date();
     const hourRef = useRef<HTMLUListElement>(null);
     const minutesRef = useRef<HTMLUListElement>(null);
     const periodRef = useRef<HTMLUListElement>(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<TimePickerPopupProps> = ({
     };
 
     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
@@ -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
@@ -897,7 +897,7 @@ exports[`TimePicker should render properly 1`] = `
               />
               <li
                 aria-label="1 HOUR"
-                class="c21"
+                class="c20"
               >
                 01
               </li>
@@ -951,7 +951,7 @@ exports[`TimePicker should render properly 1`] = `
               </li>
               <li
                 aria-label="10 HOUR"
-                class="c20"
+                class="c21"
               >
                 10
               </li>

diff --git 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<TextFieldProps, 'value' | 'onChang
     disablePastTime?: boolean;
     /** Should clear on cancel */
     clearOnCancel?: boolean;
+    /** Set it true to show current time */
+    showCurrentTimeAsDefault?: Date;
 }