ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
179 lines • 5.3 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _extends from "@babel/runtime/helpers/esm/extends";
import { createVNode as _createVNode } from "vue";
import Select from '../select';
import { Group, Button } from '../radio';
import { defineComponent, ref } from 'vue';
import { FormItemInputContext } from '../form/FormItemContext';
const YearSelectOffset = 10;
const YearSelectTotal = 20;
function YearSelect(props) {
const {
fullscreen,
validRange,
generateConfig,
locale,
prefixCls,
value,
onChange,
divRef
} = props;
const year = generateConfig.getYear(value || generateConfig.getNow());
let start = year - YearSelectOffset;
let end = start + YearSelectTotal;
if (validRange) {
start = generateConfig.getYear(validRange[0]);
end = generateConfig.getYear(validRange[1]) + 1;
}
const suffix = locale && locale.year === '年' ? '年' : '';
const options = [];
for (let index = start; index < end; index++) {
options.push({
label: `${index}${suffix}`,
value: index
});
}
return _createVNode(Select, {
"size": fullscreen ? undefined : 'small',
"options": options,
"value": year,
"class": `${prefixCls}-year-select`,
"onChange": numYear => {
let newDate = generateConfig.setYear(value, numYear);
if (validRange) {
const [startDate, endDate] = validRange;
const newYear = generateConfig.getYear(newDate);
const newMonth = generateConfig.getMonth(newDate);
if (newYear === generateConfig.getYear(endDate) && newMonth > generateConfig.getMonth(endDate)) {
newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(endDate));
}
if (newYear === generateConfig.getYear(startDate) && newMonth < generateConfig.getMonth(startDate)) {
newDate = generateConfig.setMonth(newDate, generateConfig.getMonth(startDate));
}
}
onChange(newDate);
},
"getPopupContainer": () => divRef.value
}, null);
}
YearSelect.inheritAttrs = false;
function MonthSelect(props) {
const {
prefixCls,
fullscreen,
validRange,
value,
generateConfig,
locale,
onChange,
divRef
} = props;
const month = generateConfig.getMonth(value || generateConfig.getNow());
let start = 0;
let end = 11;
if (validRange) {
const [rangeStart, rangeEnd] = validRange;
const currentYear = generateConfig.getYear(value);
if (generateConfig.getYear(rangeEnd) === currentYear) {
end = generateConfig.getMonth(rangeEnd);
}
if (generateConfig.getYear(rangeStart) === currentYear) {
start = generateConfig.getMonth(rangeStart);
}
}
const months = locale.shortMonths || generateConfig.locale.getShortMonths(locale.locale);
const options = [];
for (let index = start; index <= end; index += 1) {
options.push({
label: months[index],
value: index
});
}
return _createVNode(Select, {
"size": fullscreen ? undefined : 'small',
"class": `${prefixCls}-month-select`,
"value": month,
"options": options,
"onChange": newMonth => {
onChange(generateConfig.setMonth(value, newMonth));
},
"getPopupContainer": () => divRef.value
}, null);
}
MonthSelect.inheritAttrs = false;
function ModeSwitch(props) {
const {
prefixCls,
locale,
mode,
fullscreen,
onModeChange
} = props;
return _createVNode(Group, {
"onChange": _ref => {
let {
target: {
value
}
} = _ref;
onModeChange(value);
},
"value": mode,
"size": fullscreen ? undefined : 'small',
"class": `${prefixCls}-mode-switch`
}, {
default: () => [_createVNode(Button, {
"value": "month"
}, {
default: () => [locale.month]
}), _createVNode(Button, {
"value": "year"
}, {
default: () => [locale.year]
})]
});
}
ModeSwitch.inheritAttrs = false;
export default defineComponent({
name: 'CalendarHeader',
inheritAttrs: false,
props: ['mode', 'prefixCls', 'value', 'validRange', 'generateConfig', 'locale', 'mode', 'fullscreen'],
setup(_props, _ref2) {
let {
attrs
} = _ref2;
const divRef = ref(null);
const formItemInputContext = FormItemInputContext.useInject();
FormItemInputContext.useProvide(formItemInputContext, {
isFormItemInput: false
});
return () => {
const props = _extends(_extends({}, _props), attrs);
const {
prefixCls,
fullscreen,
mode,
onChange,
onModeChange
} = props;
const sharedProps = _extends(_extends({}, props), {
fullscreen,
divRef
});
return _createVNode("div", {
"class": `${prefixCls}-header`,
"ref": divRef
}, [_createVNode(YearSelect, _objectSpread(_objectSpread({}, sharedProps), {}, {
"onChange": v => {
onChange(v, 'year');
}
}), null), mode === 'month' && _createVNode(MonthSelect, _objectSpread(_objectSpread({}, sharedProps), {}, {
"onChange": v => {
onChange(v, 'month');
}
}), null), _createVNode(ModeSwitch, _objectSpread(_objectSpread({}, sharedProps), {}, {
"onModeChange": onModeChange
}), null)]);
};
}
});