chore: date-picker types

components/date-picker/createPicker.tsx

@@ -25,12 +25,14 @@ export interface PickerState {
   sValue?: moment.Moment | null;
   showDate?: moment.Moment | null;
 }
-export default function createPicker(
+export default function createPicker<P>(
-  TheCalendar: DefineComponent<any>,
+  TheCalendar: DefineComponent<P>,
   props: any,
+  name: string,
 ): DefineComponent<any> {
   return defineComponent({
     inheritAttrs: false,
+    name,
     props: {
       ...props,
       allowClear: PropTypes.looseBool.def(true),

components/date-picker/index.ts

@@ -1,3 +1,4 @@
+import { App, DefineComponent } from 'vue';
 import VcCalendar from '../vc-calendar';
 import MonthCalendar from '../vc-calendar/src/MonthCalendar';
 import createPicker from './createPicker';
@@ -5,42 +6,45 @@ import wrapPicker from './wrapPicker';
 import RangePicker from './RangePicker';
 import WeekPicker from './WeekPicker';
 import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './props';
-import { App, defineComponent } from 'vue';
 import {
-  DatePickerDecorator,
   DatePickerPropsTypes,
   RangePickerPropsTypes,
   MonthPickerPropsTypes,
   WeekPickerPropsTypes,
 } from './interface';
 
-const DatePicker = defineComponent<DatePickerPropsTypes>(
+const WrappedRangePicker = (wrapPicker(
-  wrapPicker(
+  RangePicker,
-    {
+  RangePickerProps,
-      ...createPicker(VcCalendar as any, DatePickerProps),
+  'date',
-      name: 'ADatePicker',
+) as unknown) as DefineComponent<RangePickerPropsTypes>;
-    } as any,
-    DatePickerProps,
-    'date',
-  ),
-);
 
-const MonthPicker = defineComponent<MonthPickerPropsTypes>(
+const WrappedWeekPicker = (wrapPicker(
-  wrapPicker(
+  WeekPicker,
-    { ...createPicker(MonthCalendar as any, MonthPickerProps), name: 'AMonthPicker' } as any,
+  WeekPickerProps,
-    MonthPickerProps,
+  'week',
-    'month',
+) as unknown) as DefineComponent<WeekPickerPropsTypes>;
-  ),
+
-);
+const DatePicker = (wrapPicker(
+  createPicker(VcCalendar, DatePickerProps, 'ADatePicker'),
+  DatePickerProps,
+  'date',
+) as unknown) as DefineComponent<DatePickerPropsTypes> & {
+  readonly RangePicker: typeof WrappedRangePicker;
+  readonly MonthPicker: typeof MonthPicker;
+  readonly WeekPicker: typeof WrappedWeekPicker;
+};
+
+const MonthPicker = (wrapPicker(
+  createPicker(MonthCalendar, MonthPickerProps, 'AMonthPicker'),
+  MonthPickerProps,
+  'month',
+) as unknown) as DefineComponent<MonthPickerPropsTypes>;
 
 Object.assign(DatePicker, {
-  RangePicker: defineComponent<RangePickerPropsTypes>(
+  RangePicker: WrappedRangePicker,
-    wrapPicker(RangePicker as any, RangePickerProps, 'date'),
-  ),
   MonthPicker,
-  WeekPicker: defineComponent<WeekPickerPropsTypes>(
+  WeekPicker: WrappedWeekPicker,
-    wrapPicker(WeekPicker as any, WeekPickerProps, 'week'),
-  ),
 });
 
 /* istanbul ignore next */
@@ -52,4 +56,4 @@ DatePicker.install = function(app: App) {
   return app;
 };
 
-export default DatePicker as DatePickerDecorator;
+export default DatePicker;

components/date-picker/interface.tsx

@@ -1,4 +1,3 @@
-
 import moment from 'moment';
 import { CSSProperties, DefineComponent } from 'vue';
 import { tuple, VueNode } from '../_util/type';
@@ -28,17 +27,17 @@ export interface PickerProps {
   popupStyle?: CSSProperties;
   dropdownClassName?: string;
   locale?: any;
-  localeCode?: string,
+  localeCode?: string;
   size?: 'large' | 'small' | 'default';
   getCalendarContainer?: (triggerNode: Element) => HTMLElement;
   open?: boolean;
-  valueFormat?: string,
+  valueFormat?: string;
   onOpenChange?: (status: boolean) => void;
   disabledDate?: (current: moment.Moment | null) => boolean;
   dateRender?: (current: moment.Moment, today: moment.Moment) => any;
   autofocus?: boolean;
   onFocus?: EventHandlerNonNull;
-  onBlur?: EventHandlerNonNull
+  onBlur?: EventHandlerNonNull;
 }
 
 export interface SinglePickerProps {
@@ -110,9 +109,3 @@ export interface RangePickerPropsTypes extends PickerProps {
 export interface WeekPickerPropsTypes extends PickerProps, SinglePickerProps {
   // - currently no own props -
 }
-
-export interface DatePickerDecorator extends DefineComponent<DatePickerPropsTypes> {
-  RangePicker: DefineComponent<RangePickerPropsTypes>;
-  MonthPicker: DefineComponent<MonthPickerPropsTypes>;
-  WeekPicker: DefineComponent<WeekPickerPropsTypes>;
-}

components/date-picker/props.ts

@@ -1,8 +1,9 @@
-// import { TimePickerProps } from '../time-picker'
+import { PropType } from 'vue';
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import { tuple } from '../_util/type';
-import { PropType } from 'vue';
+
 export type PickerValue = moment.Moment | undefined | null | string;
+
 export type RangePickerValue =
   | undefined[]
   | null[]
@@ -13,6 +14,7 @@ export type RangePickerValue =
   | [moment.Moment | string, null]
   | [moment.Moment, moment.Moment]
   | [string, string];
+
 export const PickerProps = {
   name: PropTypes.string,
   transitionName: PropTypes.string,

components/date-picker/wrapPicker.tsx

@@ -45,8 +45,8 @@ function getColumns({ showHour, showMinute, showSecond, use12Hours }: any) {
   return column;
 }
 
-export default function wrapPicker(
+export default function wrapPicker<P>(
-  Picker: DefineComponent<any>,
+  Picker: DefineComponent<P>,
   props: any,
   pickerType: PickerType,
 ) {
@@ -70,7 +70,7 @@ export default function wrapPicker(
       provide('savePopupRef', this.savePopupRef);
     },
     mounted() {
-      const { autofocus, disabled, value, defaultValue, valueFormat } = this;
+      const { autofocus, disabled, value, defaultValue, valueFormat } = this.$props;
       checkValidate('DatePicker', defaultValue, 'defaultValue', valueFormat);
       checkValidate('DatePicker', value, 'value', valueFormat);
       if (autofocus && !disabled) {