fix: week picker not need cell select logic (#589)

Author: zombieJ

src/panels/DatePanel/DateBody.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import type { GenerateConfig } from '../../generate';
+import useCellClassName from '../../hooks/useCellClassName';
+import type { Locale } from '../../interface';
+import RangeContext from '../../RangeContext';
 import {
-  WEEK_DAY_COUNT,
+  formatValue,
   getWeekStartDate,
   isSameDate,
   isSameMonth,
-  formatValue,
+  WEEK_DAY_COUNT,
 } from '../../utils/dateUtil';
-import type { Locale } from '../../interface';
-import RangeContext from '../../RangeContext';
-import useCellClassName from '../../hooks/useCellClassName';
 import PanelBody from '../PanelBody';
 
 export type DateRender<DateType> = (currentDate: DateType, today: DateType) => React.ReactNode;
@@ -21,6 +21,7 @@ export type DateBodyPassProps<DateType> = {
   // Used for week panel
   prefixColumn?: (date: DateType) => React.ReactNode;
   rowClassName?: (date: DateType) => string;
+  isSameCell?: (current: DateType, target: DateType) => boolean;
 };
 
 export type DateBodyProps<DateType> = {
@@ -43,6 +44,7 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
     viewDate,
     value,
     dateRender,
+    isSameCell,
   } = props;
 
   const { rangedValue, hoverRangedValue } = React.useContext(RangeContext);
@@ -75,8 +77,8 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
     generateConfig,
     rangedValue: prefixColumn ? null : rangedValue,
     hoverRangedValue: prefixColumn ? null : hoverRangedValue,
-    isSameCell: (current, target) => isSameDate(generateConfig, current, target),
-    isInView: date => isSameMonth(generateConfig, date, viewDate),
+    isSameCell: isSameCell || ((current, target) => isSameDate(generateConfig, current, target)),
+    isInView: (date) => isSameMonth(generateConfig, date, viewDate),
     offsetCell: (date, offset) => generateConfig.addDate(date, offset),
   });
 
@@ -92,7 +94,7 @@ function DateBody<DateType>(props: DateBodyProps<DateType>) {
       getCellText={generateConfig.getDate}
       getCellClassName={getCellClassName}
       getCellDate={generateConfig.addDate}
-      titleCell={date =>
+      titleCell={(date) =>
         formatValue(date, {
           locale,
           format: 'YYYY-MM-DD',

src/panels/DatePanel/index.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import type { DateBodyPassProps, DateRender } from './DateBody';
-import DateBody from './DateBody';
-import DateHeader from './DateHeader';
+import * as React from 'react';
 import type { PanelSharedProps } from '../../interface';
 import { WEEK_DAY_COUNT } from '../../utils/dateUtil';
 import type { KeyboardConfig } from '../../utils/uiUtil';
 import { createKeyDownHandler } from '../../utils/uiUtil';
+import type { DateBodyPassProps, DateRender } from './DateBody';
+import DateBody from './DateBody';
+import DateHeader from './DateHeader';
 
 const DATE_ROW_COUNT = 6;
 
@@ -17,7 +17,8 @@ export type DatePanelProps<DateType> = {
   // Used for week panel
   panelName?: string;
   keyboardConfig?: KeyboardConfig;
-} & PanelSharedProps<DateType> & DateBodyPassProps<DateType>;
+} & PanelSharedProps<DateType> &
+  DateBodyPassProps<DateType>;
 
 function DatePanel<DateType>(props: DatePanelProps<DateType>) {
   const {
@@ -37,18 +38,18 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {
 
   // ======================= Keyboard =======================
   operationRef.current = {
-    onKeyDown: event =>
+    onKeyDown: (event) =>
       createKeyDownHandler(event, {
-        onLeftRight: diff => {
+        onLeftRight: (diff) => {
           onSelect(generateConfig.addDate(value || viewDate, diff), 'key');
         },
-        onCtrlLeftRight: diff => {
+        onCtrlLeftRight: (diff) => {
           onSelect(generateConfig.addYear(value || viewDate, diff), 'key');
         },
-        onUpDown: diff => {
+        onUpDown: (diff) => {
           onSelect(generateConfig.addDate(value || viewDate, diff * WEEK_DAY_COUNT), 'key');
         },
-        onPageUpDown: diff => {
+        onPageUpDown: (diff) => {
           onSelect(generateConfig.addMonth(value || viewDate, diff), 'key');
         },
         ...keyboardConfig,
@@ -100,7 +101,7 @@ function DatePanel<DateType>(props: DatePanelProps<DateType>) {
       />
       <DateBody
         {...props}
-        onSelect={date => onSelect(date, 'mouse')}
+        onSelect={(date) => onSelect(date, 'mouse')}
         prefixCls={prefixCls}
         value={value}
         viewDate={viewDate}

src/panels/WeekPanel/index.tsx

@@ -84,6 +84,8 @@ function WeekPanel<DateType>(props: WeekPanelProps<DateType>) {
       keyboardConfig={{
         onLeftRight: null,
       }}
+      // No need check cell level
+      isSameCell={() => false}
     />
   );
 }

tests/range.spec.tsx

@@ -1772,5 +1772,8 @@ describe('Picker.Range', () => {
     fireEvent.mouseLeave(findWeekCell('37'));
 
     expect(findWeekCell('37').parentElement).toHaveClass('rc-picker-week-panel-row-range-end');
+
+    // No selected cell
+    expect(document.querySelector('.rc-picker-cell-selected')).toBeFalsy();
   });
 });