130 lines
3.7 KiB
Vue
130 lines
3.7 KiB
Vue
<script>
|
|
import { PREFIX_CLS } from './Constants'
|
|
import Select from '../select'
|
|
import { Group, Button } from '../radio'
|
|
import PropTypes from '@/components/_util/vue-types'
|
|
import { initDefaultProps } from '@/components/_util/props-util'
|
|
const Option = Select.Option
|
|
|
|
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,
|
|
}
|
|
|
|
export default {
|
|
props: initDefaultProps(HeaderProps, {
|
|
prefixCls: `${PREFIX_CLS}-header`,
|
|
yearSelectOffset: 10,
|
|
yearSelectTotal: 20,
|
|
}),
|
|
|
|
// private calenderHeaderNode: HTMLDivElement;
|
|
methods: {
|
|
getYearSelectElement (year) {
|
|
const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this
|
|
const start = year - yearSelectOffset
|
|
const end = start + yearSelectTotal
|
|
const suffix = locale.year === '年' ? '年' : ''
|
|
|
|
const options = []
|
|
for (let index = start; index < end; index++) {
|
|
options.push(<Option key={`${index}`}>{index + suffix}</Option>)
|
|
}
|
|
return (
|
|
<Select
|
|
size={fullscreen ? 'default' : 'small'}
|
|
dropdownMatchSelectWidth={false}
|
|
class={`${prefixCls}-year-select`}
|
|
onChange={this.onYearChange}
|
|
value={String(year)}
|
|
getPopupContainer={() => this.calenderHeaderNode}
|
|
>
|
|
{options}
|
|
</Select>
|
|
)
|
|
},
|
|
|
|
getMonthsLocale (value) {
|
|
const current = value.clone()
|
|
const localeData = value.localeData()
|
|
const months = []
|
|
for (let i = 0; i < 12; i++) {
|
|
current.month(i)
|
|
months.push(localeData.monthsShort(current))
|
|
}
|
|
return months
|
|
},
|
|
|
|
getMonthSelectElement (month, months) {
|
|
const { prefixCls, fullscreen } = this
|
|
const options = []
|
|
|
|
for (let index = 0; index < 12; index++) {
|
|
options.push(<Option key={`${index}`}>{months[index]}</Option>)
|
|
}
|
|
|
|
return (
|
|
<Select
|
|
size={fullscreen ? 'default' : 'small'}
|
|
dropdownMatchSelectWidth={false}
|
|
class={`${prefixCls}-month-select`}
|
|
value={String(month)}
|
|
onChange={this.onMonthChange}
|
|
getPopupContainer={() => this.getCalenderHeaderNode}
|
|
>
|
|
{options}
|
|
</Select>
|
|
)
|
|
},
|
|
|
|
onYearChange (year) {
|
|
const newValue = this.value.clone()
|
|
newValue.year(parseInt(year, 10))
|
|
this.$emit('valueChange', newValue)
|
|
},
|
|
|
|
onMonthChange (month) {
|
|
const newValue = this.value.clone()
|
|
newValue.month(parseInt(month, 10))
|
|
this.$emit('valueChange', newValue)
|
|
},
|
|
|
|
onTypeChange (e) {
|
|
this.$emit('typeChange', e.target.value)
|
|
},
|
|
|
|
getCalenderHeaderNode () {
|
|
return this.$refs.calenderHeaderNode
|
|
},
|
|
},
|
|
|
|
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'
|
|
const typeSwitch = (
|
|
<Group onChange={this.onTypeChange} value={type} size={size}>
|
|
<Button value='date'>{locale.month}</Button>
|
|
<Button value='month'>{locale.year}</Button>
|
|
</Group>
|
|
)
|
|
|
|
return (
|
|
<div class={`${prefixCls}-header`} ref='calenderHeaderNode'>
|
|
{yearSelect}
|
|
{monthSelect}
|
|
{typeSwitch}
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
</script> |