ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
288 lines (249 loc) • 9.42 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 _propsUtil = require('../../../_util/props-util');
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _DateConstants = require('./DateConstants');
var _DateConstants2 = _interopRequireDefault(_DateConstants);
var _util = require('../util/');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function noop() {}
function isSameDay(one, two) {
return one && two && one.isSame(two, 'day');
}
function beforeCurrentMonthYear(current, today) {
if (current.year() < today.year()) {
return 1;
}
return current.year() === today.year() && current.month() < today.month();
}
function afterCurrentMonthYear(current, today) {
if (current.year() > today.year()) {
return 1;
}
return current.year() === today.year() && current.month() > today.month();
}
function getIdFromDate(date) {
return 'rc-calendar-' + date.year() + '-' + date.month() + '-' + date.date();
}
var DateTBody = {
props: {
contentRender: _vueTypes2['default'].func,
dateRender: _vueTypes2['default'].func,
disabledDate: _vueTypes2['default'].func,
prefixCls: _vueTypes2['default'].string,
selectedValue: _vueTypes2['default'].oneOfType([_vueTypes2['default'].any, _vueTypes2['default'].arrayOf(_vueTypes2['default'].any)]),
value: _vueTypes2['default'].object,
hoverValue: _vueTypes2['default'].any.def([]),
showWeekNumber: _vueTypes2['default'].bool
},
render: function render() {
var h = arguments[0];
var props = (0, _propsUtil.getOptionProps)(this);
var contentRender = props.contentRender,
prefixCls = props.prefixCls,
selectedValue = props.selectedValue,
value = props.value,
showWeekNumber = props.showWeekNumber,
dateRender = props.dateRender,
disabledDate = props.disabledDate,
hoverValue = props.hoverValue;
var _getListeners = (0, _propsUtil.getListeners)(this),
_getListeners$select = _getListeners.select,
select = _getListeners$select === undefined ? noop : _getListeners$select,
_getListeners$dayHove = _getListeners.dayHover,
dayHover = _getListeners$dayHove === undefined ? noop : _getListeners$dayHove;
var iIndex = void 0;
var jIndex = void 0;
var current = void 0;
var dateTable = [];
var today = (0, _util.getTodayTime)(value);
var cellClass = prefixCls + '-cell';
var weekNumberCellClass = prefixCls + '-week-number-cell';
var dateClass = prefixCls + '-date';
var todayClass = prefixCls + '-today';
var selectedClass = prefixCls + '-selected-day';
var selectedDateClass = prefixCls + '-selected-date'; // do not move with mouse operation
var selectedStartDateClass = prefixCls + '-selected-start-date';
var selectedEndDateClass = prefixCls + '-selected-end-date';
var inRangeClass = prefixCls + '-in-range-cell';
var lastMonthDayClass = prefixCls + '-last-month-cell';
var nextMonthDayClass = prefixCls + '-next-month-btn-day';
var disabledClass = prefixCls + '-disabled-cell';
var firstDisableClass = prefixCls + '-disabled-cell-first-of-row';
var lastDisableClass = prefixCls + '-disabled-cell-last-of-row';
var lastDayOfMonthClass = prefixCls + '-last-day-of-month';
var month1 = value.clone();
month1.date(1);
var day = month1.day();
var lastMonthDiffDay = (day + 7 - value.localeData().firstDayOfWeek()) % 7;
// calculate last month
var lastMonth1 = month1.clone();
lastMonth1.add(0 - lastMonthDiffDay, 'days');
var passed = 0;
for (iIndex = 0; iIndex < _DateConstants2['default'].DATE_ROW_COUNT; iIndex++) {
for (jIndex = 0; jIndex < _DateConstants2['default'].DATE_COL_COUNT; jIndex++) {
current = lastMonth1;
if (passed) {
current = current.clone();
current.add(passed, 'days');
}
dateTable.push(current);
passed++;
}
}
var tableHtml = [];
passed = 0;
for (iIndex = 0; iIndex < _DateConstants2['default'].DATE_ROW_COUNT; iIndex++) {
var _cx;
var isCurrentWeek = void 0;
var weekNumberCell = void 0;
var isActiveWeek = false;
var dateCells = [];
if (showWeekNumber) {
weekNumberCell = h(
'td',
{ key: 'week-' + dateTable[passed].week(), attrs: { role: 'gridcell' },
'class': weekNumberCellClass },
[dateTable[passed].week()]
);
}
for (jIndex = 0; jIndex < _DateConstants2['default'].DATE_COL_COUNT; jIndex++) {
var next = null;
var last = null;
current = dateTable[passed];
if (jIndex < _DateConstants2['default'].DATE_COL_COUNT - 1) {
next = dateTable[passed + 1];
}
if (jIndex > 0) {
last = dateTable[passed - 1];
}
var cls = cellClass;
var disabled = false;
var selected = false;
if (isSameDay(current, today)) {
cls += ' ' + todayClass;
isCurrentWeek = true;
}
var isBeforeCurrentMonthYear = beforeCurrentMonthYear(current, value);
var isAfterCurrentMonthYear = afterCurrentMonthYear(current, value);
if (selectedValue && Array.isArray(selectedValue)) {
var rangeValue = hoverValue.length ? hoverValue : selectedValue;
if (!isBeforeCurrentMonthYear && !isAfterCurrentMonthYear) {
var startValue = rangeValue[0];
var endValue = rangeValue[1];
if (startValue) {
if (isSameDay(current, startValue)) {
selected = true;
isActiveWeek = true;
cls += ' ' + selectedStartDateClass;
}
}
if (startValue || endValue) {
if (isSameDay(current, endValue)) {
selected = true;
isActiveWeek = true;
cls += ' ' + selectedEndDateClass;
} else if ((startValue === null || startValue === undefined) && current.isBefore(endValue, 'day')) {
cls += ' ' + inRangeClass;
} else if ((endValue === null || endValue === undefined) && current.isAfter(startValue, 'day')) {
cls += ' ' + inRangeClass;
} else if (current.isAfter(startValue, 'day') && current.isBefore(endValue, 'day')) {
cls += ' ' + inRangeClass;
}
}
}
} else if (isSameDay(current, value)) {
// keyboard change value, highlight works
selected = true;
isActiveWeek = true;
}
if (isSameDay(current, selectedValue)) {
cls += ' ' + selectedDateClass;
}
if (isBeforeCurrentMonthYear) {
cls += ' ' + lastMonthDayClass;
}
if (isAfterCurrentMonthYear) {
cls += ' ' + nextMonthDayClass;
}
if (current.clone().endOf('month').date() === current.date()) {
cls += ' ' + lastDayOfMonthClass;
}
if (disabledDate) {
if (disabledDate(current, value)) {
disabled = true;
if (!last || !disabledDate(last, value)) {
cls += ' ' + firstDisableClass;
}
if (!next || !disabledDate(next, value)) {
cls += ' ' + lastDisableClass;
}
}
}
if (selected) {
cls += ' ' + selectedClass;
}
if (disabled) {
cls += ' ' + disabledClass;
}
var dateHtml = void 0;
if (dateRender) {
dateHtml = dateRender(current, value);
} else {
var content = contentRender ? contentRender(current, value) : current.date();
dateHtml = h(
'div',
{
key: getIdFromDate(current),
'class': dateClass,
attrs: { 'aria-selected': selected,
'aria-disabled': disabled
}
},
[content]
);
}
dateCells.push(h(
'td',
{
key: passed,
on: {
'click': disabled ? noop : select.bind(null, current),
'mouseenter': disabled ? noop : dayHover.bind(null, current)
},
attrs: {
role: 'gridcell',
title: (0, _util.getTitleString)(current)
},
'class': cls
},
[dateHtml]
));
passed++;
}
tableHtml.push(h(
'tr',
{
key: iIndex,
attrs: { role: 'row'
},
'class': (0, _classnames2['default'])((_cx = {}, (0, _defineProperty3['default'])(_cx, prefixCls + '-current-week', isCurrentWeek), (0, _defineProperty3['default'])(_cx, prefixCls + '-active-week', isActiveWeek), _cx))
},
[weekNumberCell, dateCells]
));
}
return h(
'tbody',
{ 'class': prefixCls + '-tbody' },
[tableHtml]
);
}
};
exports['default'] = DateTBody;