UNPKG

ant-design-vue

Version:

An enterprise-class UI design language and Vue-based implementation

278 lines (247 loc) 10.4 kB
import { createVNode as _createVNode } from "vue"; 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); } function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } import { defineComponent, inject } from 'vue'; import PropTypes from '../_util/vue-types'; import BaseMixin from '../_util/BaseMixin'; import { getOptionProps, hasProp } from '../_util/props-util'; import moment from 'moment'; import FullCalendar from '../vc-calendar/src/FullCalendar'; import Header from './Header'; import LocaleReceiver from '../locale-provider/LocaleReceiver'; import interopDefault from '../_util/interopDefault'; import { defaultConfigProvider } from '../config-provider'; import enUS from './locale/en_US'; import { checkValidate, stringToMoment, momentToString, TimeType } from '../_util/moment-util'; import { tuple, withInstall } from '../_util/type'; function noop() { return null; } function zerofixed(v) { if (v < 10) { return "0".concat(v); } return "".concat(v); } var CalendarModeTypes = tuple('month', 'year'); export var CalendarProps = { monthCellRender: PropTypes.func, dateCellRender: PropTypes.func, monthFullCellRender: PropTypes.func, dateFullCellRender: PropTypes.func, prefixCls: PropTypes.string, value: TimeType, defaultValue: TimeType, mode: PropTypes.oneOf(CalendarModeTypes), fullscreen: PropTypes.looseBool.def(true), locale: PropTypes.object.def({}), disabledDate: PropTypes.func, validRange: { type: Array }, headerRender: PropTypes.func, valueFormat: PropTypes.string, onPanelChange: PropTypes.func, onSelect: PropTypes.func, onChange: PropTypes.func, 'onUpdate:value': PropTypes.func }; var Calendar = defineComponent({ name: 'ACalendar', mixins: [BaseMixin], inheritAttrs: false, props: CalendarProps, setup: function setup() { return { configProvider: inject('configProvider', defaultConfigProvider), sPrefixCls: undefined }; }, data: function data() { var value = this.value, defaultValue = this.defaultValue, valueFormat = this.valueFormat; var sValue = value || defaultValue || interopDefault(moment)(); checkValidate('Calendar', defaultValue, 'defaultValue', valueFormat); checkValidate('Calendar', value, 'value', valueFormat); return { sValue: stringToMoment(sValue, valueFormat), sMode: this.mode || 'month' }; }, watch: { value: function value(val) { checkValidate('Calendar', val, 'value', this.valueFormat); this.setState({ sValue: stringToMoment(val, this.valueFormat) }); }, mode: function mode(val) { this.setState({ sMode: val }); } }, methods: { onHeaderValueChange: function onHeaderValueChange(value) { this.setValue(value, 'changePanel'); }, onHeaderTypeChange: function onHeaderTypeChange(mode) { this.sMode = mode; this.triggerPanelChange(this.sValue, mode); }, triggerPanelChange: function triggerPanelChange(value, mode) { var val = this.valueFormat ? momentToString(value, this.valueFormat) : value; this.$emit('panelChange', val, mode); if (value !== this.sValue) { this.$emit('update:value', val); this.$emit('change', val); } }, triggerSelect: function triggerSelect(value) { this.setValue(value, 'select'); }, setValue: function setValue(value, way) { var prevValue = this.value ? stringToMoment(this.value, this.valueFormat) : this.sValue; var mode = this.sMode, valueFormat = this.valueFormat; if (!hasProp(this, 'value')) { this.setState({ sValue: value }); } if (way === 'select') { var val = valueFormat ? momentToString(value, valueFormat) : value; if (prevValue && prevValue.month() !== value.month()) { this.triggerPanelChange(value, mode); } else { this.$emit('update:value', val); } this.$emit('select', val); } else if (way === 'changePanel') { this.triggerPanelChange(value, mode); } }, getDateRange: function getDateRange(validRange, disabledDate) { return function (current) { if (!current) { return false; } var _validRange = _slicedToArray(validRange, 2), startDate = _validRange[0], endDate = _validRange[1]; var inRange = !current.isBetween(startDate, endDate, 'days', '[]'); if (disabledDate) { return disabledDate(current) || inRange; } return inRange; }; }, getDefaultLocale: function getDefaultLocale() { var result = _extends(_extends({}, enUS), this.$props.locale); result.lang = _extends(_extends({}, result.lang), (this.$props.locale || {}).lang); return result; }, monthCellRender2: function monthCellRender2(_ref) { var value = _ref.current; var sPrefixCls = this.sPrefixCls, $slots = this.$slots; var monthCellRender = this.monthCellRender || $slots.monthCellRender || noop; return _createVNode("div", { "class": "".concat(sPrefixCls, "-month") }, [_createVNode("div", { "class": "".concat(sPrefixCls, "-value") }, [value.localeData().monthsShort(value)]), _createVNode("div", { "class": "".concat(sPrefixCls, "-content") }, [monthCellRender({ current: value })])]); }, dateCellRender2: function dateCellRender2(_ref2) { var value = _ref2.current; var sPrefixCls = this.sPrefixCls, $slots = this.$slots; var dateCellRender = this.dateCellRender || $slots.dateCellRender || noop; return _createVNode("div", { "class": "".concat(sPrefixCls, "-date") }, [_createVNode("div", { "class": "".concat(sPrefixCls, "-value") }, [zerofixed(value.date())]), _createVNode("div", { "class": "".concat(sPrefixCls, "-content") }, [dateCellRender({ current: value })])]); }, renderCalendar: function renderCalendar(locale, localeCode) { var props = _extends(_extends({}, getOptionProps(this)), this.$attrs); var value = this.sValue, mode = this.sMode, $slots = this.$slots; if (value && localeCode) { value.locale(localeCode); } var customizePrefixCls = props.prefixCls, fullscreen = props.fullscreen, dateFullCellRender = props.dateFullCellRender, monthFullCellRender = props.monthFullCellRender, className = props.class, style = props.style; var headerRender = this.headerRender || $slots.headerRender; var getPrefixCls = this.configProvider.getPrefixCls; var prefixCls = getPrefixCls('fullcalendar', customizePrefixCls); // To support old version react. // Have to add prefixCls on the instance. // https://github.com/facebook/react/issues/12397 this.sPrefixCls = prefixCls; var cls = className || ''; if (fullscreen) { cls += " ".concat(prefixCls, "-fullscreen"); } var monthCellRender = monthFullCellRender || $slots.monthFullCellRender || this.monthCellRender2; var dateCellRender = dateFullCellRender || $slots.dateFullCellRender || this.dateCellRender2; var disabledDate = props.disabledDate; if (props.validRange) { disabledDate = this.getDateRange(props.validRange, disabledDate); } var fullCalendarProps = _extends(_extends(_extends({}, props), this.$attrs), { Select: {}, locale: locale.lang, type: mode === 'year' ? 'month' : 'date', prefixCls: prefixCls, showHeader: false, value: value, monthCellRender: monthCellRender, dateCellRender: dateCellRender, disabledDate: disabledDate, onSelect: this.triggerSelect }); return _createVNode("div", { "class": cls, "style": style }, [_createVNode(Header, { "fullscreen": fullscreen, "type": mode, "headerRender": headerRender, "value": value, "locale": locale.lang, "prefixCls": prefixCls, "onTypeChange": this.onHeaderTypeChange, "onValueChange": this.onHeaderValueChange, "validRange": props.validRange }, null), _createVNode(FullCalendar, fullCalendarProps, null)]); } }, render: function render() { return _createVNode(LocaleReceiver, { "componentName": "Calendar", "defaultLocale": this.getDefaultLocale, "children": this.renderCalendar }, null); } }); export { HeaderProps } from './Header'; export default withInstall(Calendar);