fix: week range disabled logic is different

Author: zombieJ

src/RangePicker.tsx

@@ -308,7 +308,9 @@ function InnerRangePicker<DateType>(props: RangePickerProps<DateType>) {
 
   // ========================= Disable Date ==========================
   const [disabledStartDate, disabledEndDate] = useRangeDisabled({
+    picker,
     selectedValue,
+    locale,
     disabled: mergedDisabled,
     disabledDate,
     generateConfig,

src/generate/index.ts

@@ -16,6 +16,7 @@ export interface GenerateConfig<DateType> {
   setYear: (value: DateType, year: number) => DateType;
   setMonth: (value: DateType, month: number) => DateType;
   setDate: (value: DateType, date: number) => DateType;
+  setWeekDay: (value: DateType, day: number) => DateType;
   setHour: (value: DateType, hour: number) => DateType;
   setMinute: (value: DateType, minute: number) => DateType;
   setSecond: (value: DateType, second: number) => DateType;

src/generate/moment.ts

@@ -39,6 +39,12 @@ const generateConfig: GenerateConfig<Moment> = {
     clone.month(month);
     return clone;
   },
+  setWeekDay: (date, day) => {
+    const clone = date.clone();
+    clone.locale('en_US');
+    clone.weekday(day);
+    return clone;
+  },
   setDate: (date, num) => {
     const clone = date.clone();
     clone.date(num);

src/hooks/useRangeDisabled.ts

@@ -1,50 +1,84 @@
-import { RangeValue } from '../interface';
+import * as React from 'react';
+import { RangeValue, PickerMode, Locale } from '../interface';
 import { getValue } from '../utils/miscUtil';
 import { GenerateConfig } from '../generate';
 import { isSameDate } from '../utils/dateUtil';
+import useWeekDisabled from './useWeekDisabled';
 
 export default function useRangeDisabled<DateType>({
+  picker,
+  locale,
   selectedValue,
   disabledDate,
   disabled,
   generateConfig,
 }: {
+  picker: PickerMode;
   selectedValue: RangeValue<DateType>;
   disabledDate?: (date: DateType) => boolean;
   disabled: [boolean, boolean];
+  locale: Locale;
   generateConfig: GenerateConfig<DateType>;
 }) {
   const startDate = getValue(selectedValue, 0);
   const endDate = getValue(selectedValue, 1);
 
-  function disabledStartDate(date: DateType) {
-    if (disabledDate && disabledDate(date)) {
-      return true;
-    }
+  const disabledStartDate = React.useCallback(
+    (date: DateType) => {
+      if (disabledDate && disabledDate(date)) {
+        return true;
+      }
 
-    if (disabled[1] && endDate) {
-      return (
-        !isSameDate(generateConfig, date, endDate) &&
-        generateConfig.isAfter(date, endDate)
-      );
-    }
+      if (disabled[1] && endDate) {
+        return (
+          !isSameDate(generateConfig, date, endDate) &&
+          generateConfig.isAfter(date, endDate)
+        );
+      }
 
-    return false;
-  }
+      return false;
+    },
+    [disabledDate, disabled[1], endDate],
+  );
+
+  const disableEndDate = React.useCallback(
+    (date: DateType) => {
+      if (disabledDate && disabledDate(date)) {
+        return true;
+      }
+
+      if (startDate) {
+        const compareStartDate =
+          picker === 'week' ? generateConfig.addDate(startDate, -7) : startDate;
+
+        return (
+          !isSameDate(generateConfig, date, compareStartDate) &&
+          generateConfig.isAfter(compareStartDate, date)
+        );
+      }
+
+      return false;
+    },
+    [disabledDate, startDate, picker],
+  );
 
-  function disableEndDate(date: DateType) {
-    if (disabledDate && disabledDate(date)) {
-      return true;
-    }
+  // Handle week date disabled
+  const sharedWeekDisabledConfig = {
+    generateConfig,
+    locale,
+  };
 
-    if (startDate) {
-      return (
-        !isSameDate(generateConfig, date, startDate) &&
-        generateConfig.isAfter(startDate, date)
-      );
-    }
+  const [disabledStartWeekDate] = useWeekDisabled({
+    ...sharedWeekDisabledConfig,
+    disabledDate: disabledStartDate,
+  });
+  const [disabledEndWeekDate] = useWeekDisabled({
+    ...sharedWeekDisabledConfig,
+    disabledDate: disableEndDate,
+  });
 
-    return false;
+  if (picker === 'week') {
+    return [disabledStartWeekDate, disabledEndWeekDate];
   }
 
   return [disabledStartDate, disableEndDate];

src/hooks/useWeekDisabled.ts

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { GenerateConfig } from '../generate';
+import { Locale } from '../interface';
+
+export default function useWeekDisabled<DateType>({
+  disabledDate,
+  locale,
+  generateConfig,
+}: {
+  disabledDate: (date: DateType) => boolean;
+  locale: Locale;
+  generateConfig: GenerateConfig<DateType>;
+}): [(date: DateType) => boolean] {
+  const disabledCache = React.useMemo(() => new Map<string, boolean>(), [
+    disabledDate,
+  ]);
+  const firstDay = React.useMemo(
+    () => generateConfig.locale.getWeekFirstDay(locale.locale),
+    [locale.locale],
+  );
+
+  function disabledWeekDate(date: DateType): boolean {
+    const weekStr = generateConfig.locale.format(
+      locale.locale,
+      date,
+      'YYYY-WW',
+    );
+
+    if (!disabledCache.has(weekStr)) {
+      const weekDay = generateConfig.getWeekDay(date);
+      let weekStartDate: DateType;
+
+      // Set start week date
+      if (weekDay < firstDay) {
+        weekStartDate = generateConfig.setWeekDay(
+          generateConfig.addDate(date, -7),
+          firstDay,
+        );
+      } else {
+        weekStartDate = generateConfig.setWeekDay(date, firstDay);
+      }
+
+      // Loop to find disabled status
+      let disabled = false;
+      for (let i = 0; i < 7; i += 1) {
+        const currentDate = generateConfig.setWeekDay(weekStartDate, i);
+        if (disabledDate(currentDate)) {
+          disabled = true;
+          break;
+        }
+      }
+
+      disabledCache.set(weekStr, disabled);
+    }
+
+    return disabledCache.get(weekStr)!;
+  }
+
+  return [disabledWeekDate];
+}

src/utils/dateUtil.ts

@@ -1,6 +1,6 @@
 import { noteOnce } from 'rc-util/lib/warning';
 import { GenerateConfig } from '../generate';
-import { NullableDateType, PickerMode } from '../interface';
+import { NullableDateType, PickerMode, Locale } from '../interface';
 
 export const WEEK_DAY_COUNT = 7;
 
@@ -109,6 +109,23 @@ export function isSameWeek<DateType>(
   );
 }
 
+export function isSameWeekDay<DateType>(
+  generateConfig: GenerateConfig<DateType>,
+  week1: NullableDateType<DateType>,
+  week2: NullableDateType<DateType>,
+  locale: Locale,
+) {
+  const equal = isNullEqual(week1, week2);
+  if (typeof equal === 'boolean') {
+    return equal;
+  }
+
+  return (
+    generateConfig.locale.format(locale.locale, week1!, 'YYYY-WW') ===
+    generateConfig.locale.format(locale.locale, week2!, 'YYYY-WW')
+  );
+}
+
 export function isEqual<DateType>(
   generateConfig: GenerateConfig<DateType>,
   value1: NullableDateType<DateType>,