test: for time pickervalue (#741)

docs/examples/debug.tsx

@@ -149,13 +149,14 @@ export default () => {
  <SinglePicker
  // Shared
  {...sharedLocale}
- disabledDate={(date) => date.isBefore(dayjs())}
+ // disabledDate={(date) => date.isBefore(dayjs())}
  // disabledTime={() => ({
  // disabledHours: () => [0, 1, 2, 3, 4, 5],
  // disabledMinutes: () => [0, 1, 2, 3, 4, 5],
  // disabledSeconds: () => [0, 1, 2, 3, 4, 5],
  // })}
  open
+ picker="time"
  ref={singleRef}
  suffixIcon="🧶"
  // showTime={{
@@ -165,7 +166,7 @@ export default () => {
  // disabledSeconds: () => [0, 1, 2, 3, 4, 5],
  // }),
  // }}
- showTime={{}}
+ // showTime={{}}
  onChange={(...args) => {
  console.log('🔥 Change:', ...args);
  }}

src/PickerInput/hooks/useRangePickerValue.ts

@@ -52,13 +52,21 @@ export default function useRangePickerValue<DateType extends object, ValueType e
  minDate?: DateType,
  maxDate?: DateType,
 ): [currentIndexPickerValue: DateType, setCurrentIndexPickerValue: (value: DateType) => void] {
+ const isTimePicker = pickerMode === 'time';
+
  // ======================== Active ========================
  // `activeIndex` must be valid to avoid getting empty `pickerValue`
  const mergedActiveIndex = activeIndex || 0;
 
  // ===================== Picker Value =====================
- const getDefaultPickerValue = (index: number) =>
- defaultPickerValue[index] || calendarValue[index] || generateConfig.getNow();
+ const getDefaultPickerValue = (index: number) => {
+ let now = generateConfig.getNow();
+ if (isTimePicker) {
+ now = fillTime(generateConfig, now);
+ }
+
+ return defaultPickerValue[index] || calendarValue[index] || now;
+ };
 
  // Align `pickerValue` with `showTime.defaultValue`
  const [startPickerValue, endPickerValue] = pickerValue;
@@ -80,11 +88,11 @@ export default function useRangePickerValue<DateType extends object, ValueType e
  const current = [mergedStartPickerValue, mergedEndPickerValue][mergedActiveIndex];
 
  // Merge the `showTime.defaultValue` into `pickerValue`
- return pickerMode === 'time'
+ return isTimePicker
  ? current
  : fillTime(generateConfig, current, timeDefaultValue[mergedActiveIndex]);
  }, [
- pickerMode,
+ isTimePicker,
  mergedStartPickerValue,
  mergedEndPickerValue,
  mergedActiveIndex,
@@ -155,7 +163,7 @@ export default function useRangePickerValue<DateType extends object, ValueType e
  useLayoutEffect(() => {
  if (open) {
  if (!defaultPickerValue[mergedActiveIndex]) {
- let nextPickerValue: DateType = generateConfig.getNow();
+ let nextPickerValue: DateType = isTimePicker ? null : generateConfig.getNow();
 
  /**
  * 1. If has prevActiveIndex, use it to avoid panel jump

tests/picker.spec.tsx

@@ -1376,4 +1376,18 @@ describe('Picker.Basic', () => {
  document.querySelector('.rc-picker-time-panel-column:first-child li').textContent,
  ).toEqual('01');
  });
+
+ it('time picker should align to 0', () => {
+ jest.useFakeTimers().setSystemTime(getDay('1990-09-03 01:03:05').valueOf());
+
+ const onCalendarChange = jest.fn();
+ render(<DayPicker picker="time" open showNow onCalendarChange={onCalendarChange} />);
+
+ selectCell('00');
+ expect(onCalendarChange).toHaveBeenCalledWith(expect.anything(), '00:00:00', expect.anything());
+ onCalendarChange.mockReset();
+
+ fireEvent.click(document.querySelector('.rc-picker-now-btn'));
+ expect(onCalendarChange).toHaveBeenCalledWith(expect.anything(), '01:03:05', expect.anything());
+ });
 });

tests/util/commonUtil.tsx

@@ -138,11 +138,20 @@ export function findCell(text: string | number, index = 0) {
 
  const table = document.querySelectorAll('table')[index];
 
- Array.from(table.querySelectorAll('td')).forEach((td) => {
- if (td.textContent === String(text) && td.className.includes('-in-view')) {
- matchCell = td;
- }
- });
+ if (table) {
+ Array.from(table.querySelectorAll('td')).forEach((td) => {
+ if (td.textContent === String(text) && td.className.includes('-in-view')) {
+ matchCell = td;
+ }
+ });
+ } else {
+ const column = document.querySelectorAll('.rc-picker-time-panel-column')[index];
+ Array.from(column.querySelectorAll('li')).forEach((li) => {
+ if (li.textContent === String(text)) {
+ matchCell = li;
+ }
+ });
+ }
  if (!matchCell) {
  throw new Error('Cell not match in picker panel.');
  }