fix: DayJS loop trigger effect (#689)

* fix: DayJs not think invalid date is same

* chore: clean up

Author: zombieJ

src/RangePicker.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import raf from 'rc-util/lib/raf';
 import warning from 'rc-util/lib/warning';
-import pickAttrs from 'rc-util/lib/pickAttrs';
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import type { PickerPanelProps } from '.';
@@ -43,12 +43,12 @@ import {
   isSameWeek,
   parseValue,
 } from './utils/dateUtil';
+import { getClearIcon } from './utils/getClearIcon';
 import getExtraFooter from './utils/getExtraFooter';
 import getRanges from './utils/getRanges';
 import { getValue, toArray, updateValues } from './utils/miscUtil';
 import { elementsContains, getDefaultFormat, getInputSize } from './utils/uiUtil';
 import { legacyPropsWarning } from './utils/warnUtil';
-import { getClearIcon } from './utils/getClearIcon';
 
 function reorderValues<DateType>(
   values: RangeValue<DateType>,
@@ -407,7 +407,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   function triggerChange(
     newValue: RangeValue<DateType>,
     sourceIndex: 0 | 1,
-    triggerCalendarChangeOnly?: boolean, 
+    triggerCalendarChangeOnly?: boolean,
   ) {
     let values = newValue;
     let startValue = getValue(values, 0);
@@ -576,7 +576,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     if (delayOpen) {
       if (needConfirmButton) {
         // when in dateTime mode, switching between two date input fields will trigger onCalendarChange.
-        // when onBlur is triggered, the input field has already switched, 
+        // when onBlur is triggered, the input field has already switched,
         // so it's necessary to obtain the value of the previous input field here.
         const needTriggerIndex = mergedActivePickerIndex ? 0 : 1;
         const selectedIndexValue = getValue(selectedValue, needTriggerIndex);
@@ -712,18 +712,18 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   const startStr =
     mergedValue && mergedValue[0]
       ? formatValue(mergedValue[0], {
-        locale,
-        format: 'YYYYMMDDHHmmss',
-        generateConfig,
-      })
+          locale,
+          format: 'YYYYMMDDHHmmss',
+          generateConfig,
+        })
       : '';
   const endStr =
     mergedValue && mergedValue[1]
       ? formatValue(mergedValue[1], {
-        locale,
-        format: 'YYYYMMDDHHmmss',
-        generateConfig,
-      })
+          locale,
+          format: 'YYYYMMDDHHmmss',
+          generateConfig,
+        })
       : '';
 
   useEffect(() => {
@@ -775,10 +775,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     }
     warning(!dateRender, `'dateRender' is deprecated. Please use 'cellRender' instead.`);
     warning(!monthCellRender, `'monthCellRender' is deprecated. Please use 'cellRender' instead.`);
-    warning(
-      !clearIcon,
-      '`clearIcon` will be removed in future. Please use `allowClear` instead.',
-    );
+    warning(!clearIcon, '`clearIcon` will be removed in future. Please use `allowClear` instead.');
   }
 
   // ============================ Private ============================
@@ -886,7 +883,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
           defaultValue={
             mergedActivePickerIndex === 0 ? getValue(selectedValue, 1) : getValue(selectedValue, 0)
           }
-        // defaultPickerValue={undefined}
+          // defaultPickerValue={undefined}
         />
       </RangeContext.Provider>
     );
@@ -1065,11 +1062,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     );
   }
 
-  const mergedClearIcon: React.ReactNode = getClearIcon(
-    prefixCls,
-    allowClear,
-    clearIcon,
-  );
+  const mergedClearIcon: React.ReactNode = getClearIcon(prefixCls, allowClear, clearIcon);
 
   const clearNode: React.ReactNode = (
     <span
@@ -1099,10 +1092,10 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     </span>
   );
 
-  const mergedAllowClear = allowClear && (
-    (getValue(mergedValue as RangeValue<DateType>, 0) && !mergedDisabled[0]) ||
-    (getValue(mergedValue as RangeValue<DateType>, 1) && !mergedDisabled[1])
-  );
+  const mergedAllowClear =
+    allowClear &&
+    ((getValue(mergedValue as RangeValue<DateType>, 0) && !mergedDisabled[0]) ||
+      (getValue(mergedValue as RangeValue<DateType>, 1) && !mergedDisabled[1]));
 
   const inputSharedProps = {
     size: getInputSize(picker, formatList[0], generateConfig),

src/hooks/useValueTexts.ts

@@ -1,5 +1,6 @@
 import useMemo from 'rc-util/lib/hooks/useMemo';
 import shallowEqual from 'rc-util/lib/isEqual';
+import * as React from 'react';
 import type { GenerateConfig } from '../generate';
 import type { CustomFormat, Locale } from '../interface';
 import { formatValue, isEqual } from '../utils/dateUtil';
@@ -13,8 +14,8 @@ export type ValueTextConfig<DateType> = {
 export default function useValueTexts<DateType>(
   value: DateType | null,
   { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
-) {
-  return useMemo<[string[], string]>(
+): [valueTexts: string[], firstValueText: string] {
+  const [texts, text] = useMemo<[string[], string]>(
     () => {
       if (!value) {
         return [[''], ''];
@@ -45,4 +46,6 @@ export default function useValueTexts<DateType>(
       // Not Same locale
       !shallowEqual(prev[2], next[2], true),
   );
+
+  return React.useMemo(() => [texts, text], [texts.join(''), text]);
 }

tests/loop.spec.tsx

@@ -0,0 +1,36 @@
+import { render } from '@testing-library/react';
+import dayjs from 'dayjs';
+import { resetWarned } from 'rc-util/lib/warning';
+import React from 'react';
+import dayJsGenerate from '../src/generate/dayjs';
+import zhCN from '../src/locale/zh_CN';
+import RangePicker from '../src/RangePicker';
+import { getMoment } from './util/commonUtil';
+
+describe('Picker.Loop', () => {
+  let errorSpy;
+
+  beforeAll(() => {
+    errorSpy = jest.spyOn(console, 'error').mockImplementation(() => null);
+  });
+
+  beforeEach(() => {
+    errorSpy.mockReset();
+    resetWarned();
+    global.scrollCalled = false;
+    jest.useFakeTimers().setSystemTime(getMoment('1990-09-03 00:00:00').valueOf());
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
+  it('no loop warning', () => {
+    render(
+      <RangePicker locale={zhCN} generateConfig={dayJsGenerate} value={[dayjs(''), dayjs('')]} />,
+    );
+
+    expect(errorSpy).not.toHaveBeenCalled();
+  });
+});