From 55f0d33a6d6ed31edba9ac5a4e8f09a486fb55de Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Tue, 3 Aug 2021 09:29:10 +0800 Subject: [PATCH] fix: date-picker props --- .../generatePicker/generateRangePicker.tsx | 21 +++++++- .../generatePicker/generateSinglePicker.tsx | 35 ++++++++---- .../date-picker/generatePicker/props.ts | 53 ++++++++++++++++++- components/vc-picker/Picker.tsx | 18 +++---- components/vc-picker/interface.ts | 9 ++-- .../vc-picker/panels/MonthPanel/MonthBody.tsx | 4 +- 6 files changed, 111 insertions(+), 29 deletions(-) diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index be96dd57c..28739f1f4 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -12,13 +12,29 @@ import { getTimeProps, Components } from '.'; import { defineComponent, ref } from 'vue'; import useConfigInject from '../../_util/hooks/useConfigInject'; import classNames from '../../_util/classNames'; +import { commonProps, rangePickerProps } from './props'; +import Omit from 'omit.js'; export default function generateRangePicker(generateConfig: GenerateConfig) { const RangePicker = defineComponent>({ name: 'ARangePicker', inheritAttrs: false, - props: ['size', 'prefixCls', 'direction', 'getPopupContainer', 'locale', 'value'] as any, - slots: ['suffixIcon'], + props: { + ...commonProps(), + ...rangePickerProps(), + } as any, + slots: [ + 'suffixIcon', + // 'clearIcon', + // 'prevIcon', + // 'nextIcon', + // 'superPrevIcon', + // 'superNextIcon', + // 'panelRender', + 'dateRender', + 'renderExtraFooter', + // 'separator', + ], emits: ['change', 'panelChange', 'ok', 'openChange', 'update:value', 'calendarChange'], setup(props, { expose, slots, attrs, emit }) { const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject( @@ -62,6 +78,7 @@ export default function generateRangePicker(generateConfig: GenerateCo const pre = prefixCls.value; return ( + {...Omit(slots, ['default'])} {...restProps} separator={ diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index ba399b81a..0b1d9c6cf 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -2,22 +2,19 @@ import CalendarOutlined from '@ant-design/icons-vue/CalendarOutlined'; import ClockCircleOutlined from '@ant-design/icons-vue/ClockCircleOutlined'; import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled'; import RCPicker from '../../vc-picker'; -import type { DisabledTime, PanelMode, PickerMode } from '../../vc-picker/interface'; +import type { PickerMode } from '../../vc-picker/interface'; 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, PickerLocale } from '.'; +import type { PickerProps, PickerDateProps, PickerTimeProps } from '.'; import { getTimeProps, Components } from '.'; -import { CSSProperties, defineComponent, PropType, ref } from 'vue'; +import { defineComponent, ref } from 'vue'; import useConfigInject from '../../_util/hooks/useConfigInject'; import classNames from '../../_util/classNames'; -import { AlignType } from '../../vc-align/interface'; -import { VueNode } from '../../_util/type'; -import { SharedTimeProps } from '../../vc-picker/panels/TimePanel'; -import { SizeType } from '../../config-provider'; -import { DateRender } from '../../vc-picker/panels/DatePanel/DateBody'; -import { commonProps } from './props'; +import { commonProps, datePickerProps } from './props'; +import Omit from 'omit.js'; +import devWarning from '../../vc-util/devWarning'; export default function generatePicker(generateConfig: GenerateConfig) { type DatePickerProps = PickerProps; @@ -31,10 +28,27 @@ export default function generatePicker(generateConfig: GenerateConfig< inheritAttrs: false, props: { ...commonProps(), + ...datePickerProps(), } as any, - slots: ['suffixIcon', 'panelRender', 'dateRender'], + slots: [ + 'suffixIcon', + // 'clearIcon', + // 'prevIcon', + // 'nextIcon', + // 'superPrevIcon', + // 'superNextIcon', + // 'panelRender', + 'dateRender', + 'renderExtraFooter', + 'monthCellRender', + ], emits: ['change', 'openChange', 'focus', 'blur', 'panelChange', 'ok', 'update:value'], setup(props, { slots, expose, attrs, emit }) { + devWarning( + !(props as any).monthCellContentRender, + 'DatePicker', + '`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.', + ); const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject( 'picker', props, @@ -89,6 +103,7 @@ export default function generatePicker(generateConfig: GenerateConfig< const pre = prefixCls.value; return ( + {...Omit(slots, ['default'])} ref={pickerRef} placeholder={getPlaceholder(mergedPicker, locale, placeholder)} suffixIcon={ diff --git a/components/date-picker/generatePicker/props.ts b/components/date-picker/generatePicker/props.ts index db60380ae..3fed1d1f9 100644 --- a/components/date-picker/generatePicker/props.ts +++ b/components/date-picker/generatePicker/props.ts @@ -2,9 +2,19 @@ import type { CSSProperties, PropType } from 'vue'; import type { PickerLocale } from '.'; import type { SizeType } from '../../config-provider'; import type { AlignType } from '../../vc-align/interface'; -import type { PanelMode, PickerMode } from '../../vc-picker/interface'; +import type { + 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, RangeType } from '../../vc-picker/RangePicker'; import type { VueNode } from '../../_util/type'; function commonProps() { @@ -68,7 +78,46 @@ function commonProps() { function datePickerProps() { return { defaultPickerValue: { type: [String, Object] as PropType }, + defaultValue: { type: [String, Object] as PropType }, + value: { type: [String, Object] as PropType }, + disabledTime: { type: Function as PropType> }, + format: { + type: [String, Function, Array] as PropType< + string | CustomFormat | (string | CustomFormat)[] + >, + }, + renderExtraFooter: { type: Function as PropType<(mode: PanelMode) => VueNode> }, + showNow: { type: Boolean, default: undefined }, + monthCellRender: { type: Function as PropType> }, + // deprecated Please use `monthCellRender"` instead.', + monthCellContentRender: { type: Function as PropType> }, }; } -export { commonProps, datePickerProps }; +function rangePickerProps() { + return { + allowEmpty: { type: Array as unknown as PropType<[boolean, boolean]> }, + dateRender: { type: Function as PropType> }, + defaultPickerValue: { type: Array as unknown as PropType<[DateType, DateType]> }, + defaultValue: { type: Array as unknown as PropType<[DateType, DateType]> }, + value: { type: Array as unknown as PropType<[DateType, DateType]> }, + disabledTime: { + type: Function as PropType<(date: EventValue, type: RangeType) => DisabledTimes>, + }, + disabled: { type: Array as unknown as PropType<[boolean, boolean]> }, + format: String, + renderExtraFooter: { type: Function as PropType<() => VueNode> }, + separator: { type: Function as PropType<() => VueNode> }, + ranges: { + type: Object as PropType< + Record< + string, + Exclude, null> | (() => Exclude, null>) + > + >, + }, + placeholder: Array, + }; +} + +export { commonProps, datePickerProps, rangePickerProps }; diff --git a/components/vc-picker/Picker.tsx b/components/vc-picker/Picker.tsx index 0bde1f5c6..397bb0018 100644 --- a/components/vc-picker/Picker.tsx +++ b/components/vc-picker/Picker.tsx @@ -178,15 +178,15 @@ function Picker() { 'autocomplete', 'showToday', ] as any, - slots: [ - 'suffixIcon', - 'clearIcon', - 'prevIcon', - 'nextIcon', - 'superPrevIcon', - 'superNextIcon', - 'panelRender', - ], + // slots: [ + // 'suffixIcon', + // 'clearIcon', + // 'prevIcon', + // 'nextIcon', + // 'superPrevIcon', + // 'superNextIcon', + // 'panelRender', + // ], setup(props, { attrs, expose }) { const inputRef = ref(null); const needConfirmButton = computed( diff --git a/components/vc-picker/interface.ts b/components/vc-picker/interface.ts index 0390d4744..fc710d812 100644 --- a/components/vc-picker/interface.ts +++ b/components/vc-picker/interface.ts @@ -1,4 +1,5 @@ import type { Ref } from 'vue'; +import type { VueNode } from '../_util/type'; import type { GenerateConfig } from './generate'; export type Locale = { @@ -65,10 +66,10 @@ export type PanelSharedProps = { locale: Locale; disabledDate?: (date: DateType) => boolean; - // prevIcon?: React.ReactNode; - // nextIcon?: React.ReactNode; - // superPrevIcon?: React.ReactNode; - // superNextIcon?: React.ReactNode; + prevIcon?: VueNode; + nextIcon?: VueNode; + superPrevIcon?: VueNode; + superNextIcon?: VueNode; // /** // * Typescript can not handle generic type so we can not use `forwardRef` here. diff --git a/components/vc-picker/panels/MonthPanel/MonthBody.tsx b/components/vc-picker/panels/MonthPanel/MonthBody.tsx index 18e2dfb25..66b25fb6e 100644 --- a/components/vc-picker/panels/MonthPanel/MonthBody.tsx +++ b/components/vc-picker/panels/MonthPanel/MonthBody.tsx @@ -10,7 +10,7 @@ import useMergeProps from '../../hooks/useMergeProps'; export const MONTH_COL_COUNT = 3; const MONTH_ROW_COUNT = 4; -export type MonthCellRender = (currentDate: DateType, locale: Locale) => VueNode; +export type MonthCellRender = (obj: { current: DateType; locale: Locale }) => VueNode; export type MonthBodyProps = { prefixCls: string; @@ -51,7 +51,7 @@ function MonthBody(_props: MonthBodyProps) { const baseMonth = generateConfig.setMonth(viewDate, 0); const getCellNode = monthCellRender - ? (date: DateType) => monthCellRender(date, locale) + ? (date: DateType) => monthCellRender({ current: date, locale }) : undefined; return (