refactor: date props

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -2,16 +2,22 @@ import CalendarOutlined from '@ant-design/icons-vue/CalendarOutlined';
 import ClockCircleOutlined from '@ant-design/icons-vue/ClockCircleOutlined';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import RCPicker from '../../vc-picker';
-import type { PickerMode } from '../../vc-picker/interface';
+import type { DisabledTime, PanelMode, PickerMode } from '../../vc-picker/interface';
 import type { GenerateConfig } from '../../vc-picker/generate/index';
 import enUS from '../locale/en_US';
 import { getPlaceholder } from '../util';
 import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver';
-import type { PickerProps, PickerDateProps, PickerTimeProps } from '.';
+import type { PickerProps, PickerDateProps, PickerTimeProps, PickerLocale } from '.';
 import { getTimeProps, Components } from '.';
-import { defineComponent, ref } from 'vue';
+import { CSSProperties, defineComponent, PropType, ref } from 'vue';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import classNames from '../../_util/classNames';
+import { AlignType } from '../../vc-align/interface';
+import { VueNode } from '../../_util/type';
+import { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
+import { SizeType } from '../../config-provider';
+import { DateRender } from '../../vc-picker/panels/DatePanel/DateBody';
+import { commonProps } from './props';
 
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type DatePickerProps = PickerProps<DateType>;
@@ -23,18 +29,11 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
     return defineComponent<InnerPickerProps>({
       name: displayName,
       inheritAttrs: false,
-      props: [
+      props: {
-        'size',
+        ...commonProps<DateType>(),
-        'prefixCls',
+      } as any,
-        'direction',
+      slots: ['suffixIcon', 'panelRender', 'dateRender'],
-        'getPopupContainer',
+      emits: ['change', 'openChange', 'focus', 'blur', 'panelChange', 'ok', 'update:value'],
-        'locale',
-        'value',
-        'showTime',
-        'showNow',
-      ] as any,
-      slots: ['suffixIcon'],
-      emits: ['change', 'panelChange', 'ok', 'openChange', 'update:value'],
       setup(props, { slots, expose, attrs, emit }) {
         const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
           'picker',

components/date-picker/generatePicker/props.ts

@@ -0,0 +1,74 @@
+import type { CSSProperties, PropType } from 'vue';
+import type { PickerLocale } from '.';
+import type { SizeType } from '../../config-provider';
+import type { AlignType } from '../../vc-align/interface';
+import type { PanelMode, PickerMode } from '../../vc-picker/interface';
+import type { DateRender } from '../../vc-picker/panels/DatePanel/DateBody';
+import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
+import type { VueNode } from '../../_util/type';
+
+function commonProps<DateType>() {
+  return {
+    dropdownClassName: String,
+    dropdownAlign: { type: Object as PropType<AlignType> },
+    popupStyle: { type: Object as PropType<CSSProperties> },
+    transitionName: String,
+    placeholder: String,
+    allowClear: { type: Boolean, default: undefined },
+    autofocus: { type: Boolean, default: undefined },
+    disabled: { type: Boolean, default: undefined },
+    tabindex: Number,
+    open: { type: Boolean, default: undefined },
+    defaultOpen: { type: Boolean, default: undefined },
+    /** Make input readOnly to avoid popup keyboard in mobile */
+    inputReadOnly: { type: Boolean, default: undefined },
+    // Value
+    // format:  string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
+    // Render
+    // suffixIcon?: VueNode;
+    // clearIcon?: VueNode;
+    // prevIcon?: VueNode;
+    // nextIcon?: VueNode;
+    // superPrevIcon?: VueNode;
+    // superNextIcon?: VueNode;
+    getPopupContainer: { type: Function as PropType<(node: HTMLElement) => HTMLElement> },
+    panelRender: { type: Function as PropType<(originPanel: VueNode) => VueNode> },
+    // // Events
+    // onChange?: (value: DateType | null, dateString: string) => void;
+    // onOpenChange?: (open: boolean) => void;
+    // onFocus?: FocusEventHandler;
+    // onBlur?: FocusEventHandler;
+    // onMousedown?: MouseEventHandler;
+    // onMouseup?: MouseEventHandler;
+    // onMouseenter?: MouseEventHandler;
+    // onMouseleave?: MouseEventHandler;
+    // onClick?: MouseEventHandler;
+    // onContextmenu?: MouseEventHandler;
+    // onKeydown?: (event: KeyboardEvent, preventDefault: () => void) => void;
+    // WAI-ARIA
+    role: String,
+    name: String,
+    autocomplete: String,
+    direction: { type: String as PropType<'ltr' | 'rtl'> },
+    showToday: { type: Boolean, default: undefined },
+    showTime: {
+      type: [Boolean, Object] as PropType<boolean | SharedTimeProps<DateType>>,
+      default: undefined,
+    },
+    locale: { type: Object as PropType<PickerLocale> },
+    size: { type: String as PropType<SizeType> },
+    bordered: { type: Boolean, default: undefined },
+    dateRender: { type: Function as PropType<DateRender<DateType>> },
+    disabledDate: { type: Function as PropType<(date: DateType) => boolean> },
+    mode: { type: String as PropType<PanelMode> },
+    picker: { type: String as PropType<PickerMode> },
+  };
+}
+
+function datePickerProps<DateType>() {
+  return {
+    defaultPickerValue: { type: [String, Object] as PropType<DateType> },
+  };
+}
+
+export { commonProps, datePickerProps };

components/vc-picker/Picker.tsx

@@ -36,6 +36,7 @@ import type { AlignType } from '../vc-align/interface';
 import useMergedState from '../_util/hooks/useMergedState';
 import { warning } from '../vc-util/warning';
 import classNames from '../_util/classNames';
+import { SharedTimeProps } from './panels/TimePanel';
 
 export type PickerRefConfig = {
   focus: () => void;
@@ -91,7 +92,7 @@ export type PickerSharedProps<DateType> = {
   autocomplete?: string;
   direction?: 'ltr' | 'rtl';
   showToday?: boolean;
-  showTime?: boolean | undefined | object;
+  showTime?: boolean | SharedTimeProps<DateType>;
 } & HtmlHTMLAttributes;
 
 type OmitPanelProps<Props> = Omit<

components/vc-picker/RangePicker.tsx

@@ -75,11 +75,11 @@ export type RangeInfo = {
   range: RangeType;
 };
 
-export type RangeDateRender<DateType> = (
+export type RangeDateRender<DateType> = (props: {
-  currentDate: DateType,
+  current: DateType;
-  today: DateType,
+  today: DateType;
-  info: RangeInfo,
+  info: RangeInfo;
-) => VueNode;
+}) => VueNode;
 
 export type RangePickerSharedProps<DateType> = {
   id?: string;
@@ -803,9 +803,13 @@ function RangerPicker<DateType>() {
 
         let panelDateRender: DateRender<DateType> | null = null;
         if (dateRender) {
-          panelDateRender = (date, today) =>
+          panelDateRender = ({ current: date, today }) =>
-            dateRender(date, today, {
+            dateRender({
-              range: mergedActivePickerIndex ? 'end' : 'start',
+              current: date,
+              today,
+              info: {
+                range: mergedActivePickerIndex.value ? 'end' : 'start',
+              },
             });
         }
 

components/vc-picker/panels/DatePanel/DateBody.tsx

@@ -13,7 +13,7 @@ import type { VueNode } from '../../../_util/type';
 import { useInjectRange } from '../../RangeContext';
 import useMergeProps from '../../hooks/useMergeProps';
 
-export type DateRender<DateType> = (currentDate: DateType, today: DateType) => VueNode;
+export type DateRender<DateType> = (props: { current: DateType; today: DateType }) => VueNode;
 
 export type DateBodyPassProps<DateType> = {
   dateRender?: DateRender<DateType>;
@@ -74,7 +74,9 @@ function DateBody<DateType>(_props: DateBodyProps<DateType>) {
     offsetCell: (date, offset) => generateConfig.addDate(date, offset),
   });
 
-  const getCellNode = dateRender ? (date: DateType) => dateRender(date, today) : undefined;
+  const getCellNode = dateRender
+    ? (date: DateType) => dateRender({ current: date, today })
+    : undefined;
 
   return (
     <PanelBody