fix: week panel should not have date cls (#736)

Author: zombieJ

src/PickerPanel/DatePanel/index.tsx

@@ -18,6 +18,7 @@ export interface DatePanelProps<DateType extends object> extends SharedPanelProp
 
   /** Used for `WeekPanel` */
   mode?: PanelMode;
+  cellSelection?: boolean;
 }
 
 export default function DatePanel<DateType extends object = any>(props: DatePanelProps<DateType>) {
@@ -40,6 +41,8 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
 
   const cellPrefixCls = `${prefixCls}-cell`;
 
+  const isWeek = mode === 'week';
+
   // ========================== Base ==========================
   const [info, now] = useInfo(props, mode);
   const weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale);
@@ -48,7 +51,7 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
 
   // =========================== PrefixColumn ===========================
   const prefixColumn =
-    mode === 'week' || showWeek
+    isWeek || showWeek
       ? (date: DateType) => {
           // >>> Additional check for disabled
           const disabled = disabledDate?.(date, { type: 'week' });
@@ -198,6 +201,7 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
           getCellText={getCellText}
           getCellClassName={getCellClassName}
           prefixColumn={prefixColumn}
+          cellSelection={!isWeek}
         />
       </div>
     </PanelContext.Provider>

src/PickerPanel/PanelBody.tsx

@@ -21,6 +21,7 @@ export interface PanelBodyProps<DateType = any> {
   // Used for week panel
   prefixColumn?: (date: DateType) => React.ReactNode;
   rowClassName?: (date: DateType) => string;
+  cellSelection?: boolean;
 }
 
 export default function PanelBody<DateType extends object = any>(props: PanelBodyProps<DateType>) {
@@ -35,6 +36,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
     getCellText,
     getCellClassName,
     headerCells,
+    cellSelection = true,
   } = props;
 
   const {
@@ -92,7 +94,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
       let rangeStart = false;
       let rangeEnd = false;
 
-      if (hoverRangeValue) {
+      if (cellSelection && hoverRangeValue) {
         const [hoverStart, hoverEnd] = hoverRangeValue;
         inRange = isInRange(generateConfig, hoverStart, hoverEnd, currentDate);
         rangeStart = isSame(generateConfig, locale, currentDate, hoverStart, type);

src/PickerPanel/WeekPanel/index.tsx

@@ -50,5 +50,12 @@ export default function WeekPanel<DateType extends object = any>(
   };
 
   // ============================== Render ==============================
-  return <DatePanel {...props} mode="week" panelName="week" rowClassName={rowClassName} />;
+  return (
+    <DatePanel
+      {...props}
+      mode="week"
+      panelName="week"
+      rowClassName={rowClassName}
+    />
+  );
 }

tests/new-range.spec.tsx

@@ -1213,4 +1213,14 @@ describe('NewPicker.Range', () => {
     const { container } = render(<DayRangePicker disabled={[true, false]} autoFocus />);
     expect(document.activeElement).toBe(container.querySelectorAll('input')[1]);
   });
+
+  it('week panel not have date cell className', () => {
+    const { unmount } = render(<DayRangePicker value={[dayjs(), dayjs().add(21, 'days')]} open />);
+    expect(document.querySelector('.rc-picker-cell-range-start')).toBeTruthy();
+    unmount();
+
+    // Render with week panel
+    render(<DayRangePicker picker="week" value={[dayjs(), dayjs().add(21, 'days')]} open />);
+    expect(document.querySelector('.rc-picker-cell-range-start')).toBeFalsy();
+  });
 });