1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 | import React, { PureComponent } from 'react';
|
6 | import classNames from 'classnames';
|
7 | import DateTableHead from './date-table-head';
|
8 | import { isDisabledDate, DAYS_OF_WEEK, CALENDAR_TABLE_COL_COUNT, CALENDAR_TABLE_ROW_COUNT } from '../utils';
|
9 |
|
10 | function isSameDay(a, b) {
|
11 | return a && b && a.isSame(b, 'day');
|
12 | }
|
13 |
|
14 | function isRangeDate(date, startDate, endDate) {
|
15 | return date.format('L') !== startDate.format('L') && date.format('L') !== endDate.format('L') && date.valueOf() > startDate.valueOf() && date.valueOf() < endDate.valueOf();
|
16 | }
|
17 |
|
18 | function isLastMonthDate(date, target) {
|
19 | if (date.year() < target.year()) {
|
20 | return 1;
|
21 | }
|
22 | return date.year() === target.year() && date.month() < target.month();
|
23 | }
|
24 |
|
25 | function isNextMonthDate(date, target) {
|
26 | if (date.year() > target.year()) {
|
27 | return 1;
|
28 | }
|
29 | return date.year() === target.year() && date.month() > target.month();
|
30 | }
|
31 |
|
32 | var DateTable = function (_PureComponent) {
|
33 | _inherits(DateTable, _PureComponent);
|
34 |
|
35 | function DateTable() {
|
36 | _classCallCheck(this, DateTable);
|
37 |
|
38 | return _possibleConstructorReturn(this, _PureComponent.apply(this, arguments));
|
39 | }
|
40 |
|
41 | DateTable.prototype.render = function render() {
|
42 | var _props = this.props,
|
43 | prefix = _props.prefix,
|
44 | visibleMonth = _props.visibleMonth,
|
45 | showOtherMonth = _props.showOtherMonth,
|
46 | endValue = _props.endValue,
|
47 | format = _props.format,
|
48 | today = _props.today,
|
49 | momentLocale = _props.momentLocale,
|
50 | dateCellRender = _props.dateCellRender,
|
51 | disabledDate = _props.disabledDate,
|
52 | onSelectDate = _props.onSelectDate;
|
53 |
|
54 | var startValue = this.props.startValue || this.props.value;
|
55 |
|
56 | var firstDayOfMonth = visibleMonth.clone().startOf('month');
|
57 | var firstDayOfMonthInWeek = firstDayOfMonth.day();
|
58 |
|
59 | var firstDayOfWeek = momentLocale.firstDayOfWeek();
|
60 |
|
61 | var datesOfLastMonthCount = (firstDayOfMonthInWeek + DAYS_OF_WEEK - firstDayOfWeek) % DAYS_OF_WEEK;
|
62 |
|
63 | var lastMonthDate = firstDayOfMonth.clone();
|
64 | lastMonthDate.add(0 - datesOfLastMonthCount, 'days');
|
65 |
|
66 | var counter = 0;
|
67 | var currentDate = void 0;
|
68 | var dateList = [];
|
69 | for (var i = 0; i < CALENDAR_TABLE_ROW_COUNT; i++) {
|
70 | for (var j = 0; j < CALENDAR_TABLE_COL_COUNT; j++) {
|
71 | currentDate = lastMonthDate;
|
72 | if (counter) {
|
73 | currentDate = currentDate.clone();
|
74 | currentDate.add(counter, 'days');
|
75 | }
|
76 | dateList.push(currentDate);
|
77 | counter++;
|
78 | }
|
79 | }
|
80 | counter = 0;
|
81 | var monthElements = [];
|
82 | for (var _i = 0; _i < CALENDAR_TABLE_ROW_COUNT; _i++) {
|
83 | var weekElements = [];
|
84 | var firstDayOfWeekInCurrentMonth = true;
|
85 | var lastDayOfWeekInCurrentMonth = true;
|
86 | for (var _j = 0; _j < CALENDAR_TABLE_COL_COUNT; _j++) {
|
87 | var _classNames;
|
88 |
|
89 | currentDate = dateList[counter];
|
90 | if (_j === 0) {
|
91 |
|
92 | firstDayOfWeekInCurrentMonth = currentDate.format('M') === firstDayOfMonth.format('M');
|
93 | }
|
94 | if (_j === CALENDAR_TABLE_COL_COUNT - 1) {
|
95 |
|
96 | lastDayOfWeekInCurrentMonth = currentDate.format('M') === firstDayOfMonth.format('M');
|
97 | }
|
98 | var isLastMonth = isLastMonthDate(currentDate, visibleMonth);
|
99 | var isNextMonth = isNextMonthDate(currentDate, visibleMonth);
|
100 | var isCurrentMonth = !isLastMonth && !isNextMonth;
|
101 |
|
102 | var isDisabled = isDisabledDate(currentDate, disabledDate, 'date');
|
103 | var isToday = !isDisabled && isSameDay(currentDate, today) && isCurrentMonth;
|
104 | var isSelected = !isDisabled && (isSameDay(currentDate, startValue) || isSameDay(currentDate, endValue)) && isCurrentMonth;
|
105 | var isInRange = !isDisabled && startValue && endValue && isRangeDate(currentDate, startValue, endValue) && isCurrentMonth;
|
106 |
|
107 | var cellContent = !showOtherMonth && !isCurrentMonth ? null : dateCellRender(currentDate);
|
108 |
|
109 | var elementCls = classNames((_classNames = {}, _classNames[prefix + 'calendar-cell'] = true, _classNames[prefix + 'calendar-cell-prev-month'] = isLastMonth, _classNames[prefix + 'calendar-cell-next-month'] = isNextMonth, _classNames[prefix + 'calendar-cell-current'] = isToday, _classNames[prefix + 'inrange'] = isInRange, _classNames[prefix + 'selected'] = isSelected, _classNames[prefix + 'disabled'] = cellContent && isDisabled, _classNames));
|
110 |
|
111 | weekElements.push(React.createElement(
|
112 | 'td',
|
113 | {
|
114 | key: counter,
|
115 | title: currentDate.format(format),
|
116 | onClick: isDisabled ? undefined : onSelectDate.bind(null, currentDate),
|
117 | className: elementCls,
|
118 | role: 'cell',
|
119 | 'aria-disabled': isDisabled ? 'true' : 'false',
|
120 | 'aria-selected': isSelected ? 'true' : 'false'
|
121 | },
|
122 | React.createElement(
|
123 | 'div',
|
124 | { className: prefix + 'calendar-date' },
|
125 | cellContent
|
126 | )
|
127 | ));
|
128 | counter++;
|
129 | }
|
130 |
|
131 | if (!showOtherMonth && !lastDayOfWeekInCurrentMonth && !firstDayOfWeekInCurrentMonth) {
|
132 | break;
|
133 | }
|
134 |
|
135 | monthElements.push(React.createElement(
|
136 | 'tr',
|
137 | { key: _i, role: 'row' },
|
138 | weekElements
|
139 | ));
|
140 | }
|
141 |
|
142 | return React.createElement(
|
143 | 'table',
|
144 | { className: prefix + 'calendar-table', role: 'grid' },
|
145 | React.createElement(DateTableHead, _extends({}, this.props, { momentLocale: momentLocale })),
|
146 | React.createElement(
|
147 | 'tbody',
|
148 | { className: prefix + 'calendar-tbody', role: 'rowgroup' },
|
149 | monthElements
|
150 | )
|
151 | );
|
152 | };
|
153 |
|
154 | return DateTable;
|
155 | }(PureComponent);
|
156 |
|
157 | export default DateTable; |
\ | No newline at end of file |