@fe6/water-pro
Version:
An enterprise-class UI design language and Vue-based implementation
290 lines (249 loc) • 11 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = wrapPicker;
var _vue = require("vue");
var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
var _Panel = _interopRequireDefault(require("../vc-time-picker/Panel"));
var _classNames3 = _interopRequireDefault(require("../_util/classNames"));
var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
var _utils = require("../time-picker/utils");
var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
var _propsUtil = require("../_util/props-util");
var _configProvider = require("../config-provider");
var _momentUtil = require("../_util/moment-util");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var DEFAULT_FORMAT = {
date: 'YYYY-MM-DD',
dateTime: 'YYYY-MM-DD HH:mm:ss',
week: 'gggg-wo',
month: 'YYYY-MM',
year: 'YYYY'
};
var LOCALE_FORMAT_MAPPING = {
date: 'dateFormat',
dateTime: 'dateTimeFormat',
week: 'weekFormat',
month: 'monthFormat',
year: 'yearFormat'
};
function getColumns(_ref) {
var showHour = _ref.showHour,
showMinute = _ref.showMinute,
showSecond = _ref.showSecond,
use12Hours = _ref.use12Hours;
var column = 0;
if (showHour) {
column += 1;
}
if (showMinute) {
column += 1;
}
if (showSecond) {
column += 1;
}
if (use12Hours) {
column += 1;
}
return column;
}
function wrapPicker(Picker, props, pickerType) {
return (0, _vue.defineComponent)({
name: Picker.name,
inheritAttrs: false,
props: _extends(_extends({}, props), {
transitionName: _vueTypes.default.string.def('slide-up'),
popupStyle: _vueTypes.default.style,
locale: _vueTypes.default.any.def({})
}),
emits: ['update:value', 'openChange', 'focus', 'blur', 'mouseenter', 'mouseleave', 'change', 'ok', 'calendarChange'],
setup: function setup() {
return {
configProvider: (0, _vue.inject)('configProvider', _configProvider.defaultConfigProvider),
picker: undefined,
popupRef: undefined
};
},
watch: {
value: function value(val) {
(0, _momentUtil.checkValidate)('DatePicker', val, 'value', this.valueFormat);
}
},
created: function created() {
(0, _vue.provide)('savePopupRef', this.savePopupRef);
},
mounted: function mounted() {
var _this = this;
var _this$$props = this.$props,
autofocus = _this$$props.autofocus,
disabled = _this$$props.disabled,
value = _this$$props.value,
defaultValue = _this$$props.defaultValue,
valueFormat = _this$$props.valueFormat;
(0, _momentUtil.checkValidate)('DatePicker', defaultValue, 'defaultValue', valueFormat);
(0, _momentUtil.checkValidate)('DatePicker', value, 'value', valueFormat);
if (autofocus && !disabled) {
(0, _vue.nextTick)(function () {
_this.focus();
});
}
},
methods: {
savePicker: function savePicker(node) {
this.picker = node;
},
getDefaultLocale: function getDefaultLocale() {
var result = _extends(_extends({}, _zh_CN.default), this.locale);
result.lang = _extends(_extends({}, result.lang), (this.locale || {}).lang);
return result;
},
savePopupRef: function savePopupRef(ref) {
this.popupRef = ref;
},
handleOpenChange: function handleOpenChange(open) {
this.$emit('openChange', open);
},
handleFocus: function handleFocus(e) {
this.$emit('focus', e);
},
handleBlur: function handleBlur(e) {
this.$emit('blur', e);
},
handleMouseEnter: function handleMouseEnter(e) {
this.$emit('mouseenter', e);
},
handleMouseLeave: function handleMouseLeave(e) {
this.$emit('mouseleave', e);
},
handleChange: function handleChange(date, dateString) {
var _this2 = this;
var theValue = this.type === 'multiple' ? [] : '';
if (this.type === 'multiple') {
if (date.length > 0) {
var theNowVal = this.valueFormat ? (0, _momentUtil.momentToString)(date === null || date === void 0 ? void 0 : date[0], this.valueFormat) : date === null || date === void 0 ? void 0 : date[0];
if (Array.isArray(this.value) && this.value.length > 0) {
var theOneIdx = this.value.findIndex(function (vItem) {
if (_this2.valueFormat) {
return vItem === theNowVal;
} else {
return vItem.isSame(theNowVal);
}
});
theValue = (0, _cloneDeep.default)(this.value);
if (theOneIdx > -1) {
theValue.splice(theOneIdx, 1);
} else {
theValue.push(theNowVal);
}
} else {
theValue = [theNowVal];
}
}
} else {
theValue = this.valueFormat ? (0, _momentUtil.momentToString)(date, this.valueFormat) : date;
}
this.$emit('update:value', theValue);
this.$emit('change', theValue, dateString);
},
handleMulitplteRemove: function handleMulitplteRemove(_, dataIdx) {
if (this.type === 'multiple' && dataIdx > -1) {
var oldVal = this.value.slice();
this.value.splice(dataIdx, 1);
this.$emit('update:value', this.value);
this.$emit('change', this.value, oldVal);
}
},
handleOk: function handleOk(val) {
this.$emit('ok', this.valueFormat ? (0, _momentUtil.momentToString)(val, this.valueFormat) : val);
},
handleCalendarChange: function handleCalendarChange(date, dateString) {
this.$emit('calendarChange', this.valueFormat ? (0, _momentUtil.momentToString)(date, this.valueFormat) : date, dateString);
},
focus: function focus() {
this.picker.focus();
},
blur: function blur() {
this.picker.blur();
},
transformValue: function transformValue(props) {
if ('value' in props) {
props.value = (0, _momentUtil.stringToMoment)(props.value, this.valueFormat);
}
if ('defaultValue' in props) {
props.defaultValue = (0, _momentUtil.stringToMoment)(props.defaultValue, this.valueFormat);
}
if ('defaultPickerValue' in props) {
props.defaultPickerValue = (0, _momentUtil.stringToMoment)(props.defaultPickerValue, this.valueFormat);
}
},
renderPicker: function renderPicker(locale, localeCode) {
var _classNames2;
var props = _extends(_extends({}, (0, _propsUtil.getOptionProps)(this)), this.$attrs);
this.transformValue(props);
var customizePrefixCls = props.prefixCls,
customizeInputPrefixCls = props.inputPrefixCls,
getCalendarContainer = props.getCalendarContainer,
size = props.size,
showTime = props.showTime,
disabled = props.disabled,
format = props.format;
var mergedPickerType = showTime && this.type !== 'multiple' ? "".concat(pickerType, "Time") : pickerType;
var mergedFormat = format || locale[LOCALE_FORMAT_MAPPING[mergedPickerType]] || DEFAULT_FORMAT[mergedPickerType];
var _this$configProvider = this.configProvider,
getPrefixCls = _this$configProvider.getPrefixCls,
getContextPopupContainer = _this$configProvider.getPopupContainer;
var getPopupContainer = getCalendarContainer || getContextPopupContainer;
var prefixCls = getPrefixCls('calendar', customizePrefixCls);
var inputPrefixCls = getPrefixCls('input', customizeInputPrefixCls);
var pickerClass = (0, _classNames3.default)("".concat(prefixCls, "-picker"), _defineProperty({}, "".concat(prefixCls, "-picker-").concat(size), !!size));
var pickerInputClass = (0, _classNames3.default)("".concat(prefixCls, "-picker-input"), inputPrefixCls, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(inputPrefixCls, "-lg"), size === 'large'), _defineProperty(_classNames2, "".concat(inputPrefixCls, "-sm"), size === 'small'), _defineProperty(_classNames2, "".concat(inputPrefixCls, "-disabled"), disabled), _classNames2));
var timeFormat = showTime && showTime.format || 'HH:mm:ss';
var vcTimePickerProps = _extends(_extends({}, (0, _utils.generateShowHourMinuteSecond)(timeFormat)), {
format: timeFormat,
use12Hours: showTime && showTime.use12Hours
});
var columns = getColumns(vcTimePickerProps);
var timePickerCls = "".concat(prefixCls, "-time-picker-column-").concat(columns);
var timePickerPanelProps = _extends(_extends(_extends({}, vcTimePickerProps), showTime), {
prefixCls: "".concat(prefixCls, "-time-picker"),
placeholder: locale.timePickerLocale.placeholder,
transitionName: 'slide-up',
class: timePickerCls,
onEsc: function onEsc() {}
});
var timePicker = showTime ? (0, _vue.createVNode)(_Panel.default, timePickerPanelProps, null) : null;
var pickerProps = _extends(_extends({}, props), {
getCalendarContainer: getPopupContainer,
format: mergedFormat,
pickerClass: pickerClass,
pickerInputClass: pickerInputClass,
locale: locale,
localeCode: localeCode,
timePicker: timePicker,
onOpenChange: this.handleOpenChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
onMouseenter: this.handleMouseEnter,
onMouseleave: this.handleMouseLeave,
onChange: this.handleChange,
onMulitplteRemove: this.handleMulitplteRemove,
onOk: this.handleOk,
onCalendarChange: this.handleCalendarChange,
ref: this.savePicker
});
return (0, _vue.createVNode)(Picker, pickerProps, this.$slots);
}
},
render: function render() {
return (0, _vue.createVNode)(_LocaleReceiver.default, {
"componentName": "DatePicker",
"defaultLocale": this.getDefaultLocale,
"children": this.renderPicker
}, null);
}
});
}