From 88d3fc18c633c4ecb8ee98ea6e1c0874f04b3c38 Mon Sep 17 00:00:00 2001 From: tanjinzhou <415800467@qq.com> Date: Wed, 22 Jul 2020 15:33:57 +0800 Subject: [PATCH] feat: update calendar --- antdv-demo | 2 +- components/calendar/Header.jsx | 38 ++++---- components/calendar/index.jsx | 93 ++++++++++--------- .../vc-calendar/src/mixin/CalendarMixin.js | 2 + examples/App.vue | 2 +- examples/index.js | 2 + 6 files changed, 74 insertions(+), 65 deletions(-) diff --git a/antdv-demo b/antdv-demo index aae9db4ae..e5569f281 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit aae9db4ae607a00f4c8482c159bfaf71fe982595 +Subproject commit e5569f28132b299accd77cbbbb7354f6308d25e5 diff --git a/components/calendar/Header.jsx b/components/calendar/Header.jsx index e69643bdb..d89db1133 100644 --- a/components/calendar/Header.jsx +++ b/components/calendar/Header.jsx @@ -1,3 +1,4 @@ +import { inject } from 'vue'; import Select from '../select'; import { Group, Button } from '../radio'; import PropTypes from '../_util/vue-types'; @@ -24,22 +25,26 @@ export const HeaderProps = { yearSelectOffset: PropTypes.number, yearSelectTotal: PropTypes.number, type: PropTypes.string, - // onValueChange: PropTypes.(value: moment.Moment) => void, - // onTypeChange: PropTypes.(type: string) => void, value: PropTypes.any, validRange: PropTypes.array, headerRender: PropTypes.func, + onValueChange: PropTypes.func, + onTypeChange: PropTypes.func, }; export default { + name: 'CalendarHeader', + inheritAttrs: false, props: initDefaultProps(HeaderProps, { yearSelectOffset: 10, yearSelectTotal: 20, }), - inject: { - configProvider: { default: () => ConfigConsumerProps }, + setup() { + return { + configProvider: inject('configProvider', ConfigConsumerProps), + }; }, - // private calenderHeaderNode: HTMLDivElement; + // private calendarHeaderNode: HTMLDivElement; methods: { getYearSelectElement(prefixCls, year) { const { yearSelectOffset, yearSelectTotal, locale = {}, fullscreen, validRange } = this; @@ -62,7 +67,7 @@ export default { class={`${prefixCls}-year-select`} onChange={this.onYearChange} value={String(year)} - getPopupContainer={() => this.getCalenderHeaderNode()} + getPopupContainer={() => this.calenderHeaderNode} > {options} @@ -95,7 +100,7 @@ export default { class={`${prefixCls}-month-select`} value={String(month)} onChange={this.onMonthChange} - getPopupContainer={() => this.getCalenderHeaderNode()} + getPopupContainer={() => this.calendarHeaderNode} > {options} @@ -128,16 +133,12 @@ export default { }, onInternalTypeChange(e) { - this.onTypeChange(e.target.value); + this.triggerTypeChange(e.target.value); }, - onTypeChange(val) { + triggerTypeChange(val) { this.$emit('typeChange', val); }, - - getCalenderHeaderNode() { - return this.$refs.calenderHeaderNode; - }, getMonthYearSelections(getPrefixCls) { const { prefixCls: customizePrefixCls, type, value } = this.$props; @@ -163,16 +164,19 @@ export default { ); }, - onValueChange() { + triggerValueChange() { this.$emit('valueChange', ...arguments); }, + saveCalendarHeaderNode(node) { + this.calendarHeaderNode = node; + }, headerRenderCustom(headerRender) { const { type, value } = this.$props; return headerRender({ value, type: type || 'month', - onChange: this.onValueChange, - onTypeChange: this.onTypeChange, + onChange: this.triggerValueChange, + onTypeChange: this.triggerTypeChange, }); }, }, @@ -186,7 +190,7 @@ export default { return headerRender ? ( this.headerRenderCustom(headerRender) ) : ( -
+
{yearReactNode} {monthReactNode} {typeSwitch} diff --git a/components/calendar/index.jsx b/components/calendar/index.jsx index fdeb43299..316aacc0d 100644 --- a/components/calendar/index.jsx +++ b/components/calendar/index.jsx @@ -1,6 +1,7 @@ +import { inject } from 'vue'; import PropTypes from '../_util/vue-types'; import BaseMixin from '../_util/BaseMixin'; -import { getOptionProps, hasProp, initDefaultProps, getListeners } from '../_util/props-util'; +import { getOptionProps, hasProp, initDefaultProps } from '../_util/props-util'; import * as moment from 'moment'; import FullCalendar from '../vc-calendar/src/FullCalendar'; import Header from './Header'; @@ -26,37 +27,38 @@ function isMomentArray(value) { export const CalendarMode = PropTypes.oneOf(['month', 'year']); export const CalendarProps = () => ({ + monthCellRender: PropTypes.func, + dateCellRender: PropTypes.func, + monthFullCellRender: PropTypes.func, + dateFullCellRender: PropTypes.func, prefixCls: PropTypes.string, value: TimeType, defaultValue: TimeType, mode: CalendarMode, fullscreen: PropTypes.bool, - // dateCellRender: PropTypes.func, - // monthCellRender: PropTypes.func, - // dateFullCellRender: PropTypes.func, - // monthFullCellRender: PropTypes.func, locale: PropTypes.object, - // onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void; - // onSelect?: (date?: moment.Moment) => void; disabledDate: PropTypes.func, validRange: PropTypes.custom(isMomentArray), headerRender: PropTypes.func, valueFormat: PropTypes.string, + onPanelChange: PropTypes.func, + onSelect: PropTypes.func, + onChange: PropTypes.func, + 'onUpdate:value': PropTypes.func, }); const Calendar = { name: 'ACalendar', + inheritAttrs: false, mixins: [BaseMixin], props: initDefaultProps(CalendarProps(), { locale: {}, fullscreen: true, }), - model: { - prop: 'value', - event: 'change', - }, - inject: { - configProvider: { default: () => ConfigConsumerProps }, + setup() { + return { + configProvider: inject('configProvider', ConfigConsumerProps), + }; }, data() { const { value, defaultValue, valueFormat } = this; @@ -88,17 +90,18 @@ const Calendar = { }, onHeaderTypeChange(mode) { this.sMode = mode; - this.onPanelChange(this.sValue, mode); + this.triggerPanelChange(this.sValue, mode); }, - onPanelChange(value, mode) { + triggerPanelChange(value, mode) { const val = this.valueFormat ? momentToString(value, this.valueFormat) : value; this.$emit('panelChange', val, mode); if (value !== this.sValue) { + this.$emit('update:value', val); this.$emit('change', val); } }, - onSelect(value) { + triggerSelect(value) { this.setValue(value, 'select'); }, setValue(value, way) { @@ -109,11 +112,11 @@ const Calendar = { } if (way === 'select') { if (prevValue && prevValue.month() !== value.month()) { - this.onPanelChange(value, mode); + this.triggerPanelChange(value, mode); } this.$emit('select', valueFormat ? momentToString(value, valueFormat) : value); } else if (way === 'changePanel') { - this.onPanelChange(value, mode); + this.triggerPanelChange(value, mode); } }, getDateRange(validRange, disabledDate) { @@ -141,8 +144,8 @@ const Calendar = { return result; }, monthCellRender2(value) { - const { _sPrefixCls, $scopedSlots } = this; - const monthCellRender = this.monthCellRender || $scopedSlots.monthCellRender || noop; + const { _sPrefixCls, $slots } = this; + const monthCellRender = this.monthCellRender || $slots.monthCellRender || noop; return (
{value.localeData().monthsShort(value)}
@@ -152,8 +155,8 @@ const Calendar = { }, dateCellRender2(value) { - const { _sPrefixCls, $scopedSlots } = this; - const dateCellRender = this.dateCellRender || $scopedSlots.dateCellRender || noop; + const { _sPrefixCls, $slots } = this; + const dateCellRender = this.dateCellRender || $slots.dateCellRender || noop; return (
{zerofixed(value.date())}
@@ -163,8 +166,8 @@ const Calendar = { }, renderCalendar(locale, localeCode) { - const props = getOptionProps(this); - const { sValue: value, sMode: mode, $scopedSlots } = this; + const props = { ...getOptionProps(this), ...this.$attrs }; + const { sValue: value, sMode: mode, $slots } = this; if (value && localeCode) { value.locale(localeCode); } @@ -173,8 +176,10 @@ const Calendar = { fullscreen, dateFullCellRender, monthFullCellRender, + class: className, + style, } = props; - const headerRender = this.headerRender || $scopedSlots.headerRender; + const headerRender = this.headerRender || $slots.headerRender; const getPrefixCls = this.configProvider.getPrefixCls; const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls); @@ -183,15 +188,15 @@ const Calendar = { // https://github.com/facebook/react/issues/12397 this._sPrefixCls = prefixCls; - let cls = ''; + let cls = className || ''; if (fullscreen) { cls += ` ${prefixCls}-fullscreen`; } const monthCellRender = - monthFullCellRender || $scopedSlots.monthFullCellRender || this.monthCellRender2; + monthFullCellRender || $slots.monthFullCellRender || this.monthCellRender2; const dateCellRender = - dateFullCellRender || $scopedSlots.dateFullCellRender || this.dateCellRender2; + dateFullCellRender || $slots.dateFullCellRender || this.dateCellRender2; let disabledDate = props.disabledDate; @@ -199,25 +204,21 @@ const Calendar = { disabledDate = this.getDateRange(props.validRange, disabledDate); } const fullCalendarProps = { - props: { - ...props, - Select: {}, - locale: locale.lang, - type: mode === 'year' ? 'month' : 'date', - prefixCls, - showHeader: false, - value, - monthCellRender, - dateCellRender, - disabledDate, - }, - on: { - ...getListeners(this), - select: this.onSelect, - }, + ...props, + ...this.$attrs, + Select: {}, + locale: locale.lang, + type: mode === 'year' ? 'month' : 'date', + prefixCls, + showHeader: false, + value, + monthCellRender, + dateCellRender, + disabledDate, + onSelect: this.triggerSelect, }; return ( -
+
); }, diff --git a/components/vc-calendar/src/mixin/CalendarMixin.js b/components/vc-calendar/src/mixin/CalendarMixin.js index 9a7f8fe94..4136333d8 100644 --- a/components/vc-calendar/src/mixin/CalendarMixin.js +++ b/components/vc-calendar/src/mixin/CalendarMixin.js @@ -34,6 +34,8 @@ const CalendarMixin = { }, data() { + this.onKeyDown = this.onKeyDown || noop; + this.onBlur = this.onBlur || noop; const props = this.$props; const sValue = props.value || props.defaultValue || getNowByCurrentStateValue(); return { diff --git a/examples/App.vue b/examples/App.vue index cd8a08974..cabc060e7 100644 --- a/examples/App.vue +++ b/examples/App.vue @@ -4,7 +4,7 @@