chore: optimize hover value experience

src/RangePicker.tsx

@@ -564,9 +564,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
   const onDateMouseLeave = () => {
     setHoverRangedValue(updateValues(selectedValue, null, mergedActivePickerIndex));
     if (mergedActivePickerIndex === 0) {
-      onStartLeave(null);
+      onStartLeave();
     } else {
-      onEndLeave(null);
+      onEndLeave();
     }
   };
 
@@ -1013,9 +1013,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
       triggerChange(values, mergedActivePickerIndex);
       // clear hover value style
       if (mergedActivePickerIndex === 0) {
-        onStartLeave(null);
+        onStartLeave();
       } else {
-        onEndLeave(null);
+        onEndLeave();
       }
     } else {
       setSelectedValue(values);

src/hooks/useHoverValue.ts

@@ -1,11 +1,23 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import useValueTexts, { ValueTextConfig } from './useValueTexts';
 
 export default function useHoverValue<DateType>(
   valueText: string,
   { formatList, generateConfig, locale }: ValueTextConfig<DateType>,
-): [string, (date: DateType) => void, (date: DateType) => void] {
-  const [value, setValue] = useState(null);
+): [string, (date: DateType) => void, (immediately?: boolean) => void] {
+  const [value, internalSetValue] = useState<DateType>(null);
+  const raf = useRef(null);
+
+  function setValue(val: DateType, immediately: boolean = false) {
+    cancelAnimationFrame(raf.current);
+    if (immediately) {
+      internalSetValue(val);
+      return;
+    }
+    raf.current = requestAnimationFrame(() => {
+      internalSetValue(val);
+    });
+  }
 
   const [, firstText] = useValueTexts(value, {
     formatList,
@@ -17,13 +29,15 @@ export default function useHoverValue<DateType>(
     setValue(date);
   }
 
-  function onLeave() {
-    setValue(null);
+  function onLeave(immediately: boolean = false) {
+    setValue(null, immediately);
   }
 
   useEffect(() => {
-    onLeave();
+    onLeave(true);
   }, [valueText]);
 
+  useEffect(() => () => cancelAnimationFrame(raf.current), []);
+
   return [firstText, onEnter, onLeave];
 }

tests/picker.spec.tsx

@@ -740,14 +740,24 @@ describe('Picker.Basic', () => {
   });
 
   describe('hover value', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+    afterEach(() => {
+      jest.useRealTimers();
+    });
     it('should restore when leave', () => {
       const wrapper = mount(<MomentPicker open defaultValue={getMoment('2020-07-22')} />);
       const cell = wrapper.findCell(24);
       cell.simulate('mouseEnter');
+      jest.runAllTimers();
+      wrapper.update();
       expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
       expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
 
       cell.simulate('mouseLeave');
+      jest.runAllTimers();
+      wrapper.update();
       expect(wrapper.find('input').prop('value')).toBe('2020-07-22');
       expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeFalsy();
     });
@@ -757,6 +767,8 @@ describe('Picker.Basic', () => {
       wrapper.openPicker();
       const cell = wrapper.findCell(24);
       cell.simulate('mouseEnter');
+      jest.runAllTimers();
+      wrapper.update();
       expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
       expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
 
@@ -770,6 +782,8 @@ describe('Picker.Basic', () => {
       wrapper.openPicker();
       const cell = wrapper.findCell(24);
       cell.simulate('mouseEnter');
+      jest.runAllTimers();
+      wrapper.update();
       expect(wrapper.find('input').prop('value')).toBe('2020-07-24');
       expect(wrapper.find('.rc-picker-input').hasClass('rc-picker-input-placeholder')).toBeTruthy();
 

tests/range.spec.tsx

@@ -1430,6 +1430,13 @@ describe('Picker.Range', () => {
   });
 
   describe('hover placeholder', () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+    });
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
     const defaultValue: [Moment, Moment] = [getMoment('2020-07-22'), getMoment('2020-08-22')];
 
     it('should restore when leave', () => {
@@ -1439,6 +1446,8 @@ describe('Picker.Range', () => {
       wrapper.openPicker(0);
       const leftCell = wrapper.findCell(24);
       leftCell.simulate('mouseEnter');
+      jest.runAllTimers();
+      wrapper.update();
       expect(
         wrapper
           .find('input')
@@ -1465,6 +1474,8 @@ describe('Picker.Range', () => {
       ).toBeFalsy();
 
       leftCell.simulate('mouseLeave');
+      jest.runAllTimers();
+      wrapper.update();
       expect(
         wrapper
           .find('input')
@@ -1496,6 +1507,8 @@ describe('Picker.Range', () => {
       wrapper.openPicker(1);
       const rightCell = wrapper.findCell(24, 1);
       rightCell.simulate('mouseEnter');
+      jest.runAllTimers();
+      wrapper.update();
       expect(
         wrapper
           .find('input')
@@ -1522,6 +1535,8 @@ describe('Picker.Range', () => {
       ).toBeTruthy();
 
       rightCell.simulate('mouseLeave');
+      jest.runAllTimers();
+      wrapper.update();
       expect(
         wrapper
           .find('input')
@@ -1556,6 +1571,8 @@ describe('Picker.Range', () => {
       wrapper.openPicker(0);
       const leftCell = wrapper.findCell(24, 0);
       leftCell.simulate('mouseEnter');
+      jest.runAllTimers();
+      wrapper.update();
       expect(
         wrapper
           .find('input')
@@ -1610,6 +1627,8 @@ describe('Picker.Range', () => {
       // right
       const rightCell = wrapper.findCell(24, 1);
       rightCell.simulate('mouseEnter');
+      jest.runAllTimers();
+      wrapper.update();
       expect(
         wrapper
           .find('input')
@@ -1661,6 +1680,30 @@ describe('Picker.Range', () => {
           .hasClass('rc-picker-input-placeholder'),
       ).toBeFalsy();
     });
+
+    // https://github.com/ant-design/ant-design/issues/26544
+    it('should clean hover style when selecting the same value with last value', () => {
+      const wrapper = mount(
+        <MomentRangePicker defaultValue={[getMoment('2020-07-24'), getMoment('2020-08-24')]} />,
+      );
+
+      wrapper.openPicker();
+
+      wrapper.selectCell(24, 0);
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .prop('value'),
+      ).toBe('2020-07-24');
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .hasClass('rc-picker-input-placeholder'),
+      ).toBeFalsy();
+      expect(wrapper.isOpen()).toBeTruthy();
+    });
   });
 
   // https://github.com/ant-design/ant-design/issues/25746
@@ -1699,30 +1742,6 @@ describe('Picker.Range', () => {
     expect(wrapper.find('.rc-picker-ok button').props().disabled).toBeTruthy();
   });
 
-  // https://github.com/ant-design/ant-design/issues/26544
-  it('should clean hover style when selecting the same value with last value', () => {
-    const wrapper = mount(
-      <MomentRangePicker defaultValue={[getMoment('2020-07-24'), getMoment('2020-08-24')]} />,
-  );
-
-    wrapper.openPicker();
-
-    wrapper.selectCell(24, 0);
-    expect(
-      wrapper
-        .find('input')
-        .first()
-        .prop('value'),
-    ).toBe('2020-07-24');
-    expect(
-      wrapper
-        .find('input')
-        .first()
-        .hasClass('rc-picker-input-placeholder'),
-    ).toBeFalsy();
-    expect(wrapper.isOpen()).toBeTruthy();
-  });
-
   // https://github.com/ant-design/ant-design/issues/26024
   it('panel should keep open when nextValue is empty', () => {
     const wrapper = mount(<MomentRangePicker />);