enhance: Lock switch field if needConfirm (#892)

* enhance: not allow change for locked

* test: add test case

* chore: clean up

Author: zombieJ

docs/examples/debug.tsx

@@ -55,32 +55,35 @@ export default () => {
         {...sharedLocale}
         style={{ width: 400 }}
         showTime
+        // allowEmpty
         // disabledDate={(_, info) => {
         //   console.log('Date:', info);
         //   return false;
         // }}
-        disabledTime={(date, range, info) => {
-          // console.log(`Time-${range}`, range, info);
-          const { from } = info;
+        // disabledTime={(date, range, info) => {
+        //   // console.log(`Time-${range}`, range, info);
+        //   const { from } = info;
 
-          if (from) {
-            console.log(
-              `Time-${range}`,
-              from.format('YYYY-MM-DD HH:mm:ss'),
-              date.format('YYYY-MM-DD HH:mm:ss'),
-            );
-          }
+        //   if (from) {
+        //     console.log(
+        //       `Time-${range}`,
+        //       from.format('YYYY-MM-DD HH:mm:ss'),
+        //       date.format('YYYY-MM-DD HH:mm:ss'),
+        //     );
+        //   }
 
-          if (from && from.isSame(date, 'day')) {
-            return {
-              disabledHours: () => [from.hour()],
-              disabledMinutes: () => [0, 1, 2, 3],
-              disabledSeconds: () => [0, 1, 2, 3],
-            };
-          }
-          return {};
-        }}
+        //   if (from && from.isSame(date, 'day')) {
+        //     return {
+        //       disabledHours: () => [from.hour()],
+        //       disabledMinutes: () => [0, 1, 2, 3],
+        //       disabledSeconds: () => [0, 1, 2, 3],
+        //     };
+        //   }
+        //   return {};
+        // }}
       />
+
+      <RangePicker {...sharedLocale} style={{ width: 400 }} allowEmpty />
       {/* <SinglePicker
         {...dateFnsSharedLocale}
         style={{ width: 400 }}

src/PickerInput/RangePicker.tsx

@@ -33,7 +33,7 @@ import useRangeDisabledDate from './hooks/useRangeDisabledDate';
 import useRangePickerValue from './hooks/useRangePickerValue';
 import useRangeValue, { useInnerValue } from './hooks/useRangeValue';
 import useShowNow from './hooks/useShowNow';
-import Popup, { PopupShowTimeConfig } from './Popup';
+import Popup, { type PopupShowTimeConfig } from './Popup';
 import RangeSelector, { type SelectorIdType } from './Selector/RangeSelector';
 
 function separateConfig<T>(config: T | [T, T] | null | undefined, defaultConfig: T): [T, T] {
@@ -325,6 +325,8 @@ function RangePicker<DateType extends object = any>(
     flushSubmit,
     /** Trigger `onChange` directly without check `disabledDate` */
     triggerSubmitChange,
+    /** Tell `index` has filled value in it */
+    hasSubmitValue,
   ] = useRangeValue<RangeValueType<DateType>, DateType>(
     filledProps,
     mergedValue,
@@ -630,6 +632,22 @@ function RangePicker<DateType extends object = any>(
 
   // ======================= Selector =======================
   const onSelectorFocus: SelectorProps['onFocus'] = (event, index) => {
+    // Check if `needConfirm` but user not submit yet
+    const activeListLen = activeIndexList.length;
+    const lastActiveIndex = activeIndexList[activeListLen - 1];
+    if (
+      activeListLen &&
+      lastActiveIndex !== index &&
+      needConfirm &&
+      // Not change index if is not filled
+      !allowEmpty[lastActiveIndex] &&
+      !hasSubmitValue(lastActiveIndex) &&
+      calendarValue[lastActiveIndex]
+    ) {
+      selectorRef.current.focus({ index: lastActiveIndex });
+      return;
+    }
+
     lastOperation('input');
 
     triggerOpen(true, {

src/PickerInput/hooks/useRangeValue.ts

@@ -76,7 +76,7 @@ function orderDates<DateType extends object, DatesType extends DateType[]>(
  * Used for internal value management.
  * It should always use `mergedValue` in render logic
  */
-export function useCalendarValue<MergedValueType extends object[]>(mergedValue: MergedValueType) {
+function useCalendarValue<MergedValueType extends object[]>(mergedValue: MergedValueType) {
   const [calendarValue, setCalendarValue] = useSyncState(mergedValue);
 
   /** Sync calendarValue & submitValue back with value */
@@ -186,6 +186,8 @@ export default function useRangeValue<ValueType extends DateType[], DateType ext
   flushSubmit: (index: number, needTriggerChange: boolean) => void,
   /** Trigger `onChange` directly without check `disabledDate` */
   triggerSubmitChange: (value: ValueType) => boolean,
+  /** Tell `index` has filled value in it */
+  hasSubmitValue: (index: number) => boolean,
 ] {
   const {
     // MISC
@@ -331,6 +333,11 @@ export default function useRangeValue<ValueType extends DateType[], DateType ext
     2,
   );
 
+  // ============================ Check =============================
+  function hasSubmitValue(index: number) {
+    return !!submitValue()[index];
+  }
+
   // ============================ Return ============================
-  return [flushSubmit, triggerSubmit];
+  return [flushSubmit, triggerSubmit, hasSubmitValue];
 }

tests/range.spec.tsx

@@ -49,6 +49,7 @@ describe('Picker.Range', () => {
     resetWarned();
     global.scrollCalled = false;
     jest.useFakeTimers().setSystemTime(getDay('1990-09-03 00:00:00').valueOf());
+    document.body.innerHTML = '';
   });
 
   afterEach(() => {
@@ -2054,4 +2055,20 @@ describe('Picker.Range', () => {
       'rc-picker-input-active',
     );
   });
+
+  it('should not click to focus on next field if first field is not confirm', () => {
+    const onCalendarChange = jest.fn();
+    const { container } = render(
+      <DayRangePicker onCalendarChange={onCalendarChange} showTime needConfirm />,
+    );
+
+    // Select first field
+    openPicker(container, 0);
+    selectCell(11);
+    expect(onCalendarChange).toHaveBeenCalled();
+
+    // Not click confirm and click next field
+    openPicker(container, 1);
+    expect(container.querySelectorAll('.rc-picker-input')[0]).toHaveClass('rc-picker-input-active');
+  });
 });