fix: date-picker ts error

pull/2996/head
tanjinzhou 2020-10-15 13:39:17 +08:00
parent 147845b55f
commit de81c7c1d9
8 changed files with 148 additions and 17 deletions

View File

@ -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 = [];

View File

@ -16,7 +16,7 @@ function noop() {
return null;
}
function zerofixed(v) {
function zerofixed(v: number) {
if (v < 10) {
return `0${v}`;
}

View File

@ -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';

View File

@ -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';

View File

@ -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<DatePickerPropstypes> = defineComponent<DatePickerPropstypes>(
const DatePicker = defineComponent<DatePickerPropsTypes>(
wrapPicker(
{
...createPicker(VcCalendar as any, DatePickerProps),
@ -16,19 +22,25 @@ const DatePicker: DefineComponent<DatePickerPropstypes> = defineComponent<DatePi
} as any,
DatePickerProps,
'date',
) as any,
),
);
const MonthPicker = wrapPicker(
{ ...createPicker(MonthCalendar as any, MonthPickerProps), name: 'AMonthPicker' } as any,
MonthPickerProps,
'month',
const MonthPicker = defineComponent<MonthPickerPropsTypes>(
wrapPicker(
{ ...createPicker(MonthCalendar as any, MonthPickerProps), name: 'AMonthPicker' } as any,
MonthPickerProps,
'month',
),
);
Object.assign(DatePicker, {
RangePicker: wrapPicker(RangePicker as any, RangePickerProps, 'date'),
RangePicker: defineComponent<RangePickerPropsTypes>(
wrapPicker(RangePicker as any, RangePickerProps, 'date'),
),
MonthPicker,
WeekPicker: wrapPicker(WeekPicker as any, WeekPickerProps, 'week'),
WeekPicker: defineComponent<WeekPickerPropsTypes>(
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;

View File

@ -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<string, any> | 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<string, any> | 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<DatePickerPropsTypes> {
RangePicker: DefineComponent<RangePickerPropsTypes>;
MonthPicker: DefineComponent<MonthPickerPropsTypes>;
WeekPicker: DefineComponent<WeekPickerPropsTypes>;
}

View File

@ -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,
};

View File

@ -44,6 +44,7 @@ function getColumns({ showHour, showMinute, showSecond, use12Hours }: any) {
}
return column;
}
export default function wrapPicker(
Picker: DefineComponent<any>,
props: any,