131 lines
3.6 KiB
Vue
131 lines
3.6 KiB
Vue
<script>
|
|
import PropTypes from '@/components/_util/vue-types'
|
|
import BaseMixin from '@/components/_util/BaseMixin'
|
|
const ROW = 4
|
|
const COL = 3
|
|
function noop () {}
|
|
function goYear (direction) {
|
|
const next = this.sValue.clone()
|
|
next.add(direction, 'years')
|
|
this.setState({
|
|
sValue: next,
|
|
})
|
|
}
|
|
|
|
function chooseDecade (year, event) {
|
|
const next = this.sValue.clone()
|
|
next.year(year)
|
|
next.month(this.sValue.month())
|
|
this.__emit('select', next)
|
|
event.preventDefault()
|
|
}
|
|
|
|
export default {
|
|
mixins: [BaseMixin],
|
|
props: {
|
|
locale: PropTypes.object,
|
|
value: PropTypes.object,
|
|
defaultValue: PropTypes.object,
|
|
rootPrefixCls: PropTypes.string,
|
|
},
|
|
data () {
|
|
this.nextCentury = goYear.bind(this, 100)
|
|
this.previousCentury = goYear.bind(this, -100)
|
|
return {
|
|
sValue: this.value || this.defaultValue,
|
|
}
|
|
},
|
|
|
|
render () {
|
|
const value = this.sValue
|
|
const locale = this.locale
|
|
const currentYear = value.year()
|
|
const startYear = parseInt(currentYear / 100, 10) * 100
|
|
const preYear = startYear - 10
|
|
const endYear = startYear + 99
|
|
const decades = []
|
|
let index = 0
|
|
const prefixCls = `${this.rootPrefixCls}-decade-panel`
|
|
|
|
for (let rowIndex = 0; rowIndex < ROW; rowIndex++) {
|
|
decades[rowIndex] = []
|
|
for (let colIndex = 0; colIndex < COL; colIndex++) {
|
|
const startDecade = preYear + index * 10
|
|
const endDecade = preYear + index * 10 + 9
|
|
decades[rowIndex][colIndex] = {
|
|
startDecade,
|
|
endDecade,
|
|
}
|
|
index++
|
|
}
|
|
}
|
|
|
|
const decadesEls = decades.map((row, decadeIndex) => {
|
|
const tds = row.map(decadeData => {
|
|
const dStartDecade = decadeData.startDecade
|
|
const dEndDecade = decadeData.endDecade
|
|
const isLast = dStartDecade < startYear
|
|
const isNext = dEndDecade > endYear
|
|
const classNameMap = {
|
|
[`${prefixCls}-cell`]: 1,
|
|
[`${prefixCls}-selected-cell`]: dStartDecade <= currentYear && currentYear <= dEndDecade,
|
|
[`${prefixCls}-last-century-cell`]: isLast,
|
|
[`${prefixCls}-next-century-cell`]: isNext,
|
|
}
|
|
const content = `${dStartDecade}-${dEndDecade}`
|
|
let clickHandler = noop
|
|
if (isLast) {
|
|
clickHandler = this.previousCentury
|
|
} else if (isNext) {
|
|
clickHandler = this.nextCentury
|
|
} else {
|
|
clickHandler = chooseDecade.bind(this, dStartDecade)
|
|
}
|
|
return (<td
|
|
key={dStartDecade}
|
|
onClick={clickHandler}
|
|
role='gridcell'
|
|
class={classNameMap}
|
|
>
|
|
<a
|
|
class={`${prefixCls}-decade`}
|
|
>
|
|
{content}
|
|
</a>
|
|
</td>)
|
|
})
|
|
return (<tr key={decadeIndex} role='row'>{tds}</tr>)
|
|
})
|
|
|
|
return (
|
|
<div class={prefixCls}>
|
|
<div class={`${prefixCls}-header`}>
|
|
<a
|
|
class={`${prefixCls}-prev-century-btn`}
|
|
role='button'
|
|
onClick={this.previousCentury}
|
|
title={locale.previousCentury}
|
|
/>
|
|
|
|
<div class={`${prefixCls}-century`}>
|
|
{startYear}-{endYear}
|
|
</div>
|
|
<a
|
|
class={`${prefixCls}-next-century-btn`}
|
|
role='button'
|
|
onClick={this.nextCentury}
|
|
title={locale.nextCentury}
|
|
/>
|
|
</div>
|
|
<div class={`${prefixCls}-body`}>
|
|
<table class={`${prefixCls}-table`} cellSpacing='0' role='grid'>
|
|
<tbody class={`${prefixCls}-tbody`}>
|
|
{decadesEls}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>)
|
|
},
|
|
}
|
|
</script>
|