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)}
|
2018-07-01 09:12:24 +00:00
|
|
|
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;
|
2018-11-28 13:58:42 +00:00
|
|
|
} 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}
|
2018-07-01 09:12:24 +00:00
|
|
|
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
|
|
|
};
|