fix: date-picker
parent
55f0d33a6d
commit
d5312db30b
|
@ -13,7 +13,9 @@ 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';
|
||||
import { PanelMode, RangeValue } from '../../vc-picker/interface';
|
||||
import { RangePickerSharedProps } from '../../vc-picker/RangePicker';
|
||||
import devWarning from '../../vc-util/devWarning';
|
||||
|
||||
export default function generateRangePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
const RangePicker = defineComponent<RangePickerProps<DateType>>({
|
||||
|
@ -35,8 +37,22 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
'renderExtraFooter',
|
||||
// 'separator',
|
||||
],
|
||||
emits: ['change', 'panelChange', 'ok', 'openChange', 'update:value', 'calendarChange'],
|
||||
emits: [
|
||||
'change',
|
||||
'panelChange',
|
||||
'ok',
|
||||
'openChange',
|
||||
'update:value',
|
||||
'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,
|
||||
|
@ -54,6 +70,24 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
emit('update:value', dates);
|
||||
emit('change', dates, dateStrings);
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
emit('openChange', open);
|
||||
};
|
||||
const onFoucs = () => {
|
||||
emit('focus');
|
||||
};
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
const onPanelChange = (values: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => {
|
||||
emit('panelChange', values, modes);
|
||||
};
|
||||
const onOk = (value: DateType) => {
|
||||
emit('ok', value);
|
||||
};
|
||||
const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (...args) => {
|
||||
emit('calendarChange', ...args);
|
||||
};
|
||||
const [contextLocale] = useLocaleReceiver('DatePicker', enUS);
|
||||
return () => {
|
||||
const locale = { ...contextLocale.value, ...props.locale };
|
||||
|
@ -64,6 +98,10 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
placeholder,
|
||||
suffixIcon = slots.suffixIcon?.(),
|
||||
picker = 'date',
|
||||
transitionName,
|
||||
allowClear = true,
|
||||
dateRender = slots.dateRender,
|
||||
renderExtraFooter = slots.renderExtraFooter,
|
||||
...restProps
|
||||
} = p;
|
||||
const { format, showTime } = p as any;
|
||||
|
@ -78,8 +116,8 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
const pre = prefixCls.value;
|
||||
return (
|
||||
<VCRangePicker<DateType>
|
||||
{...Omit(slots, ['default'])}
|
||||
{...restProps}
|
||||
dateRender={dateRender}
|
||||
renderExtraFooter={renderExtraFooter}
|
||||
separator={
|
||||
<span aria-label="to" class={`${pre}-separator`}>
|
||||
<SwapRightOutlined />
|
||||
|
@ -91,8 +129,9 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
suffixIcon || (picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
|
||||
}
|
||||
clearIcon={<CloseCircleFilled />}
|
||||
allowClear
|
||||
transitionName={`${rootPrefixCls.value}-slide-up`}
|
||||
allowClear={allowClear}
|
||||
transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
|
||||
{...restProps}
|
||||
{...additionalOverrideProps}
|
||||
picker={picker}
|
||||
class={classNames(
|
||||
|
@ -104,7 +143,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
)}
|
||||
locale={locale!.lang}
|
||||
prefixCls={pre}
|
||||
getPopupContainer={getPopupContainer.value}
|
||||
getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
|
||||
generateConfig={generateConfig}
|
||||
prevIcon={<span class={`${pre}-prev-icon`} />}
|
||||
nextIcon={<span class={`${pre}-next-icon`} />}
|
||||
|
@ -113,6 +152,12 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
|
|||
components={Components}
|
||||
direction={direction.value}
|
||||
onChange={onChange}
|
||||
onOpenChange={onOpenChange}
|
||||
onFocus={onFoucs}
|
||||
onBlur={onBlur}
|
||||
onPanelChange={onPanelChange}
|
||||
onOk={onOk}
|
||||
onCalendarChange={onCalendarChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -2,7 +2,7 @@ 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 { PanelMode, PickerMode } from '../../vc-picker/interface';
|
||||
import type { GenerateConfig } from '../../vc-picker/generate/index';
|
||||
import enUS from '../locale/en_US';
|
||||
import { getPlaceholder } from '../util';
|
||||
|
@ -13,7 +13,6 @@ import { defineComponent, ref } from 'vue';
|
|||
import useConfigInject from '../../_util/hooks/useConfigInject';
|
||||
import classNames from '../../_util/classNames';
|
||||
import { commonProps, datePickerProps } from './props';
|
||||
import Omit from 'omit.js';
|
||||
import devWarning from '../../vc-util/devWarning';
|
||||
|
||||
export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
|
||||
|
@ -45,10 +44,16 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
emits: ['change', 'openChange', 'focus', 'blur', 'panelChange', 'ok', 'update:value'],
|
||||
setup(props, { slots, expose, attrs, emit }) {
|
||||
devWarning(
|
||||
!(props as any).monthCellContentRender,
|
||||
!((props as any).monthCellContentRender || slots.monthCellContentRender),
|
||||
'DatePicker',
|
||||
'`monthCellContentRender` is deprecated. Please use `monthCellRender"` instead.',
|
||||
);
|
||||
|
||||
devWarning(
|
||||
!(attrs as any).getCalendarContainer,
|
||||
'DatePicker',
|
||||
'`getCalendarContainer` is deprecated. Please use `getPopupContainer"` instead.',
|
||||
);
|
||||
const { prefixCls, direction, getPopupContainer, size, rootPrefixCls } = useConfigInject(
|
||||
'picker',
|
||||
props,
|
||||
|
@ -66,6 +71,21 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
emit('update:value', date);
|
||||
emit('change', date, dateString);
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
emit('openChange', open);
|
||||
};
|
||||
const onFoucs = () => {
|
||||
emit('focus');
|
||||
};
|
||||
const onBlur = () => {
|
||||
emit('blur');
|
||||
};
|
||||
const onPanelChange = (value: DateType, mode: PanelMode | null) => {
|
||||
emit('panelChange', value, mode);
|
||||
};
|
||||
const onOk = (value: DateType) => {
|
||||
emit('ok', value);
|
||||
};
|
||||
|
||||
const [contextLocale] = useLocaleReceiver('DatePicker', enUS);
|
||||
return () => {
|
||||
|
@ -76,6 +96,13 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
placeholder,
|
||||
suffixIcon = slots.suffixIcon?.(),
|
||||
showToday = true,
|
||||
transitionName,
|
||||
allowClear = true,
|
||||
dateRender = slots.dateRender,
|
||||
renderExtraFooter = slots.renderExtraFooter,
|
||||
monthCellRender = slots.monthCellRender ||
|
||||
(props as any).monthCellContentRender ||
|
||||
slots.monthCellContentRender,
|
||||
...restProps
|
||||
} = p;
|
||||
const showTime = p.showTime === '' ? true : p.showTime;
|
||||
|
@ -103,7 +130,9 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
const pre = prefixCls.value;
|
||||
return (
|
||||
<RCPicker<DateType>
|
||||
{...Omit(slots, ['default'])}
|
||||
monthCellRender={props.monthCellRender}
|
||||
dateRender={dateRender}
|
||||
renderExtraFooter={renderExtraFooter}
|
||||
ref={pickerRef}
|
||||
placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
|
||||
suffixIcon={
|
||||
|
@ -111,8 +140,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
(mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />)
|
||||
}
|
||||
clearIcon={<CloseCircleFilled />}
|
||||
allowClear
|
||||
transitionName={`${rootPrefixCls.value}-slide-up`}
|
||||
allowClear={allowClear}
|
||||
transitionName={transitionName || `${rootPrefixCls.value}-slide-up`}
|
||||
{...restProps}
|
||||
{...additionalOverrideProps}
|
||||
showToday={showToday}
|
||||
|
@ -125,7 +154,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
attrs.class,
|
||||
)}
|
||||
prefixCls={pre}
|
||||
getPopupContainer={getPopupContainer.value}
|
||||
getPopupContainer={attrs.getCalendarContainer || getPopupContainer.value}
|
||||
generateConfig={generateConfig}
|
||||
prevIcon={<span class={`${pre}-prev-icon`} />}
|
||||
nextIcon={<span class={`${pre}-next-icon`} />}
|
||||
|
@ -134,6 +163,11 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
|
|||
components={Components}
|
||||
direction={direction.value}
|
||||
onChange={onChange}
|
||||
onOpenChange={onOpenChange}
|
||||
onFocus={onFoucs}
|
||||
onBlur={onBlur}
|
||||
onPanelChange={onPanelChange}
|
||||
onOk={onOk}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -104,7 +104,7 @@ function rangePickerProps<DateType>() {
|
|||
disabledTime: {
|
||||
type: Function as PropType<(date: EventValue<DateType>, type: RangeType) => DisabledTimes>,
|
||||
},
|
||||
disabled: { type: Array as unknown as PropType<[boolean, boolean]> },
|
||||
disabled: { type: [Boolean, Array] as unknown as PropType<boolean | [boolean, boolean]> },
|
||||
format: String,
|
||||
renderExtraFooter: { type: Function as PropType<() => VueNode> },
|
||||
separator: { type: Function as PropType<() => VueNode> },
|
||||
|
@ -117,6 +117,7 @@ function rangePickerProps<DateType>() {
|
|||
>,
|
||||
},
|
||||
placeholder: Array,
|
||||
mode: { type: Array as unknown as PropType<[PanelMode, PanelMode]> },
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -177,6 +177,8 @@ function Picker<DateType>() {
|
|||
'direction',
|
||||
'autocomplete',
|
||||
'showToday',
|
||||
'renderExtraFooter',
|
||||
'dateRender',
|
||||
] as any,
|
||||
// slots: [
|
||||
// 'suffixIcon',
|
||||
|
@ -207,7 +209,6 @@ function Picker<DateType>() {
|
|||
value: toRef(props, 'value'),
|
||||
defaultValue: props.defaultValue,
|
||||
});
|
||||
|
||||
const selectedValue = ref(mergedValue.value) as Ref<DateType>;
|
||||
const setSelectedValue = (val: DateType) => {
|
||||
selectedValue.value = val;
|
||||
|
@ -238,7 +239,6 @@ function Picker<DateType>() {
|
|||
generateConfig: toRef(props, 'generateConfig'),
|
||||
locale: toRef(props, 'locale'),
|
||||
});
|
||||
|
||||
const [text, triggerTextChange, resetText] = useTextValueMapping({
|
||||
valueTexts,
|
||||
onTextChange: newText => {
|
||||
|
@ -526,7 +526,6 @@ function Picker<DateType>() {
|
|||
// ============================ Return =============================
|
||||
|
||||
const popupPlacement = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
|
||||
|
||||
return (
|
||||
<PickerTrigger
|
||||
visible={mergedOpen.value}
|
||||
|
|
|
@ -138,6 +138,7 @@ function PickerPanel<DateType>() {
|
|||
showTime: [Boolean, Object],
|
||||
showToday: Boolean,
|
||||
renderExtraFooter: Function,
|
||||
dateRender: Function,
|
||||
hideHeader: Boolean,
|
||||
onSelect: Function,
|
||||
onChange: Function,
|
||||
|
|
|
@ -450,7 +450,6 @@ function RangerPicker<DateType>() {
|
|||
values && values[1]
|
||||
? formatValue(values[1], { generateConfig, locale, format: formatList.value[0] })
|
||||
: '';
|
||||
|
||||
if (onCalendarChange) {
|
||||
const info: RangeInfo = { range: sourceIndex === 0 ? 'start' : 'end' };
|
||||
|
||||
|
|
|
@ -22,7 +22,7 @@ export default function useTextValueMapping({
|
|||
|
||||
watch(
|
||||
() => [...valueTexts.value],
|
||||
(cur, pre) => {
|
||||
(cur, pre = []) => {
|
||||
if (
|
||||
cur.join('||') !== pre.join('||') &&
|
||||
valueTexts.value.every(valText => valText !== text.value)
|
||||
|
@ -30,6 +30,7 @@ export default function useTextValueMapping({
|
|||
resetText();
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
return [text, triggerTextChange, resetText];
|
||||
|
|
Loading…
Reference in New Issue