fix: 2.7.x dynamic disabledTime should be correct (#673)

Author: linxianxi

src/hooks/useTimeSelection.ts

@@ -0,0 +1,67 @@
+import type { GenerateConfig } from '../generate';
+import type { Unit } from '../panels/TimePanel/TimeUnitColumn';
+import { setTime as utilSetTime } from '../utils/timeUtil';
+
+export default function useTimeSelection<DateType>({
+  value,
+  generateConfig,
+  disabledMinutes,
+  disabledSeconds,
+  minutes,
+  seconds,
+  use12Hours,
+}: {
+  value: DateType;
+  generateConfig: GenerateConfig<DateType>;
+  disabledMinutes: (hour: number) => number[];
+  disabledSeconds: (hour: number, minute: number) => number[];
+  minutes: Unit[];
+  seconds: Unit[];
+  use12Hours: boolean;
+}) {
+  const setTime = (
+    isNewPM: boolean | undefined,
+    newHour: number,
+    newMinute: number,
+    newSecond: number,
+  ) => {
+    let newDate = value || generateConfig.getNow();
+
+    const mergedHour = Math.max(0, newHour);
+    let mergedMinute = Math.max(0, newMinute);
+    let mergedSecond = Math.max(0, newSecond);
+
+    const newDisabledMinutes = disabledMinutes && disabledMinutes(mergedHour);
+    if (newDisabledMinutes?.includes(mergedMinute)) {
+      // find the first available minute in minutes
+      const availableMinute = minutes.find((i) => !newDisabledMinutes.includes(i.value));
+      if (availableMinute) {
+        mergedMinute = availableMinute.value;
+      } else {
+        return null;
+      }
+    }
+    const newDisabledSeconds = disabledSeconds && disabledSeconds(mergedHour, mergedMinute);
+    if (newDisabledSeconds?.includes(mergedSecond)) {
+      // find the first available second in seconds
+      const availableSecond = seconds.find((i) => !newDisabledSeconds.includes(i.value));
+      if (availableSecond) {
+        mergedSecond = availableSecond.value;
+      } else {
+        return null;
+      }
+    }
+
+    newDate = utilSetTime(
+      generateConfig,
+      newDate,
+      !use12Hours || !isNewPM ? mergedHour : mergedHour + 12,
+      mergedMinute,
+      mergedSecond,
+    );
+
+    return newDate;
+  };
+
+  return setTime;
+}

src/panels/TimePanel/TimeBody.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
 import useMemo from 'rc-util/lib/hooks/useMemo';
+import * as React from 'react';
+import type { SharedTimeProps } from '.';
 import type { GenerateConfig } from '../../generate';
+import useTimeSelection from '../../hooks/useTimeSelection';
 import type { Locale, OnSelect } from '../../interface';
+import { leftPad } from '../../utils/miscUtil';
 import type { Unit } from './TimeUnitColumn';
 import TimeUnitColumn from './TimeUnitColumn';
-import { leftPad } from '../../utils/miscUtil';
-import type { SharedTimeProps } from '.';
-import { setTime as utilSetTime } from '../../utils/timeUtil';
 
 function shouldUnitsUpdate(prevUnits: Unit[], nextUnits: Unit[]) {
   if (prevUnits.length !== nextUnits.length) return true;
@@ -102,30 +102,6 @@ function TimeBody<DateType>(props: TimeBodyProps<DateType>) {
     return [disabledHours, disabledMinutes, disabledSeconds];
   }, [disabledHours, disabledMinutes, disabledSeconds, disabledTime, now]);
 
-  // Set Time
-  const setTime = (
-    isNewPM: boolean | undefined,
-    newHour: number,
-    newMinute: number,
-    newSecond: number,
-  ) => {
-    let newDate = value || generateConfig.getNow();
-
-    const mergedHour = Math.max(0, newHour);
-    const mergedMinute = Math.max(0, newMinute);
-    const mergedSecond = Math.max(0, newSecond);
-
-    newDate = utilSetTime(
-      generateConfig,
-      newDate,
-      !use12Hours || !isNewPM ? mergedHour : mergedHour + 12,
-      mergedMinute,
-      mergedSecond,
-    );
-
-    return newDate;
-  };
-
   // ========================= Unit =========================
   const rawHours = generateUnits(0, 23, hourStep, mergedDisabledHours && mergedDisabledHours());
 
@@ -182,6 +158,17 @@ function TimeBody<DateType>(props: TimeBodyProps<DateType>) {
     mergedDisabledSeconds && mergedDisabledSeconds(originHour, minute),
   );
 
+  // Set Time
+  const setTime = useTimeSelection({
+    value,
+    generateConfig,
+    disabledMinutes: mergedDisabledMinutes,
+    disabledSeconds: mergedDisabledSeconds,
+    minutes,
+    seconds,
+    use12Hours,
+  });
+
   // ====================== Operations ======================
   operationRef.current = {
     onUpDown: (diff) => {

tests/disabledTime.spec.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import type { Moment } from 'moment';
 import { resetWarned } from 'rc-util/lib/warning';
-import { mount, getMoment, isSame, MomentPicker, MomentRangePicker } from './util/commonUtil';
+import { getMoment, isSame, MomentPicker, MomentRangePicker, mount } from './util/commonUtil';
 
 describe('Picker.DisabledTime', () => {
   it('disabledTime on TimePicker', () => {
@@ -90,6 +89,62 @@ describe('Picker.DisabledTime', () => {
     wrapper.closePicker(1);
   });
 
+  it('dynamic disabledTime should be correct', () => {
+    const wrapper = mount(
+      <MomentPicker
+        open
+        picker="time"
+        disabledTime={() => ({
+          disabledHours: () => [0, 1],
+          disabledMinutes: (selectedHour) => {
+            if (selectedHour === 2) {
+              return [0, 1];
+            } else {
+              return [];
+            }
+          },
+          disabledSeconds: (_, selectMinute) => {
+            if (selectMinute === 2) {
+              return [0, 1];
+            } else {
+              return [];
+            }
+          },
+        })}
+      />,
+    );
+
+    wrapper
+      .find('.rc-picker-time-panel-column')
+      .first()
+      .find('.rc-picker-time-panel-cell')
+      .at(2)
+      .simulate('click');
+
+    wrapper
+      .find('.rc-picker-time-panel-column')
+      .at(1)
+      .find('.rc-picker-time-panel-cell')
+      .first()
+      .simulate('click');
+
+    wrapper
+      .find('.rc-picker-time-panel-column')
+      .at(2)
+      .find('.rc-picker-time-panel-cell')
+      .first()
+      .simulate('click');
+
+    wrapper
+      .find('.rc-picker-time-panel-column')
+      .first()
+      .find('.rc-picker-time-panel-cell')
+      .at(1)
+      .simulate('click');
+
+    expect(wrapper.find('input').prop('value')).toEqual('02:02:02');
+  });
+
   describe('warning for legacy props', () => {
     it('single', () => {
       resetWarned();