diff --git a/components/_util/props-util.js b/components/_util/props-util.js index a453b943d..904a57095 100644 --- a/components/_util/props-util.js +++ b/components/_util/props-util.js @@ -52,7 +52,7 @@ const getOptionProps = (instance) => { const res = {} for (const [k, v] of Object.entries(props)) { if (v.default !== undefined) { - res[k] = v + res[k] = typeof v.default === 'function' ? v.default() : v.default } } return { ...res, ...propsData } diff --git a/components/vc-calendar/demo/antd-calendar.vue b/components/vc-calendar/demo/antd-calendar.vue new file mode 100644 index 000000000..e9833eeb1 --- /dev/null +++ b/components/vc-calendar/demo/antd-calendar.vue @@ -0,0 +1,236 @@ + diff --git a/components/vc-calendar/src/Calendar.vue b/components/vc-calendar/src/Calendar.vue index 78a32eaba..42404e420 100644 --- a/components/vc-calendar/src/Calendar.vue +++ b/components/vc-calendar/src/Calendar.vue @@ -11,7 +11,7 @@ import CalendarMixin from './mixin/CalendarMixin' import CommonMixin from './mixin/CommonMixin' import DateInput from './date/DateInput' import { getTimeConfig, getTodayTime, syncTime } from './util' - +function noop () {} function goStartMonth () { const next = this.sValue.clone() next.startOf('month') @@ -48,12 +48,12 @@ function goDay (direction) { const Calendar = { props: { - prefixCls: PropTypes.string, + // prefixCls: PropTypes.string, defaultValue: PropTypes.object, value: PropTypes.object, selectedValue: PropTypes.object, mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']), - locale: PropTypes.object, + // locale: PropTypes.object, showDateInput: PropTypes.bool.def(true), showWeekNumber: PropTypes.bool, showToday: PropTypes.bool.def(true), @@ -68,8 +68,8 @@ const Calendar = { // onPanelChange: PropTypes.func, disabledDate: PropTypes.func, disabledTime: PropTypes.any, - renderFooter: PropTypes.func, - renderSidebar: PropTypes.func, + renderFooter: PropTypes.func.def(noop), + renderSidebar: PropTypes.func.def(noop), }, mixins: [BaseMixin, CommonMixin, CalendarMixin], @@ -215,6 +215,7 @@ const Calendar = { let timePickerEle = null if (timePicker && showTimePicker) { + console.log(timePicker) const timePickerOriginProps = getOptionProps(timePicker) const timePickerProps = { props: { @@ -234,7 +235,7 @@ const Calendar = { if (timePickerOriginProps.defaultValue !== undefined) { timePickerProps.props.defaultOpenValue = timePickerOriginProps.defaultValue } - + console.log(timePickerProps) timePickerEle = cloneElement(timePicker, timePickerProps) } diff --git a/components/vc-calendar/src/Picker.vue b/components/vc-calendar/src/Picker.vue index d9be4eca4..ba085832e 100644 --- a/components/vc-calendar/src/Picker.vue +++ b/components/vc-calendar/src/Picker.vue @@ -78,7 +78,7 @@ const Picker = { onCalendarKeyDown (event) { if (event.keyCode === KeyCode.ESC) { event.stopPropagation() - this.close(this.focus) + this.closeCalendar(this.focus) } }, @@ -94,7 +94,7 @@ const Picker = { cause.source === 'keyboard' || (!calendarProps.timePicker && cause.source !== 'dateInput') || cause.source === 'todayButton') { - this.close(this.focus) + this.closeCalendar(this.focus) } this.__emit('change', value) }, @@ -107,11 +107,11 @@ const Picker = { }, onCalendarOk () { - this.close(this.focus) + this.closeCalendar(this.focus) }, onCalendarClear () { - this.close(this.focus) + this.closeCalendar(this.focus) }, onVisibleChange (open) { @@ -153,11 +153,11 @@ const Picker = { } }, - open (callback) { + openCalendar (callback) { this.setOpen(true, callback) }, - close (callback) { + closeCalendar (callback) { this.setOpen(false, callback) }, @@ -183,9 +183,10 @@ const Picker = { align, animation, disabled, dropdownClassName, - transitionName, children, + transitionName, } = props const state = this.$data + const children = this.$scopedSlots.default return ( 0) { - selectedValue[1 - index] = this.state.showTimePicker ? selectedValue[index] : undefined + selectedValue[1 - index] = this.showTimePicker ? selectedValue[index] : undefined } - this.props.onInputSelect(selectedValue) + this.__emit('inputSelect', selectedValue) this.fireSelectValueChange(selectedValue) } -const RangeCalendar = createReactClass({ - propTypes: { +const RangeCalendar = { + props: { prefixCls: PropTypes.string, dateInputPlaceholder: PropTypes.any, defaultValue: PropTypes.any, value: PropTypes.any, hoverValue: PropTypes.any, mode: PropTypes.arrayOf(PropTypes.oneOf(['date', 'month', 'year', 'decade'])), - showDateInput: PropTypes.bool, + showDateInput: PropTypes.bool.def(true), timePicker: PropTypes.any, showOk: PropTypes.bool, - showToday: PropTypes.bool, - defaultSelectedValue: PropTypes.array, + showToday: PropTypes.bool.def(true), + defaultSelectedValue: PropTypes.array.def([]), selectedValue: PropTypes.array, onOk: PropTypes.func, showClear: PropTypes.bool, locale: PropTypes.object, - onChange: PropTypes.func, - onSelect: PropTypes.func, - onValueChange: PropTypes.func, - onHoverChange: PropTypes.func, - onPanelChange: PropTypes.func, + // onChange: PropTypes.func, + // onSelect: PropTypes.func, + // onValueChange: PropTypes.func, + // onHoverChange: PropTypes.func, + // onPanelChange: PropTypes.func, format: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), - onClear: PropTypes.func, - type: PropTypes.any, + // onClear: PropTypes.func, + type: PropTypes.any.def('both'), disabledDate: PropTypes.func, - disabledTime: PropTypes.func, + disabledTime: PropTypes.func.def(noop), }, - mixins: [CommonMixin], + mixins: [BaseMixin, CommonMixin], - getDefaultProps () { - return { - type: 'both', - defaultSelectedValue: [], - onValueChange: noop, - onHoverChange: noop, - onPanelChange: noop, - disabledTime: noop, - onInputSelect: noop, - showToday: true, - showDateInput: true, - } - }, - - getInitialState () { - const props = this.props + data () { + const props = this.$props const selectedValue = props.selectedValue || props.defaultSelectedValue const value = normalizeAnchor(props, 1) return { - selectedValue, + sSelectedValue: selectedValue, prevSelectedValue: selectedValue, firstSelectedValue: null, - hoverValue: props.hoverValue || [], - value, + sHoverValue: props.hoverValue || [], + sValue: value, showTimePicker: false, - mode: props.mode || ['date', 'date'], + sMode: props.mode || ['date', 'date'], } }, @@ -151,343 +135,347 @@ const RangeCalendar = createReactClass({ this.setState({ mode: nextProps.mode }) } }, + methods: { + onDatePanelEnter () { + if (this.hasSelectedValue()) { + this.fireHoverValueChange(this.sSelectedValue.concat()) + } + }, - onDatePanelEnter () { - if (this.hasSelectedValue()) { - this.fireHoverValueChange(this.state.selectedValue.concat()) - } - }, + onDatePanelLeave () { + if (this.hasSelectedValue()) { + this.fireHoverValueChange([]) + } + }, - onDatePanelLeave () { - if (this.hasSelectedValue()) { - this.fireHoverValueChange([]) - } - }, - - onSelect (value) { - const { type } = this.props - const { selectedValue, prevSelectedValue, firstSelectedValue } = this.state - let nextSelectedValue - if (type === 'both') { - if (!firstSelectedValue) { + onSelect (value) { + const { type, sSelectedValue, prevSelectedValue, firstSelectedValue } = this + let nextSelectedValue + if (type === 'both') { + if (!firstSelectedValue) { + syncTime(prevSelectedValue[0], value) + nextSelectedValue = [value] + } else if (this.compare(firstSelectedValue, value) < 0) { + syncTime(prevSelectedValue[1], value) + nextSelectedValue = [firstSelectedValue, value] + } else { + syncTime(prevSelectedValue[0], value) + syncTime(prevSelectedValue[1], firstSelectedValue) + nextSelectedValue = [value, firstSelectedValue] + } + } else if (type === 'start') { syncTime(prevSelectedValue[0], value) - nextSelectedValue = [value] - } else if (this.compare(firstSelectedValue, value) < 0) { - syncTime(prevSelectedValue[1], value) - nextSelectedValue = [firstSelectedValue, value] + const endValue = sSelectedValue[1] + nextSelectedValue = endValue && this.compare(endValue, value) > 0 + ? [value, endValue] : [value] + } else { // type === 'end' + const startValue = sSelectedValue[0] + if (startValue && this.compare(startValue, value) <= 0) { + syncTime(prevSelectedValue[1], value) + nextSelectedValue = [startValue, value] + } else { + syncTime(prevSelectedValue[0], value) + nextSelectedValue = [value] + } + } + + this.fireSelectValueChange(nextSelectedValue) + }, + + onDayHover (value) { + let hoverValue = [] + const { sSelectedValue, firstSelectedValue, type } = this + if (type === 'start' && sSelectedValue[1]) { + hoverValue = this.compare(value, sSelectedValue[1]) < 0 + ? [value, sSelectedValue[1]] : [value] + } else if (type === 'end' && sSelectedValue[0]) { + hoverValue = this.compare(value, sSelectedValue[0]) > 0 + ? [sSelectedValue[0], value] : [] } else { - syncTime(prevSelectedValue[0], value) - syncTime(prevSelectedValue[1], firstSelectedValue) - nextSelectedValue = [value, firstSelectedValue] + if (!firstSelectedValue) { + return + } + hoverValue = this.compare(value, firstSelectedValue) < 0 + ? [value, firstSelectedValue] : [firstSelectedValue, value] } - } else if (type === 'start') { - syncTime(prevSelectedValue[0], value) - const endValue = selectedValue[1] - nextSelectedValue = endValue && this.compare(endValue, value) > 0 - ? [value, endValue] : [value] - } else { // type === 'end' - const startValue = selectedValue[0] - if (startValue && this.compare(startValue, value) <= 0) { - syncTime(prevSelectedValue[1], value) - nextSelectedValue = [startValue, value] - } else { - syncTime(prevSelectedValue[0], value) - nextSelectedValue = [value] + this.fireHoverValueChange(hoverValue) + }, + + onToday () { + const startValue = getTodayTime(this.sValue[0]) + const endValue = startValue.clone().add(1, 'months') + this.setState({ sValue: [startValue, endValue] }) + }, + + onOpenTimePicker () { + this.setState({ + showTimePicker: true, + }) + }, + onCloseTimePicker () { + this.setState({ + showTimePicker: false, + }) + }, + + onOk () { + const { sSelectedValue } = this + if (this.isAllowedDateAndTime(sSelectedValue)) { + this.__emit('ok', sSelectedValue) } - } + }, - this.fireSelectValueChange(nextSelectedValue) - }, + onStartInputSelect (...oargs) { + const args = ['left'].concat(oargs) + return onInputSelect.apply(this, args) + }, - onDayHover (value) { - let hoverValue = [] - const { selectedValue, firstSelectedValue } = this.state - const { type } = this.props - if (type === 'start' && selectedValue[1]) { - hoverValue = this.compare(value, selectedValue[1]) < 0 - ? [value, selectedValue[1]] : [value] - } else if (type === 'end' && selectedValue[0]) { - hoverValue = this.compare(value, selectedValue[0]) > 0 - ? [selectedValue[0], value] : [] - } else { - if (!firstSelectedValue) { - return + onEndInputSelect (...oargs) { + const args = ['right'].concat(oargs) + return onInputSelect.apply(this, args) + }, + + onStartValueChange (leftValue) { + const value = [...this.sValue] + value[0] = leftValue + return this.fireValueChange(value) + }, + + onEndValueChange (rightValue) { + const value = [...this.sValue] + value[1] = rightValue + return this.fireValueChange(value) + }, + + onStartPanelChange (value, mode) { + const { sMode, sValue } = this + const newMode = [mode, sMode[1]] + if (!hasProp(this, 'mode')) { + this.setState({ + sMode: newMode, + }) } - hoverValue = this.compare(value, firstSelectedValue) < 0 - ? [value, firstSelectedValue] : [firstSelectedValue, value] - } - this.fireHoverValueChange(hoverValue) - }, + const newValue = [value || sValue[0], sValue[1]] + this.__emit('panelChange', newValue, newMode) + }, - onToday () { - const startValue = getTodayTime(this.state.value[0]) - const endValue = startValue.clone().add(1, 'months') - this.setState({ value: [startValue, endValue] }) - }, - - onOpenTimePicker () { - this.setState({ - showTimePicker: true, - }) - }, - onCloseTimePicker () { - this.setState({ - showTimePicker: false, - }) - }, - - onOk () { - const { selectedValue } = this.state - if (this.isAllowedDateAndTime(selectedValue)) { - this.props.onOk(this.state.selectedValue) - } - }, - - onStartInputSelect (...oargs) { - const args = ['left'].concat(oargs) - return onInputSelect.apply(this, args) - }, - - onEndInputSelect (...oargs) { - const args = ['right'].concat(oargs) - return onInputSelect.apply(this, args) - }, - - onStartValueChange (leftValue) { - const value = [...this.state.value] - value[0] = leftValue - return this.fireValueChange(value) - }, - - onEndValueChange (rightValue) { - const value = [...this.state.value] - value[1] = rightValue - return this.fireValueChange(value) - }, - - onStartPanelChange (value, mode) { - const { props, state } = this - const newMode = [mode, state.mode[1]] - if (!('mode' in props)) { - this.setState({ - mode: newMode, - }) - } - const newValue = [value || state.value[0], state.value[1]] - props.onPanelChange(newValue, newMode) - }, - - onEndPanelChange (value, mode) { - const { props, state } = this - const newMode = [state.mode[0], mode] - if (!('mode' in props)) { - this.setState({ - mode: newMode, - }) - } - const newValue = [state.value[0], value || state.value[1]] - props.onPanelChange(newValue, newMode) - }, - - getStartValue () { - let value = this.state.value[0] - const selectedValue = this.state.selectedValue - // keep selectedTime when select date - if (selectedValue[0] && this.props.timePicker) { - value = value.clone() - syncTime(selectedValue[0], value) - } - if (this.state.showTimePicker && selectedValue[0]) { - return selectedValue[0] - } - return value - }, - - getEndValue () { - const { value, selectedValue, showTimePicker } = this.state - const endValue = value[1] ? value[1].clone() : value[0].clone().add(1, 'month') - // keep selectedTime when select date - if (selectedValue[1] && this.props.timePicker) { - syncTime(selectedValue[1], endValue) - } - if (showTimePicker) { - return selectedValue[1] ? selectedValue[1] : this.getStartValue() - } - return endValue - }, - // get disabled hours for second picker - getEndDisableTime () { - const { selectedValue, value } = this.state - const { disabledTime } = this.props - const userSettingDisabledTime = disabledTime(selectedValue, 'end') || {} - const startValue = selectedValue && selectedValue[0] || value[0].clone() - // if startTime and endTime is same day.. - // the second time picker will not able to pick time before first time picker - if (!selectedValue[1] || startValue.isSame(selectedValue[1], 'day')) { - const hours = startValue.hour() - const minutes = startValue.minute() - const second = startValue.second() - let { disabledHours, disabledMinutes, disabledSeconds } = userSettingDisabledTime - const oldDisabledMinutes = disabledMinutes ? disabledMinutes() : [] - const olddisabledSeconds = disabledSeconds ? disabledSeconds() : [] - disabledHours = generateOptions(hours, disabledHours) - disabledMinutes = generateOptions(minutes, disabledMinutes) - disabledSeconds = generateOptions(second, disabledSeconds) - return { - disabledHours () { - return disabledHours - }, - disabledMinutes (hour) { - if (hour === hours) { - return disabledMinutes - } - return oldDisabledMinutes - }, - disabledSeconds (hour, minute) { - if (hour === hours && minute === minutes) { - return disabledSeconds - } - return olddisabledSeconds - }, + onEndPanelChange (value, mode) { + const { sMode, sValue } = this + const newMode = [sMode[0], mode] + if (!hasProp(this, 'mode')) { + this.setState({ + sMode: newMode, + }) } - } - return userSettingDisabledTime - }, + const newValue = [sValue[0], value || sValue[1]] + this.__emit('panelChange', newValue, newMode) + }, - isAllowedDateAndTime (selectedValue) { - return isAllowedDate(selectedValue[0], this.props.disabledDate, this.disabledStartTime) && - isAllowedDate(selectedValue[1], this.props.disabledDate, this.disabledEndTime) - }, - - isMonthYearPanelShow (mode) { - return ['month', 'year', 'decade'].indexOf(mode) > -1 - }, - - hasSelectedValue () { - const { selectedValue } = this.state - return !!selectedValue[1] && !!selectedValue[0] - }, - - compare (v1, v2) { - if (this.props.timePicker) { - return v1.diff(v2) - } - return v1.diff(v2, 'days') - }, - - fireSelectValueChange (selectedValue, direct) { - const { timePicker } = this.props - const { prevSelectedValue } = this.state - if (timePicker && timePicker.props.defaultValue) { - const timePickerDefaultValue = timePicker.props.defaultValue - if (!prevSelectedValue[0] && selectedValue[0]) { - syncTime(timePickerDefaultValue[0], selectedValue[0]) + getStartValue () { + let value = this.sValue[0] + const selectedValue = this.sSelectedValue + // keep selectedTime when select date + if (selectedValue[0] && this.props.timePicker) { + value = value.clone() + syncTime(selectedValue[0], value) } - if (!prevSelectedValue[1] && selectedValue[1]) { - syncTime(timePickerDefaultValue[1], selectedValue[1]) + if (this.state.showTimePicker && selectedValue[0]) { + return selectedValue[0] } - } + return value + }, - if (!('selectedValue' in this.props)) { - this.setState({ - selectedValue, - }) - } + getEndValue () { + const { sValue, sSelectedValue, showTimePicker } = this + const endValue = sValue[1] ? sValue[1].clone() : sValue[0].clone().add(1, 'month') + // keep selectedTime when select date + if (sSelectedValue[1] && this.timePicker) { + syncTime(sSelectedValue[1], endValue) + } + if (showTimePicker) { + return sSelectedValue[1] ? sSelectedValue[1] : this.getStartValue() + } + return endValue + }, + // get disabled hours for second picker + getEndDisableTime () { + const { sSelectedValue, sValue, disabledTime } = this + const userSettingDisabledTime = disabledTime(sSelectedValue, 'end') || {} + const startValue = sSelectedValue && sSelectedValue[0] || sValue[0].clone() + // if startTime and endTime is same day.. + // the second time picker will not able to pick time before first time picker + if (!sSelectedValue[1] || startValue.isSame(sSelectedValue[1], 'day')) { + const hours = startValue.hour() + const minutes = startValue.minute() + const second = startValue.second() + let { disabledHours, disabledMinutes, disabledSeconds } = userSettingDisabledTime + const oldDisabledMinutes = disabledMinutes ? disabledMinutes() : [] + const olddisabledSeconds = disabledSeconds ? disabledSeconds() : [] + disabledHours = generateOptions(hours, disabledHours) + disabledMinutes = generateOptions(minutes, disabledMinutes) + disabledSeconds = generateOptions(second, disabledSeconds) + return { + disabledHours () { + return disabledHours + }, + disabledMinutes (hour) { + if (hour === hours) { + return disabledMinutes + } + return oldDisabledMinutes + }, + disabledSeconds (hour, minute) { + if (hour === hours && minute === minutes) { + return disabledSeconds + } + return olddisabledSeconds + }, + } + } + return userSettingDisabledTime + }, - // 尚未选择过时间，直接输入的话 - if (!this.state.selectedValue[0] || !this.state.selectedValue[1]) { - const startValue = selectedValue[0] || moment() - const endValue = selectedValue[1] || startValue.clone().add(1, 'months') - this.setState({ - selectedValue, - value: getValueFromSelectedValue([startValue, endValue]), - }) - } + isAllowedDateAndTime (selectedValue) { + return isAllowedDate(selectedValue[0], this.disabledDate, this.disabledStartTime) && + isAllowedDate(selectedValue[1], this.disabledDate, this.disabledEndTime) + }, - if (selectedValue[0] && !selectedValue[1]) { - this.setState({ firstSelectedValue: selectedValue[0] }) - this.fireHoverValueChange(selectedValue.concat()) - } - this.props.onChange(selectedValue) - if (direct || selectedValue[0] && selectedValue[1]) { - this.setState({ - prevSelectedValue: selectedValue, - firstSelectedValue: null, - }) - this.fireHoverValueChange([]) - this.props.onSelect(selectedValue) - } - }, + isMonthYearPanelShow (mode) { + return ['month', 'year', 'decade'].indexOf(mode) > -1 + }, - fireValueChange (value) { - const props = this.props - if (!('value' in props)) { - this.setState({ - value, - }) - } - props.onValueChange(value) - }, + hasSelectedValue () { + const { sSelectedValue } = this + return !!sSelectedValue[1] && !!sSelectedValue[0] + }, - fireHoverValueChange (hoverValue) { - const props = this.props - if (!('hoverValue' in props)) { - this.setState({ hoverValue }) - } - props.onHoverChange(hoverValue) - }, + compare (v1, v2) { + if (this.timePicker) { + return v1.diff(v2) + } + return v1.diff(v2, 'days') + }, - clear () { - this.fireSelectValueChange([], true) - this.props.onClear() - }, + fireSelectValueChange (selectedValue, direct) { + const { timePicker, prevSelectedValue } = this + console.log('timePicker', timePicker) + if (timePicker && timePicker.props.defaultValue) { + const timePickerDefaultValue = timePicker.props.defaultValue + if (!prevSelectedValue[0] && selectedValue[0]) { + syncTime(timePickerDefaultValue[0], selectedValue[0]) + } + if (!prevSelectedValue[1] && selectedValue[1]) { + syncTime(timePickerDefaultValue[1], selectedValue[1]) + } + } - disabledStartTime (time) { - return this.props.disabledTime(time, 'start') - }, + if (!hasProp(this, 'selectedValue')) { + this.setState({ + sSelectedValue: selectedValue, + }) + } - disabledEndTime (time) { - return this.props.disabledTime(time, 'end') - }, + // 尚未选择过时间，直接输入的话 + if (!this.sSelectedValue[0] || !this.sSelectedValue[1]) { + const startValue = selectedValue[0] || moment() + const endValue = selectedValue[1] || startValue.clone().add(1, 'months') + this.setState({ + sSelectedValue: selectedValue, + sValue: getValueFromSelectedValue([startValue, endValue]), + }) + } - disabledStartMonth (month) { - const { value } = this.state - return month.isSameOrAfter(value[1], 'month') - }, + if (selectedValue[0] && !selectedValue[1]) { + this.setState({ firstSelectedValue: selectedValue[0] }) + this.fireHoverValueChange(selectedValue.concat()) + } + this.__emit('change', selectedValue) + if (direct || selectedValue[0] && selectedValue[1]) { + this.setState({ + prevSelectedValue: selectedValue, + firstSelectedValue: null, + }) + this.fireHoverValueChange([]) + this.__emit('select', selectedValue) + } + }, - disabledEndMonth (month) { - const { value } = this.state - return month.isSameOrBefore(value[0], 'month') + fireValueChange (value) { + if (!hasProp(this, 'value')) { + this.setState({ + sValue: value, + }) + } + this.__emit('valueChange', value) + }, + + fireHoverValueChange (hoverValue) { + if (!hasProp(this, 'hoverValue')) { + this.setState({ sHoverValue: hoverValue }) + } + this.__emit('hoverChange', hoverValue) + }, + + clear () { + this.fireSelectValueChange([], true) + this.__emit('clear') + }, + + disabledStartTime (time) { + return this.disabledTime(time, 'start') + }, + + disabledEndTime (time) { + return this.disabledTime(time, 'end') + }, + + disabledStartMonth (month) { + const { sValue } = this + return month.isSameOrAfter(sValue[1], 'month') + }, + + disabledEndMonth (month) { + const { sValue } = this + return month.isSameOrBefore(sValue[0], 'month') + }, }, render () { - const { props, state } = this + const props = getOptionProps(this) const { prefixCls, dateInputPlaceholder, timePicker, showOk, locale, showClear, showToday, type, } = props const { - hoverValue, - selectedValue, - mode, + sHoverValue, + sSelectedValue, + sMode, showTimePicker, - } = state + sValue, + $listeners, + } = this const className = { - [props.className]: !!props.className, [prefixCls]: 1, [`${prefixCls}-hidden`]: !props.visible, [`${prefixCls}-range`]: 1, [`${prefixCls}-show-time-picker`]: showTimePicker, [`${prefixCls}-week-number`]: props.showWeekNumber, } - const classes = classnames(className) + const baseProps = { + props, + on: $listeners, + } const newProps = { - selectedValue: state.selectedValue, - onSelect: this.onSelect, - onDayHover: type === 'start' && selectedValue[1] || - type === 'end' && selectedValue[0] || !!hoverValue.length - ? this.onDayHover : undefined, + props: { + selectedValue: sSelectedValue, + }, + on: { + select: this.onSelect, + dayHover: type === 'start' && sSelectedValue[1] || + type === 'end' && sSelectedValue[0] || !!sHoverValue.length + ? this.onDayHover : undefined, + }, } let placeholder1 @@ -501,11 +489,11 @@ const RangeCalendar = createReactClass({ } } const showOkButton = showOk === true || showOk !== false && !!timePicker - const cls = classnames({ + const cls = { [`${prefixCls}-footer`]: true, [`${prefixCls}-range-bottom`]: true, [`${prefixCls}-footer-show-ok`]: showOkButton, - }) + } const startValue = this.getStartValue() const endValue = this.getEndValue() @@ -521,34 +509,33 @@ const RangeCalendar = createReactClass({ return (
{props.renderSidebar()} -
- {showClear && selectedValue[0] && selectedValue[1] +
+ {showClear && sSelectedValue[0] && sSelectedValue[1] ? : null}
- ~ + ~
-
+
{props.renderFooter()} {showToday || props.timePicker || showOkButton ? ( -
+
{showToday ? ( ) : null} {props.timePicker ? : null} {showOkButton ? : null}
@@ -618,7 +605,7 @@ const RangeCalendar = createReactClass({
) }, -}) +} export default RangeCalendar diff --git a/components/vc-calendar/src/calendar/CalendarFooter.vue b/components/vc-calendar/src/calendar/CalendarFooter.vue index 27ca42d8a..462d69865 100644 --- a/components/vc-calendar/src/calendar/CalendarFooter.vue +++ b/components/vc-calendar/src/calendar/CalendarFooter.vue @@ -19,6 +19,11 @@ const CalendarFooter = { value: PropTypes.object, renderFooter: PropTypes.func, defaultValue: PropTypes.object, + locale: PropTypes.object, + showToday: PropTypes.bool.def(true), + disabledDate: PropTypes.func, + showTimePicker: PropTypes.bool, + okDisabled: PropTypes.bool, }, methods: { onSelect (value) { @@ -44,16 +49,17 @@ const CalendarFooter = { }, on: $listeners, } - let nowEl + console.log(props) + let nowEl = null if (showToday) { nowEl = } delete btnProps.props.value - let okBtn + let okBtn = null if (showOk === true || showOk !== false && !!timePicker) { okBtn = } - let timePickerBtn + let timePickerBtn = null if (timePicker) { timePickerBtn = } @@ -61,7 +67,7 @@ const CalendarFooter = { let footerBtn if (nowEl || timePickerBtn || okBtn) { footerBtn = ( - {[nowEl, timePickerBtn, okBtn]} + {nowEl}{timePickerBtn}{okBtn} ) } const cls = { diff --git a/components/vc-calendar/src/calendar/CalendarHeader.vue b/components/vc-calendar/src/calendar/CalendarHeader.vue index d7915b08f..6490082cc 100644 --- a/components/vc-calendar/src/calendar/CalendarHeader.vue +++ b/components/vc-calendar/src/calendar/CalendarHeader.vue @@ -5,7 +5,7 @@ import { getOptionProps } from '@/components/_util/props-util' import MonthPanel from '../month/MonthPanel' import YearPanel from '../year/YearPanel' import DecadePanel from '../decade/DecadePanel' - +function noop () {} function goMonth (direction) { const next = this.value.clone() next.add(direction, 'months') @@ -75,7 +75,7 @@ const CalendarHeader = { const year = ( this.showYearPanel('date')} + onClick={showTimePicker ? noop : () => this.showYearPanel('date')} title={locale.yearSelect} > {value.format(locale.yearFormat)} @@ -83,7 +83,7 @@ const CalendarHeader = { const month = ( {locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value)} diff --git a/components/vc-calendar/src/calendar/TimePickerButton.vue b/components/vc-calendar/src/calendar/TimePickerButton.vue index 911446ed6..b2cb72614 100644 --- a/components/vc-calendar/src/calendar/TimePickerButton.vue +++ b/components/vc-calendar/src/calendar/TimePickerButton.vue @@ -2,11 +2,12 @@ function noop () {} export default { functional: true, - render: function (createElement, context) { - const { data, listeners = {}} = context + render: function (h, context) { + const { props, listeners = {}} = context + console.log(context) const { prefixCls, locale, showTimePicker, - timePickerDisabled } = data + timePickerDisabled } = props const { closeTimePicker = noop, openTimePicker = noop } = listeners const className = { [`${prefixCls}-time-picker-btn`]: true, @@ -16,13 +17,11 @@ export default { if (!timePickerDisabled) { onClick = showTimePicker ? closeTimePicker : openTimePicker } - return ( - {showTimePicker ? locale.dateSelect : locale.timeSelect} - ) + return ( + + {showTimePicker ? locale.dateSelect : locale.timeSelect} + + ) }, } diff --git a/components/vc-calendar/src/calendar/TodayButton.vue b/components/vc-calendar/src/calendar/TodayButton.vue index 1be37ce5d..b1be9704b 100644 --- a/components/vc-calendar/src/calendar/TodayButton.vue +++ b/components/vc-calendar/src/calendar/TodayButton.vue @@ -4,7 +4,7 @@ function noop () {} export default { functional: true, render (createElement, context) { - const { data, listeners = {}} = context + const { props, listeners = {}} = context const { prefixCls, locale, @@ -14,7 +14,7 @@ export default { disabledDate, // onToday, text, - } = data + } = props const { today = noop } = listeners const localeNow = (!text && timePicker ? locale.now : text) || locale.today const disabledToday = diff --git a/components/vc-calendar/src/date/DateTBody.vue b/components/vc-calendar/src/date/DateTBody.vue index 0596f8123..68ae5db92 100644 --- a/components/vc-calendar/src/date/DateTBody.vue +++ b/components/vc-calendar/src/date/DateTBody.vue @@ -4,7 +4,7 @@ import { getOptionProps } from '@/components/_util/props-util' import cx from 'classnames' import DateConstants from './DateConstants' import { getTitleString, getTodayTime } from '../util/' - +function noop () {} function isSameDay (one, two) { return one && two && one.isSame(two, 'day') } @@ -35,7 +35,7 @@ const DateTBody = { dateRender: PropTypes.func, disabledDate: PropTypes.func, prefixCls: PropTypes.string, - selectedValue: PropTypes.oneOfType([PropTypes.object, PropTypes.arrayOf(PropTypes.object)]), + selectedValue: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]), value: PropTypes.object, hoverValue: PropTypes.any.def([]), showWeekNumber: PropTypes.bool, @@ -48,6 +48,9 @@ const DateTBody = { showWeekNumber, dateRender, disabledDate, hoverValue, } = props + console.log('selectedValue', selectedValue) + const { $listeners = {}} = this + const { select = noop, dayHover = noop } = $listeners let iIndex let jIndex let current @@ -208,9 +211,9 @@ const DateTBody = { dateCells.push( diff --git a/components/vc-calendar/src/date/DateTable.vue b/components/vc-calendar/src/date/DateTable.vue index 566efbb82..8ea9c29ea 100644 --- a/components/vc-calendar/src/date/DateTable.vue +++ b/components/vc-calendar/src/date/DateTable.vue @@ -5,15 +5,15 @@ import DateTBody from './DateTBody' export default { functional: true, render (createElement, context) { - const { data, listeners = {}} = context - const prefixCls = data.prefixCls - const props = { - props: data, + const { props, listeners = {}} = context + const prefixCls = props.prefixCls + const bodyProps = { + props, on: listeners, } return ( - +
) }, } diff --git a/components/vc-calendar/src/mixin/CalendarMixin.js b/components/vc-calendar/src/mixin/CalendarMixin.js index 24a030be1..f527a3a4c 100644 --- a/components/vc-calendar/src/mixin/CalendarMixin.js +++ b/components/vc-calendar/src/mixin/CalendarMixin.js @@ -56,7 +56,7 @@ const CalendarMixin = { }, renderRoot (newProps) { - const props = this.props + const props = this.$props const prefixCls = props.prefixCls const className = { diff --git a/components/vc-calendar/src/mixin/CommonMixin.js b/components/vc-calendar/src/mixin/CommonMixin.js index f1a1177c1..52866af33 100644 --- a/components/vc-calendar/src/mixin/CommonMixin.js +++ b/components/vc-calendar/src/mixin/CommonMixin.js @@ -6,7 +6,7 @@ export default { locale: PropTypes.object.def(enUs), visible: PropTypes.bool.def(true), // onSelect: PropTypes.func, - prefixCls: PropTypes.string.def('rc-calendat'), + prefixCls: PropTypes.string.def('rc-calendar'), // onChange: PropTypes.func, // onOk: PropTypes.func, }, diff --git a/examples/routes.js b/examples/routes.js index c798a71bd..da607af08 100644 --- a/examples/routes.js +++ b/examples/routes.js @@ -3,7 +3,7 @@ const AsyncComp = () => { const hashs = window.location.hash.split('/') const d = hashs[hashs.length - 1] return { - component: import(`../components/pagination/demo/${d}`), + component: import(`../components/vc-calendar/demo/${d}`), } } export default [