From 20f54950a91d99baca748f5385faaae47e188e3a Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Fri, 16 Oct 2020 10:18:06 +0800 Subject: [PATCH] chore: date-picker types --- components/date-picker/createPicker.tsx | 6 ++- components/date-picker/index.ts | 56 +++++++++++++------------ components/date-picker/interface.tsx | 13 ++---- components/date-picker/props.ts | 6 ++- components/date-picker/wrapPicker.tsx | 6 +-- 5 files changed, 44 insertions(+), 43 deletions(-) diff --git a/components/date-picker/createPicker.tsx b/components/date-picker/createPicker.tsx index 4462098d7..1671b67b8 100644 --- a/components/date-picker/createPicker.tsx +++ b/components/date-picker/createPicker.tsx @@ -25,12 +25,14 @@ export interface PickerState { sValue?: moment.Moment | null; showDate?: moment.Moment | null; } -export default function createPicker( - TheCalendar: DefineComponent, +export default function createPicker

( + TheCalendar: DefineComponent

, props: any, + name: string, ): DefineComponent { return defineComponent({ inheritAttrs: false, + name, props: { ...props, allowClear: PropTypes.looseBool.def(true), diff --git a/components/date-picker/index.ts b/components/date-picker/index.ts index c7bd05384..d80177e18 100755 --- a/components/date-picker/index.ts +++ b/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( - wrapPicker( - { - ...createPicker(VcCalendar as any, DatePickerProps), - name: 'ADatePicker', - } as any, - DatePickerProps, - 'date', - ), -); +const WrappedRangePicker = (wrapPicker( + RangePicker, + RangePickerProps, + 'date', +) as unknown) as DefineComponent; -const MonthPicker = defineComponent( - wrapPicker( - { ...createPicker(MonthCalendar as any, MonthPickerProps), name: 'AMonthPicker' } as any, - MonthPickerProps, - 'month', - ), -); +const WrappedWeekPicker = (wrapPicker( + WeekPicker, + WeekPickerProps, + 'week', +) as unknown) as DefineComponent; + +const DatePicker = (wrapPicker( + createPicker(VcCalendar, DatePickerProps, 'ADatePicker'), + DatePickerProps, + 'date', +) as unknown) as DefineComponent & { + 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; Object.assign(DatePicker, { - RangePicker: defineComponent( - wrapPicker(RangePicker as any, RangePickerProps, 'date'), - ), + RangePicker: WrappedRangePicker, MonthPicker, - WeekPicker: defineComponent( - wrapPicker(WeekPicker as any, WeekPickerProps, 'week'), - ), + WeekPicker: WrappedWeekPicker, }); /* istanbul ignore next */ @@ -52,4 +56,4 @@ DatePicker.install = function(app: App) { return app; }; -export default DatePicker as DatePickerDecorator; +export default DatePicker; diff --git a/components/date-picker/interface.tsx b/components/date-picker/interface.tsx index 98a148faa..3935d4061 100644 --- a/components/date-picker/interface.tsx +++ b/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 { - RangePicker: DefineComponent; - MonthPicker: DefineComponent; - WeekPicker: DefineComponent; -} diff --git a/components/date-picker/props.ts b/components/date-picker/props.ts index 5f37cf1bb..73efeb50a 100644 --- a/components/date-picker/props.ts +++ b/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, diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx index d36fe7fdb..460a671dc 100644 --- a/components/date-picker/wrapPicker.tsx +++ b/components/date-picker/wrapPicker.tsx @@ -45,8 +45,8 @@ function getColumns({ showHour, showMinute, showSecond, use12Hours }: any) { return column; } -export default function wrapPicker( - Picker: DefineComponent, +export default function wrapPicker

( + Picker: DefineComponent

, 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) {