feat: Week range support hover style (#588)

* feat: support week range

* chore: update less

* test: add test case

Author: zombieJ

assets/index.less

@@ -203,6 +203,21 @@
           background: rgba(0, 0, 255, 0.3);
         }
       }
+
+      &-range {
+        &-hover {
+          .@{prefix-cls}-cell {
+            background: rgba(0, 255, 0, 0.1);
+          }
+        }
+
+        &-start,
+        &-end {
+          .@{prefix-cls}-cell {
+            background: rgba(0, 255, 0, 0.3);
+          }
+        }
+      }
     }
 
     .@{prefix-cls}-cell,

src/panels/PanelBody.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import PanelContext from '../PanelContext';
+import * as React from 'react';
 import type { GenerateConfig } from '../generate';
-import { getLastDay } from '../utils/timeUtil';
 import type { PanelMode } from '../interface';
+import PanelContext from '../PanelContext';
 import { getCellDateDisabled } from '../utils/dateUtil';
+import { getLastDay } from '../utils/timeUtil';
 
 export type PanelBodyProps<DateType> = {
   prefixCls: string;

src/panels/WeekPanel/index.tsx

@@ -1,36 +1,76 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import DatePanel from '../DatePanel';
+import * as React from 'react';
 import type { PanelSharedProps } from '../../interface';
-import { isSameWeek } from '../../utils/dateUtil';
+import PanelContext from '../../PanelContext';
+import RangeContext from '../../RangeContext';
+import { getCellDateDisabled, isInRange, isSameWeek } from '../../utils/dateUtil';
+import DatePanel from '../DatePanel';
 
 export type WeekPanelProps<DateType> = PanelSharedProps<DateType>;
 
 function WeekPanel<DateType>(props: WeekPanelProps<DateType>) {
-  const { prefixCls, generateConfig, locale, value } = props;
+  const { prefixCls, generateConfig, locale, value, disabledDate, onSelect } = props;
+
+  const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
+  const { onDateMouseEnter, onDateMouseLeave } = React.useContext(PanelContext);
+
+  const rangeStart = rangedValue?.[0] || hoverRangedValue?.[0];
+  const rangeEnd = rangedValue?.[1] || hoverRangedValue?.[1];
 
   // Render additional column
   const cellPrefixCls = `${prefixCls}-cell`;
-  const prefixColumn = (date: DateType) => (
-    <td
-      key="week"
-      className={classNames(cellPrefixCls, `${cellPrefixCls}-week`)}
-    >
-      {generateConfig.locale.getWeek(locale.locale, date)}
-    </td>
-  );
+
+  const prefixColumn = (date: DateType) => {
+    // >>> Additional check for disabled
+    const disabled = getCellDateDisabled({
+      cellDate: date,
+      mode: 'week',
+      disabledDate,
+      generateConfig,
+    });
+
+    return (
+      <td
+        key="week"
+        className={classNames(cellPrefixCls, `${cellPrefixCls}-week`)}
+        // Operation: Same as code in PanelBody
+        onClick={() => {
+          if (!disabled) {
+            onSelect(date, 'mouse');
+          }
+        }}
+        onMouseEnter={() => {
+          if (!disabled && onDateMouseEnter) {
+            onDateMouseEnter(date);
+          }
+        }}
+        onMouseLeave={() => {
+          if (!disabled && onDateMouseLeave) {
+            onDateMouseLeave(date);
+          }
+        }}
+      >
+        {generateConfig.locale.getWeek(locale.locale, date)}
+      </td>
+    );
+  };
 
   // Add row className
   const rowPrefixCls = `${prefixCls}-week-panel-row`;
-  const rowClassName = (date: DateType) =>
-    classNames(rowPrefixCls, {
-      [`${rowPrefixCls}-selected`]: isSameWeek(
-        generateConfig,
-        locale.locale,
-        value,
-        date,
-      ),
+
+  const rowClassName = (date: DateType) => {
+    const isRangeStart = isSameWeek(generateConfig, locale.locale, rangeStart, date);
+    const isRangeEnd = isSameWeek(generateConfig, locale.locale, rangeEnd, date);
+    return classNames(rowPrefixCls, {
+      [`${rowPrefixCls}-selected`]: isSameWeek(generateConfig, locale.locale, value, date),
+
+      // Patch for hover range
+      [`${rowPrefixCls}-range-start`]: isRangeStart,
+      [`${rowPrefixCls}-range-end`]: isRangeEnd,
+      [`${rowPrefixCls}-range-hover`]:
+        !isRangeStart && !isRangeEnd && isInRange(generateConfig, rangeStart, rangeEnd, date),
     });
+  };
 
   return (
     <DatePanel

tests/range.spec.tsx

@@ -1746,4 +1746,33 @@ describe('Picker.Range', () => {
     });
     mock.mockRestore();
   });
+
+  it('week range selection style', () => {
+    const { container } = render(<MomentRangePicker picker="week" />);
+    openPicker(container);
+
+    function findWeekCell(val: string) {
+      const list = document.querySelectorAll('.rc-picker-cell-week');
+      return Array.from(list).find((cell) => cell.textContent == val);
+    }
+
+    console.log(document.body.innerHTML);
+
+    // Start
+    fireEvent.mouseEnter(findWeekCell('35'));
+    fireEvent.click(findWeekCell('35'));
+    fireEvent.mouseLeave(findWeekCell('35'));
+
+    expect(findWeekCell('35').parentElement).toHaveClass('rc-picker-week-panel-row-range-start');
+
+    // End Hover
+    fireEvent.mouseEnter(findWeekCell('37'));
+    expect(findWeekCell('36').parentElement).toHaveClass('rc-picker-week-panel-row-range-hover');
+
+    // End Click
+    fireEvent.click(findWeekCell('37'));
+    fireEvent.mouseLeave(findWeekCell('37'));
+
+    expect(findWeekCell('37').parentElement).toHaveClass('rc-picker-week-panel-row-range-end');
+  });
 });