You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
301 lines
11 KiB
301 lines
11 KiB
import type { FocusEventHandler, MouseEventHandler } from '../../_util/EventInterface';
|
|
import type { CSSProperties } from 'vue';
|
|
import type { PickerLocale } from '.';
|
|
import type { SizeType } from '../../config-provider';
|
|
import type {
|
|
PresetDate,
|
|
CustomFormat,
|
|
DisabledTime,
|
|
DisabledTimes,
|
|
EventValue,
|
|
PanelMode,
|
|
PickerMode,
|
|
RangeValue,
|
|
} from '../../vc-picker/interface';
|
|
import type { DateRender } from '../../vc-picker/panels/DatePanel/DateBody';
|
|
import type { MonthCellRender } from '../../vc-picker/panels/MonthPanel/MonthBody';
|
|
import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
|
|
import type { RangeDateRender, RangeInfo, RangeType } from '../../vc-picker/RangePicker';
|
|
import type { VueNode } from '../../_util/type';
|
|
import {
|
|
stringType,
|
|
arrayType,
|
|
someType,
|
|
booleanType,
|
|
objectType,
|
|
functionType,
|
|
} from '../../_util/type';
|
|
import type { InputStatus } from '../../_util/statusUtils';
|
|
|
|
const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
|
|
type DataPickerPlacement = (typeof DataPickerPlacements)[number];
|
|
|
|
type RangeShowTimeObject<DateType> = Omit<SharedTimeProps<DateType>, 'defaultValue'> & {
|
|
defaultValue?: DateType[];
|
|
};
|
|
|
|
function commonProps<DateType = any>() {
|
|
return {
|
|
id: String,
|
|
/**
|
|
* @deprecated `dropdownClassName` is deprecated which will be removed in next major
|
|
* version.Please use `popupClassName` instead.
|
|
*/
|
|
dropdownClassName: String,
|
|
popupClassName: String,
|
|
popupStyle: objectType<CSSProperties>(),
|
|
transitionName: String,
|
|
placeholder: String,
|
|
allowClear: booleanType(),
|
|
autofocus: booleanType(),
|
|
disabled: booleanType(),
|
|
tabindex: Number,
|
|
open: booleanType(),
|
|
defaultOpen: booleanType(),
|
|
/** Make input readOnly to avoid popup keyboard in mobile */
|
|
inputReadOnly: booleanType(),
|
|
format: someType<string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[]>([
|
|
String,
|
|
Function,
|
|
Array,
|
|
]),
|
|
// Value
|
|
// format: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
|
|
// Render
|
|
// suffixIcon?: VueNode;
|
|
// clearIcon?: VueNode;
|
|
// prevIcon?: VueNode;
|
|
// nextIcon?: VueNode;
|
|
// superPrevIcon?: VueNode;
|
|
// superNextIcon?: VueNode;
|
|
getPopupContainer: functionType<(node: HTMLElement) => HTMLElement>(),
|
|
panelRender: functionType<(originPanel: VueNode) => VueNode>(),
|
|
// // Events
|
|
onChange: functionType<(value: DateType | string | null, dateString: string) => void>(),
|
|
'onUpdate:value': functionType<(value: DateType | string | null) => void>(),
|
|
onOk: functionType<(value: DateType | string | null) => void>(),
|
|
onOpenChange: functionType<(open: boolean) => void>(),
|
|
'onUpdate:open': functionType<(open: boolean) => void>(),
|
|
onFocus: functionType<FocusEventHandler>(),
|
|
onBlur: functionType<FocusEventHandler>(),
|
|
onMousedown: functionType<MouseEventHandler>(),
|
|
onMouseup: functionType<MouseEventHandler>(),
|
|
onMouseenter: functionType<MouseEventHandler>(),
|
|
onMouseleave: functionType<MouseEventHandler>(),
|
|
onClick: functionType<MouseEventHandler>(),
|
|
onContextmenu: functionType<MouseEventHandler>(),
|
|
onKeydown: functionType<(event: KeyboardEvent, preventDefault: () => void) => void>(),
|
|
// WAI-ARIA
|
|
role: String,
|
|
name: String,
|
|
autocomplete: String,
|
|
direction: stringType<'ltr' | 'rtl'>(),
|
|
showToday: booleanType(),
|
|
showTime: someType<boolean | SharedTimeProps<DateType>>([Boolean, Object]),
|
|
locale: objectType<PickerLocale>(),
|
|
size: stringType<SizeType>(),
|
|
bordered: booleanType(),
|
|
dateRender: functionType<DateRender<DateType>>(),
|
|
disabledDate: functionType<(date: DateType) => boolean>(),
|
|
mode: stringType<PanelMode>(),
|
|
picker: stringType<PickerMode>(),
|
|
valueFormat: String,
|
|
placement: stringType<DataPickerPlacement>(),
|
|
status: stringType<InputStatus>(),
|
|
|
|
/** @deprecated Please use `disabledTime` instead. */
|
|
disabledHours: functionType<DisabledTimes['disabledHours']>(),
|
|
/** @deprecated Please use `disabledTime` instead. */
|
|
disabledMinutes: functionType<DisabledTimes['disabledMinutes']>(),
|
|
/** @deprecated Please use `disabledTime` instead. */
|
|
disabledSeconds: functionType<DisabledTimes['disabledSeconds']>(),
|
|
};
|
|
}
|
|
|
|
export interface CommonProps<DateType> {
|
|
id?: string;
|
|
prefixCls?: string;
|
|
/**
|
|
* @deprecated `dropdownClassName` is deprecated which will be removed in next major
|
|
* version.Please use `popupClassName` instead.
|
|
*/
|
|
|
|
dropdownClassName?: string;
|
|
popupClassName?: string;
|
|
popupStyle?: CSSProperties;
|
|
transitionName?: string;
|
|
placeholder?: string;
|
|
allowClear?: boolean;
|
|
autofocus?: boolean;
|
|
disabled?: boolean;
|
|
tabindex?: number;
|
|
open?: boolean;
|
|
defaultOpen?: boolean;
|
|
inputReadOnly?: boolean;
|
|
format?: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
|
|
suffixIcon?: VueNode;
|
|
clearIcon?: VueNode;
|
|
prevIcon?: VueNode;
|
|
nextIcon?: VueNode;
|
|
superPrevIcon?: VueNode;
|
|
superNextIcon?: VueNode;
|
|
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
|
|
panelRender?: (originPanel: VueNode) => VueNode;
|
|
onChange?: (value: DateType | string | null, dateString: string) => void;
|
|
'onUpdate:value'?: (value: DateType | string | null) => void;
|
|
onOk?: (value: DateType | string | null) => void;
|
|
onOpenChange?: (open: boolean) => void;
|
|
'onUpdate:open'?: (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;
|
|
role?: string;
|
|
name?: string;
|
|
autocomplete?: string;
|
|
direction?: 'ltr' | 'rtl';
|
|
showToday?: boolean;
|
|
showTime?: boolean | SharedTimeProps<DateType>;
|
|
locale?: PickerLocale;
|
|
size?: SizeType;
|
|
bordered?: boolean;
|
|
dateRender?: DateRender<DateType>;
|
|
disabledDate?: (date: DateType) => boolean;
|
|
mode?: PanelMode;
|
|
picker?: PickerMode;
|
|
valueFormat?: string;
|
|
placement?: DataPickerPlacement;
|
|
status?: InputStatus;
|
|
}
|
|
|
|
function datePickerProps<DateType = any>() {
|
|
return {
|
|
defaultPickerValue: someType<DateType | string>([Object, String]),
|
|
defaultValue: someType<DateType | string>([Object, String]),
|
|
value: someType<DateType | string>([Object, String]),
|
|
presets: arrayType<PresetDate<DateType>[]>(),
|
|
disabledTime: functionType<DisabledTime<DateType>>(),
|
|
renderExtraFooter: functionType<(mode: PanelMode) => VueNode>(),
|
|
showNow: booleanType(),
|
|
monthCellRender: functionType<MonthCellRender<DateType>>(),
|
|
// deprecated Please use `monthCellRender"` instead.',
|
|
monthCellContentRender: functionType<MonthCellRender<DateType>>(),
|
|
};
|
|
}
|
|
|
|
export interface DatePickerProps<DateType> {
|
|
defaultPickerValue?: DateType | string;
|
|
defaultValue?: DateType | string;
|
|
value?: DateType | string;
|
|
presets?: PresetDate<DateType>[];
|
|
disabledTime?: DisabledTime<DateType>;
|
|
renderExtraFooter?: (mode: PanelMode) => VueNode;
|
|
showNow?: boolean;
|
|
monthCellRender?: MonthCellRender<DateType>;
|
|
// deprecated Please use `monthCellRender"` instead.',
|
|
monthCellContentRender?: MonthCellRender<DateType>;
|
|
}
|
|
|
|
function rangePickerProps<DateType>() {
|
|
return {
|
|
allowEmpty: arrayType<[boolean, boolean]>(),
|
|
dateRender: functionType<RangeDateRender<DateType>>(),
|
|
defaultPickerValue: arrayType<RangeValue<DateType> | RangeValue<string>>(),
|
|
defaultValue: arrayType<RangeValue<DateType> | RangeValue<string>>(),
|
|
value: arrayType<RangeValue<DateType> | RangeValue<string>>(),
|
|
presets: arrayType<PresetDate<Array<DateType>>[]>(),
|
|
disabledTime: functionType<(date: EventValue<DateType>, type: RangeType) => DisabledTimes>(),
|
|
disabled: someType<boolean | [boolean, boolean]>([Boolean, Array]),
|
|
renderExtraFooter: functionType<() => VueNode>(),
|
|
separator: { type: String },
|
|
showTime: someType<boolean | RangeShowTimeObject<DateType>>([Boolean, Object]),
|
|
ranges:
|
|
objectType<
|
|
Record<
|
|
string,
|
|
Exclude<RangeValue<DateType>, null> | (() => Exclude<RangeValue<DateType>, null>)
|
|
>
|
|
>(),
|
|
placeholder: arrayType<string[]>(),
|
|
mode: arrayType<[PanelMode, PanelMode]>(),
|
|
onChange:
|
|
functionType<
|
|
(
|
|
value: RangeValue<DateType> | RangeValue<string> | null,
|
|
dateString: [string, string],
|
|
) => void
|
|
>(),
|
|
'onUpdate:value':
|
|
functionType<(value: RangeValue<DateType> | RangeValue<string> | null) => void>(),
|
|
onCalendarChange:
|
|
functionType<
|
|
(
|
|
values: RangeValue<DateType> | RangeValue<string>,
|
|
formatString: [string, string],
|
|
info: RangeInfo,
|
|
) => void
|
|
>(),
|
|
onPanelChange:
|
|
functionType<
|
|
(values: RangeValue<DateType> | RangeValue<string>, modes: [PanelMode, PanelMode]) => void
|
|
>(),
|
|
onOk: functionType<(dates: RangeValue<DateType> | RangeValue<string>) => void>(),
|
|
};
|
|
}
|
|
|
|
export interface RangePickerProps<DateType> {
|
|
allowEmpty?: [boolean, boolean];
|
|
dateRender?: RangeDateRender<DateType>;
|
|
defaultPickerValue?: RangeValue<DateType> | RangeValue<string>;
|
|
defaultValue?: RangeValue<DateType> | RangeValue<string>;
|
|
value?: RangeValue<DateType> | RangeValue<string>;
|
|
presets?: PresetDate<RangeValue<DateType>>[];
|
|
disabledTime?: (date: EventValue<DateType>, type: RangeType) => DisabledTimes;
|
|
disabled?: [boolean, boolean];
|
|
renderExtraFooter?: () => VueNode;
|
|
separator?: string;
|
|
showTime?: boolean | RangeShowTimeObject<DateType>;
|
|
ranges?: Record<
|
|
string,
|
|
Exclude<RangeValue<DateType>, null> | (() => Exclude<RangeValue<DateType>, null>)
|
|
>;
|
|
placeholder?: [string, string];
|
|
mode?: [PanelMode, PanelMode];
|
|
onChange?: (
|
|
value: RangeValue<DateType> | RangeValue<string> | null,
|
|
dateString: [string, string],
|
|
) => void;
|
|
'onUpdate:value'?: (value: RangeValue<DateType> | RangeValue<string> | null) => void;
|
|
onCalendarChange?: (
|
|
values: RangeValue<DateType> | RangeValue<string>,
|
|
formatString: [string, string],
|
|
info: RangeInfo,
|
|
) => void;
|
|
onPanelChange?: (
|
|
values: RangeValue<DateType> | RangeValue<string>,
|
|
modes: [PanelMode, PanelMode],
|
|
) => void;
|
|
onOk?: (dates: RangeValue<DateType> | RangeValue<string>) => void;
|
|
}
|
|
|
|
export type ExtraDatePickerProps<DateType> = {
|
|
valueFormat?: string;
|
|
defaultPickerValue?: DateType | string;
|
|
defaultValue?: DateType | string;
|
|
value?: DateType | string;
|
|
};
|
|
|
|
export type ExtraRangePickerProps<DateType> = {
|
|
valueFormat?: string;
|
|
defaultPickerValue?: RangeValue<DateType> | RangeValue<string>;
|
|
defaultValue?: RangeValue<DateType> | RangeValue<string>;
|
|
value?: RangeValue<DateType> | RangeValue<string>;
|
|
};
|
|
|
|
export { commonProps, datePickerProps, rangePickerProps };
|