ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
176 lines (163 loc) • 4.9 kB
JavaScript
import _extends from 'babel-runtime/helpers/extends';
import moment from 'moment';
import PropTypes from '../../_util/vue-types';
import BaseMixin from '../../_util/BaseMixin';
import { getOptionProps, hasProp, getListeners } from '../../_util/props-util';
import DateTable from './date/DateTable';
import MonthTable from './month/MonthTable';
import CalendarMixin, { getNowByCurrentStateValue } from './mixin/CalendarMixin';
import CommonMixin from './mixin/CommonMixin';
import CalendarHeader from './full-calendar/CalendarHeader';
import enUs from './locale/en_US';
var FullCalendar = {
name: 'FullCalendar',
props: {
locale: PropTypes.object.def(enUs),
format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
visible: PropTypes.bool.def(true),
prefixCls: PropTypes.string.def('rc-calendar'),
defaultType: PropTypes.string.def('date'),
type: PropTypes.string,
fullscreen: PropTypes.bool.def(false),
monthCellRender: PropTypes.func,
dateCellRender: PropTypes.func,
showTypeSwitch: PropTypes.bool.def(true),
Select: PropTypes.object.isRequired,
headerComponents: PropTypes.array,
headerComponent: PropTypes.object, // The whole header component
headerRender: PropTypes.func,
showHeader: PropTypes.bool.def(true),
disabledDate: PropTypes.func,
value: PropTypes.object,
defaultValue: PropTypes.object,
selectedValue: PropTypes.object,
defaultSelectedValue: PropTypes.object,
renderFooter: PropTypes.func.def(function () {
return null;
}),
renderSidebar: PropTypes.func.def(function () {
return null;
})
},
mixins: [BaseMixin, CommonMixin, CalendarMixin],
data: function data() {
var type = void 0;
if (hasProp(this, 'type')) {
type = this.type;
} else {
type = this.defaultType;
}
var props = this.$props;
return {
sType: type,
sValue: props.value || props.defaultValue || moment(),
sSelectedValue: props.selectedValue || props.defaultSelectedValue
};
},
watch: {
type: function type(val) {
this.setState({
sType: val
});
},
value: function value(val) {
var sValue = val || this.defaultValue || getNowByCurrentStateValue(this.sValue);
this.setState({
sValue: sValue
});
},
selectedValue: function selectedValue(val) {
this.setState({
sSelectedValue: val
});
}
},
methods: {
onMonthSelect: function onMonthSelect(value) {
this.onSelect(value, {
target: 'month'
});
},
setType: function setType(type) {
if (!hasProp(this, 'type')) {
this.setState({
sType: type
});
}
this.__emit('typeChange', type);
}
},
render: function render() {
var h = arguments[0];
var props = getOptionProps(this);
var locale = props.locale,
prefixCls = props.prefixCls,
fullscreen = props.fullscreen,
showHeader = props.showHeader,
headerComponent = props.headerComponent,
headerRender = props.headerRender,
disabledDate = props.disabledDate;
var value = this.sValue,
type = this.sType;
var header = null;
if (showHeader) {
if (headerRender) {
header = headerRender(value, type, locale);
} else {
var TheHeader = headerComponent || CalendarHeader;
var headerProps = {
props: _extends({}, props, {
prefixCls: prefixCls + '-full',
type: type,
value: value
}),
on: _extends({}, getListeners(this), {
typeChange: this.setType,
valueChange: this.setValue
}),
key: 'calendar-header'
};
header = h(TheHeader, headerProps);
}
}
var table = type === 'date' ? h(DateTable, {
attrs: {
dateRender: props.dateCellRender,
contentRender: props.dateCellContentRender,
locale: locale,
prefixCls: prefixCls,
value: value,
disabledDate: disabledDate
},
on: {
'select': this.onSelect
}
}) : h(MonthTable, {
attrs: {
cellRender: props.monthCellRender,
contentRender: props.monthCellContentRender,
locale: locale,
prefixCls: prefixCls + '-month-panel',
value: value,
disabledDate: disabledDate
},
on: {
'select': this.onMonthSelect
}
});
var children = [header, h(
'div',
{ key: 'calendar-body', 'class': prefixCls + '-calendar-body' },
[table]
)];
var className = [prefixCls + '-full'];
if (fullscreen) {
className.push(prefixCls + '-fullscreen');
}
return this.renderRoot({
children: children,
'class': className.join(' ')
});
}
};
export default FullCalendar;