From 4be724092001b26f7e6c18260cfc0ca33aee9c03 Mon Sep 17 00:00:00 2001 From: Amour1688 Date: Wed, 11 Aug 2021 23:30:03 +0800 Subject: [PATCH] fix: date-pick type error --- .../generatePicker/generateRangePicker.tsx | 380 +++++++++--------- .../generatePicker/generateSinglePicker.tsx | 67 ++- .../date-picker/generatePicker/index.tsx | 19 +- 3 files changed, 214 insertions(+), 252 deletions(-) diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 5a6ce660c9..405bcf3160 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -7,214 +7,210 @@ import type { GenerateConfig } from '../../vc-picker/generate/index'; import enUS from '../locale/en_US'; import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver'; import { getRangePlaceholder } from '../util'; -import type { RangePickerProps } from '.'; import { getTimeProps, Components } from '.'; import { computed, defineComponent, ref } from 'vue'; import useConfigInject from '../../_util/hooks/useConfigInject'; import classNames from '../../_util/classNames'; -import type { ExtraRangePickerProps } from './props'; import { commonProps, rangePickerProps } from './props'; 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( +export default function generateRangePicker( generateConfig: GenerateConfig, - extraProps: Record = {}, + extraProps: ExtraProps, ) { - const RangePicker = defineComponent & ExtraRangePickerProps>( - { - name: 'ARangePicker', - inheritAttrs: false, - props: { - ...commonProps(), - ...rangePickerProps(), - ...extraProps, - } as any, - slots: [ - 'suffixIcon', - // 'clearIcon', - // 'prevIcon', - // 'nextIcon', - // 'superPrevIcon', - // 'superNextIcon', - // 'panelRender', - 'dateRender', - 'renderExtraFooter', - // 'separator', - ], - emits: [ - 'change', - 'panelChange', - 'ok', - 'openChange', - 'update:value', - 'update:open', - 'calendarChange', - 'focus', - 'blur', - ], - setup(props, { expose, slots, attrs, emit }) { - devWarning( - !(attrs as any).getCalendarContainer, - 'DatePicker', - '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.', - ); - const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject( - 'picker', - props, - ); - const pickerRef = ref(); - expose({ - focus: () => { - pickerRef.value?.focus(); - }, - blur: () => { - pickerRef.value?.blur(); - }, - }); - const maybeToStrings = (dates: DateType[]) => { - return props.valueFormat ? generateConfig.toString(dates, props.valueFormat) : dates; - }; - const onChange = (dates: [DateType, DateType], dateStrings: [string, string]) => { - const values = maybeToStrings(dates); - emit('update:value', values); - emit('change', values, dateStrings); - }; - const onOpenChange = (open: boolean) => { - emit('update:open', open); - emit('openChange', open); - }; - const onFoucs = () => { - emit('focus'); - }; - const onBlur = () => { - emit('blur'); - }; - const onPanelChange = (dates: RangeValue, modes: [PanelMode, PanelMode]) => { - const values = maybeToStrings(dates); - emit('panelChange', values, modes); - }; - const onOk = (dates: DateType[]) => { - const value = maybeToStrings(dates); - emit('ok', value); - }; - const onCalendarChange: RangePickerSharedProps['onCalendarChange'] = ( - dates: [DateType, DateType], - dateStrings: [string, string], - info, - ) => { - const values = maybeToStrings(dates); - emit('calendarChange', values, dateStrings, info); - }; - const [contextLocale] = useLocaleReceiver('DatePicker', enUS); + const RangePicker = defineComponent({ + name: 'ARangePicker', + inheritAttrs: false, + props: { + ...commonProps(), + ...rangePickerProps(), + ...extraProps, + }, + slots: [ + 'suffixIcon', + // 'clearIcon', + // 'prevIcon', + // 'nextIcon', + // 'superPrevIcon', + // 'superNextIcon', + // 'panelRender', + 'dateRender', + 'renderExtraFooter', + // 'separator', + ], + emits: [ + 'change', + 'panelChange', + 'ok', + 'openChange', + 'update:value', + 'update:open', + 'calendarChange', + 'focus', + 'blur', + ], + setup(props, { expose, slots, attrs, emit }) { + devWarning( + !attrs.getCalendarContainer, + 'DatePicker', + '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.', + ); + const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject( + 'picker', + props, + ); + const pickerRef = ref(); + expose({ + focus: () => { + pickerRef.value?.focus(); + }, + blur: () => { + pickerRef.value?.blur(); + }, + }); + const maybeToStrings = (dates: DateType[]) => { + return props.valueFormat ? generateConfig.toString(dates, props.valueFormat) : dates; + }; + const onChange = (dates: [DateType, DateType], dateStrings: [string, string]) => { + const values = maybeToStrings(dates); + emit('update:value', values); + emit('change', values, dateStrings); + }; + const onOpenChange = (open: boolean) => { + emit('update:open', open); + emit('openChange', open); + }; + const onFocus = () => { + emit('focus'); + }; + const onBlur = () => { + emit('blur'); + }; + const onPanelChange = (dates: RangeValue, modes: [PanelMode, PanelMode]) => { + const values = maybeToStrings(dates); + emit('panelChange', values, modes); + }; + const onOk = (dates: DateType[]) => { + const value = maybeToStrings(dates); + emit('ok', value); + }; + const onCalendarChange: RangePickerSharedProps['onCalendarChange'] = ( + dates: [DateType, DateType], + dateStrings: [string, string], + info, + ) => { + const values = maybeToStrings(dates); + emit('calendarChange', values, dateStrings, info); + }; + const [contextLocale] = useLocaleReceiver('DatePicker', enUS); - const value = computed(() => { - if (props.value) { - return props.valueFormat - ? generateConfig.toDate(props.value, props.valueFormat) - : props.value; - } - return props.value; - }); - const defaultValue = computed(() => { - if (props.defaultValue) { - return props.valueFormat - ? generateConfig.toDate(props.defaultValue, props.valueFormat) - : props.defaultValue; - } - return props.defaultValue; - }); - const defaultPickerValue = computed(() => { - if (props.defaultPickerValue) { - return props.valueFormat - ? generateConfig.toDate(props.defaultPickerValue, props.valueFormat) - : props.defaultPickerValue; - } - return props.defaultPickerValue; - }); - return () => { - const locale = { ...contextLocale.value, ...props.locale }; - const p = { ...props, ...attrs } as RangePickerProps; - const { - prefixCls: customizePrefixCls, - bordered = true, - placeholder, - suffixIcon = slots.suffixIcon?.(), - picker = 'date', - transitionName, - allowClear = true, - dateRender = slots.dateRender, - renderExtraFooter = slots.renderExtraFooter, - separator = slots.separator?.(), - clearIcon = slots.clearIcon?.(), - ...restProps - } = p; - const { format, showTime } = p as any; + const value = computed(() => { + if (props.value) { + return props.valueFormat + ? generateConfig.toDate(props.value, props.valueFormat) + : props.value; + } + return props.value; + }); + const defaultValue = computed(() => { + if (props.defaultValue) { + return props.valueFormat + ? generateConfig.toDate(props.defaultValue, props.valueFormat) + : props.defaultValue; + } + return props.defaultValue; + }); + const defaultPickerValue = computed(() => { + if (props.defaultPickerValue) { + return props.valueFormat + ? generateConfig.toDate(props.defaultPickerValue, props.valueFormat) + : props.defaultPickerValue; + } + return props.defaultPickerValue; + }); + return () => { + const locale = { ...contextLocale.value, ...props.locale }; + const p = { ...props, ...attrs }; + const { + prefixCls: customizePrefixCls, + bordered = true, + placeholder, + suffixIcon = slots.suffixIcon?.(), + picker = 'date', + transitionName, + allowClear = true, + dateRender = slots.dateRender, + renderExtraFooter = slots.renderExtraFooter, + separator = slots.separator?.(), + clearIcon = slots.clearIcon?.(), + ...restProps + } = p; + const { format, showTime } = p as any; - let additionalOverrideProps: any = {}; + let additionalOverrideProps: any = {}; - additionalOverrideProps = { - ...additionalOverrideProps, - ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}), - ...(picker === 'time' ? getTimeProps({ format, ...restProps, picker }) : {}), - }; - const pre = prefixCls.value; - return ( - - - - ) - } - ref={pickerRef} - placeholder={getRangePlaceholder(picker, locale, placeholder)} - suffixIcon={ - suffixIcon || (picker === 'time' ? : ) - } - clearIcon={clearIcon || } - allowClear={allowClear} - transitionName={transitionName || `${rootPrefixCls.value}-slide-up`} - {...restProps} - {...additionalOverrideProps} - value={value.value} - defaultValue={defaultValue.value} - defaultPickerValue={defaultPickerValue.value} - picker={picker} - class={classNames( - { - [`${pre}-${size.value}`]: size.value, - [`${pre}-borderless`]: !bordered, - }, - attrs.class, - )} - locale={locale!.lang} - prefixCls={pre} - getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value} - generateConfig={generateConfig} - prevIcon={} - nextIcon={} - superPrevIcon={} - superNextIcon={} - components={Components} - direction={direction.value} - onChange={onChange} - onOpenChange={onOpenChange} - onFocus={onFoucs} - onBlur={onBlur} - onPanelChange={onPanelChange} - onOk={onOk} - onCalendarChange={onCalendarChange} - /> - ); + additionalOverrideProps = { + ...additionalOverrideProps, + ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}), + ...(picker === 'time' ? getTimeProps({ format, ...restProps, picker }) : {}), }; - }, + const pre = prefixCls.value; + return ( + + + + ) + } + ref={pickerRef} + placeholder={getRangePlaceholder(picker, locale, placeholder as [string, string])} + suffixIcon={ + suffixIcon || (picker === 'time' ? : ) + } + clearIcon={clearIcon || } + allowClear={allowClear} + transitionName={transitionName || `${rootPrefixCls.value}-slide-up`} + {...restProps} + {...additionalOverrideProps} + value={value.value} + defaultValue={defaultValue.value} + defaultPickerValue={defaultPickerValue.value} + picker={picker} + class={classNames( + { + [`${pre}-${size.value}`]: size.value, + [`${pre}-borderless`]: !bordered, + }, + attrs.class, + )} + locale={locale!.lang} + prefixCls={pre} + getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value} + generateConfig={generateConfig} + prevIcon={} + nextIcon={} + superPrevIcon={} + superNextIcon={} + components={Components} + direction={direction.value} + onChange={onChange} + onOpenChange={onOpenChange} + onFocus={onFocus} + onBlur={onBlur} + onPanelChange={onPanelChange} + onOk={onOk} + onCalendarChange={onCalendarChange} + /> + ); + }; }, - ); + }); return RangePicker; } diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index c80f3ec4e9..a8cf7baba0 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -7,34 +7,26 @@ import type { GenerateConfig } from '../../vc-picker/generate/index'; import enUS from '../locale/en_US'; import { getPlaceholder } from '../util'; import { useLocaleReceiver } from '../../locale-provider/LocaleReceiver'; -import type { PickerProps, PickerDateProps, PickerTimeProps } from '.'; import { getTimeProps, Components } from '.'; -import type { DefineComponent } from 'vue'; import { computed, defineComponent, ref } from 'vue'; import useConfigInject from '../../_util/hooks/useConfigInject'; import classNames from '../../_util/classNames'; -import type { ExtraDatePickerProps } from './props'; import { commonProps, datePickerProps } from './props'; import devWarning from '../../vc-util/devWarning'; -export default function generateSinglePicker( +export default function generateSinglePicker( generateConfig: GenerateConfig, - extraProps: Record = {}, + extraProps: ExtraProps, ) { - type DatePickerProps = PickerProps & ExtraDatePickerProps; - - function getPicker( - picker?: PickerMode, - displayName?: string, - ): DefineComponent { - return defineComponent({ + function getPicker(picker?: PickerMode, displayName?: string) { + return defineComponent({ name: displayName, inheritAttrs: false, props: { ...commonProps(), ...datePickerProps(), ...extraProps, - } as any, + }, slots: [ 'suffixIcon', // 'clearIcon', @@ -59,13 +51,13 @@ export default function generateSinglePicker( ], setup(props, { slots, expose, attrs, emit }) { devWarning( - !((props as any).monthCellContentRender || slots.monthCellContentRender), + !(props.monthCellContentRender || slots.monthCellContentRender), 'DatePicker', '`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.', ); devWarning( - !(attrs as any).getCalendarContainer, + !attrs.getCalendarContainer, 'DatePicker', '`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.', ); @@ -94,12 +86,6 @@ export default function generateSinglePicker( emit('update:open', open); emit('openChange', open); }; - const onFoucs = () => { - emit('focus'); - }; - const onBlur = () => { - emit('blur'); - }; const onPanelChange = (date: DateType, mode: PanelMode | null) => { const value = maybeToString(date); emit('panelChange', value, mode); @@ -114,7 +100,7 @@ export default function generateSinglePicker( const value = computed(() => { if (props.value) { return props.valueFormat - ? generateConfig.toDate(props.value, props.valueFormat) + ? generateConfig.toDate(props.value as string | DateType, props.valueFormat) : props.value; } return props.value; @@ -122,7 +108,7 @@ export default function generateSinglePicker( const defaultValue = computed(() => { if (props.defaultValue) { return props.valueFormat - ? generateConfig.toDate(props.defaultValue, props.valueFormat) + ? generateConfig.toDate(props.defaultValue as string | DateType, props.valueFormat) : props.defaultValue; } return props.defaultValue; @@ -130,7 +116,10 @@ export default function generateSinglePicker( const defaultPickerValue = computed(() => { if (props.defaultPickerValue) { return props.valueFormat - ? generateConfig.toDate(props.defaultPickerValue, props.valueFormat) + ? generateConfig.toDate( + props.defaultPickerValue as string | DateType, + props.valueFormat, + ) : props.defaultPickerValue; } return props.defaultPickerValue; @@ -138,7 +127,7 @@ export default function generateSinglePicker( return () => { const locale = { ...contextLocale.value, ...props.locale }; - const p = { ...props, ...attrs } as InnerPickerProps; + const p = { ...props, ...attrs }; const { bordered = true, placeholder, @@ -217,26 +206,23 @@ export default function generateSinglePicker( direction={direction.value} onChange={onChange} onOpenChange={onOpenChange} - onFocus={onFoucs} - onBlur={onBlur} + onFocus={props.onFocus} + onBlur={props.onBlur} onPanelChange={onPanelChange} onOk={onOk} /> ); }; }, - }) as unknown as DefineComponent; + }); } - const DatePicker = getPicker(undefined, 'ADatePicker'); - const WeekPicker = getPicker, 'picker'>>('week', 'AWeekPicker'); - const MonthPicker = getPicker, 'picker'>>('month', 'AMonthPicker'); - const YearPicker = getPicker, 'picker'>>('year', 'AYearPicker'); - const TimePicker = getPicker, 'picker'>>('time', 'TimePicker'); // 给独立组件 TimePicker 使用，此处名称不用更改 - const QuarterPicker = getPicker, 'picker'>>( - 'quarter', - 'AQuarterPicker', - ); + const DatePicker = getPicker(undefined, 'ADatePicker'); + const WeekPicker = getPicker('week', 'AWeekPicker'); + const MonthPicker = getPicker('month', 'AMonthPicker'); + const YearPicker = getPicker('year', 'AYearPicker'); + const TimePicker = getPicker('time', 'TimePicker'); // 给独立组件 TimePicker 使用，此处名称不用更改 + const QuarterPicker = getPicker('quarter', 'AQuarterPicker'); return { DatePicker, @@ -245,12 +231,5 @@ export default function generateSinglePicker( YearPicker, TimePicker, QuarterPicker, - } as unknown as { - DatePicker: DefineComponent; - WeekPicker: DefineComponent, 'picker'>>; - MonthPicker: DefineComponent, 'picker'>>; - YearPicker: DefineComponent, 'picker'>>; - TimePicker: DefineComponent, 'picker'>>; - QuarterPicker: DefineComponent, 'picker'>>; }; } diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx index 089b63963f..43f168631e 100644 --- a/components/date-picker/generatePicker/index.tsx +++ b/components/date-picker/generatePicker/index.tsx @@ -17,8 +17,6 @@ import type { TimePickerLocale } from '../../time-picker'; import generateSinglePicker from './generateSinglePicker'; import generateRangePicker from './generateRangePicker'; import type { SizeType } from '../../config-provider'; -import type { ExtraDatePickerProps, ExtraRangePickerProps } from './props'; -import type { DefineComponent } from 'vue'; export const Components = { button: PickerButton, rangeItem: PickerTag }; @@ -127,20 +125,17 @@ export type RangePickerProps = | RangePickerDateProps | RangePickerTimeProps; -function generatePicker( +function generatePicker = {}>( generateConfig: GenerateConfig, - extraProps: Record = {}, + extraProps?: ExtraProps, ) { - type DatePickerProps = PickerProps & ExtraDatePickerProps; // =========================== Picker =========================== const { DatePicker, WeekPicker, MonthPicker, YearPicker, TimePicker, QuarterPicker } = - generateSinglePicker(generateConfig, extraProps); + generateSinglePicker(generateConfig, extraProps); // ======================== Range Picker ======================== const RangePicker = generateRangePicker(generateConfig, extraProps); - // 类型过于复杂，使用 as 避免 TS7056 错误 - // error TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed. return { DatePicker, WeekPicker, @@ -149,14 +144,6 @@ function generatePicker( TimePicker, QuarterPicker, RangePicker, - } as unknown as { - DatePicker: DefineComponent; - WeekPicker: DefineComponent, 'picker'>>; - MonthPicker: DefineComponent, 'picker'>>; - YearPicker: DefineComponent, 'picker'>>; - TimePicker: DefineComponent, 'picker'>>; - QuarterPicker: DefineComponent, 'picker'>>; - RangePicker: DefineComponent & ExtraRangePickerProps>; }; }