github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: typescript compile error

Browse Source
pull/4675/head
Amour1688 3 years ago committed by tangjinzhou
parent 6b1f38cd4e
commit aa9ba7fc5a
8 changed files with 237 additions and 133 deletions
Show Stats Download Patch File Download Diff File

3
components/calendar/dayjs.tsx
Unescape View File

@ -1,10 +1,9 @@
import type { Dayjs } from 'dayjs';
import generateConfig from '../vc-picker/generate/dayjs';
import { withInstall } from '../_util/type';
import type { CalendarProps } from './generateCalendar';
import generateCalendar from './generateCalendar';
const Calendar = generateCalendar<Dayjs>(generateConfig);
const Calendar = generateCalendar(generateConfig);
export type { CalendarProps };
export default withInstall(Calendar);

51
components/calendar/generateCalendar.tsx
Unescape View File

@ -65,7 +65,10 @@ export interface CalendarProps<DateType> {
valueFormat?: string;
}
function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
function generateCalendar<
DateType,
Props extends CalendarProps<DateType> = CalendarProps<DateType>,
>(generateConfig: GenerateConfig<DateType>) {
function isSameYear(date1: DateType, date2: DateType) {
return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2);
}
@ -82,28 +85,9 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
);
}
const Calendar = defineComponent<CalendarProps<DateType>>({
const Calendar = defineComponent<Props>({
name: 'ACalendar',
inheritAttrs: false,
props: [
'prefixCls',
'locale',
'validRange',
'disabledDate',
'dateFullCellRender',
'dateCellRender',
'monthFullCellRender',
'monthCellRender',
'headerRender',
'value',
'defaultValue',
'mode',
'fullscreen',
'onChange',
'onPanelChange',
'onSelect',
'valueFormat',
] as any,
emits: ['change', 'panelChange', 'select', 'update:value'],
slots: [
'dateFullCellRender',
@ -303,7 +287,6 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
onModeChange={triggerModeChange}
/>
)}
<PickerPanel
value={mergedValue.value}
prefixCls={prefixCls.value}
@ -322,11 +305,33 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
};
},
});
Calendar.props = [
'prefixCls',
'locale',
'validRange',
'disabledDate',
'dateFullCellRender',
'dateCellRender',
'monthFullCellRender',
'monthCellRender',
'headerRender',
'value',
'defaultValue',
'mode',
'fullscreen',
'onChange',
'onPanelChange',
'onSelect',
'valueFormat',
];
Calendar.install = function (app: App) {
app.component(Calendar.name, Calendar);
return app;
};
return Calendar;
return Calendar as unknown as (props: CalendarProps<DateType>) => JSX.Element;
}
export default generateCalendar;

4
components/date-picker/generatePicker/generateRangePicker.tsx
Unescape View File

@ -16,18 +16,18 @@ import type { PanelMode, RangeValue } from '../../vc-picker/interface';
import type { RangePickerSharedProps } from '../../vc-picker/RangePicker';
import devWarning from '../../vc-util/devWarning';
export default function generateRangePicker<DateType, ExtraProps extends {} = {}>(
export default function generateRangePicker<DateType, ExtraProps = {}>(
generateConfig: GenerateConfig<DateType>,
extraProps: ExtraProps,
) {
const RangePicker = defineComponent({
name: 'ARangePicker',
inheritAttrs: false,
props: {
...commonProps<DateType>(),
...rangePickerProps<DateType>(),
...extraProps,
},
inheritAttrs: false,
slots: [
'suffixIcon',
// 'clearIcon',

1
components/date-picker/generatePicker/generateSinglePicker.tsx
Unescape View File

@ -12,6 +12,7 @@ import { computed, defineComponent, nextTick, onMounted, ref } from 'vue';
import useConfigInject from '../../_util/hooks/useConfigInject';
import classNames from '../../_util/classNames';
import { commonProps, datePickerProps } from './props';
import devWarning from '../../vc-util/devWarning';
export default function generateSinglePicker<DateType, ExtraProps = {}>(

82
components/date-picker/generatePicker/index.tsx
Unescape View File

@ -1,22 +1,12 @@
import type { GenerateConfig } from '../../vc-picker/generate/index';
import type {
PickerBaseProps as RCPickerBaseProps,
PickerDateProps as RCPickerDateProps,
PickerTimeProps as RCPickerTimeProps,
} from '../../vc-picker/Picker';
import type { GenerateConfig } from '../../vc-picker/generate';
import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
import type {
RangePickerBaseProps as RCRangePickerBaseProps,
RangePickerDateProps as RCRangePickerDateProps,
RangePickerTimeProps as RCRangePickerTimeProps,
} from '../../vc-picker/RangePicker';
import type { PickerMode, Locale as RcPickerLocale } from '../../vc-picker/interface';
import type { PickerMode } from '../../vc-picker/interface';
import PickerButton from '../PickerButton';
import PickerTag from '../PickerTag';
import type { TimePickerLocale } from '../../time-picker';
import generateSinglePicker from './generateSinglePicker';
import generateRangePicker from './generateRangePicker';
import type { SizeType } from '../../config-provider';
export * from './interface';
export const Components = { button: PickerButton, rangeItem: PickerTag };
@ -65,67 +55,7 @@ export function getTimeProps<DateType>(
};
}
type InjectDefaultProps<Props> = Omit<
Props,
| 'locale'
| 'generateConfig'
| 'prevIcon'
| 'nextIcon'
| 'superPrevIcon'
| 'superNextIcon'
| 'hideHeader'
| 'components'
> & {
locale?: PickerLocale;
size?: SizeType;
bordered?: boolean;
};
export type PickerLocale = {
lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
timePickerLocale: TimePickerLocale;
} & AdditionalPickerLocaleProps;
export type AdditionalPickerLocaleProps = {
dateFormat?: string;
dateTimeFormat?: string;
weekFormat?: string;
monthFormat?: string;
};
export type AdditionalPickerLocaleLangProps = {
placeholder: string;
yearPlaceholder?: string;
quarterPlaceholder?: string;
monthPlaceholder?: string;
weekPlaceholder?: string;
rangeYearPlaceholder?: [string, string];
rangeMonthPlaceholder?: [string, string];
rangeWeekPlaceholder?: [string, string];
rangePlaceholder?: [string, string];
};
// Picker Props
export type PickerBaseProps<DateType> = InjectDefaultProps<RCPickerBaseProps<DateType>>;
export type PickerDateProps<DateType> = InjectDefaultProps<RCPickerDateProps<DateType>>;
export type PickerTimeProps<DateType> = InjectDefaultProps<RCPickerTimeProps<DateType>>;
export type PickerProps<DateType> =
| PickerBaseProps<DateType>
| PickerDateProps<DateType>
| PickerTimeProps<DateType>;
// Range Picker Props
export type RangePickerBaseProps<DateType> = InjectDefaultProps<RCRangePickerBaseProps<DateType>>;
export type RangePickerDateProps<DateType> = InjectDefaultProps<RCRangePickerDateProps<DateType>>;
export type RangePickerTimeProps<DateType> = InjectDefaultProps<RCRangePickerTimeProps<DateType>>;
export type RangePickerProps<DateType> =
| RangePickerBaseProps<DateType>
| RangePickerDateProps<DateType>
| RangePickerTimeProps<DateType>;
function generatePicker<DateType, ExtraProps extends Record<string, any> = {}>(
function generatePicker<DateType, ExtraProps extends {} = {}>(
generateConfig: GenerateConfig<DateType>,
extraProps?: ExtraProps,
) {
@ -134,7 +64,7 @@ function generatePicker<DateType, ExtraProps extends Record<string, any> = {}>(
generateSinglePicker<DateType, ExtraProps>(generateConfig, extraProps);
// ======================== Range Picker ========================
const RangePicker = generateRangePicker<DateType>(generateConfig, extraProps);
const RangePicker = generateRangePicker<DateType, ExtraProps>(generateConfig, extraProps);
return {
DatePicker,

73
components/date-picker/generatePicker/interface.ts
Unescape View File

@ -0,0 +1,73 @@
import type {
PickerBaseProps as RCPickerBaseProps,
PickerDateProps as RCPickerDateProps,
PickerTimeProps as RCPickerTimeProps,
} from '../../vc-picker/Picker';
import type {
RangePickerBaseProps as RCRangePickerBaseProps,
RangePickerDateProps as RCRangePickerDateProps,
RangePickerTimeProps as RCRangePickerTimeProps,
} from '../../vc-picker/RangePicker';
import type { Locale as RcPickerLocale } from '../../vc-picker/interface';
import type { TimePickerLocale } from '../../time-picker';
import type { SizeType } from '../../config-provider';
type InjectDefaultProps<Props> = Omit<
Props,
| 'locale'
| 'generateConfig'
| 'prevIcon'
| 'nextIcon'
| 'superPrevIcon'
| 'superNextIcon'
| 'hideHeader'
| 'components'
> & {
locale?: PickerLocale;
size?: SizeType;
bordered?: boolean;
};
export type PickerLocale = {
lang: RcPickerLocale & AdditionalPickerLocaleLangProps;
timePickerLocale: TimePickerLocale;
} & AdditionalPickerLocaleProps;
export type AdditionalPickerLocaleProps = {
dateFormat?: string;
dateTimeFormat?: string;
weekFormat?: string;
monthFormat?: string;
};
export type AdditionalPickerLocaleLangProps = {
placeholder: string;
yearPlaceholder?: string;
quarterPlaceholder?: string;
monthPlaceholder?: string;
weekPlaceholder?: string;
rangeYearPlaceholder?: [string, string];
rangeMonthPlaceholder?: [string, string];
rangeWeekPlaceholder?: [string, string];
rangePlaceholder?: [string, string];
};
// Picker Props
export type PickerBaseProps<DateType> = InjectDefaultProps<RCPickerBaseProps<DateType>>;
export type PickerDateProps<DateType> = InjectDefaultProps<RCPickerDateProps<DateType>>;
export type PickerTimeProps<DateType> = InjectDefaultProps<RCPickerTimeProps<DateType>>;
export type PickerProps<DateType> =
| PickerBaseProps<DateType>
| PickerDateProps<DateType>
| PickerTimeProps<DateType>;
// Range Picker Props
export type RangePickerBaseProps<DateType> = InjectDefaultProps<RCRangePickerBaseProps<DateType>>;
export type RangePickerDateProps<DateType> = InjectDefaultProps<RCRangePickerDateProps<DateType>>;
export type RangePickerTimeProps<DateType> = InjectDefaultProps<RCRangePickerTimeProps<DateType>>;
export type RangePickerProps<DateType> =
| RangePickerBaseProps<DateType>
| RangePickerDateProps<DateType>
| RangePickerTimeProps<DateType>;

70
components/date-picker/generatePicker/props.ts
Unescape View File

@ -76,6 +76,44 @@ function commonProps<DateType>() {
};
}
export interface CommonProps<DateType> {
prefixCls?: string;
dropdownClassName?: string;
dropdownAlign?: AlignType;
popupStyle?: CSSProperties;
transitionName?: string;
placeholder?: string;
allowClear?: boolean;
autofocus?: boolean;
disabled?: boolean;
tabindex?: number;
open?: boolean;
defaultOpen?: boolean;
inputReadOnly?: boolean;
suffixIcon?: VueNode;
clearIcon?: VueNode;
prevIcon?: VueNode;
nextIcon?: VueNode;
superPrevIcon?: VueNode;
superNextIcon?: VueNode;
getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
panelRender?: (originPanel: VueNode) => VueNode;
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;
}
function datePickerProps<DateType>() {
return {
defaultPickerValue: { type: [String, Object] as PropType<DateType | string> },
@ -95,6 +133,19 @@ function datePickerProps<DateType>() {
};
}
export interface DatePickerProps<DateType> {
defaultPickerValue?: DateType | string;
defaultValue?: DateType | string;
value?: DateType | string;
disabledTime?: DisabledTime<DateType>;
format?: string | CustomFormat<DateType> | (string | CustomFormat<DateType>)[];
renderExtraFooter?: (mode: PanelMode) => VueNode;
showNow?: boolean;
monthCellRender?: MonthCellRender<DateType>;
// deprecated Please use `monthCellRender"` instead.',
monthCellContentRender?: MonthCellRender<DateType>;
}
function rangePickerProps<DateType>() {
return {
allowEmpty: { type: Array as unknown as PropType<[boolean, boolean]> },
@ -124,6 +175,25 @@ function rangePickerProps<DateType>() {
};
}
export interface RangePickerProps<DateType> {
allowEmpty?: [boolean, boolean];
dateRender?: RangeDateRender<DateType>;
defaultPickerValue?: [DateType, DateType] | [string, string];
defaultValue?: [DateType, DateType] | [string, string];
value?: [DateType, DateType];
disabledTime?: (date: EventValue<DateType>, type: RangeType) => DisabledTimes;
disabled?: [boolean, boolean];
format?: string;
renderExtraFooter?: () => VueNode;
separator?: string;
ranges?: Record<
string,
Exclude<RangeValue<DateType>, null> | (() => Exclude<RangeValue<DateType>, null>)
>;
placeholder?: [string, string];
mode?: [PanelMode, PanelMode];
}
export type ExtraDatePickerProps<DateType> = {
valueFormat?: string;
defaultPickerValue?: DateType | string;

86
components/time-picker/time-picker.tsx
Unescape View File

@ -6,6 +6,7 @@ import {
datePickerProps,
rangePickerProps,
} from '../date-picker/generatePicker/props';
import type { CommonProps, DatePickerProps } from '../date-picker/generatePicker/props';
import type { GenerateConfig } from '../vc-picker/generate';
import type { PanelMode, RangeValue } from '../vc-picker/interface';
import type { RangePickerSharedProps } from '../vc-picker/RangePicker';
@ -16,7 +17,7 @@ export interface TimePickerLocale {
rangePlaceholder?: [string, string];
}
const timpePickerProps = {
const timePickerProps = {
format: String,
showNow: { type: Boolean, default: undefined },
showHour: { type: Boolean, default: undefined },
@ -30,29 +31,46 @@ const timpePickerProps = {
popupClassName: String,
};
function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
export interface CommonTimePickerProps {
format?: string;
showNow?: boolean;
showHour?: boolean;
showMinute?: boolean;
showSecond?: boolean;
use12Hours?: boolean;
hourStep?: number;
minuteStep?: number;
secondStep?: number;
hideDisabledOptions?: boolean;
popupClassName?: string;
}
export type TimeRangePickerProps<T> = Omit<RangePickerTimeProps<T>, 'picker'> & {
popupClassName?: string;
valueFormat?: string;
};
export type TimePickerProps<DateType> = CommonProps<DateType> &
DatePickerProps<DateType> &
CommonTimePickerProps & {
addon?: () => void;
};
function createTimePicker<
DateType,
DTimePickerProps extends TimePickerProps<DateType> = TimePickerProps<DateType>,
DTimeRangePickerProps extends TimeRangePickerProps<DateType> = TimeRangePickerProps<DateType>,
>(generateConfig: GenerateConfig<DateType>) {
const DatePicker = generatePicker<DateType>(generateConfig, {
...timpePickerProps,
...timePickerProps,
order: { type: Boolean, default: true },
});
const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker as any;
type TimeRangePickerProps = Omit<RangePickerTimeProps<DateType>, 'picker'> & {
popupClassName?: string;
valueFormat?: string;
};
// type TimePickerProps = Omit<PickerTimeProps<DateType>, 'picker'> & {
// popupClassName?: string;
// valueFormat?: string;
// };
const TimePicker = defineComponent({
const TimePicker = defineComponent<DTimePickerProps>({
name: 'ATimePicker',
inheritAttrs: false,
props: {
...commonProps<DateType>(),
...datePickerProps<DateType>(),
...timpePickerProps,
addon: { type: Function },
} as any,
slot: ['addon', 'renderExtraFooter', 'suffixIcon', 'clearIcon'],
emits: ['change', 'openChange', 'focus', 'blur', 'ok', 'update:value', 'update:open'],
setup(props, { slots, expose, emit, attrs }) {
@ -78,7 +96,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
emit('update:open', open);
emit('openChange', open);
};
const onFoucs = () => {
const onFocus = () => {
emit('focus');
};
const onBlur = () => {
@ -100,7 +118,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
}
onChange={onChange}
onOpenChange={onOpenChange}
onFocus={onFoucs}
onFocus={onFocus}
onBlur={onBlur}
onOk={onOk}
v-slots={slots}
@ -110,15 +128,16 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
},
});
const TimeRangePicker = defineComponent<TimeRangePickerProps>({
TimePicker.props = {
...commonProps<DateType>(),
...datePickerProps<DateType>(),
...timePickerProps,
addon: { type: Function },
};
const TimeRangePicker = defineComponent<DTimeRangePickerProps>({
name: 'ATimeRangePicker',
inheritAttrs: false,
props: {
...commonProps<DateType>(),
...rangePickerProps<DateType>(),
...timpePickerProps,
order: { type: Boolean, default: true },
} as any,
slot: ['renderExtraFooter', 'suffixIcon', 'clearIcon'],
emits: [
'change',
@ -152,7 +171,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
emit('update:open', open);
emit('openChange', open);
};
const onFoucs = () => {
const onFocus = () => {
emit('focus');
};
const onBlur = () => {
@ -164,7 +183,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
) => {
emit('panelChange', values, modes);
};
const onOk = (values: RangeValue<string> | RangeValue<DateType>) => {
const onOk = (values: RangeValue<string | DateType>) => {
emit('ok', values);
};
const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (
@ -185,7 +204,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
ref={pickerRef}
onChange={onChange}
onOpenChange={onOpenChange}
onFocus={onFoucs}
onFocus={onFocus}
onBlur={onBlur}
onPanelChange={onPanelChange}
onOk={onOk}
@ -197,6 +216,13 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
},
});
TimeRangePicker.props = {
...commonProps<DateType>(),
...rangePickerProps<DateType>(),
...timePickerProps,
order: { type: Boolean, default: true },
};
return {
TimePicker,
TimeRangePicker,

Write Preview
Loading…
Cancel
Save