From de81c7c1d99d15248673611dce2eb75e4f77f4ad Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Thu, 15 Oct 2020 13:39:17 +0800 Subject: [PATCH] fix: date-picker ts error --- components/calendar/Header.tsx | 2 +- components/calendar/index.tsx | 2 +- components/date-picker/RangePicker.tsx | 2 +- components/date-picker/WeekPicker.tsx | 2 +- components/date-picker/index.ts | 36 ++++-- components/date-picker/interface.tsx | 118 ++++++++++++++++++ .../date-picker/{interface.ts => props.ts} | 2 +- components/date-picker/wrapPicker.tsx | 1 + 8 files changed, 148 insertions(+), 17 deletions(-) create mode 100644 components/date-picker/interface.tsx rename components/date-picker/{interface.ts => props.ts} (99%) diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index c6a7dd651..4b2c2b595 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -7,7 +7,7 @@ import { VueNode } from '../_util/type'; const { Option } = Select; -function getMonthsLocale(value) { +function getMonthsLocale(value: moment.Moment) { const current = value.clone(); const localeData = value.localeData(); const months = []; diff --git a/components/calendar/index.tsx b/components/calendar/index.tsx index 12a1906e7..5be359641 100644 --- a/components/calendar/index.tsx +++ b/components/calendar/index.tsx @@ -16,7 +16,7 @@ function noop() { return null; } -function zerofixed(v) { +function zerofixed(v: number) { if (v < 10) { return `0${v}`; } diff --git a/components/date-picker/RangePicker.tsx b/components/date-picker/RangePicker.tsx index 0710d38eb..f36a6a795 100644 --- a/components/date-picker/RangePicker.tsx +++ b/components/date-picker/RangePicker.tsx @@ -8,7 +8,7 @@ import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'; import Tag from '../tag'; import { defaultConfigProvider } from '../config-provider'; import interopDefault from '../_util/interopDefault'; -import { RangePickerProps } from './interface'; +import { RangePickerProps } from './props'; import { hasProp, getOptionProps, getComponent } from '../_util/props-util'; import BaseMixin from '../_util/BaseMixin'; import { formatDate } from './utils'; diff --git a/components/date-picker/WeekPicker.tsx b/components/date-picker/WeekPicker.tsx index 505eee879..94088d9d4 100644 --- a/components/date-picker/WeekPicker.tsx +++ b/components/date-picker/WeekPicker.tsx @@ -7,7 +7,7 @@ import { defaultConfigProvider } from '../config-provider'; import { hasProp, getOptionProps, getComponent } from '../_util/props-util'; import classNames from '../_util/classNames'; import BaseMixin from '../_util/BaseMixin'; -import { WeekPickerProps } from './interface'; +import { WeekPickerProps } from './props'; import interopDefault from '../_util/interopDefault'; import InputIcon from './InputIcon'; import { getDataAndAriaProps } from '../_util/util'; diff --git a/components/date-picker/index.ts b/components/date-picker/index.ts index 257f83c91..c7bd05384 100755 --- a/components/date-picker/index.ts +++ b/components/date-picker/index.ts @@ -4,11 +4,17 @@ import createPicker from './createPicker'; import wrapPicker from './wrapPicker'; import RangePicker from './RangePicker'; import WeekPicker from './WeekPicker'; -import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './interface'; -import { App, DefineComponent, defineComponent } from 'vue'; -type DatePickerPropstypes = typeof DatePickerProps; +import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './props'; +import { App, defineComponent } from 'vue'; +import { + DatePickerDecorator, + DatePickerPropsTypes, + RangePickerPropsTypes, + MonthPickerPropsTypes, + WeekPickerPropsTypes, +} from './interface'; -const DatePicker: DefineComponent = defineComponent( +const DatePicker = defineComponent( wrapPicker( { ...createPicker(VcCalendar as any, DatePickerProps), @@ -16,19 +22,25 @@ const DatePicker: DefineComponent = defineComponent( + wrapPicker( + { ...createPicker(MonthCalendar as any, MonthPickerProps), name: 'AMonthPicker' } as any, + MonthPickerProps, + 'month', + ), ); Object.assign(DatePicker, { - RangePicker: wrapPicker(RangePicker as any, RangePickerProps, 'date'), + RangePicker: defineComponent( + wrapPicker(RangePicker as any, RangePickerProps, 'date'), + ), MonthPicker, - WeekPicker: wrapPicker(WeekPicker as any, WeekPickerProps, 'week'), + WeekPicker: defineComponent( + wrapPicker(WeekPicker as any, WeekPickerProps, 'week'), + ), }); /* istanbul ignore next */ @@ -40,4 +52,4 @@ DatePicker.install = function(app: App) { return app; }; -export default DatePicker; +export default DatePicker as DatePickerDecorator; diff --git a/components/date-picker/interface.tsx b/components/date-picker/interface.tsx new file mode 100644 index 000000000..458b9448e --- /dev/null +++ b/components/date-picker/interface.tsx @@ -0,0 +1,118 @@ + +import moment from 'moment'; +import { CSSProperties, DefineComponent, HTMLAttributes } from 'vue'; +import { tuple, VueNode } from '../_util/type'; + +export type RangePickerValue = + | undefined[] + | null[] + | [moment.Moment | string] + | [undefined, moment.Moment | string] + | [moment.Moment | string, undefined] + | [null, moment.Moment | string] + | [moment.Moment | string, null] + | [moment.Moment, moment.Moment] + | [string, string]; + +export interface PickerProps { + name?: string; + transitionName?: string; + prefixCls?: string; + inputPrefixCls?: string; + format?: string | string[] | Function; + disabled?: boolean; + allowClear?: boolean; + pickerClass?: string; + pickerInputClass?: string; + suffixIcon?: VueNode; + popupStyle?: CSSProperties; + dropdownClassName?: string; + locale?: any; + localeCode?: string, + size?: 'large' | 'small' | 'default'; + getCalendarContainer?: (triggerNode: Element) => HTMLElement; + open?: boolean; + 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 +} + +export interface SinglePickerProps { + value?: moment.Moment | undefined | null | string; + defaultValue?: moment.Moment | undefined | null | string; + defaultPickerValue?: moment.Moment | undefined | null | string; + placeholder?: string; + renderExtraFooter?: (mode: DatePickerMode) => any; + onChange?: (date: moment.Moment | null, dateString: string) => void; +} + +const DatePickerModes = tuple('time', 'date', 'month', 'year', 'decade'); +export type DatePickerMode = typeof DatePickerModes[number]; + +export interface DatePickerPropsTypes extends PickerProps, SinglePickerProps { + showTime?: Record | boolean; + showToday?: boolean; + open?: boolean; + disabledTime?: ( + current?: moment.Moment | null, + ) => { + disabledHours?: () => number[]; + disabledMinutes?: () => number[]; + disabledSeconds?: () => number[]; + }; + onOpenChange?: (status: boolean) => void; + onPanelChange?: (value: moment.Moment | null, mode: DatePickerMode) => void; + onOk?: (selectedTime: moment.Moment | null) => void; + mode?: DatePickerMode; +} + +export interface MonthPickerPropsTypes extends PickerProps, SinglePickerProps { + monthCellContentRender?: (date: moment.Moment, locale: any) => any; +} + +export type RangePickerPresetRange = RangePickerValue | (() => RangePickerValue); + +export interface RangePickerPropsTypes extends PickerProps { + tagPrefixCls?: string; + value?: RangePickerValue; + defaultValue?: RangePickerValue; + defaultPickerValue?: RangePickerValue; + timePicker?: VueNode; + onChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void; + onCalendarChange?: (dates: RangePickerValue, dateStrings: [string, string]) => void; + onOk?: (selectedTime: RangePickerPresetRange) => void; + showTime?: Record | boolean; + showToday?: boolean; + ranges?: { + [range: string]: RangePickerPresetRange; + }; + placeholder?: [string, string]; + mode?: string | string[]; + separator?: VueNode; + disabledTime?: ( + current: RangePickerValue, + type: string, + ) => { + disabledHours?: () => number[]; + disabledMinutes?: () => number[]; + disabledSeconds?: () => number[]; + }; + onPanelChange?: (value?: RangePickerValue, mode?: string | string[]) => void; + renderExtraFooter?: () => any; + onMouseenter?: (e: MouseEvent) => void; + onMouseleave?: (e: MouseEvent) => void; +} + +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/interface.ts b/components/date-picker/props.ts similarity index 99% rename from components/date-picker/interface.ts rename to components/date-picker/props.ts index a29bc2ada..5f37cf1bb 100644 --- a/components/date-picker/interface.ts +++ b/components/date-picker/props.ts @@ -44,7 +44,7 @@ export const PickerProps = { onOpenChange: PropTypes.func, onFocus: PropTypes.func, onBlur: PropTypes.func, - 'onUpdate:value': PropTypes.func, + //'onUpdate:value': PropTypes.func, onMouseenter: PropTypes.func, onMouseleave: PropTypes.func, }; diff --git a/components/date-picker/wrapPicker.tsx b/components/date-picker/wrapPicker.tsx index 7c1ab3ea2..d36fe7fdb 100644 --- a/components/date-picker/wrapPicker.tsx +++ b/components/date-picker/wrapPicker.tsx @@ -44,6 +44,7 @@ function getColumns({ showHour, showMinute, showSecond, use12Hours }: any) { } return column; } + export default function wrapPicker( Picker: DefineComponent, props: any,