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

feat: update vc-calendar

pull/2682/head
tangjinzhou 2020-07-21 22:29:54 +08:00
parent f6e2e54f65
commit 02cf80bb18
13 changed files with 179 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/calendar/index.jsx
View File

@ -8,7 +8,6 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
import interopDefault from '../_util/interopDefault'; import interopDefault from '../_util/interopDefault';
import { ConfigConsumerProps } from '../config-provider'; import { ConfigConsumerProps } from '../config-provider';
import enUS from './locale/en_US'; import enUS from './locale/en_US';
import Base from '../base';
import { checkValidate, stringToMoment, momentToString, TimeType } from '../_util/moment-util'; import { checkValidate, stringToMoment, momentToString, TimeType } from '../_util/moment-util';
function noop() { function noop() {
@ -248,9 +247,8 @@ const Calendar = {
}; };
/* istanbul ignore next */ /* istanbul ignore next */
Calendar.install = function(Vue) { Calendar.install = function(app) {
Vue.use(Base); app.component(Calendar.name, Calendar);
Vue.component(Calendar.name, Calendar);
}; };
export { HeaderProps } from './Header'; export { HeaderProps } from './Header';
export default Calendar; export default Calendar;

4
components/vc-calendar/index.js
View File

@ -1,8 +1,4 @@
// based on rc-calendar 9.15.10 // based on rc-calendar 9.15.10
import Vue from 'vue';
import ref from 'vue-ref';
import Calendar from './src/'; import Calendar from './src/';
Vue.use(ref, { name: 'ant-ref' });
export default Calendar; export default Calendar;

23
components/vc-calendar/src/Calendar.jsx
View File

@ -23,6 +23,7 @@ const getMomentObjectIfValid = date => {
const Calendar = { const Calendar = {
name: 'Calendar', name: 'Calendar',
inheritAttrs: false,
props: { props: {
locale: PropTypes.object.def(enUs), locale: PropTypes.object.def(enUs),
format: PropTypes.oneOfType([ format: PropTypes.oneOfType([
@ -273,22 +274,18 @@ const Calendar = {
if (timePicker && showTimePicker) { if (timePicker && showTimePicker) {
const timePickerOriginProps = getOptionProps(timePicker); const timePickerOriginProps = getOptionProps(timePicker);
const timePickerProps = { const timePickerProps = {
props: { showHour: true,
showHour: true, showSecond: true,
showSecond: true, showMinute: true,
showMinute: true, ...timePickerOriginProps,
...timePickerOriginProps, ...disabledTimeConfig,
...disabledTimeConfig, value: sSelectedValue,
value: sSelectedValue, disabledTime,
disabledTime, onChange: this.onDateInputChange,
},
on: {
change: this.onDateInputChange,
},
}; };
if (timePickerOriginProps.defaultValue !== undefined) { if (timePickerOriginProps.defaultValue !== undefined) {
timePickerProps.props.defaultOpenValue = timePickerOriginProps.defaultValue; timePickerProps.defaultOpenValue = timePickerOriginProps.defaultValue;
} }
timePickerEle = cloneElement(timePicker, timePickerProps); timePickerEle = cloneElement(timePicker, timePickerProps);
} }

21
components/vc-calendar/src/FullCalendar.jsx
View File

@ -1,7 +1,7 @@
import moment from 'moment'; import moment from 'moment';
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { getOptionProps, hasProp, getListeners } from '../../_util/props-util'; import { getOptionProps, hasProp } from '../../_util/props-util';
import DateTable from './date/DateTable'; import DateTable from './date/DateTable';
import MonthTable from './month/MonthTable'; import MonthTable from './month/MonthTable';
import CalendarMixin, { getNowByCurrentStateValue } from './mixin/CalendarMixin'; import CalendarMixin, { getNowByCurrentStateValue } from './mixin/CalendarMixin';
@ -10,6 +10,7 @@ import CalendarHeader from './full-calendar/CalendarHeader';
import enUs from './locale/en_US'; import enUs from './locale/en_US';
const FullCalendar = { const FullCalendar = {
name: 'FullCalendar', name: 'FullCalendar',
inheritAttrs: false,
props: { props: {
locale: PropTypes.object.def(enUs), locale: PropTypes.object.def(enUs),
format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]), format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
@ -103,17 +104,13 @@ const FullCalendar = {
} else { } else {
const TheHeader = headerComponent || CalendarHeader; const TheHeader = headerComponent || CalendarHeader;
const headerProps = { const headerProps = {
props: { ...props,
...props, ...this.$attrs,
prefixCls: `${prefixCls}-full`, prefixCls: `${prefixCls}-full`,
type, type,
value, value,
}, onTypeChange: this.setType,
on: { onValueChange: this.setValue,
...getListeners(this),
typeChange: this.setType,
valueChange: this.setValue,
},
key: 'calendar-header', key: 'calendar-header',
}; };
header = <TheHeader {...headerProps} />; header = <TheHeader {...headerProps} />;

10
components/vc-calendar/src/MonthCalendar.jsx
View File

@ -9,6 +9,7 @@ import CommonMixin from './mixin/CommonMixin';
import enUs from './locale/en_US'; import enUs from './locale/en_US';
const MonthCalendar = { const MonthCalendar = {
name: 'MonthCalendar', name: 'MonthCalendar',
inheritAttrs: false,
props: { props: {
locale: PropTypes.object.def(enUs), locale: PropTypes.object.def(enUs),
format: PropTypes.string, format: PropTypes.string,
@ -90,12 +91,11 @@ const MonthCalendar = {
}, },
render() { render() {
const { mode, sValue: value, $props: props, $scopedSlots } = this; const { mode, sValue: value, $props: props, $slots } = this;
const { prefixCls, locale, disabledDate } = props; const { prefixCls, locale, disabledDate } = props;
const monthCellRender = this.monthCellRender || $scopedSlots.monthCellRender; const monthCellRender = this.monthCellRender || $slots.monthCellRender;
const monthCellContentRender = const monthCellContentRender = this.monthCellContentRender || $slots.monthCellContentRender;
this.monthCellContentRender || $scopedSlots.monthCellContentRender; const renderFooter = this.renderFooter || $slots.renderFooter;
const renderFooter = this.renderFooter || $scopedSlots.renderFooter;
const children = ( const children = (
<div class={`${prefixCls}-month-calendar-content`}> <div class={`${prefixCls}-month-calendar-content`}>
<div class={`${prefixCls}-month-header-wrap`}> <div class={`${prefixCls}-month-header-wrap`}>

49
components/vc-calendar/src/Picker.jsx
View File

@ -1,6 +1,6 @@
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { getOptionProps, hasProp, getEvents, getStyle } from '../../_util/props-util'; import { getOptionProps, hasProp, getEvents, findDOMNode } from '../../_util/props-util';
import { cloneElement } from '../../_util/vnode'; import { cloneElement } from '../../_util/vnode';
import createChainedFunction from '../../_util/createChainedFunction'; import createChainedFunction from '../../_util/createChainedFunction';
import KeyCode from '../../_util/KeyCode'; import KeyCode from '../../_util/KeyCode';
@ -19,8 +19,14 @@ const TimeType = {
} }
}, },
}; };
function refFn(field, component) {
this[field] = component;
}
const Picker = { const Picker = {
name: 'Picker', name: 'Picker',
inheritAttrs: false,
props: { props: {
animation: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), animation: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
disabled: PropTypes.bool, disabled: PropTypes.bool,
@ -40,11 +46,13 @@ const Picker = {
align: PropTypes.object.def(() => ({})), align: PropTypes.object.def(() => ({})),
dropdownClassName: PropTypes.string, dropdownClassName: PropTypes.string,
dateRender: PropTypes.func, dateRender: PropTypes.func,
children: PropTypes.func.isRequired,
}, },
mixins: [BaseMixin], mixins: [BaseMixin],
data() { data() {
const props = this.$props; const props = this.$props;
this.saveCalendarRef = refFn.bind(this, 'calendarInstance');
let open; let open;
if (hasProp(this, 'open')) { if (hasProp(this, 'open')) {
open = props.open; open = props.open;
@ -140,18 +148,14 @@ const Picker = {
const { sValue: value } = this; const { sValue: value } = this;
const defaultValue = value; const defaultValue = value;
const extraProps = { const extraProps = {
ref: 'calendarInstance', ref: this.saveCalendarRef,
props: { defaultValue: defaultValue || calendarProps.defaultValue,
defaultValue: defaultValue || calendarProps.defaultValue, selectedValue: value,
selectedValue: value, onKeydown: this.onCalendarKeyDown,
}, onOk: createChainedFunction(calendarEvents.onOk, this.onCalendarOk),
on: { onSelect: createChainedFunction(calendarEvents.onSelect, this.onCalendarSelect),
keydown: this.onCalendarKeyDown, onClear: createChainedFunction(calendarEvents.onClear, this.onCalendarClear),
ok: createChainedFunction(calendarEvents.ok, this.onCalendarOk), onBlur: createChainedFunction(calendarEvents.onBlur, this.onCalendarBlur),
select: createChainedFunction(calendarEvents.select, this.onCalendarSelect),
clear: createChainedFunction(calendarEvents.clear, this.onCalendarClear),
blur: createChainedFunction(calendarEvents.blur, this.onCalendarBlur),
},
}; };
return cloneElement(props.calendar, extraProps); return cloneElement(props.calendar, extraProps);
@ -181,20 +185,19 @@ const Picker = {
focus() { focus() {
if (!this.sOpen) { if (!this.sOpen) {
this.$el.focus(); findDOMNode(this).focus();
} }
}, },
focusCalendar() { focusCalendar() {
if (this.sOpen && this.calendarInstance && this.calendarInstance.componentInstance) { if (this.sOpen && !!this.calendarInstance) {
this.calendarInstance.componentInstance.focus(); this.calendarInstance.focus();
} }
}, },
}, },
render() { render() {
const props = getOptionProps(this); const props = getOptionProps(this);
const style = getStyle(this);
const { const {
prefixCls, prefixCls,
placement, placement,
@ -206,13 +209,13 @@ const Picker = {
transitionName, transitionName,
} = props; } = props;
const { sValue, sOpen } = this; const { sValue, sOpen } = this;
const children = this.$scopedSlots.default;
const childrenState = { const childrenState = {
value: sValue, value: sValue,
open: sOpen, open: sOpen,
}; };
if (this.sOpen || !this.calendarInstance) { const children = this.children(childrenState, props);
this.calendarInstance = this.getCalendarElement(); if (this.sOpen || !this.calendarElement) {
this.calendarElement = this.getCalendarElement();
} }
return ( return (
@ -223,16 +226,16 @@ const Picker = {
action={disabled && !sOpen ? [] : ['click']} action={disabled && !sOpen ? [] : ['click']}
destroyPopupOnHide destroyPopupOnHide
getPopupContainer={getCalendarContainer} getPopupContainer={getCalendarContainer}
popupStyle={style} popupStyle={this.$attrs.style || {}}
popupAnimation={animation} popupAnimation={animation}
popupTransitionName={transitionName} popupTransitionName={transitionName}
popupVisible={sOpen} popupVisible={sOpen}
onPopupVisibleChange={this.onVisibleChange} onPopupVisibleChange={this.onVisibleChange}
prefixCls={prefixCls} prefixCls={prefixCls}
popupClassName={dropdownClassName} popupClassName={dropdownClassName}
popup={this.calendarElement}
> >
<template slot="popup">{this.calendarInstance}</template> {cloneElement(children, { onKeydown: this.onKeyDown })}
{cloneElement(children(childrenState, props), { on: { keydown: this.onKeyDown } })}
</Trigger> </Trigger>
); );
}, },

182
components/vc-calendar/src/RangeCalendar.jsx
View File

@ -1,12 +1,6 @@
import PropTypes from '../../_util/vue-types'; import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin'; import BaseMixin from '../../_util/BaseMixin';
import { import { getOptionProps, hasProp, getComponent } from '../../_util/props-util';
getOptionProps,
hasProp,
mergeProps,
getComponent,
getListeners,
} from '../../_util/props-util';
import moment from 'moment'; import moment from 'moment';
import KeyCode from '../../_util/KeyCode'; import KeyCode from '../../_util/KeyCode';
import CalendarPart from './range-calendar/CalendarPart'; import CalendarPart from './range-calendar/CalendarPart';
@ -86,6 +80,8 @@ function onInputSelect(direction, value, cause) {
} }
const RangeCalendar = { const RangeCalendar = {
name: 'RangeCalendar',
inheritAttrs: false,
props: { props: {
locale: PropTypes.object.def(enUs), locale: PropTypes.object.def(enUs),
visible: PropTypes.bool.def(true), visible: PropTypes.bool.def(true),
@ -672,6 +668,7 @@ const RangeCalendar = {
const clearIcon = getComponent(this, 'clearIcon'); const clearIcon = getComponent(this, 'clearIcon');
const { sHoverValue, sSelectedValue, sMode: mode, sShowTimePicker, sValue } = this; const { sHoverValue, sSelectedValue, sMode: mode, sShowTimePicker, sValue } = this;
const className = { const className = {
[this.$attrs.class]: !!this.$attrs.class,
[prefixCls]: 1, [prefixCls]: 1,
[`${prefixCls}-hidden`]: !props.visible, [`${prefixCls}-hidden`]: !props.visible,
[`${prefixCls}-range`]: 1, [`${prefixCls}-range`]: 1,
@ -679,22 +676,18 @@ const RangeCalendar = {
[`${prefixCls}-week-number`]: props.showWeekNumber, [`${prefixCls}-week-number`]: props.showWeekNumber,
}; };
const baseProps = { const baseProps = {
props, ...props,
on: getListeners(this), ...this.$attrs,
}; };
const newProps = { const newProps = {
props: { selectedValue: sSelectedValue,
selectedValue: sSelectedValue, onSelect: this.onSelect,
}, onDayHover:
on: { (type === 'start' && sSelectedValue[1]) ||
select: this.onSelect, (type === 'end' && sSelectedValue[0]) ||
dayHover: !!sHoverValue.length
(type === 'start' && sSelectedValue[1]) || ? this.onDayHover
(type === 'end' && sSelectedValue[0]) || : noop,
!!sHoverValue.length
? this.onDayHover
: noop,
},
}; };
let placeholder1; let placeholder1;
@ -725,98 +718,85 @@ const RangeCalendar = {
const nextMonthOfStart = startValue.clone().add(1, 'months'); const nextMonthOfStart = startValue.clone().add(1, 'months');
const isClosestMonths = const isClosestMonths =
nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month(); nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month();
const leftPartProps = mergeProps(baseProps, newProps, { const leftPartProps = {
props: { ...baseProps,
hoverValue: sHoverValue, ...newProps,
direction: 'left', hoverValue: sHoverValue,
disabledTime: this.disabledStartTime, direction: 'left',
disabledMonth: this.disabledStartMonth, disabledTime: this.disabledStartTime,
format: this.getFormat(), disabledMonth: this.disabledStartMonth,
value: startValue, format: this.getFormat(),
mode: mode[0], value: startValue,
placeholder: placeholder1, mode: mode[0],
showDateInput: this.showDateInput, placeholder: placeholder1,
timePicker, showDateInput: this.showDateInput,
showTimePicker: sShowTimePicker || mode[0] === 'time', timePicker,
enablePrev: true, showTimePicker: sShowTimePicker || mode[0] === 'time',
enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]), enablePrev: true,
clearIcon, enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]),
}, clearIcon,
on: { onInputChange: this.onStartInputChange,
inputChange: this.onStartInputChange, onInputSelect: this.onStartInputSelect,
inputSelect: this.onStartInputSelect, onValueChange: this.onStartValueChange,
valueChange: this.onStartValueChange, onPanelChange: this.onStartPanelChange,
panelChange: this.onStartPanelChange, };
}, const rightPartProps = {
}); ...baseProps,
const rightPartProps = mergeProps(baseProps, newProps, { ...newProps,
props: { hoverValue: sHoverValue,
hoverValue: sHoverValue, direction: 'right',
direction: 'right', format: this.getFormat(),
format: this.getFormat(), timePickerDisabledTime: this.getEndDisableTime(),
timePickerDisabledTime: this.getEndDisableTime(), placeholder: placeholder2,
placeholder: placeholder2, value: endValue,
value: endValue, mode: mode[1],
mode: mode[1], showDateInput: this.showDateInput,
showDateInput: this.showDateInput, timePicker,
timePicker, showTimePicker: sShowTimePicker || mode[1] === 'time',
showTimePicker: sShowTimePicker || mode[1] === 'time', disabledTime: this.disabledEndTime,
disabledTime: this.disabledEndTime, disabledMonth: this.disabledEndMonth,
disabledMonth: this.disabledEndMonth, enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]),
enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]), enableNext: true,
enableNext: true, clearIcon,
clearIcon, onInputChange: this.onEndInputChange,
}, onInputSelect: this.onEndInputSelect,
on: { onValueChange: this.onEndValueChange,
inputChange: this.onEndInputChange, onPanelChange: this.onEndPanelChange,
inputSelect: this.onEndInputSelect, };
valueChange: this.onEndValueChange,
panelChange: this.onEndPanelChange,
},
});
let TodayButtonNode = null; let TodayButtonNode = null;
if (showToday) { if (showToday) {
const todayButtonProps = mergeProps(baseProps, { const todayButtonProps = {
props: { ...baseProps,
disabled: isTodayInView, disabled: isTodayInView,
value: sValue[0], value: sValue[0],
text: locale.backToToday, text: locale.backToToday,
}, onToday: this.onToday,
on: { };
today: this.onToday,
},
});
TodayButtonNode = <TodayButton key="todayButton" {...todayButtonProps} />; TodayButtonNode = <TodayButton key="todayButton" {...todayButtonProps} />;
} }
let TimePickerButtonNode = null; let TimePickerButtonNode = null;
if (props.timePicker) { if (props.timePicker) {
const timePickerButtonProps = mergeProps(baseProps, { const timePickerButtonProps = {
props: { ...baseProps,
showTimePicker: sShowTimePicker || (mode[0] === 'time' && mode[1] === 'time'), showTimePicker: sShowTimePicker || (mode[0] === 'time' && mode[1] === 'time'),
timePickerDisabled: !this.hasSelectedValue() || sHoverValue.length, timePickerDisabled: !this.hasSelectedValue() || sHoverValue.length,
}, onOpenTimePicker: this.onOpenTimePicker,
on: { onCloseTimePicker: this.onCloseTimePicker,
openTimePicker: this.onOpenTimePicker, };
closeTimePicker: this.onCloseTimePicker,
},
});
TimePickerButtonNode = <TimePickerButton key="timePickerButton" {...timePickerButtonProps} />; TimePickerButtonNode = <TimePickerButton key="timePickerButton" {...timePickerButtonProps} />;
} }
let OkButtonNode = null; let OkButtonNode = null;
if (showOkButton) { if (showOkButton) {
const okButtonProps = mergeProps(baseProps, { const okButtonProps = {
props: { ...baseProps,
okDisabled: okDisabled:
!this.isAllowedDateAndTime(sSelectedValue) || !this.isAllowedDateAndTime(sSelectedValue) ||
!this.hasSelectedValue() || !this.hasSelectedValue() ||
sHoverValue.length, sHoverValue.length,
}, onOk: this.onOk,
on: { };
ok: this.onOk,
},
});
OkButtonNode = <OkButton key="okButtonNode" {...okButtonProps} />; OkButtonNode = <OkButton key="okButtonNode" {...okButtonProps} />;
} }
const extraFooter = this.renderFooter(mode); const extraFooter = this.renderFooter(mode);

2
components/vc-calendar/src/date/DateTable.jsx
View File

@ -4,7 +4,7 @@ import DateTBody from './DateTBody';
const DateTable = (_, { attrs }) => { const DateTable = (_, { attrs }) => {
const prefixCls = attrs.prefixCls; const prefixCls = attrs.prefixCls;
return ( return (
<table class={`${prefixCls}-table`} cellSpacing="0" role="grid"> <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
<DateTHead {...attrs} /> <DateTHead {...attrs} />
<DateTBody {...attrs} /> <DateTBody {...attrs} />
</table> </table>

2
components/vc-calendar/src/decade/DecadePanel.jsx
View File

@ -122,7 +122,7 @@ export default {
/> />
</div> </div>
<div class={`${prefixCls}-body`}> <div class={`${prefixCls}-body`}>
<table class={`${prefixCls}-table`} cellSpacing="0" role="grid"> <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
<tbody class={`${prefixCls}-tbody`}>{decadesEls}</tbody> <tbody class={`${prefixCls}-tbody`}>{decadesEls}</tbody>
</table> </table>
</div> </div>

1
components/vc-calendar/src/month/MonthPanel.jsx
View File

@ -11,6 +11,7 @@ function noop() {}
const MonthPanel = { const MonthPanel = {
name: 'MonthPanel', name: 'MonthPanel',
inheritAttrs: false,
mixins: [BaseMixin], mixins: [BaseMixin],
props: { props: {
value: PropTypes.any, value: PropTypes.any,

3
components/vc-calendar/src/month/MonthTable.jsx
View File

@ -9,6 +9,7 @@ function noop() {}
const MonthTable = { const MonthTable = {
name: 'MonthTable', name: 'MonthTable',
inheritAttrs: false,
mixins: [BaseMixin], mixins: [BaseMixin],
props: { props: {
cellRender: PropTypes.func, cellRender: PropTypes.func,
@ -122,7 +123,7 @@ const MonthTable = {
}); });
return ( return (
<table class={`${prefixCls}-table`} cellSpacing="0" role="grid"> <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
<tbody class={`${prefixCls}-tbody`}>{monthsEls}</tbody> <tbody class={`${prefixCls}-tbody`}>{monthsEls}</tbody>
</table> </table>
); );

82
components/vc-calendar/src/range-calendar/CalendarPart.jsx
View File

@ -1,6 +1,6 @@
import PropTypes from '../../../_util/vue-types'; import PropTypes from '../../../_util/vue-types';
import BaseMixin from '../../../_util/BaseMixin'; import BaseMixin from '../../../_util/BaseMixin';
import { getOptionProps, getComponent, getListeners } from '../../../_util/props-util'; import { getOptionProps, getComponent } from '../../../_util/props-util';
import { cloneElement } from '../../../_util/vnode'; import { cloneElement } from '../../../_util/vnode';
import CalendarHeader from '../calendar/CalendarHeader'; import CalendarHeader from '../calendar/CalendarHeader';
import DateTable from '../date/DateTable'; import DateTable from '../date/DateTable';
@ -8,6 +8,8 @@ import DateInput from '../date/DateInput';
import { getTimeConfig } from '../util/index'; import { getTimeConfig } from '../util/index';
function noop() {} function noop() {}
const CalendarPart = { const CalendarPart = {
name: 'CalendarPart',
inheritAttrs: false,
mixins: [BaseMixin], mixins: [BaseMixin],
props: { props: {
prefixCls: PropTypes.string, prefixCls: PropTypes.string,
@ -64,13 +66,13 @@ const CalendarPart = {
} = props; } = props;
const clearIcon = getComponent(this, 'clearIcon'); const clearIcon = getComponent(this, 'clearIcon');
const { const {
inputChange = noop, onInputChange = noop,
inputSelect = noop, onInputSelect = noop,
valueChange = noop, onValueChange = noop,
panelChange = noop, onPanelChange = noop,
select = noop, onSelect = noop,
dayHover = noop, onDayHover = noop,
} = getListeners(this); } = this.$attrs;
const shouldShowTimePicker = showTimePicker && timePicker; const shouldShowTimePicker = showTimePicker && timePicker;
const disabledTimeConfig = const disabledTimeConfig =
shouldShowTimePicker && disabledTime ? getTimeConfig(selectedValue, disabledTime) : null; shouldShowTimePicker && disabledTime ? getTimeConfig(selectedValue, disabledTime) : null;
@ -86,19 +88,15 @@ const CalendarPart = {
if (shouldShowTimePicker) { if (shouldShowTimePicker) {
const timePickerProps = getOptionProps(timePicker); const timePickerProps = getOptionProps(timePicker);
timePickerEle = cloneElement(timePicker, { timePickerEle = cloneElement(timePicker, {
props: { showHour: true,
showHour: true, showMinute: true,
showMinute: true, showSecond: true,
showSecond: true, ...timePickerProps,
...timePickerProps, ...disabledTimeConfig,
...disabledTimeConfig, ...timePickerDisabledTime,
...timePickerDisabledTime, defaultOpenValue: value,
defaultOpenValue: value, value: selectedValue[index],
value: selectedValue[index], onChange: onInputChange,
},
on: {
change: inputChange,
},
}); });
} }
@ -114,39 +112,31 @@ const CalendarPart = {
value={value} value={value}
showClear={showClear || false} showClear={showClear || false}
selectedValue={selectedValue[index]} selectedValue={selectedValue[index]}
onChange={inputChange} onChange={onInputChange}
onSelect={inputSelect} onSelect={onInputSelect}
clearIcon={clearIcon} clearIcon={clearIcon}
inputMode={inputMode} inputMode={inputMode}
inputReadOnly={inputReadOnly} inputReadOnly={inputReadOnly}
/> />
); );
const headerProps = { const headerProps = {
props: { ...newProps,
...newProps, mode,
mode, enableNext,
enableNext, enablePrev,
enablePrev, disabledMonth,
disabledMonth, onValueChange,
}, onPanelChange,
on: {
valueChange,
panelChange,
},
}; };
const tableProps = { const tableProps = {
props: { ...newProps,
...newProps, hoverValue,
hoverValue, selectedValue,
selectedValue, dateRender,
dateRender, disabledDate,
disabledDate, showWeekNumber,
showWeekNumber, onSelect,
}, onDayHover,
on: {
select,
dayHover,
},
}; };
return ( return (
<div class={`${rangeClassName}-part ${rangeClassName}-${direction}`}> <div class={`${rangeClassName}-part ${rangeClassName}-${direction}`}>

9
components/vc-calendar/src/year/YearPanel.jsx
View File

@ -1,6 +1,5 @@
import PropTypes from '../../../_util/vue-types'; import PropTypes from '../../../_util/vue-types';
import BaseMixin from '../../../_util/BaseMixin'; import BaseMixin from '../../../_util/BaseMixin';
import { getListeners } from '../../../_util/props-util';
const ROW = 4; const ROW = 4;
const COL = 3; const COL = 3;
function noop() {} function noop() {}
@ -21,7 +20,9 @@ function chooseYear(year) {
} }
export default { export default {
name: 'YearPanel',
mixins: [BaseMixin], mixins: [BaseMixin],
inheritAttrs: false,
props: { props: {
rootPrefixCls: PropTypes.string, rootPrefixCls: PropTypes.string,
value: PropTypes.object, value: PropTypes.object,
@ -68,7 +69,7 @@ export default {
render() { render() {
const { sValue: value, locale, renderFooter } = this; const { sValue: value, locale, renderFooter } = this;
const decadePanelShow = getListeners(this).decadePanelShow || noop; const onDecadePanelShow = this.$attrs.onDecadePanelShow || noop;
const years = this.years(); const years = this.years();
const currentYear = value.year(); const currentYear = value.year();
const startYear = parseInt(currentYear / 10, 10) * 10; const startYear = parseInt(currentYear / 10, 10) * 10;
@ -123,7 +124,7 @@ export default {
<a <a
class={`${prefixCls}-decade-select`} class={`${prefixCls}-decade-select`}
role="button" role="button"
onClick={decadePanelShow} onClick={onDecadePanelShow}
title={locale.decadeSelect} title={locale.decadeSelect}
> >
<span class={`${prefixCls}-decade-select-content`}> <span class={`${prefixCls}-decade-select-content`}>
@ -140,7 +141,7 @@ export default {
/> />
</div> </div>
<div class={`${prefixCls}-body`}> <div class={`${prefixCls}-body`}>
<table class={`${prefixCls}-table`} cellSpacing="0" role="grid"> <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
<tbody class={`${prefixCls}-tbody`}>{yeasEls}</tbody> <tbody class={`${prefixCls}-tbody`}>{yeasEls}</tbody>
</table> </table>
</div> </div>