line hover of ranges

Author: zombieJ

assets/index.less

@@ -35,6 +35,7 @@
 
     table {
       text-align: center;
+      border-collapse: collapse;
     }
   }
 
@@ -93,9 +94,36 @@
     &-in-range > &-inner {
       background: fade(blue, 5%);
     }
+    &-range-hover-start,
+    &-range-hover-end,
+    &-range-hover {
+      position: relative;
+      &::after {
+        content: '';
+        position: absolute;
+        top: 3px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        border: 1px solid green;
+        border-left: 0;
+        border-right: 0;
+        pointer-events: none;
+      }
+    }
+
+    &-range-hover-start::after {
+      border-left: 1px solid green!important;
+    }
+    &-range-hover-end::after {
+      border-right: 1px solid green!important;
+    }
+
     &-today > &-inner {
       border: 1px solid blue;
     }
+    &-range-start > &-inner,
+    &-range-end > &-inner,
     &-selected > &-inner {
       background: fade(blue, 20%);
     }

src/PanelContext.tsx

@@ -12,6 +12,8 @@ export interface PanelContextProps {
   panelRef?: React.Ref<HTMLDivElement>;
   hidePrevBtn?: boolean;
   hideNextBtn?: boolean;
+  onDateMouseEnter?: (date: any) => void;
+  onDateMouseLeave?: (date: any) => void;
 }
 
 const PanelContext = React.createContext<PanelContextProps>({});

src/RangeContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NullableDateType } from './interface';
+import { NullableDateType, RangeValue } from './interface';
 
 export interface FooterSelection {
   label: string;
@@ -13,6 +13,7 @@ interface RangeContextProps {
    * Panel only has one value, this is only style effect.
    */
   rangedValue?: [NullableDateType<any>, NullableDateType<any>];
+  hoverRangedValue?: RangeValue<any>;
   inRange?: boolean;
   panelPosition?: 'left' | 'right' | false;
 }

src/RangePicker.tsx

@@ -293,6 +293,18 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     },
   });
 
+  // ========================== Hover Range ==========================
+  const [hoverRangedValue, setHoverRangedValue] = React.useState<
+    RangeValue<DateType>
+  >(null);
+
+  const onDateMouseEnter = (date: DateType) => {
+    setHoverRangedValue(updateValues(selectedValue, date, activePickerIndex));
+  };
+  const onDateMouseLeave = () => {
+    setHoverRangedValue(updateValues(selectedValue, null, activePickerIndex));
+  };
+
   // ============================= Modes =============================
   const [mergedModes, setInnerModes] = useMergedState<[PanelMode, PanelMode]>({
     value: mode,
@@ -591,11 +603,18 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
     panelPosition: 'left' | 'right' | false = false,
     panelProps: Partial<PickerPanelProps<DateType>> = {},
   ) {
+    let panelHoverRangedValue: RangeValue<DateType> = null;
+    if (hoverRangedValue && hoverRangedValue[0] && hoverRangedValue[1]) {
+      panelHoverRangedValue = hoverRangedValue;
+    }
+
     return (
       <RangeContext.Provider
         value={{
           inRange: true,
           panelPosition,
+          rangedValue: selectedValue,
+          hoverRangedValue: panelHoverRangedValue,
         }}
       >
         <PickerPanel<DateType>
@@ -730,6 +749,8 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
         operationRef,
         hideHeader: picker === 'time',
         panelRef: panelDivRef,
+        onDateMouseEnter,
+        onDateMouseLeave,
       }}
     >
       <PickerTrigger

src/panels/DatePanel/DateBody.tsx

@@ -10,6 +10,7 @@ import {
 } from '../../utils/dateUtil';
 import { Locale } from '../../interface';
 import RangeContext from '../../RangeContext';
+import PanelContext from '../../PanelContext';
 
 export type DateRender<DateType> = (
   currentDate: DateType,
@@ -48,7 +49,8 @@ function DateBody<DateType>({
   dateRender,
   onSelect,
 }: DateBodyProps<DateType>) {
-  const { rangedValue } = React.useContext(RangeContext);
+  const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
+  const { onDateMouseEnter, onDateMouseLeave } = React.useContext(PanelContext);
 
   const datePrefixCls = `${prefixCls}-cell`;
   const weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale);
@@ -95,10 +97,19 @@ function DateBody<DateType>({
             'YYYY-MM-DD',
           )}
           onClick={() => {
-            if (disabled) {
-              return;
+            if (!disabled) {
+              onSelect(currentDate);
+            }
+          }}
+          onMouseEnter={() => {
+            if (!disabled && onDateMouseEnter) {
+              onDateMouseEnter(currentDate);
+            }
+          }}
+          onMouseLeave={() => {
+            if (!disabled && onDateMouseLeave) {
+              onDateMouseLeave(currentDate);
             }
-            onSelect(currentDate);
           }}
           className={classNames(datePrefixCls, {
             [`${datePrefixCls}-disabled`]: disabled,
@@ -123,6 +134,22 @@ function DateBody<DateType>({
               rangedValue && rangedValue[1],
               currentDate,
             ),
+            [`${datePrefixCls}-range-hover`]: isInRange(
+              generateConfig,
+              hoverRangedValue && hoverRangedValue[0],
+              hoverRangedValue && hoverRangedValue[1],
+              currentDate,
+            ),
+            [`${datePrefixCls}-range-hover-start`]: isSameDate(
+              generateConfig,
+              hoverRangedValue && hoverRangedValue[0],
+              currentDate,
+            ),
+            [`${datePrefixCls}-range-hover-end`]: isSameDate(
+              generateConfig,
+              hoverRangedValue && hoverRangedValue[1],
+              currentDate,
+            ),
             [`${datePrefixCls}-today`]: isSameDate(
               generateConfig,
               today,

src/panels/MonthPanel/MonthBody.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { GenerateConfig } from '../../generate';
 import { Locale } from '../../interface';
 import { isSameMonth } from '../../utils/dateUtil';
+import PanelContext from '../../PanelContext';
 
 export const MONTH_COL_COUNT = 3;
 const MONTH_ROW_COUNT = 4;
@@ -33,6 +34,8 @@ function MonthBody<DateType>({
   monthCellRender,
   onSelect,
 }: MonthBodyProps<DateType>) {
+  const { onDateMouseEnter, onDateMouseLeave } = React.useContext(PanelContext);
+
   const monthPrefixCls = `${prefixCls}-cell`;
   const rows: React.ReactNode[] = [];
 
@@ -70,10 +73,19 @@ function MonthBody<DateType>({
             ),
           })}
           onClick={() => {
-            if (disabled) {
-              return;
+            if (!disabled) {
+              onSelect(monthDate);
+            }
+          }}
+          onMouseEnter={() => {
+            if (!disabled && onDateMouseEnter) {
+              onDateMouseEnter(monthDate);
+            }
+          }}
+          onMouseLeave={() => {
+            if (!disabled && onDateMouseLeave) {
+              onDateMouseLeave(monthDate);
             }
-            onSelect(monthDate);
           }}
         >
           {monthCellRender ? (

src/panels/YearPanel/YearBody.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { GenerateConfig } from '../../generate';
 import { YEAR_DECADE_COUNT } from '.';
 import { Locale, NullableDateType } from '../../interface';
+import PanelContext from '../../PanelContext';
 
 export const YEAR_COL_COUNT = 3;
 const YEAR_ROW_COUNT = 4;
@@ -26,6 +27,8 @@ function YearBody<DateType>({
   disabledDate,
   onSelect,
 }: YearBodyProps<DateType>) {
+  const { onDateMouseEnter, onDateMouseLeave } = React.useContext(PanelContext);
+
   const yearPrefixCls = `${prefixCls}-cell`;
   const rows: React.ReactNode[] = [];
 
@@ -61,10 +64,19 @@ function YearBody<DateType>({
               currentYearNumber === valueYearNumber,
           })}
           onClick={() => {
-            if (disabled) {
-              return;
+            if (!disabled) {
+              onSelect(yearDate);
+            }
+          }}
+          onMouseEnter={() => {
+            if (!disabled && onDateMouseEnter) {
+              onDateMouseEnter(yearDate);
+            }
+          }}
+          onMouseLeave={() => {
+            if (!disabled && onDateMouseLeave) {
+              onDateMouseLeave(yearDate);
             }
-            onSelect(yearDate);
           }}
         >
           <div className={`${yearPrefixCls}-inner`}>{currentYearNumber}</div>