fix: event

Author: zombieJ

src/NewPicker/PickerInput/RangePicker.tsx

@@ -238,6 +238,7 @@ function RangePicker<DateType extends object = any>(
     defaultValue,
     value,
     onCalendarChange,
+    2,
   );
 
   const calendarValue = getCalendarValue();

src/NewPicker/PickerInput/SinglePicker.tsx

@@ -21,14 +21,15 @@ import useCellRender from './hooks/useCellRender';
 import useDisabledBoundary from './hooks/useDisabledBoundary';
 import { useFieldFormat } from './hooks/useFieldFormat';
 import useFilledProps from './hooks/useFilledProps';
-import useRangeValue, { useInnerValue } from './hooks/useFlexibleValue';
+import useRangeValue from './hooks/useFlexibleValue';
 import useInputReadOnly from './hooks/useInputReadOnly';
 import useInvalidate from './hooks/useInvalidate';
 import useOpen from './hooks/useOpen';
 import { usePickerRef } from './hooks/usePickerRef';
 import usePresets from './hooks/usePresets';
 import useRangeActive from './hooks/useRangeActive';
 import useRangePickerValue from './hooks/useRangePickerValue';
+import { useInnerValue } from './hooks/useRangeValue';
 import useShowNow from './hooks/useShowNow';
 import Popup from './Popup';
 import SingleSelector from './Selector/SingleSelector';
@@ -183,15 +184,21 @@ function Picker<DateType extends object = any>(
   // ======================== Format ========================
   const [formatList, maskFormat] = useFieldFormat(internalPicker, locale, format);
 
+  // ======================= Calendar =======================
+  const onInternalCalendarChange: any = (
+    dates: DateType[],
+    dateStrings: string[],
+    info: BaseInfo,
+  ) => {};
+
   // ======================== Values ========================
   const [mergedValue, setInnerValue, getCalendarValue, triggerCalendarChange] = useInnerValue(
-    multiple,
     generateConfig,
     locale,
     formatList,
     defaultValue,
     value,
-    onCalendarChange,
+    onInternalCalendarChange,
   );
 
   const calendarValue = getCalendarValue();

src/NewPicker/PickerInput/hooks/useFilledProps.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { toArray } from '../../../utils/miscUtil';
 import { fillLocale } from '../../hooks/useLocale';
 import { getTimeConfig } from '../../hooks/useTimeConfig';
 import type { InternalMode } from '../../interface';
@@ -20,10 +21,14 @@ type PickedProps<DateType extends object = any> = Pick<
 > & {
   // RangePicker showTime definition is different with Picker
   showTime?: any;
+  value?: any;
+  defaultValue?: any;
 };
 
 type ExcludeBooleanType<T> = T extends boolean ? never : T;
 
+type ToArrayType<T> = T extends any[] ? T : [T];
+
 /**
  * Align the outer props with unique typed and fill undefined props.
  * This is shared with both RangePicker and Picker.
@@ -37,9 +42,11 @@ export default function useFilledProps<
   props: InProps,
   updater?: () => UpdaterProps,
 ): [
-  filledProps: Omit<InProps, keyof UpdaterProps | 'showTime'> &
+  filledProps: Omit<InProps, keyof UpdaterProps | 'showTime' | 'value' | 'defaultValue'> &
     UpdaterProps & {
       showTime?: ExcludeBooleanType<InProps['showTime']>;
+      value?: ToArrayType<InProps['value']>;
+      defaultValue?: ToArrayType<InProps['value']>;
     },
   internalPicker: InternalMode,
   complexPicker: boolean,
@@ -55,8 +62,13 @@ export default function useFilledProps<
     allowClear,
     clearIcon,
     needConfirm,
+    value,
+    defaultValue,
   } = props;
 
+  const values = React.useMemo(() => (value ? toArray(value) : value), [value]);
+  const defaultValues = React.useMemo(() => toArray(defaultValue), [defaultValue]);
+
   const filledProps = React.useMemo(
     () => ({
       ...props,
@@ -69,6 +81,8 @@ export default function useFilledProps<
       components,
       clearIcon: fillClearIcon(prefixCls, allowClear, clearIcon),
       showTime: getTimeConfig(props),
+      value: values,
+      defaultValue: defaultValues,
       ...updater?.(),
     }),
     [props],

src/NewPicker/PickerInput/hooks/useFlexibleValue.ts

@@ -18,60 +18,60 @@ const EMPTY_VALUE: any[] = [];
 
 type TriggerCalendarChange<DateType> = (dates: DateType[]) => void;
 
-export function useInnerValue<DateType extends object = any>(
-  multiple: boolean,
-  generateConfig: GenerateConfig<DateType>,
-  locale: Locale,
-  formatList: FormatType[],
-
-  defaultValue?: DateType,
-  value?: DateType,
-  onCalendarChange?: PickerProps<DateType>['onCalendarChange'],
-) {
-  // This is the root value which will sync with controlled or uncontrolled value
-  const [innerValue, setInnerValue] = useMergedState(defaultValue, {
-    value,
-  });
-  const mergedValue = React.useMemo<DateType[]>(() => {
-    const filledValue = innerValue || EMPTY_VALUE;
-
-    return Array.isArray(filledValue) ? filledValue : [filledValue];
-  }, [innerValue]);
-
-  // ========================= Inner Values =========================
-  const [calendarValue, setCalendarValue] = useCalendarValue(mergedValue);
-
-  // ============================ Change ============================
-  const [getDateTexts, isSameDates] = useUtil<DateType, DateType[]>(
-    generateConfig,
-    locale,
-    formatList,
-  );
-
-  function pickByMultiple<T>(values: T[]): any {
-    return multiple ? values : values[0];
-  }
-
-  const triggerCalendarChange: TriggerCalendarChange<DateType> = useEvent((dates) => {
-    const clone: DateType[] = [...dates];
-
-    // Update merged value
-    const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone);
-
-    if (!isSameMergedDates) {
-      setCalendarValue(clone);
-
-      // Trigger calendar change event
-      if (onCalendarChange) {
-        onCalendarChange(pickByMultiple(clone), pickByMultiple(getDateTexts(clone)), {
-          range: isSameStart ? 'end' : 'start',
-        });
-      }
-    }
-  });
-
-  return [mergedValue, setInnerValue, calendarValue, triggerCalendarChange] as const;
-}
+// export function useInnerValue<DateType extends object = any>(
+//   multiple: boolean,
+//   generateConfig: GenerateConfig<DateType>,
+//   locale: Locale,
+//   formatList: FormatType[],
+
+//   defaultValue?: DateType,
+//   value?: DateType,
+//   onCalendarChange?: PickerProps<DateType>['onCalendarChange'],
+// ) {
+//   // This is the root value which will sync with controlled or uncontrolled value
+//   const [innerValue, setInnerValue] = useMergedState(defaultValue, {
+//     value,
+//   });
+//   const mergedValue = React.useMemo<DateType[]>(() => {
+//     const filledValue = innerValue || EMPTY_VALUE;
+
+//     return Array.isArray(filledValue) ? filledValue : [filledValue];
+//   }, [innerValue]);
+
+//   // ========================= Inner Values =========================
+//   const [calendarValue, setCalendarValue] = useCalendarValue(mergedValue);
+
+//   // ============================ Change ============================
+//   const [getDateTexts, isSameDates] = useUtil<DateType, DateType[]>(
+//     generateConfig,
+//     locale,
+//     formatList,
+//   );
+
+//   function pickByMultiple<T>(values: T[]): any {
+//     return multiple ? values : values[0];
+//   }
+
+//   const triggerCalendarChange: TriggerCalendarChange<DateType> = useEvent((dates) => {
+//     const clone: DateType[] = [...dates];
+
+//     // Update merged value
+//     const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone);
+
+//     if (!isSameMergedDates) {
+//       setCalendarValue(clone);
+
+//       // Trigger calendar change event
+//       if (onCalendarChange) {
+//         onCalendarChange(pickByMultiple(clone), pickByMultiple(getDateTexts(clone)), {
+//           range: isSameStart ? 'end' : 'start',
+//         });
+//       }
+//     }
+//   });
+
+//   return [mergedValue, setInnerValue, calendarValue, triggerCalendarChange] as const;
+// }
 
 export default function useFlexibleValue<DateType extends object = any>(
   info: Pick<

src/NewPicker/PickerInput/hooks/useRangeValue.ts

@@ -97,6 +97,8 @@ export function useInnerValue<ValueType extends object[], DateType extends Value
     dateStrings: Replace2String<Required<ValueType>>,
     info: BaseInfo,
   ) => void,
+  /** Used for RangePicker */
+  valueLen = 2,
 ) {
   // This is the root value which will sync with controlled or uncontrolled value
   const [innerValue, setInnerValue] = useMergedState(defaultValue, {
@@ -114,6 +116,12 @@ export function useInnerValue<ValueType extends object[], DateType extends Value
     (nextCalendarValues: ValueType) => {
       const clone = [...nextCalendarValues] as ValueType;
 
+      if (valueLen) {
+        for (let i = 0; i < valueLen; i += 1) {
+          clone[i] = clone[i] || null;
+        }
+      }
+
       // Update merged value
       const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone);