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

refactor: calendar

pull/4499/head
tangjinzhou 2021-08-09 10:59:01 +08:00
parent 95acde2856
commit 16f0d49c84
5 changed files with 61 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/calendar/generateCalendar.tsx
View File

@ -115,13 +115,32 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
setup(props, { emit, slots, attrs }) { setup(props, { emit, slots, attrs }) {
const { prefixCls, direction } = useConfigInject('picker', props); const { prefixCls, direction } = useConfigInject('picker', props);
const calendarPrefixCls = computed(() => `${prefixCls.value}-calendar`); const calendarPrefixCls = computed(() => `${prefixCls.value}-calendar`);
const maybeToString = (date: DateType) => {
return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
};
const value = computed(() => {
if (props.value) {
return props.valueFormat
? (generateConfig.toDate(props.value, props.valueFormat) as DateType)
: (props.value as DateType);
}
return props.value as DateType;
});
const defaultValue = computed(() => {
if (props.defaultValue) {
return props.valueFormat
? (generateConfig.toDate(props.defaultValue, props.valueFormat) as DateType)
: (props.defaultValue as DateType);
}
return props.defaultValue as DateType;
});
// Value // Value
const [mergedValue, setMergedValue] = useMergedState( const [mergedValue, setMergedValue] = useMergedState(
() => props.value || generateConfig.getNow(), () => value.value || generateConfig.getNow(),
{ {
defaultValue: props.defaultValue, defaultValue: defaultValue.value,
value: toRef(props, 'value'), value: value,
}, },
); );
@ -144,7 +163,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
// ====================== Events ====================== // ====================== Events ======================
const triggerPanelChange = (date: DateType, newMode: CalendarMode) => { const triggerPanelChange = (date: DateType, newMode: CalendarMode) => {
emit('panelChange', date, newMode); emit('panelChange', maybeToString(date), newMode);
}; };
const triggerChange = (date: DateType) => { const triggerChange = (date: DateType) => {
@ -158,8 +177,9 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
) { ) {
triggerPanelChange(date, mergedMode.value); triggerPanelChange(date, mergedMode.value);
} }
emit('update:value', date); const val = maybeToString(date);
emit('change', date); emit('update:value', val);
emit('change', val);
} }
}; };
@ -170,7 +190,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
const onInternalSelect = (date: DateType) => { const onInternalSelect = (date: DateType) => {
triggerChange(date); triggerChange(date);
emit('select', date); emit('select', maybeToString(date));
}; };
// ====================== Locale ====================== // ====================== Locale ======================
const defaultLocale = computed(() => { const defaultLocale = computed(() => {

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

@ -73,10 +73,11 @@ export default function generateRangePicker<DateType>(
pickerRef.value?.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 onChange = (dates: [DateType, DateType], dateStrings: [string, string]) => {
const values = props.valueFormat const values = maybeToStrings(dates);
? generateConfig.toString(dates, props.valueFormat)
: dates;
emit('update:value', values); emit('update:value', values);
emit('change', values, dateStrings); emit('change', values, dateStrings);
}; };
@ -91,15 +92,11 @@ export default function generateRangePicker<DateType>(
emit('blur'); emit('blur');
}; };
const onPanelChange = (dates: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => { const onPanelChange = (dates: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => {
const values = props.valueFormat const values = maybeToStrings(dates);
? generateConfig.toString(dates, props.valueFormat)
: dates;
emit('panelChange', values, modes); emit('panelChange', values, modes);
}; };
const onOk = (dates: DateType) => { const onOk = (dates: DateType[]) => {
const value = props.valueFormat const value = maybeToStrings(dates);
? generateConfig.toString(dates, props.valueFormat)
: dates;
emit('ok', value); emit('ok', value);
}; };
const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = ( const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (
@ -107,9 +104,7 @@ export default function generateRangePicker<DateType>(
dateStrings: [string, string], dateStrings: [string, string],
info, info,
) => { ) => {
const values = props.valueFormat const values = maybeToStrings(dates);
? generateConfig.toString(dates, props.valueFormat)
: dates;
emit('calendarChange', values, dateStrings, info); emit('calendarChange', values, dateStrings, info);
}; };
const [contextLocale] = useLocaleReceiver('DatePicker', enUS); const [contextLocale] = useLocaleReceiver('DatePicker', enUS);

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

@ -82,8 +82,11 @@ export default function generatePicker<DateType>(
pickerRef.value?.blur(); pickerRef.value?.blur();
}, },
}); });
const maybeToString = (date: DateType) => {
return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
};
const onChange = (date: DateType, dateString: string) => { const onChange = (date: DateType, dateString: string) => {
const value = props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date; const value = maybeToString(date);
emit('update:value', value); emit('update:value', value);
emit('change', value, dateString); emit('change', value, dateString);
}; };
@ -98,11 +101,11 @@ export default function generatePicker<DateType>(
emit('blur'); emit('blur');
}; };
const onPanelChange = (date: DateType, mode: PanelMode | null) => { const onPanelChange = (date: DateType, mode: PanelMode | null) => {
const value = props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date; const value = maybeToString(date);
emit('panelChange', value, mode); emit('panelChange', value, mode);
}; };
const onOk = (date: DateType) => { const onOk = (date: DateType) => {
const value = props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date; const value = maybeToString(date);
emit('ok', value); emit('ok', value);
}; };

10
components/time-picker/time-picker.tsx
View File

@ -139,7 +139,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
}, },
}); });
const onChange = ( const onChange = (
values: [DateType, DateType] | [string, string], values: RangeValue<string> | RangeValue<DateType>,
dateStrings: [string, string], dateStrings: [string, string],
) => { ) => {
emit('update:value', values); emit('update:value', values);
@ -156,16 +156,16 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
emit('blur'); emit('blur');
}; };
const onPanelChange = ( const onPanelChange = (
values: string | RangeValue<DateType>, values: RangeValue<string> | RangeValue<DateType>,
modes: [PanelMode, PanelMode], modes: [PanelMode, PanelMode],
) => { ) => {
emit('panelChange', values, modes); emit('panelChange', values, modes);
}; };
const onOk = (value: DateType) => { const onOk = (values: RangeValue<string> | RangeValue<DateType>) => {
emit('ok', value); emit('ok', values);
}; };
const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = ( const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (
values: [DateType, DateType] | [string, string], values: RangeValue<string> | RangeValue<DateType>,
dateStrings: [string, string], dateStrings: [string, string],
info, info,
) => { ) => {

22
examples/App.vue
View File

@ -1,19 +1,27 @@
<template> <template>
<a-calendar v-model:value="value" @panelChange="onPanelChange" /> <a-alert :message="`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`" />
<a-calendar :value="date" @select="onSelect" @panelChange="onPanelChange" />
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref } from 'vue'; import { defineComponent, ref } from 'vue';
import { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
export default defineComponent({ export default defineComponent({
setup() { setup() {
const value = ref<Dayjs>(); const date = ref(dayjs('2017-01-25'));
const onPanelChange = (value: Dayjs, mode: string) => { const selectedValue = ref(dayjs('2017-01-25'));
console.log(value, mode);
};
const onSelect = (value: Dayjs) => {
date.value = value;
selectedValue.value = value;
};
const onPanelChange = (value: Dayjs) => {
date.value = value;
};
return { return {
value, date,
selectedValue,
onSelect,
onPanelChange, onPanelChange,
}; };
}, },