123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542 |
- 'use strict';
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
- var _defineProperty3 = _interopRequireDefault(_defineProperty2);
- var _extends2 = require('babel-runtime/helpers/extends');
- var _extends3 = _interopRequireDefault(_extends2);
- var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');
- var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);
- var _moment = require('moment');
- var moment = _interopRequireWildcard(_moment);
- var _RangeCalendar = require('../vc-calendar/src/RangeCalendar');
- var _RangeCalendar2 = _interopRequireDefault(_RangeCalendar);
- var _Picker = require('../vc-calendar/src/Picker');
- var _Picker2 = _interopRequireDefault(_Picker);
- var _classnames = require('classnames');
- var _classnames2 = _interopRequireDefault(_classnames);
- var _shallowequal = require('shallowequal');
- var _shallowequal2 = _interopRequireDefault(_shallowequal);
- var _icon = require('../icon');
- var _icon2 = _interopRequireDefault(_icon);
- var _tag = require('../tag');
- var _tag2 = _interopRequireDefault(_tag);
- var _configConsumerProps = require('../config-provider/configConsumerProps');
- var _interopDefault = require('../_util/interopDefault');
- var _interopDefault2 = _interopRequireDefault(_interopDefault);
- var _interface = require('./interface');
- var _propsUtil = require('../_util/props-util');
- var _BaseMixin = require('../_util/BaseMixin');
- var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
- var _utils = require('./utils');
- var _InputIcon = require('./InputIcon');
- var _InputIcon2 = _interopRequireDefault(_InputIcon);
- function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
- function noop() {}
- function getShowDateFromValue(value, mode) {
- var _value = (0, _slicedToArray3['default'])(value, 2),
- start = _value[0],
- end = _value[1];
- // value could be an empty array, then we should not reset showDate
- if (!start && !end) {
- return;
- }
- if (mode && mode[0] === 'month') {
- return [start, end];
- }
- var newEnd = end && end.isSame(start, 'month') ? end.clone().add(1, 'month') : end;
- return [start, newEnd];
- }
- 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(function (i) {
- return !i;
- });
- }
- return false;
- }
- function fixLocale(value, localeCode) {
- if (!localeCode) {
- return;
- }
- if (!value || value.length === 0) {
- return;
- }
- var _value2 = (0, _slicedToArray3['default'])(value, 2),
- start = _value2[0],
- end = _value2[1];
- if (start) {
- start.locale(localeCode);
- }
- if (end) {
- end.locale(localeCode);
- }
- }
- exports['default'] = {
- name: 'ARangePicker',
- mixins: [_BaseMixin2['default']],
- model: {
- prop: 'value',
- event: 'change'
- },
- props: (0, _propsUtil.initDefaultProps)((0, _interface.RangePickerProps)(), {
- allowClear: true,
- showToday: false,
- separator: '~'
- }),
- inject: {
- configProvider: { 'default': function _default() {
- return _configConsumerProps.ConfigConsumerProps;
- } }
- },
- data: function data() {
- var value = this.value || this.defaultValue || [];
- var _value3 = (0, _slicedToArray3['default'])(value, 2),
- start = _value3[0],
- end = _value3[1];
- if (start && !(0, _interopDefault2['default'])(moment).isMoment(start) || end && !(0, _interopDefault2['default'])(moment).isMoment(end)) {
- 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');
- }
- var pickerValue = !value || isEmptyArray(value) ? this.defaultPickerValue : value;
- return {
- sValue: value,
- sShowDate: pickerValueAdapter(pickerValue || (0, _interopDefault2['default'])(moment)()),
- sOpen: this.open,
- sHoverValue: []
- };
- },
- watch: {
- value: function value(val) {
- var value = val || [];
- var state = { sValue: value };
- if (!(0, _shallowequal2['default'])(val, this.sValue)) {
- state = (0, _extends3['default'])({}, state, {
- sShowDate: getShowDateFromValue(value, this.mode) || this.sShowDate
- });
- }
- this.setState(state);
- },
- open: function open(val) {
- var state = { sOpen: val };
- this.setState(state);
- },
- sOpen: function sOpen(val, oldVal) {
- var _this = this;
- this.$nextTick(function () {
- if (!(0, _propsUtil.hasProp)(_this, 'open') && oldVal && !val) {
- _this.focus();
- }
- });
- }
- },
- methods: {
- setValue: function setValue(value, hidePanel) {
- this.handleChange(value);
- if ((hidePanel || !this.showTime) && !(0, _propsUtil.hasProp)(this, 'open')) {
- this.setState({ sOpen: false });
- }
- },
- clearSelection: function clearSelection(e) {
- e.preventDefault();
- e.stopPropagation();
- this.setState({ sValue: [] });
- this.handleChange([]);
- },
- clearHoverValue: function clearHoverValue() {
- this.setState({ sHoverValue: [] });
- },
- handleChange: function handleChange(value) {
- if (!(0, _propsUtil.hasProp)(this, 'value')) {
- this.setState(function (_ref) {
- var sShowDate = _ref.sShowDate;
- return {
- sValue: value,
- sShowDate: getShowDateFromValue(value) || sShowDate
- };
- });
- }
- if (value[0] && value[1] && value[0].diff(value[1]) > 0) {
- value[1] = undefined;
- }
- var _value4 = (0, _slicedToArray3['default'])(value, 2),
- start = _value4[0],
- end = _value4[1];
- this.$emit('change', value, [(0, _utils.formatDate)(start, this.format), (0, _utils.formatDate)(end, this.format)]);
- },
- handleOpenChange: function handleOpenChange(open) {
- if (!(0, _propsUtil.hasProp)(this, 'open')) {
- this.setState({ sOpen: open });
- }
- if (open === false) {
- this.clearHoverValue();
- }
- this.$emit('openChange', open);
- },
- handleShowDateChange: function handleShowDateChange(showDate) {
- this.setState({ sShowDate: showDate });
- },
- handleHoverChange: function handleHoverChange(hoverValue) {
- this.setState({ sHoverValue: hoverValue });
- },
- handleRangeMouseLeave: function handleRangeMouseLeave() {
- if (this.sOpen) {
- this.clearHoverValue();
- }
- },
- handleCalendarInputSelect: function handleCalendarInputSelect(value) {
- var _value5 = (0, _slicedToArray3['default'])(value, 1),
- start = _value5[0];
- if (!start) {
- return;
- }
- this.setState(function (_ref2) {
- var sShowDate = _ref2.sShowDate;
- return {
- sValue: value,
- sShowDate: getShowDateFromValue(value) || sShowDate
- };
- });
- },
- handleRangeClick: function handleRangeClick(value) {
- if (typeof value === 'function') {
- value = value();
- }
- this.setValue(value, true);
- this.$emit('ok', value);
- this.$emit('openChange', false);
- },
- onMouseEnter: function onMouseEnter(e) {
- this.$emit('mouseenter', e);
- },
- onMouseLeave: function onMouseLeave(e) {
- this.$emit('mouseleave', e);
- },
- focus: function focus() {
- this.$refs.picker.focus();
- },
- blur: function blur() {
- this.$refs.picker.blur();
- },
- renderFooter: function renderFooter() {
- var _this2 = this;
- var h = this.$createElement;
- var ranges = this.ranges,
- $scopedSlots = this.$scopedSlots,
- $slots = this.$slots;
- var prefixCls = this._prefixCls,
- tagPrefixCls = this._tagPrefixCls;
- var renderExtraFooter = this.renderExtraFooter || $scopedSlots.renderExtraFooter || $slots.renderExtraFooter;
- if (!ranges && !renderExtraFooter) {
- return null;
- }
- var customFooter = renderExtraFooter ? h(
- 'div',
- { 'class': prefixCls + '-footer-extra', key: 'extra' },
- [typeof renderExtraFooter === 'function' ? renderExtraFooter() : renderExtraFooter]
- ) : null;
- var operations = ranges && Object.keys(ranges).map(function (range) {
- var value = ranges[range];
- var hoverValue = typeof value === 'function' ? value.call(_this2) : value;
- return h(
- _tag2['default'],
- {
- key: range,
- attrs: { prefixCls: tagPrefixCls,
- color: 'blue'
- },
- on: {
- 'click': function click() {
- return _this2.handleRangeClick(value);
- },
- 'mouseenter': function mouseenter() {
- return _this2.setState({ sHoverValue: hoverValue });
- },
- 'mouseleave': _this2.handleRangeMouseLeave
- }
- },
- [range]
- );
- });
- var rangeNode = operations && operations.length > 0 ? h(
- 'div',
- { 'class': prefixCls + '-footer-extra ' + prefixCls + '-range-quick-selector', key: 'range' },
- [operations]
- ) : null;
- return [rangeNode, customFooter];
- }
- },
- render: function render() {
- var _classNames,
- _this3 = this;
- var h = arguments[0];
- var props = (0, _propsUtil.getOptionProps)(this);
- var suffixIcon = (0, _propsUtil.getComponentFromProp)(this, 'suffixIcon');
- suffixIcon = Array.isArray(suffixIcon) ? suffixIcon[0] : suffixIcon;
- var value = this.sValue,
- showDate = this.sShowDate,
- hoverValue = this.sHoverValue,
- open = this.sOpen,
- $scopedSlots = this.$scopedSlots;
- var listeners = (0, _propsUtil.getListeners)(this);
- var _listeners$calendarCh = listeners.calendarChange,
- calendarChange = _listeners$calendarCh === undefined ? noop : _listeners$calendarCh,
- _listeners$ok = listeners.ok,
- ok = _listeners$ok === undefined ? noop : _listeners$ok,
- _listeners$focus = listeners.focus,
- focus = _listeners$focus === undefined ? noop : _listeners$focus,
- _listeners$blur = listeners.blur,
- blur = _listeners$blur === undefined ? noop : _listeners$blur,
- _listeners$panelChang = listeners.panelChange,
- panelChange = _listeners$panelChang === undefined ? noop : _listeners$panelChang;
- var customizePrefixCls = props.prefixCls,
- customizeTagPrefixCls = props.tagPrefixCls,
- popupStyle = props.popupStyle,
- disabledDate = props.disabledDate,
- disabledTime = props.disabledTime,
- showTime = props.showTime,
- showToday = props.showToday,
- ranges = props.ranges,
- locale = props.locale,
- localeCode = props.localeCode,
- format = props.format,
- separator = props.separator,
- inputReadOnly = props.inputReadOnly;
- var getPrefixCls = this.configProvider.getPrefixCls;
- var prefixCls = getPrefixCls('calendar', customizePrefixCls);
- var tagPrefixCls = getPrefixCls('tag', customizeTagPrefixCls);
- this._prefixCls = prefixCls;
- this._tagPrefixCls = tagPrefixCls;
- var dateRender = props.dateRender || $scopedSlots.dateRender;
- fixLocale(value, localeCode);
- fixLocale(showDate, localeCode);
- var calendarClassName = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-time', showTime), (0, _defineProperty3['default'])(_classNames, prefixCls + '-range-with-ranges', ranges), _classNames));
- // 需要选择时间时,点击 ok 时才触发 onChange
- var pickerChangeHandler = {
- on: {
- change: this.handleChange
- }
- };
- var calendarProps = {
- on: {
- ok: this.handleChange
- },
- props: {}
- };
- if (props.timePicker) {
- pickerChangeHandler.on.change = function (changedValue) {
- return _this3.handleChange(changedValue);
- };
- } else {
- calendarProps = { on: {}, props: {} };
- }
- if ('mode' in props) {
- calendarProps.props.mode = props.mode;
- }
- var startPlaceholder = Array.isArray(props.placeholder) ? props.placeholder[0] : locale.lang.rangePlaceholder[0];
- var endPlaceholder = Array.isArray(props.placeholder) ? props.placeholder[1] : locale.lang.rangePlaceholder[1];
- var rangeCalendarProps = (0, _propsUtil.mergeProps)(calendarProps, {
- props: {
- separator: separator,
- format: format,
- prefixCls: prefixCls,
- renderFooter: this.renderFooter,
- timePicker: props.timePicker,
- disabledDate: disabledDate,
- disabledTime: disabledTime,
- dateInputPlaceholder: [startPlaceholder, endPlaceholder],
- locale: locale.lang,
- dateRender: dateRender,
- value: showDate,
- hoverValue: hoverValue,
- showToday: showToday,
- inputReadOnly: inputReadOnly
- },
- on: {
- change: calendarChange,
- ok: ok,
- valueChange: this.handleShowDateChange,
- hoverChange: this.handleHoverChange,
- panelChange: panelChange,
- inputSelect: this.handleCalendarInputSelect
- },
- 'class': calendarClassName,
- scopedSlots: $scopedSlots
- });
- var calendar = h(_RangeCalendar2['default'], rangeCalendarProps);
- // default width for showTime
- var pickerStyle = {};
- if (props.showTime) {
- pickerStyle.width = '350px';
- }
- var _value6 = (0, _slicedToArray3['default'])(value, 2),
- startValue = _value6[0],
- endValue = _value6[1];
- var clearIcon = !props.disabled && props.allowClear && value && (startValue || endValue) ? h(_icon2['default'], {
- attrs: {
- type: 'close-circle',
- theme: 'filled'
- },
- 'class': prefixCls + '-picker-clear',
- on: {
- 'click': this.clearSelection
- }
- }) : null;
- var inputIcon = h(_InputIcon2['default'], {
- attrs: { suffixIcon: suffixIcon, prefixCls: prefixCls }
- });
- var input = function input(_ref3) {
- var inputValue = _ref3.value;
- var _inputValue = (0, _slicedToArray3['default'])(inputValue, 2),
- start = _inputValue[0],
- end = _inputValue[1];
- return h(
- 'span',
- { 'class': props.pickerInputClass },
- [h('input', {
- attrs: {
- disabled: props.disabled,
- readOnly: true,
- placeholder: startPlaceholder,
- tabIndex: -1
- },
- domProps: {
- 'value': (0, _utils.formatDate)(start, props.format)
- },
- 'class': prefixCls + '-range-picker-input' }), h(
- 'span',
- { 'class': prefixCls + '-range-picker-separator' },
- [' ', separator, ' ']
- ), h('input', {
- attrs: {
- disabled: props.disabled,
- readOnly: true,
- placeholder: endPlaceholder,
- tabIndex: -1
- },
- domProps: {
- 'value': (0, _utils.formatDate)(end, props.format)
- },
- 'class': prefixCls + '-range-picker-input' }), clearIcon, inputIcon]
- );
- };
- var vcDatePickerProps = (0, _propsUtil.mergeProps)({
- props: props,
- on: listeners
- }, pickerChangeHandler, {
- props: {
- calendar: calendar,
- value: value,
- open: open,
- prefixCls: prefixCls + '-picker-container'
- },
- on: {
- openChange: this.handleOpenChange
- },
- style: popupStyle,
- scopedSlots: (0, _extends3['default'])({ 'default': input }, $scopedSlots)
- });
- return h(
- 'span',
- {
- ref: 'picker',
- 'class': props.pickerClass,
- style: pickerStyle,
- attrs: { tabIndex: props.disabled ? -1 : 0
- },
- on: {
- 'focus': focus,
- 'blur': blur,
- 'mouseenter': this.onMouseEnter,
- 'mouseleave': this.onMouseLeave
- }
- },
- [h(_Picker2['default'], vcDatePickerProps)]
- );
- }
- };
|