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

fix: date-picker

pull/4499/head
tangjinzhou 2021-08-03 13:44:31 +08:00
parent 55f0d33a6d
commit d5312db30b
7 changed files with 100 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
components/date-picker/generatePicker/generateRangePicker.tsx
View File

@ -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}
/>
);
};

48
components/date-picker/generatePicker/generateSinglePicker.tsx
View File

@ -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}
/>
);
};

3
components/date-picker/generatePicker/props.ts
View File

@ -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]> },
};
}

5
components/vc-picker/Picker.tsx
View File

@ -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}

1
components/vc-picker/PickerPanel.tsx
View File

@ -138,6 +138,7 @@ function PickerPanel<DateType>() {
showTime: [Boolean, Object],
showToday: Boolean,
renderExtraFooter: Function,
dateRender: Function,
hideHeader: Boolean,
onSelect: Function,
onChange: Function,

1
components/vc-picker/RangePicker.tsx
View File

@ -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' };

3
components/vc-picker/hooks/useTextValueMapping.ts
View File

@ -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];