iep-ui
Version:
An enterprise-class UI design language and Vue-based implementation
251 lines (225 loc) • 7.61 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _vueTypes = require('../../../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _BaseMixin = require('../../../_util/BaseMixin');
var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
var _propsUtil = require('../../../_util/props-util');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var ROW = 4;
var COL = 3;
function noop() {}
function goYear(direction) {
var value = this.sValue.clone();
value.add(direction, 'year');
this.setState({
sValue: value
});
}
exports['default'] = {
mixins: [_BaseMixin2['default']],
props: {
selectedValue: _vueTypes2['default'].oneOfType([_vueTypes2['default'].any, _vueTypes2['default'].arrayOf(_vueTypes2['default'].any)]),
hoverValue: _vueTypes2['default'].any.def([]),
disabledDate: _vueTypes2['default'].func,
rootPrefixCls: _vueTypes2['default'].string,
value: _vueTypes2['default'].object,
defaultValue: _vueTypes2['default'].object,
locale: _vueTypes2['default'].object,
renderFooter: _vueTypes2['default'].func
},
data: function data() {
this.nextDecade = goYear.bind(this, 10);
this.previousDecade = goYear.bind(this, -10);
return {
sValue: this.value || this.defaultValue
};
},
watch: {
value: function value(val) {
this.sValue = val;
}
},
methods: {
chooseYear: function chooseYear(year) {
var value = this.sValue.clone();
value.year(year);
value.month(this.sValue.month());
this.sValue = value;
this.__emit('select', value);
this.setValue(value);
},
setValue: function setValue(value) {
if ((0, _propsUtil.hasProp)(this, 'value')) {
this.setState({
sValue: value
});
}
},
years: function years() {
var value = this.sValue;
var currentYear = value.year();
var startYear = parseInt(currentYear / 10, 10) * 10;
var previousYear = startYear - 1;
var years = [];
var index = 0;
for (var rowIndex = 0; rowIndex < ROW; rowIndex++) {
years[rowIndex] = [];
for (var colIndex = 0; colIndex < COL; colIndex++) {
var year = previousYear + index;
var content = String(year);
years[rowIndex][colIndex] = {
content: content,
year: year,
title: content
};
index++;
}
}
return years;
}
},
render: function render() {
var _this = this;
var h = arguments[0];
var props = (0, _propsUtil.getOptionProps)(this);
var rootPrefixCls = props.rootPrefixCls,
selectedValue = props.selectedValue,
hoverValue = props.hoverValue;
// console.log(hoverValue, selectedValue);
var inRangeClass = rootPrefixCls + '-in-range-cell';
var selectedDateClass = rootPrefixCls + '-selected-date'; // do not move with mouse operation
var selectedStartDateClass = rootPrefixCls + '-selected-start-date';
var selectedEndDateClass = rootPrefixCls + '-selected-end-date';
var value = this.sValue,
locale = this.locale,
renderFooter = this.renderFooter,
disabledDate = this.disabledDate;
// const decadePanelShow = getListeners(this).decadePanelShow || noop;
var _getListeners = (0, _propsUtil.getListeners)(this),
_getListeners$decadeP = _getListeners.decadePanelShow,
decadePanelShow = _getListeners$decadeP === undefined ? noop : _getListeners$decadeP,
_getListeners$yearHov = _getListeners.yearHover,
yearHover = _getListeners$yearHov === undefined ? noop : _getListeners$yearHov;
var years = this.years();
var currentYear = value.year();
var startYear = parseInt(currentYear / 10, 10) * 10;
var endYear = startYear + 9;
var prefixCls = this.rootPrefixCls + '-year-panel';
var yeasEls = years.map(function (row, index) {
var tds = row.map(function (yearData) {
var _classNameMap;
var disabled = false;
if (disabledDate) {
var testValue = value.clone();
testValue.year(yearData.year);
disabled = disabledDate(testValue);
}
var classNameMap = (_classNameMap = {}, (0, _defineProperty3['default'])(_classNameMap, prefixCls + '-cell', 1), (0, _defineProperty3['default'])(_classNameMap, prefixCls + '-cell-disabled', disabled), (0, _defineProperty3['default'])(_classNameMap, prefixCls + '-selected-cell', yearData.year === currentYear), (0, _defineProperty3['default'])(_classNameMap, prefixCls + '-last-decade-cell', yearData.year < startYear), (0, _defineProperty3['default'])(_classNameMap, prefixCls + '-next-decade-cell', yearData.year > endYear), _classNameMap);
var clickHandler = noop;
if (!disabled) {
if (yearData.year < startYear) {
clickHandler = _this.previousDecade;
} else if (yearData.year > endYear) {
clickHandler = _this.nextDecade;
} else {
clickHandler = _this.chooseYear.bind(_this, yearData.year);
}
}
return h(
'td',
{
attrs: {
role: 'gridcell',
title: yearData.title
},
key: yearData.content,
on: {
'mouseenter': disabled ? noop : yearHover.bind(null, yearData.content),
'click': clickHandler
},
'class': classNameMap
},
[h(
'a',
{ 'class': prefixCls + '-year' },
[yearData.content]
)]
);
});
return h(
'tr',
{ key: index, attrs: { role: 'row' }
},
[tds]
);
});
var footer = renderFooter && renderFooter('year');
return h(
'div',
{ 'class': prefixCls },
[h('div', [h(
'div',
{ 'class': prefixCls + '-header' },
[h('a', {
'class': prefixCls + '-prev-decade-btn',
attrs: { role: 'button',
title: locale.previousDecade
},
on: {
'click': this.previousDecade
}
}), h(
'a',
{
'class': prefixCls + '-decade-select',
attrs: { role: 'button',
title: locale.decadeSelect
},
on: {
'click': decadePanelShow
}
},
[h(
'span',
{ 'class': prefixCls + '-decade-select-content' },
[startYear, '-', endYear]
), h(
'span',
{ 'class': prefixCls + '-decade-select-arrow' },
['x']
)]
), h('a', {
'class': prefixCls + '-next-decade-btn',
attrs: { role: 'button',
title: locale.nextDecade
},
on: {
'click': this.nextDecade
}
})]
), h(
'div',
{ 'class': prefixCls + '-body' },
[h(
'table',
{ 'class': prefixCls + '-table', attrs: { cellSpacing: '0', role: 'grid' }
},
[h(
'tbody',
{ 'class': prefixCls + '-tbody' },
[yeasEls]
)]
)]
), footer && h(
'div',
{ 'class': prefixCls + '-footer' },
[footer]
)])]
);
}
};