refactor: multiple default use !needConfirm & fix min-max limitation check logic (#747)

* refactor: multiple no needConfirm

* fix: clear

* docs: add limit

* chore: fix part of limitation

* chore: all header

* chore: limitation

* chore: clean up

* chore: fix ts

Author: zombieJ

docs/demo/limitation.md

@@ -0,0 +1,8 @@
+---
+title: limitation
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/limitation.tsx"></code>

docs/demo/multiple.md

@@ -0,0 +1,8 @@
+---
+title: multiple
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/multiple.tsx"></code>

docs/examples/limitation.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import '../../assets/index.less';
+import SinglePicker from '../../src/PickerInput/SinglePicker';
+
+import dayjs from 'dayjs';
+import 'dayjs/locale/ar';
+import 'dayjs/locale/zh-cn';
+import LocalizedFormat from 'dayjs/plugin/localizedFormat';
+import dayjsGenerateConfig from '../../src/generate/dayjs';
+import zhCN from '../../src/locale/zh_CN';
+
+dayjs.locale('zh-cn');
+dayjs.extend(LocalizedFormat);
+
+console.clear();
+
+(window as any).dayjs = dayjs;
+
+const sharedLocale = {
+  locale: zhCN,
+  generateConfig: dayjsGenerateConfig,
+  style: { width: 300 },
+};
+
+export default () => {
+  return (
+    <div>
+      <SinglePicker
+        {...sharedLocale}
+        // defaultPickerValue={dayjs('2019-09-15')}
+        defaultValue={dayjs('2020-09-03')}
+        minDate={dayjs('2019-08-01')}
+        maxDate={dayjs('2020-10-31')}
+        // open
+      />
+      <SinglePicker
+        {...sharedLocale}
+        defaultValue={dayjs('2020-09-03')}
+        minDate={dayjs('2019-08-01')}
+        maxDate={dayjs('2020-10-31')}
+        picker="month"
+      />
+      <SinglePicker
+        {...sharedLocale}
+        defaultValue={dayjs('2020-09-03')}
+        minDate={dayjs('2019-08-01')}
+        maxDate={dayjs('2020-10-31')}
+        picker="quarter"
+      />
+    </div>
+  );
+};

docs/examples/multiple.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import '../../assets/index.less';
+import type { PickerRef } from '../../src/interface';
+import SinglePicker from '../../src/PickerInput/SinglePicker';
+
+import dayjs from 'dayjs';
+import 'dayjs/locale/ar';
+import 'dayjs/locale/zh-cn';
+import LocalizedFormat from 'dayjs/plugin/localizedFormat';
+import dayjsGenerateConfig from '../../src/generate/dayjs';
+import zhCN from '../../src/locale/zh_CN';
+
+dayjs.locale('zh-cn');
+dayjs.extend(LocalizedFormat);
+
+console.clear();
+
+(window as any).dayjs = dayjs;
+
+const sharedLocale = {
+  locale: zhCN,
+  generateConfig: dayjsGenerateConfig,
+  style: { width: 300 },
+};
+
+export default () => {
+  const singleRef = React.useRef<PickerRef>(null);
+
+  return (
+    <div>
+      <SinglePicker {...sharedLocale} multiple ref={singleRef} onOpenChange={console.error} />
+      <SinglePicker {...sharedLocale} multiple ref={singleRef} needConfirm />
+    </div>
+  );
+};

src/PickerInput/Popup/PopupPanel.tsx

@@ -13,8 +13,6 @@ export type PopupPanelProps<DateType extends object = any> = MustProp<DateType>
   Omit<PickerPanelProps<DateType>, 'onPickerValueChange' | 'showTime'> &
   FooterProps<DateType> & {
     multiplePanel?: boolean;
-    minDate?: DateType;
-    maxDate?: DateType;
     range?: boolean;
 
     onPickerValueChange: (date: DateType) => void;
@@ -23,17 +21,8 @@ export type PopupPanelProps<DateType extends object = any> = MustProp<DateType>
 export default function PopupPanel<DateType extends object = any>(
   props: PopupPanelProps<DateType>,
 ) {
-  const {
-    picker,
-    multiplePanel,
-    pickerValue,
-    onPickerValueChange,
-    onSubmit,
-    minDate,
-    maxDate,
-    range,
-    hoverValue,
-  } = props;
+  const { picker, multiplePanel, pickerValue, onPickerValueChange, onSubmit, range, hoverValue } =
+    props;
   const { prefixCls, generateConfig } = React.useContext(PickerContext);
 
   // ======================== Offset ========================
@@ -63,36 +52,6 @@ export default function PopupPanel<DateType extends object = any>(
 
   const hideHeader = picker === 'time';
 
-  // ====================== Limitation ======================
-  const needLimit = React.useCallback(
-    (currentPickerValue: DateType) => {
-      let hidePrev = false;
-      let hideNext = false;
-
-      const dateBeforePickerValue = internalOffsetDate(currentPickerValue, -1);
-      if (minDate && generateConfig.isAfter(minDate, dateBeforePickerValue)) {
-        hidePrev = true;
-      }
-
-      const dateAfterPickerValue = internalOffsetDate(currentPickerValue, 1);
-      if (maxDate && generateConfig.isAfter(dateAfterPickerValue, maxDate)) {
-        hideNext = true;
-      }
-
-      return {
-        hidePrev,
-        hideNext,
-      };
-    },
-    [minDate, maxDate, internalOffsetDate, generateConfig],
-  );
-
-  const firstPanelNeedLimit = React.useMemo(() => needLimit(pickerValue), [pickerValue, needLimit]);
-  const secondPanelNeedLimit = React.useMemo(
-    () => needLimit(nextPickerValue),
-    [nextPickerValue, needLimit],
-  );
-
   // ======================== Props =========================
   const pickerProps = {
     ...props,
@@ -113,12 +72,18 @@ export default function PopupPanel<DateType extends object = any>(
     return (
       <div className={`${prefixCls}-panels`}>
         <PickerHackContext.Provider
-          value={{ ...sharedContext, hideNext: true, hidePrev: firstPanelNeedLimit.hidePrev }}
+          value={{
+            ...sharedContext,
+            hideNext: true,
+          }}
         >
           <PickerPanel<DateType> {...pickerProps} />
         </PickerHackContext.Provider>
         <PickerHackContext.Provider
-          value={{ ...sharedContext, hidePrev: true, hideNext: secondPanelNeedLimit.hideNext }}
+          value={{
+            ...sharedContext,
+            hidePrev: true,
+          }}
         >
           <PickerPanel<DateType>
             {...pickerProps}
@@ -135,7 +100,6 @@ export default function PopupPanel<DateType extends object = any>(
     <PickerHackContext.Provider
       value={{
         ...sharedContext,
-        ...firstPanelNeedLimit,
       }}
     >
       <PickerPanel {...pickerProps} />

src/PickerInput/hooks/useFilledProps.ts

@@ -128,8 +128,9 @@ export default function useFilledProps<
   const internalPicker: InternalMode = picker === 'date' && showTime ? 'datetime' : picker;
 
   /** The picker is `datetime` or `time` */
-  const complexPicker = internalPicker === 'time' || internalPicker === 'datetime' || multiple;
-  const mergedNeedConfirm = needConfirm ?? complexPicker;
+  const multipleInteractivePicker = internalPicker === 'time' || internalPicker === 'datetime';
+  const complexPicker = multipleInteractivePicker || multiple;
+  const mergedNeedConfirm = needConfirm ?? multipleInteractivePicker;
 
   // ========================== Time ==========================
   // Auto `format` need to check `showTime.showXXX` first.

src/PickerInput/hooks/useRangeValue.ts

@@ -137,7 +137,7 @@ export function useInnerValue<ValueType extends DateType[], DateType extends obj
           clone[i] = clone[i] || null;
         }
       } else if (order) {
-        clone = orderDates(clone, generateConfig);
+        clone = orderDates(clone.filter((date) => date) as ValueType, generateConfig);
       }
 
       // Update merged value

src/PickerPanel/DatePanel/index.tsx

@@ -46,7 +46,8 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
   // ========================== Base ==========================
   const [info, now] = useInfo(props, mode);
   const weekFirstDay = generateConfig.locale.getWeekFirstDay(locale.locale);
-  const baseDate = getWeekStartDate(locale.locale, generateConfig, pickerValue);
+  const monthStartDate = generateConfig.setDate(pickerValue, 1);
+  const baseDate = getWeekStartDate(locale.locale, generateConfig, monthStartDate);
   const month = generateConfig.getMonth(pickerValue);
 
   // =========================== PrefixColumn ===========================
@@ -176,12 +177,16 @@ export default function DatePanel<DateType extends object = any>(props: DatePane
     <PanelContext.Provider value={info}>
       <div className={classNames(panelPrefixCls, showWeek && `${panelPrefixCls}-show-week`)}>
         {/* Header */}
-        <PanelHeader
-          onOffset={(offset) => {
-            onPickerValueChange(generateConfig.addMonth(pickerValue, offset));
-          }}
-          onSuperOffset={(offset) => {
-            onPickerValueChange(generateConfig.addYear(pickerValue, offset));
+        <PanelHeader<DateType>
+          offset={(distance) => generateConfig.addMonth(pickerValue, distance)}
+          superOffset={(distance) => generateConfig.addYear(pickerValue, distance)}
+          onChange={onPickerValueChange}
+          // Limitation
+          getStart={(date) => generateConfig.setDate(date, 1)}
+          getEnd={(date) => {
+            let clone = generateConfig.setDate(date, 1);
+            clone = generateConfig.addMonth(clone, 1);
+            return generateConfig.addDate(clone, -1);
           }}
         >
           {monthYearNodes}

src/PickerPanel/DecadePanel/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { DisabledDate, SharedPanelProps } from '../../interface';
-import { formatValue } from '../../utils/dateUtil';
+import { formatValue, isInRange, isSameDecade } from '../../utils/dateUtil';
 import { PanelContext, useInfo } from '../context';
 import PanelBody from '../PanelBody';
 import PanelHeader from '../PanelHeader';
@@ -15,13 +15,20 @@ export default function DecadePanel<DateType extends object = any>(
 
   // ========================== Base ==========================
   const [info] = useInfo(props, 'decade');
-  const startYear = Math.floor(generateConfig.getYear(pickerValue) / 100) * 100;
-  const endYear = startYear + 99;
 
-  const baseDate = generateConfig.setYear(pickerValue, startYear - 10);
+  const getStartYear = (date: DateType) => {
+    const startYear = Math.floor(generateConfig.getYear(pickerValue) / 100) * 100;
+    return generateConfig.setYear(date, startYear);
+  };
+  const getEndYear = (date: DateType) => {
+    const startYear = getStartYear(date);
+    return generateConfig.addYear(startYear, 99);
+  };
+
+  const startYearDate = getStartYear(pickerValue);
+  const endYearDate = getEndYear(pickerValue);
 
-  const startYearDate = generateConfig.setYear(baseDate, startYear);
-  const endYearDate = generateConfig.setYear(startYearDate, endYear);
+  const baseDate = generateConfig.addYear(startYearDate, -10);
 
   // ========================= Cells ==========================
   const getCellDate = (date: DateType, offset: number) => {
@@ -46,9 +53,11 @@ export default function DecadePanel<DateType extends object = any>(
   };
 
   const getCellClassName = (date: DateType) => {
-    const dateYear = generateConfig.getYear(date);
     return {
-      [`${prefixCls}-cell-in-view`]: startYear <= dateYear && dateYear <= endYear,
+      [`${prefixCls}-cell-in-view`]:
+        isSameDecade(generateConfig, date, startYearDate) ||
+        isSameDecade(generateConfig, date, endYearDate) ||
+        isInRange(generateConfig, startYearDate, endYearDate, date),
     };
   };
 
@@ -88,9 +97,11 @@ export default function DecadePanel<DateType extends object = any>(
       <div className={panelPrefixCls}>
         {/* Header */}
         <PanelHeader
-          onSuperOffset={(offset) => {
-            onPickerValueChange(generateConfig.addYear(pickerValue, offset * 100));
-          }}
+          superOffset={(distance) => generateConfig.addYear(pickerValue, distance * 100)}
+          onChange={onPickerValueChange}
+          // Limitation
+          getStart={getStartYear}
+          getEnd={getEndYear}
         >
           {yearNode}
         </PanelHeader>

src/PickerPanel/MonthPanel/index.tsx

@@ -91,9 +91,11 @@ export default function MonthPanel<DateType extends object = any>(
       <div className={panelPrefixCls}>
         {/* Header */}
         <PanelHeader
-          onSuperOffset={(offset) => {
-            onPickerValueChange(generateConfig.addYear(pickerValue, offset));
-          }}
+          superOffset={(distance) => generateConfig.addYear(pickerValue, distance)}
+          onChange={onPickerValueChange}
+          // Limitation
+          getStart={(date) => generateConfig.setMonth(date, 0)}
+          getEnd={(date) => generateConfig.setMonth(date, 11)}
         >
           {yearNode}
         </PanelHeader>