chore: Ranges use select style intead of hover style

Author: zombieJ

src/RangePicker.tsx

@@ -317,6 +317,10 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     },
   });
 
+  const [rangeHoverValue, setRangeHoverValue] = React.useState<
+    RangeValue<DateType>
+  >(null);
+
   // ========================== Hover Range ==========================
   const [hoverRangedValue, setHoverRangedValue] = React.useState<
     RangeValue<DateType>
@@ -710,7 +714,7 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         value={{
           inRange: true,
           panelPosition,
-          rangedValue: selectedValue,
+          rangedValue: rangeHoverValue || selectedValue,
           hoverRangedValue: panelHoverRangedValue,
           onSelect: onContextSelect,
         }}
@@ -843,12 +847,10 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
                     triggerChange(newValues);
                   }}
                   onMouseEnter={() => {
-                    setHoverRangedValue(rangeValues);
+                    setRangeHoverValue(rangeValues);
                   }}
                   onMouseLeave={() => {
-                    setHoverRangedValue(
-                      updateValues(selectedValue, null, activePickerIndex),
-                    );
+                    setRangeHoverValue(null);
                   }}
                 >
                   {label}

tests/range.spec.tsx

@@ -311,24 +311,24 @@ describe('Picker.Range', () => {
       wrapper.openPicker();
       wrapper.find('.rc-picker-ranges li span').simulate('mouseEnter');
       expect(
-        wrapper.findCell(11).hasClass('rc-picker-cell-range-hover-start'),
+        wrapper.findCell(11).hasClass('rc-picker-cell-range-start'),
       ).toBeTruthy();
       expect(
-        wrapper.findCell(12).hasClass('rc-picker-cell-range-hover'),
+        wrapper.findCell(12).hasClass('rc-picker-cell-in-range'),
       ).toBeTruthy();
       expect(
-        wrapper.findCell(13).hasClass('rc-picker-cell-range-hover-end'),
+        wrapper.findCell(13).hasClass('rc-picker-cell-range-end'),
       ).toBeTruthy();
 
       wrapper.find('.rc-picker-ranges li span').simulate('mouseLeave');
       expect(
-        wrapper.findCell(11).hasClass('rc-picker-cell-range-hover-start'),
+        wrapper.findCell(11).hasClass('rc-picker-cell-range-start'),
       ).toBeFalsy();
       expect(
-        wrapper.findCell(12).hasClass('rc-picker-cell-range-hover'),
+        wrapper.findCell(12).hasClass('rc-picker-cell-in-range'),
       ).toBeFalsy();
       expect(
-        wrapper.findCell(13).hasClass('rc-picker-cell-range-hover-end'),
+        wrapper.findCell(13).hasClass('rc-picker-cell-range-end'),
       ).toBeFalsy();
     });
   });