enhance: opt picker time panel hover to show as placeholder (#858)

* enhance: hover time to show placeholder

* test: add test case

* test: coverage

Author: zombieJ

src/PickerPanel/TimePanel/TimePanelBody/TimeColumn.tsx

@@ -18,12 +18,14 @@ export interface TimeUnitColumnProps {
   optionalValue?: number | string;
   type: 'hour' | 'minute' | 'second' | 'millisecond' | 'meridiem';
   onChange: (value: number | string) => void;
+  onHover: (value: number | string) => void;
   onDblClick?: VoidFunction;
   changeOnScroll?: boolean;
 }
 
 export default function TimeColumn<DateType extends object>(props: TimeUnitColumnProps) {
-  const { units, value, optionalValue, type, onChange, onDblClick, changeOnScroll } = props;
+  const { units, value, optionalValue, type, onChange, onHover, onDblClick, changeOnScroll } =
+    props;
 
   const { prefixCls, cellRender, now, locale } = usePanelContext<DateType>();
 
@@ -110,6 +112,12 @@ export default function TimeColumn<DateType extends object>(props: TimeUnitColum
                 onDblClick();
               }
             }}
+            onMouseEnter={() => {
+              onHover(unitValue);
+            }}
+            onMouseLeave={() => {
+              onHover(null);
+            }}
             data-value={unitValue}
           >
             {cellRender

src/PickerPanel/TimePanel/TimePanelBody/index.tsx

@@ -26,7 +26,7 @@ export default function TimePanelBody<DateType extends object = any>(
     changeOnScroll,
   } = props;
 
-  const { prefixCls, values, generateConfig, locale, onSelect, pickerValue } =
+  const { prefixCls, values, generateConfig, locale, onSelect, onHover, pickerValue } =
     usePanelContext<DateType>();
 
   const value = values?.[0] || null;
@@ -185,28 +185,73 @@ export default function TimePanelBody<DateType extends object = any>(
     generateConfig,
   ]);
 
+  // ===================== Columns Change =====================
+  const fillColumnValue = (
+    val: number | string,
+    func: 'setHour' | 'setMinute' | 'setSecond' | 'setMillisecond',
+  ) => {
+    if (val === null) {
+      return null;
+    }
+    return generateConfig[func](triggerDateTmpl, val as any);
+  };
+
+  const getNextHourTime = (val: number) => fillColumnValue(val, 'setHour');
+  const getNextMinuteTime = (val: number) => fillColumnValue(val, 'setMinute');
+  const getNextSecondTime = (val: number) => fillColumnValue(val, 'setSecond');
+  const getNextMillisecondTime = (val: number) => fillColumnValue(val, 'setMillisecond');
+  const getMeridiemTime = (val: string) => {
+    if (val === null) {
+      return null;
+    }
+
+    if (val === 'am' && !isAM(hour)) {
+      return generateConfig.setHour(triggerDateTmpl, hour - 12);
+    } else if (val === 'pm' && isAM(hour)) {
+      return generateConfig.setHour(triggerDateTmpl, hour + 12);
+    }
+    return triggerDateTmpl;
+  };
+
   const onHourChange = (val: number) => {
-    triggerChange(generateConfig.setHour(triggerDateTmpl, val));
+    triggerChange(getNextHourTime(val));
   };
 
   const onMinuteChange = (val: number) => {
-    triggerChange(generateConfig.setMinute(triggerDateTmpl, val));
+    triggerChange(getNextMinuteTime(val));
   };
 
   const onSecondChange = (val: number) => {
-    triggerChange(generateConfig.setSecond(triggerDateTmpl, val));
+    triggerChange(getNextSecondTime(val));
   };
 
   const onMillisecondChange = (val: number) => {
-    triggerChange(generateConfig.setMillisecond(triggerDateTmpl, val));
+    triggerChange(getNextMillisecondTime(val));
   };
 
   const onMeridiemChange = (val: string) => {
-    if (val === 'am' && !isAM(hour)) {
-      triggerChange(generateConfig.setHour(triggerDateTmpl, hour - 12));
-    } else if (val === 'pm' && isAM(hour)) {
-      triggerChange(generateConfig.setHour(triggerDateTmpl, hour + 12));
-    }
+    triggerChange(getMeridiemTime(val));
+  };
+
+  // ====================== Column Hover ======================
+  const onHourHover = (val: number) => {
+    onHover(getNextHourTime(val));
+  };
+
+  const onMinuteHover = (val: number) => {
+    onHover(getNextMinuteTime(val));
+  };
+
+  const onSecondHover = (val: number) => {
+    onHover(getNextSecondTime(val));
+  };
+
+  const onMillisecondHover = (val: number) => {
+    onHover(getNextMillisecondTime(val));
+  };
+
+  const onMeridiemHover = (val: string) => {
+    onHover(getMeridiemTime(val));
   };
 
   // ========================= Render =========================
@@ -224,6 +269,7 @@ export default function TimePanelBody<DateType extends object = any>(
           optionalValue={pickerHour}
           type="hour"
           onChange={onHourChange}
+          onHover={onHourHover}
           {...sharedColumnProps}
         />
       )}
@@ -234,6 +280,7 @@ export default function TimePanelBody<DateType extends object = any>(
           optionalValue={pickerMinute}
           type="minute"
           onChange={onMinuteChange}
+          onHover={onMinuteHover}
           {...sharedColumnProps}
         />
       )}
@@ -244,6 +291,7 @@ export default function TimePanelBody<DateType extends object = any>(
           optionalValue={pickerSecond}
           type="second"
           onChange={onSecondChange}
+          onHover={onSecondHover}
           {...sharedColumnProps}
         />
       )}
@@ -254,6 +302,7 @@ export default function TimePanelBody<DateType extends object = any>(
           optionalValue={pickerMillisecond}
           type="millisecond"
           onChange={onMillisecondChange}
+          onHover={onMillisecondHover}
           {...sharedColumnProps}
         />
       )}
@@ -263,6 +312,7 @@ export default function TimePanelBody<DateType extends object = any>(
           value={meridiem}
           type="meridiem"
           onChange={onMeridiemChange}
+          onHover={onMeridiemHover}
           {...sharedColumnProps}
         />
       )}

tests/time.spec.tsx

@@ -1,7 +1,7 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import { resetWarned } from 'rc-util/lib/warning';
 import React from 'react';
-import { DayPicker, getDay, openPicker, selectCell } from './util/commonUtil';
+import { DayPicker, getDay, openPicker, selectCell, findCell } from './util/commonUtil';
 
 describe('Picker.Time', () => {
   beforeEach(() => {
@@ -25,4 +25,47 @@ describe('Picker.Time', () => {
 
     expect(container.querySelector('input')).toHaveValue('1990-09-03 00:00');
   });
+
+  it('hover to show placeholder', async () => {
+    const { container } = render(
+      <DayPicker
+        showTime={{
+          showMillisecond: true,
+          use12Hours: true,
+        }}
+      />,
+    );
+    openPicker(container);
+
+    const getColCell = (colIndex: number, cellIndex: number) => {
+      const column = document.querySelectorAll('.rc-picker-time-panel-column')[colIndex];
+      const cell = column.querySelectorAll('.rc-picker-time-panel-cell-inner')[cellIndex];
+
+      return cell;
+    };
+
+    // Hour
+    fireEvent.mouseEnter(getColCell(0, 3));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 03:00:00.000 AM');
+
+    // Let test for mouse leave
+    fireEvent.mouseLeave(getColCell(0, 3));
+    expect(container.querySelector('input')).toHaveValue('');
+
+    // Minute
+    fireEvent.mouseEnter(getColCell(1, 2));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 12:02:00.000 AM');
+
+    // Second
+    fireEvent.mouseEnter(getColCell(2, 1));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 12:00:01.000 AM');
+
+    // Millisecond
+    fireEvent.mouseEnter(getColCell(3, 1));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 12:00:00.100 AM');
+
+    // Meridiem
+    fireEvent.mouseEnter(getColCell(4, 1));
+    expect(container.querySelector('input')).toHaveValue('1990-09-03 12:00:00.000 PM');
+  });
 });