refactor: generic of SinglePicker

Author: zombieJ

src/NewPicker/PickerInput/SinglePicker.tsx

@@ -23,25 +23,19 @@ import PickerContext from './context';
 import useCellRender from './hooks/useCellRender';
 import useDisabledBoundary from './hooks/useDisabledBoundary';
 import { useFieldFormat } from './hooks/useFieldFormat';
+import useRangeValue, { useInnerValue } from './hooks/useFlexibleValue';
 import useInputReadOnly from './hooks/useInputReadOnly';
 import useInvalidate from './hooks/useInvalidate';
 import useOpen from './hooks/useOpen';
 import usePresets from './hooks/usePresets';
 import useRangeActive from './hooks/useRangeActive';
 import useRangePickerValue from './hooks/useRangePickerValue';
 import useShowNow from './hooks/useShowNow';
-import useRangeValue, { useInnerValue } from './hooks/useFlexibleValue';
 import Popup from './Popup';
 import { useClearIcon } from './Selector/hooks/useClearIcon';
 import SingleSelector from './Selector/SingleSelector';
 
-export interface PickerProps<DateType extends object> extends SharedPickerProps<DateType> {
-  // Value
-  value?: DateType;
-  defaultValue?: DateType;
-  onChange?: (date: DateType, dateString: string) => void;
-  onCalendarChange?: (date: DateType, dateString: string, info: BaseInfo) => void;
-
+export interface BasePickerProps<DateType extends object> extends SharedPickerProps<DateType> {
   // Placeholder
   placeholder?: string;
 
@@ -81,6 +75,28 @@ export interface PickerProps<DateType extends object> extends SharedPickerProps<
   onPanelChange?: (values: DateType, modes: PanelMode) => void;
 }
 
+export interface SinglePickerProps<DateType extends object> extends SharedPickerProps<DateType> {
+  // Value
+  value?: DateType;
+  defaultValue?: DateType;
+  onChange?: (date: DateType, dateString: string) => void;
+  onCalendarChange?: (date: DateType, dateString: string, info: BaseInfo) => void;
+}
+
+export interface MultiplePickerProps<DateType extends object> extends SharedPickerProps<DateType> {
+  multiple: true;
+
+  // Value
+  value?: DateType[];
+  defaultValue?: DateType[];
+  onChange?: (date: DateType[], dateString: string[]) => void;
+  onCalendarChange?: (date: DateType[], dateString: string[], info: BaseInfo) => void;
+}
+
+export type PickerProps<DateType extends object> =
+  | SinglePickerProps<DateType>
+  | MultiplePickerProps<DateType>;
+
 function Picker<DateType extends object = any>(
   props: PickerProps<DateType>,
   ref: React.Ref<PickerRef>,

src/NewPicker/PickerInput/hooks/useFlexibleValue.ts

@@ -7,40 +7,15 @@ import type { FormatType, Locale } from '../../interface';
 import { fillIndex } from '../../util';
 import type { RangePickerProps } from '../RangePicker';
 import useLockEffect from './useLockEffect';
-import { useCalendarValue } from './useRangeValue';
+import { useCalendarValue, useUtil } from './useRangeValue';
 
 const EMPTY_VALUE: any[] = [];
 
 // Single Value is similar to Range Value, but it's more simple.
 // This is design to support single value or multiple value,
 // Thus this hook reuse part of the util from `useRangeValue`.
 
-type TriggerCalendarChange<DateType> = ([start, end]: DateType) => void;
-
-function useUtil<DateType extends object = any>(
-  generateConfig: GenerateConfig<DateType>,
-  locale: Locale,
-  formatList: FormatType[],
-) {
-  const getDateTexts = ([start, end]: DateType) => {
-    return [start, end].map((date) =>
-      formatValue(date, { generateConfig, locale, format: formatList[0] }),
-    ) as [string, string];
-  };
-
-  const isSameDates = (source: DateType, target: DateType) => {
-    const [prevStart = null, prevEnd = null] = source;
-    const [nextStart = null, nextEnd = null] = target;
-
-    const isSameStart =
-      prevStart === nextStart || isSameTimestamp(generateConfig, prevStart, nextStart);
-    const isSameEnd = prevEnd === nextEnd || isSameTimestamp(generateConfig, prevEnd, nextEnd);
-
-    return [isSameStart && isSameEnd, isSameStart, isSameEnd];
-  };
-
-  return [getDateTexts, isSameDates] as const;
-}
+type TriggerCalendarChange<DateType> = (dates: DateType[]) => void;
 
 export function useInnerValue<DateType extends object = any>(
   generateConfig: GenerateConfig<DateType>,
@@ -64,10 +39,14 @@ export function useInnerValue<DateType extends object = any>(
   const [calendarValue, setCalendarValue] = useCalendarValue(mergedValue);
 
   // ============================ Change ============================
-  const [getDateTexts, isSameDates] = useUtil(generateConfig, locale, formatList);
+  const [getDateTexts, isSameDates] = useUtil<DateType, DateType[]>(
+    generateConfig,
+    locale,
+    formatList,
+  );
 
-  const triggerCalendarChange: TriggerCalendarChange<DateType> = useEvent(([start, end]) => {
-    const clone: DateType = [start, end];
+  const triggerCalendarChange: TriggerCalendarChange<DateType> = useEvent((dates) => {
+    const clone: DateType[] = [...dates];
 
     // Update merged value
     const [isSameMergedDates, isSameStart] = isSameDates(calendarValue(), clone);

src/NewPicker/PickerInput/hooks/useRangeValue.ts

@@ -33,7 +33,7 @@ const EMPTY_VALUE: [null, null] = [null, null];
 
 type TriggerCalendarChange<DateType> = ([start, end]: RangeValueType<DateType>) => void;
 
-function useUtil<
+export function useUtil<
   DateType extends object = any,
   MergedValueType extends DateType[] = RangeValueType<DateType>,
 >(generateConfig: GenerateConfig<DateType>, locale: Locale, formatList: FormatType[]) {