ant-design-vue/components/calendar/Header.jsx

159 lines
4.7 KiB
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import { PREFIX_CLS } from './Constants';
import Select from '../select';
import { Group, Button } from '../radio';
import PropTypes from '../_util/vue-types';
import { initDefaultProps } from '../_util/props-util';
const Option = Select.Option;
2018-03-13 14:40:13 +00:00
export const HeaderProps = {
prefixCls: PropTypes.string,
locale: PropTypes.any,
fullscreen: PropTypes.boolean,
yearSelectOffset: PropTypes.number,
yearSelectTotal: PropTypes.number,
type: PropTypes.string,
// onValueChange: PropTypes.(value: moment.Moment) => void,
// onTypeChange: PropTypes.(type: string) => void,
value: PropTypes.any,
2018-04-06 12:56:19 +00:00
validRange: PropTypes.array,
2019-01-12 03:33:27 +00:00
};
2018-03-13 14:40:13 +00:00
export default {
props: initDefaultProps(HeaderProps, {
prefixCls: `${PREFIX_CLS}-header`,
yearSelectOffset: 10,
yearSelectTotal: 20,
}),
// private calenderHeaderNode: HTMLDivElement;
methods: {
2019-01-12 03:33:27 +00:00
getYearSelectElement(year) {
const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen, validRange } = this;
let start = year - yearSelectOffset;
let end = start + yearSelectTotal;
2018-04-06 12:56:19 +00:00
if (validRange) {
2019-01-12 03:33:27 +00:00
start = validRange[0].get('year');
end = validRange[1].get('year') + 1;
2018-04-06 12:56:19 +00:00
}
2019-01-12 03:33:27 +00:00
const suffix = locale.year === '年' ? '年' : '';
2018-03-13 14:40:13 +00:00
2019-01-12 03:33:27 +00:00
const options = [];
2018-03-13 14:40:13 +00:00
for (let index = start; index < end; index++) {
2019-01-12 03:33:27 +00:00
options.push(<Option key={`${index}`}>{index + suffix}</Option>);
2018-03-13 14:40:13 +00:00
}
return (
<Select
size={fullscreen ? 'default' : 'small'}
dropdownMatchSelectWidth={false}
class={`${prefixCls}-year-select`}
onChange={this.onYearChange}
value={String(year)}
getPopupContainer={() => this.getCalenderHeaderNode()}
2018-03-13 14:40:13 +00:00
>
{options}
</Select>
2019-01-12 03:33:27 +00:00
);
2018-03-13 14:40:13 +00:00
},
2019-01-12 03:33:27 +00:00
getMonthsLocale(value) {
const current = value.clone();
const localeData = value.localeData();
const months = [];
2018-03-13 14:40:13 +00:00
for (let i = 0; i < 12; i++) {
2019-01-12 03:33:27 +00:00
current.month(i);
months.push(localeData.monthsShort(current));
2018-03-13 14:40:13 +00:00
}
2019-01-12 03:33:27 +00:00
return months;
2018-03-13 14:40:13 +00:00
},
2019-01-12 03:33:27 +00:00
getMonthSelectElement(month, months) {
const { prefixCls, fullscreen, validRange, value } = this;
const options = [];
let start = 0;
let end = 12;
2018-04-06 12:56:19 +00:00
if (validRange) {
2019-01-12 03:33:27 +00:00
const [rangeStart, rangeEnd] = validRange;
const currentYear = value.get('year');
2018-04-06 12:56:19 +00:00
if (rangeEnd.get('year') === currentYear) {
2019-01-12 03:33:27 +00:00
end = rangeEnd.get('month') + 1;
} else if (rangeStart.get('year') === currentYear) {
2019-01-12 03:33:27 +00:00
start = rangeStart.get('month');
2018-04-06 12:56:19 +00:00
}
}
for (let index = start; index < end; index++) {
2019-01-12 03:33:27 +00:00
options.push(<Option key={`${index}`}>{months[index]}</Option>);
2018-03-13 14:40:13 +00:00
}
return (
<Select
size={fullscreen ? 'default' : 'small'}
dropdownMatchSelectWidth={false}
class={`${prefixCls}-month-select`}
value={String(month)}
onChange={this.onMonthChange}
getPopupContainer={() => this.getCalenderHeaderNode()}
2018-03-13 14:40:13 +00:00
>
{options}
</Select>
2019-01-12 03:33:27 +00:00
);
2018-03-13 14:40:13 +00:00
},
2019-01-12 03:33:27 +00:00
onYearChange(year) {
const { value, validRange } = this;
const newValue = value.clone();
newValue.year(parseInt(year, 10));
2018-04-06 12:56:19 +00:00
// switch the month so that it remains within range when year changes
if (validRange) {
2019-01-12 03:33:27 +00:00
const [start, end] = validRange;
const newYear = newValue.get('year');
const newMonth = newValue.get('month');
2018-04-06 12:56:19 +00:00
if (newYear === end.get('year') && newMonth > end.get('month')) {
2019-01-12 03:33:27 +00:00
newValue.month(end.get('month'));
2018-04-06 12:56:19 +00:00
}
if (newYear === start.get('year') && newMonth < start.get('month')) {
2019-01-12 03:33:27 +00:00
newValue.month(start.get('month'));
2018-04-06 12:56:19 +00:00
}
}
2019-01-12 03:33:27 +00:00
this.$emit('valueChange', newValue);
2018-03-13 14:40:13 +00:00
},
2019-01-12 03:33:27 +00:00
onMonthChange(month) {
const newValue = this.value.clone();
newValue.month(parseInt(month, 10));
this.$emit('valueChange', newValue);
2018-03-13 14:40:13 +00:00
},
2019-01-12 03:33:27 +00:00
onTypeChange(e) {
this.$emit('typeChange', e.target.value);
2018-03-13 14:40:13 +00:00
},
2019-01-12 03:33:27 +00:00
getCalenderHeaderNode() {
return this.$refs.calenderHeaderNode;
2018-03-13 14:40:13 +00:00
},
},
2019-01-12 03:33:27 +00:00
render() {
const { type, value, prefixCls, locale, fullscreen } = this;
const yearSelect = this.getYearSelectElement(value.year());
const monthSelect =
type === 'date'
? this.getMonthSelectElement(value.month(), this.getMonthsLocale(value))
: null;
const size = fullscreen ? 'default' : 'small';
2018-03-13 14:40:13 +00:00
const typeSwitch = (
<Group onChange={this.onTypeChange} value={type} size={size}>
2019-01-12 03:33:27 +00:00
<Button value="date">{locale.month}</Button>
<Button value="month">{locale.year}</Button>
2018-03-13 14:40:13 +00:00
</Group>
2019-01-12 03:33:27 +00:00
);
2018-03-13 14:40:13 +00:00
return (
2019-01-12 03:33:27 +00:00
<div class={`${prefixCls}-header`} ref="calenderHeaderNode">
2018-03-13 14:40:13 +00:00
{yearSelect}
{monthSelect}
{typeSwitch}
</div>
2019-01-12 03:33:27 +00:00
);
2018-03-13 14:40:13 +00:00
},
2019-01-12 03:33:27 +00:00
};