import _defineProperty from 'babel-runtime/helpers/defineProperty'; import PropTypes from '../../../_util/vue-types'; import { getOptionProps } 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 _$listeners = this.$listeners, $listeners = _$listeners === undefined ? {} : _$listeners; var _$listeners$select = $listeners.select, select = _$listeners$select === undefined ? noop : _$listeners$select, _$listeners$dayHover = $listeners.dayHover, dayHover = _$listeners$dayHover === undefined ? noop : _$listeners$dayHover; 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 (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;