From cd04ba21cfc6de7100bdb8316422583eae4ba1da Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Wed, 21 Jul 2021 22:54:51 +0800 Subject: [PATCH] refactor: date props --- .../generatePicker/generateSinglePicker.tsx | 29 ++++---- .../date-picker/generatePicker/props.ts | 74 +++++++++++++++++++ components/vc-picker/Picker.tsx | 3 +- components/vc-picker/RangePicker.tsx | 20 +++-- .../vc-picker/panels/DatePanel/DateBody.tsx | 6 +- 5 files changed, 106 insertions(+), 26 deletions(-) create mode 100644 components/date-picker/generatePicker/props.ts diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index 9314a4805..ba399b81a 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -2,16 +2,22 @@ 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 { PickerMode } from '../../vc-picker/interface'; +import type { DisabledTime, PanelMode, 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 } from '.'; +import type { PickerProps, PickerDateProps, PickerTimeProps, PickerLocale } from '.'; import { getTimeProps, Components } from '.'; -import { defineComponent, ref } from 'vue'; +import { CSSProperties, defineComponent, PropType, 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'; export default function generatePicker(generateConfig: GenerateConfig) { type DatePickerProps = PickerProps; @@ -23,18 +29,11 @@ export default function generatePicker(generateConfig: GenerateConfig< return defineComponent({ name: displayName, inheritAttrs: false, - props: [ - 'size', - 'prefixCls', - 'direction', - 'getPopupContainer', - 'locale', - 'value', - 'showTime', - 'showNow', - ] as any, - slots: ['suffixIcon'], - emits: ['change', 'panelChange', 'ok', 'openChange', 'update:value'], + props: { + ...commonProps(), + } as any, + slots: ['suffixIcon', 'panelRender', 'dateRender'], + emits: ['change', 'openChange', 'focus', 'blur', 'panelChange', 'ok', 'update:value'], setup(props, { slots, expose, attrs, emit }) { const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject( 'picker', diff --git a/components/date-picker/generatePicker/props.ts b/components/date-picker/generatePicker/props.ts new file mode 100644 index 000000000..db60380ae --- /dev/null +++ b/components/date-picker/generatePicker/props.ts @@ -0,0 +1,74 @@ +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 { DateRender } from '../../vc-picker/panels/DatePanel/DateBody'; +import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel'; +import type { VueNode } from '../../_util/type'; + +function commonProps() { + return { + dropdownClassName: String, + dropdownAlign: { type: Object as PropType }, + popupStyle: { type: Object as PropType }, + transitionName: String, + placeholder: String, + allowClear: { type: Boolean, default: undefined }, + autofocus: { type: Boolean, default: undefined }, + disabled: { type: Boolean, default: undefined }, + tabindex: Number, + open: { type: Boolean, default: undefined }, + defaultOpen: { type: Boolean, default: undefined }, + /** Make input readOnly to avoid popup keyboard in mobile */ + inputReadOnly: { type: Boolean, default: undefined }, + // Value + // format: string | CustomFormat | (string | CustomFormat)[]; + // Render + // suffixIcon?: VueNode; + // clearIcon?: VueNode; + // prevIcon?: VueNode; + // nextIcon?: VueNode; + // superPrevIcon?: VueNode; + // superNextIcon?: VueNode; + getPopupContainer: { type: Function as PropType<(node: HTMLElement) => HTMLElement> }, + panelRender: { type: Function as PropType<(originPanel: VueNode) => VueNode> }, + // // Events + // onChange?: (value: DateType | null, dateString: string) => void; + // onOpenChange?: (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; + // WAI-ARIA + role: String, + name: String, + autocomplete: String, + direction: { type: String as PropType<'ltr' | 'rtl'> }, + showToday: { type: Boolean, default: undefined }, + showTime: { + type: [Boolean, Object] as PropType>, + default: undefined, + }, + locale: { type: Object as PropType }, + size: { type: String as PropType }, + bordered: { type: Boolean, default: undefined }, + dateRender: { type: Function as PropType> }, + disabledDate: { type: Function as PropType<(date: DateType) => boolean> }, + mode: { type: String as PropType }, + picker: { type: String as PropType }, + }; +} + +function datePickerProps() { + return { + defaultPickerValue: { type: [String, Object] as PropType }, + }; +} + +export { commonProps, datePickerProps }; diff --git a/components/vc-picker/Picker.tsx b/components/vc-picker/Picker.tsx index 3ce1492af..0bde1f5c6 100644 --- a/components/vc-picker/Picker.tsx +++ b/components/vc-picker/Picker.tsx @@ -36,6 +36,7 @@ import type { AlignType } from '../vc-align/interface'; import useMergedState from '../_util/hooks/useMergedState'; import { warning } from '../vc-util/warning'; import classNames from '../_util/classNames'; +import { SharedTimeProps } from './panels/TimePanel'; export type PickerRefConfig = { focus: () => void; @@ -91,7 +92,7 @@ export type PickerSharedProps = { autocomplete?: string; direction?: 'ltr' | 'rtl'; showToday?: boolean; - showTime?: boolean | undefined | object; + showTime?: boolean | SharedTimeProps; } & HtmlHTMLAttributes; type OmitPanelProps = Omit< diff --git a/components/vc-picker/RangePicker.tsx b/components/vc-picker/RangePicker.tsx index b71b4f786..163befbda 100644 --- a/components/vc-picker/RangePicker.tsx +++ b/components/vc-picker/RangePicker.tsx @@ -75,11 +75,11 @@ export type RangeInfo = { range: RangeType; }; -export type RangeDateRender = ( - currentDate: DateType, - today: DateType, - info: RangeInfo, -) => VueNode; +export type RangeDateRender = (props: { + current: DateType; + today: DateType; + info: RangeInfo; +}) => VueNode; export type RangePickerSharedProps = { id?: string; @@ -803,9 +803,13 @@ function RangerPicker() { let panelDateRender: DateRender | null = null; if (dateRender) { - panelDateRender = (date, today) => - dateRender(date, today, { - range: mergedActivePickerIndex ? 'end' : 'start', + panelDateRender = ({ current: date, today }) => + dateRender({ + current: date, + today, + info: { + range: mergedActivePickerIndex.value ? 'end' : 'start', + }, }); } diff --git a/components/vc-picker/panels/DatePanel/DateBody.tsx b/components/vc-picker/panels/DatePanel/DateBody.tsx index 4aa74105d..cd15b2dc8 100644 --- a/components/vc-picker/panels/DatePanel/DateBody.tsx +++ b/components/vc-picker/panels/DatePanel/DateBody.tsx @@ -13,7 +13,7 @@ import type { VueNode } from '../../../_util/type'; import { useInjectRange } from '../../RangeContext'; import useMergeProps from '../../hooks/useMergeProps'; -export type DateRender = (currentDate: DateType, today: DateType) => VueNode; +export type DateRender = (props: { current: DateType; today: DateType }) => VueNode; export type DateBodyPassProps = { dateRender?: DateRender; @@ -74,7 +74,9 @@ function DateBody(_props: DateBodyProps) { offsetCell: (date, offset) => generateConfig.addDate(date, offset), }); - const getCellNode = dateRender ? (date: DateType) => dateRender(date, today) : undefined; + const getCellNode = dateRender + ? (date: DateType) => dateRender({ current: date, today }) + : undefined; return (