import * as moment from 'moment' import RangeCalendar from '../vc-calendar/src/RangeCalendar' import VcDatePicker from '../vc-calendar/src/Picker' import classNames from 'classnames' import shallowequal from 'shallowequal' import Icon from '../icon' import Tag from '../tag' import interopDefault from '../_util/interopDefault' import { RangePickerProps } from './interface' import { hasProp, getOptionProps, initDefaultProps, mergeProps, getComponentFromProp, isValidElement } from '../_util/props-util' import BaseMixin from '../_util/BaseMixin' import { cloneElement } from '../_util/vnode' function noop () {} function getShowDateFromValue (value) { const [start, end] = value // value could be an empty array, then we should not reset showDate if (!start && !end) { return } const newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end return [start, newEnd] } function formatValue (value, format) { return (value && value.format(format)) || '' } function pickerValueAdapter (value) { if (!value) { return } if (Array.isArray(value)) { return value } return [value, value.clone().add(1, 'month')] } function isEmptyArray (arr) { if (Array.isArray(arr)) { return arr.length === 0 || arr.every(i => !i) } return false } function fixLocale (value, localeCode) { if (!localeCode) { return } if (!value || value.length === 0) { return } if (value[0]) { value[0].locale(localeCode) } if (value[1]) { value[1].locale(localeCode) } } export default { mixins: [BaseMixin], name: 'ARangePicker', props: initDefaultProps(RangePickerProps(), { prefixCls: 'ant-calendar', tagPrefixCls: 'ant-tag', allowClear: true, showToday: false, }), model: { prop: 'value', event: 'change', }, data () { const value = this.value || this.defaultValue || [] if ( value[0] && !interopDefault(moment).isMoment(value[0]) || value[1] && !interopDefault(moment).isMoment(value[1]) ) { throw new Error( 'The value/defaultValue of RangePicker must be a moment object array after `antd@2.0`, ' + 'see: https://u.ant.design/date-picker-value', ) } const pickerValue = !value || isEmptyArray(value) ? this.defaultPickerValue : value return { sValue: value, sShowDate: pickerValueAdapter(pickerValue || interopDefault(moment)()), sOpen: this.open, sHoverValue: [], } }, watch: { value (val) { const value = val || [] let state = { sValue: value } if (!shallowequal(val, this.sValue)) { state = { ...state, sShowDate: getShowDateFromValue(value) || this.sShowDate, } } this.setState(state) }, open (val) { this.setState({ sOpen: val, }) }, }, methods: { clearSelection (e) { e.preventDefault() e.stopPropagation() this.setState({ sValue: [] }) this.handleChange([]) }, clearHoverValue () { this.setState({ sHoverValue: [] }) }, handleChange (value) { if (!hasProp(this, 'value')) { this.setState(({ sShowDate }) => ({ sValue: value, sShowDate: getShowDateFromValue(value) || sShowDate, })) } this.$emit('change', value, [ formatValue(value[0], this.format), formatValue(value[1], this.format), ]) this.focus() }, handleOpenChange (open) { if (!hasProp(this, 'open')) { this.setState({ sOpen: open }) } if (open === false) { this.clearHoverValue() } this.$emit('openChange', open) }, handleShowDateChange (showDate) { this.setState({ sShowDate: showDate }) }, handleHoverChange (hoverValue) { this.setState({ sHoverValue: hoverValue }) }, handleRangeMouseLeave () { if (this.sOpen) { this.clearHoverValue() } }, handleCalendarInputSelect (value) { if (!value[0]) { return } this.setState(({ sShowDate }) => ({ sValue: value, sShowDate: getShowDateFromValue(value) || sShowDate, })) }, handleRangeClick (value) { if (typeof value === 'function') { value = value() } this.setValue(value, true) this.$emit('ok', value) this.$emit('openChange', false) }, setValue (value, hidePanel) { this.handleChange(value) if ((hidePanel || !this.showTime) && !hasProp(this, 'open')) { this.setState({ sOpen: false }) } }, onMouseEnter (e) { this.$emit('mouseenter', e) }, onMouseLeave (e) { this.$emit('mouseleave', e) }, focus () { this.$refs.picker.focus() }, blur () { this.$refs.picker.blur() }, renderFooter (...args) { const { prefixCls, ranges, $scopedSlots, $slots, tagPrefixCls } = this const renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter if (!ranges && !renderExtraFooter) { return null } const customFooter = renderExtraFooter ? (
) : null const operations = Object.keys(ranges || {}).map((range) => { const value = ranges[range] return (