fix: disabled check auto used for range check (#737)

* test: update test case * test: clean up
react-component · Jan 12, 2024 · 234a144 · 234a144 · vercel · Jan 12, 2024
1 parent f3c5ec8
commit 234a144
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 53 deletions.
diff --git a/docs/examples/debug.tsx b/docs/examples/debug.tsx
@@ -129,9 +129,9 @@ export default () => {
 
   const [value, setValue] = React.useState<Dayjs>(null);
   const [rangeValue, setRangeValue] = React.useState<[Dayjs, Dayjs]>(
-    // [dayjs('2000-12-15'), dayjs('2020-12-22')],
+    [dayjs('2024-01-15'), dayjs('2024-02-01')],
     // null,
-    undefined,
+    // undefined,
   );
 
   const setSingleValue = (nextVal: Dayjs) => {
@@ -146,21 +146,11 @@ export default () => {
 
       <br />
 
-      {/* <SinglePicker
+      <SinglePicker
         // Shared
         {...sharedLocale}
-        showTime
-        format={(val) => val.format('YYYY-MM-DD')}
-        // format={{
-        //   format: 'YYYY-MM-DD',
-        //   align: true,
-        // }}
-        presets={[
-          {
-            label: 'Good',
-            value: () => dayjs().add(3, 'day'),
-          },
-        ]}
+        disabledDate={(date) => date.isBefore(dayjs())}
+        open
         ref={singleRef}
         suffixIcon="🧶"
         onChange={(...args) => {
@@ -179,30 +169,14 @@ export default () => {
         onKeyDown={(e) => {
           console.log('🎬 KeyDown:', e);
         }}
-      /> */}
+      />
       <br />
-      <RangePicker
+      {/* <RangePicker
         {...sharedLocale}
         value={rangeValue}
-        disabledDate={(current, { from }) => {
-          if (from) {
-            return Math.abs(current.diff(from, 'days')) > 7;
-          }
-
-          return false;
-        }}
-        changeOnBlur={false}
-        showNow
-        autoFocus
+        open
+        picker="week"
         panelRender={(ori) => <>2333{ori}</>}
-        placeholder={['Start', 'End']}
-        suffixIcon="🧶"
-        onFocus={(_, info) => {
-          console.log('👁️ Focus', info);
-        }}
-        onBlur={(_, info) => {
-          console.log('👁️ Blur', info);
-        }}
         onChange={(val, text) => {
           console.log('🔥 Change:', val, text);
           setRangeValue(val);
@@ -222,11 +196,7 @@ export default () => {
             info,
           );
         }}
-        id={{
-          start: 'inputStart',
-          end: 'inputEnd',
-        }}
-      />
+      /> */}
       <br />
 
       <button

diff --git a/src/PickerPanel/DecadePanel/index.tsx b/src/PickerPanel/DecadePanel/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { SharedPanelProps } from '../../interface';
+import type { DisabledDate, SharedPanelProps } from '../../interface';
 import { formatValue, isSameDecade } from '../../utils/dateUtil';
 import { PanelContext, useInfo } from '../context';
 import PanelBody from '../PanelBody';
@@ -8,7 +8,8 @@ import PanelHeader from '../PanelHeader';
 export default function DecadePanel<DateType extends object = any>(
   props: SharedPanelProps<DateType>,
 ) {
-  const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange } = props;
+  const { prefixCls, locale, generateConfig, pickerValue, disabledDate, onPickerValueChange } =
+    props;
 
   const panelPrefixCls = `${prefixCls}-decade-panel`;
 
@@ -52,6 +53,25 @@ export default function DecadePanel<DateType extends object = any>(
     };
   };
 
+  // ======================== Disabled ========================
+  const mergedDisabledDate: DisabledDate<DateType> = disabledDate
+    ? (currentDate, disabledInfo) => {
+        // Start
+        const baseStartDate = generateConfig.setDate(currentDate, 1);
+        const baseStartMonth = generateConfig.setMonth(baseStartDate, 0);
+        const baseStartYear = generateConfig.setYear(
+          baseStartMonth,
+          Math.floor(generateConfig.getYear(baseStartMonth) / 10) * 10,
+        );
+
+        // End
+        const baseEndYear = generateConfig.addYear(baseStartYear, 10);
+        const baseEndDate = generateConfig.addDate(baseEndYear, -1);
+
+        return disabledDate(baseStartYear, disabledInfo) && disabledDate(baseEndDate, disabledInfo);
+      }
+    : null;
+
   // ========================= Header =========================
   const yearNode = `${formatValue(startYearDate, {
     locale,
@@ -79,6 +99,7 @@ export default function DecadePanel<DateType extends object = any>(
         {/* Body */}
         <PanelBody
           {...props}
+          disabledDate={mergedDisabledDate}
           colNum={3}
           rowNum={4}
           baseDate={baseDate}

diff --git a/src/PickerPanel/MonthPanel/index.tsx b/src/PickerPanel/MonthPanel/index.tsx
@@ -1,15 +1,22 @@
 import * as React from 'react';
+import type { DisabledDate, SharedPanelProps } from '../../interface';
 import { formatValue, isSameMonth } from '../../utils/dateUtil';
-import type { SharedPanelProps } from '../../interface';
 import { PanelContext, useInfo } from '../context';
 import PanelBody from '../PanelBody';
 import PanelHeader from '../PanelHeader';
 
 export default function MonthPanel<DateType extends object = any>(
   props: SharedPanelProps<DateType>,
 ) {
-  const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange, onModeChange } =
-    props;
+  const {
+    prefixCls,
+    locale,
+    generateConfig,
+    pickerValue,
+    disabledDate,
+    onPickerValueChange,
+    onModeChange,
+  } = props;
 
   const panelPrefixCls = `${prefixCls}-month-panel`;
 
@@ -46,6 +53,20 @@ export default function MonthPanel<DateType extends object = any>(
     [`${prefixCls}-cell-today`]: isSameMonth(generateConfig, date, now),
   });
 
+  // ======================== Disabled ========================
+  const mergedDisabledDate: DisabledDate<DateType> = disabledDate
+    ? (currentDate, disabledInfo) => {
+        const startDate = generateConfig.setDate(currentDate, 1);
+        const nextMonthStartDate = generateConfig.setMonth(
+          startDate,
+          generateConfig.getMonth(startDate) + 1,
+        );
+        const endDate = generateConfig.addDate(nextMonthStartDate, -1);
+
+        return disabledDate(startDate, disabledInfo) && disabledDate(endDate, disabledInfo);
+      }
+    : null;
+
   // ========================= Header =========================
   const yearNode: React.ReactNode = (
     <button
@@ -81,6 +102,7 @@ export default function MonthPanel<DateType extends object = any>(
         {/* Body */}
         <PanelBody
           {...props}
+          disabledDate={mergedDisabledDate}
           titleFormat={locale.fieldMonthFormat}
           colNum={3}
           rowNum={4}

diff --git a/src/PickerPanel/PanelBody.tsx b/src/PickerPanel/PanelBody.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import * as React from 'react';
+import type { DisabledDate } from '../interface';
 import { formatValue, isInRange, isSame } from '../utils/dateUtil';
 import { PickerHackContext, usePanelContext } from './context';
 
@@ -15,6 +16,8 @@ export interface PanelBodyProps<DateType = any> {
   getCellText: (date: DateType) => React.ReactNode;
   getCellClassName: (date: DateType) => Record<string, any>;
 
+  disabledDate?: DisabledDate<DateType>;
+
   // Used for date panel
   headerCells?: React.ReactNode[];
 
@@ -37,13 +40,14 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
     getCellClassName,
     headerCells,
     cellSelection = true,
+    disabledDate,
   } = props;
 
   const {
     prefixCls,
     panelType: type,
     now,
-    disabledDate,
+    disabledDate: contextDisabledDate,
     cellRender,
     onHover,
     hoverValue,
@@ -54,6 +58,8 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
     onSelect,
   } = usePanelContext<DateType>();
 
+  const mergedDisabledDate = disabledDate || contextDisabledDate;
+
   const cellPrefixCls = `${prefixCls}-cell`;
 
   // ============================= Context ==============================
@@ -76,7 +82,7 @@ export default function PanelBody<DateType extends object = any>(props: PanelBod
       const offset = row * colNum + col;
       const currentDate = getCellDate(baseDate, offset);
 
-      const disabled = disabledDate?.(currentDate, {
+      const disabled = mergedDisabledDate?.(currentDate, {
         type: type,
       });
 

diff --git a/src/PickerPanel/YearPanel/index.tsx b/src/PickerPanel/YearPanel/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { SharedPanelProps } from '../../interface';
+import type { DisabledDate, SharedPanelProps } from '../../interface';
 import { formatValue, isSameYear } from '../../utils/dateUtil';
 import { PanelContext, useInfo } from '../context';
 import PanelBody from '../PanelBody';
@@ -8,8 +8,15 @@ import PanelHeader from '../PanelHeader';
 export default function YearPanel<DateType extends object = any>(
   props: SharedPanelProps<DateType>,
 ) {
-  const { prefixCls, locale, generateConfig, pickerValue, onPickerValueChange, onModeChange } =
-    props;
+  const {
+    prefixCls,
+    locale,
+    generateConfig,
+    pickerValue,
+    disabledDate,
+    onPickerValueChange,
+    onModeChange,
+  } = props;
 
   const panelPrefixCls = `${prefixCls}-year-panel`;
 
@@ -44,6 +51,24 @@ export default function YearPanel<DateType extends object = any>(
     };
   };
 
+  // ======================== Disabled ========================
+  const mergedDisabledDate: DisabledDate<DateType> = disabledDate
+    ? (currentDate, disabledInfo) => {
+        // Start
+        const startMonth = generateConfig.setMonth(currentDate, 0);
+        const startDate = generateConfig.setDate(startMonth, 1);
+
+        // End
+        const endMonth = generateConfig.setMonth(
+          currentDate,
+          generateConfig.getMonth(currentDate) + 1,
+        );
+        const enDate = generateConfig.addDate(endMonth, -1);
+
+        return disabledDate(startDate, disabledInfo) && disabledDate(enDate, disabledInfo);
+      }
+    : null;
+
   // ========================= Header =========================
   const yearNode: React.ReactNode = (
     <button
@@ -85,6 +110,7 @@ export default function YearPanel<DateType extends object = any>(
         {/* Body */}
         <PanelBody
           {...props}
+          disabledDate={mergedDisabledDate}
           titleFormat={locale.fieldYearFormat}
           colNum={3}
           rowNum={4}

diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts
@@ -133,8 +133,8 @@ export function isSameWeek<DateType>(
   date2: NullableDateType<DateType>,
 ) {
   return nullableCompare(date1, date2, () => {
-    const weekStartDate1 = getWeekStartDate(locale, generateConfig, date1);
-    const weekStartDate2 = getWeekStartDate(locale, generateConfig, date2);
+    const weekStartDate1 = generateConfig.locale.getWeekFirstDate(locale, date1);
+    const weekStartDate2 = generateConfig.locale.getWeekFirstDate(locale, date2);
 
     return (
       isSameYear(generateConfig, weekStartDate1, weekStartDate2) &&

diff --git a/tests/panel.spec.tsx b/tests/panel.spec.tsx
@@ -264,7 +264,7 @@ describe('Picker.Panel', () => {
           <DayPickerPanel
             mode="decade"
             onPanelChange={onPanelChange}
-            disabledDate={(date) => date.year() === 1900}
+            disabledDate={(date) => 1900 <= date.year() && date.year() <= 1909}
           />,
         );