ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
266 lines (240 loc) • 8.7 kB
JavaScript
import _defineProperty from 'babel-runtime/helpers/defineProperty';
import PropTypes from '../../../_util/vue-types';
import { getOptionProps, getListeners } from '../../../_util/props-util';
import cx from 'classnames';
import DateConstants from './DateConstants';
import { getTitleString, getTodayTime } from '../util/';
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: PropTypes.func,
dateRender: PropTypes.func,
disabledDate: PropTypes.func,
prefixCls: PropTypes.string,
selectedValue: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
value: PropTypes.object,
hoverValue: PropTypes.any.def([]),
showWeekNumber: PropTypes.bool
},
render: function render() {
var h = arguments[0];
var props = 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 = 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 = 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 < DateConstants.DATE_ROW_COUNT; iIndex++) {
for (jIndex = 0; jIndex < DateConstants.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 < DateConstants.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 < DateConstants.DATE_COL_COUNT; jIndex++) {
var next = null;
var last = null;
current = dateTable[passed];
if (jIndex < DateConstants.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: getTitleString(current)
},
'class': cls
},
[dateHtml]
));
passed++;
}
tableHtml.push(h(
'tr',
{
key: iIndex,
attrs: { role: 'row'
},
'class': cx((_cx = {}, _defineProperty(_cx, prefixCls + '-current-week', isCurrentWeek), _defineProperty(_cx, prefixCls + '-active-week', isActiveWeek), _cx))
},
[weekNumberCell, dateCells]
));
}
return h(
'tbody',
{ 'class': prefixCls + '-tbody' },
[tableHtml]
);
}
};
export default DateTBody;