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 |
|
6 | var _mode2Rows, _class, _temp;
|
7 |
|
8 | import React from 'react';
|
9 | import { polyfill } from 'react-lifecycles-compat';
|
10 | import classnames from 'classnames';
|
11 | import * as PT from 'prop-types';
|
12 | import SharedPT from '../prop-types';
|
13 | import { DATE_PANEL_MODE } from '../constant';
|
14 | import { func, datejs, KEYCODE } from '../../util';
|
15 |
|
16 | var bindCtx = func.bindCtx,
|
17 | renderNode = func.renderNode;
|
18 | var DATE = DATE_PANEL_MODE.DATE,
|
19 | WEEK = DATE_PANEL_MODE.WEEK,
|
20 | MONTH = DATE_PANEL_MODE.MONTH,
|
21 | QUARTER = DATE_PANEL_MODE.QUARTER,
|
22 | YEAR = DATE_PANEL_MODE.YEAR,
|
23 | DECADE = DATE_PANEL_MODE.DECADE;
|
24 |
|
25 |
|
26 |
|
27 | var mode2Rows = (_mode2Rows = {}, _mode2Rows[DATE] = 7, _mode2Rows[WEEK] = 7, _mode2Rows[MONTH] = 4, _mode2Rows[QUARTER] = 4, _mode2Rows[YEAR] = 4, _mode2Rows[DECADE] = 3, _mode2Rows);
|
28 |
|
29 | var DateTable = (_temp = _class = function (_React$Component) {
|
30 | _inherits(DateTable, _React$Component);
|
31 |
|
32 | function DateTable(props) {
|
33 | _classCallCheck(this, DateTable);
|
34 |
|
35 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
36 |
|
37 | _this.getCustomRender = function (mode) {
|
38 | var _mode2RenderName;
|
39 |
|
40 | var mode2RenderName = (_mode2RenderName = {}, _mode2RenderName[DATE] = 'dateCellRender', _mode2RenderName[QUARTER] = 'quarterCellRender', _mode2RenderName[MONTH] = 'monthCellRender', _mode2RenderName[YEAR] = 'yearCellRender', _mode2RenderName);
|
41 |
|
42 | return _this.props[mode2RenderName[mode]];
|
43 | };
|
44 |
|
45 | _this.prefixCls = props.prefix + 'calendar2';
|
46 |
|
47 | bindCtx(_this, ['getDateCellData', 'getMonthCellData', 'getQuarterCellData', 'getYearCellData', 'getDecadeData', 'handleKeyDown', 'handleSelect', 'handleMouseEnter', 'handleMouseLeave']);
|
48 |
|
49 | _this.state = {
|
50 | hoverValue: null
|
51 | };
|
52 | return _this;
|
53 | }
|
54 |
|
55 | DateTable.prototype.handleSelect = function handleSelect(v, e, args) {
|
56 | func.invoke(this.props, 'onSelect', [v, e, args]);
|
57 | };
|
58 |
|
59 | DateTable.prototype.handleKeyDown = function handleKeyDown(v, e, args) {
|
60 | switch (e.keyCode) {
|
61 | case KEYCODE.ENTER:
|
62 | this.handleSelect(v, e, args);
|
63 | break;
|
64 | case KEYCODE.RIGHT:
|
65 | break;
|
66 | }
|
67 |
|
68 | };
|
69 |
|
70 | DateTable.prototype.handleMouseEnter = function handleMouseEnter(v, e, args) {
|
71 | func.invoke(this.props.cellProps, 'onMouseEnter', [v, e, args]);
|
72 | };
|
73 |
|
74 | DateTable.prototype.handleMouseLeave = function handleMouseLeave(v, e, args) {
|
75 | func.invoke(this.props.cellProps, 'onMouseLeave', [v, e, args]);
|
76 | };
|
77 |
|
78 | DateTable.prototype.isSame = function isSame(curDate, date, mode) {
|
79 | switch (mode) {
|
80 | case DATE:
|
81 | return curDate.isSame(date, 'day');
|
82 | case WEEK:
|
83 | return curDate.isSame(date, 'week');
|
84 | case QUARTER:
|
85 | return curDate.isSame(date, 'quarter');
|
86 | case MONTH:
|
87 | return curDate.isSame(date, 'month');
|
88 | case YEAR:
|
89 | return curDate.isSame(date, 'year');
|
90 | case DECADE:
|
91 | {
|
92 | var curYear = curDate.year();
|
93 | var targetYear = date.year();
|
94 | return curYear <= targetYear && targetYear < curYear + 10;
|
95 | }
|
96 | }
|
97 | };
|
98 |
|
99 | |
100 |
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 | DateTable.prototype.renderCellContent = function renderCellContent(cellData) {
|
107 | var _this2 = this;
|
108 |
|
109 | var props = this.props;
|
110 | var mode = props.mode,
|
111 | hoveredState = props.hoveredState,
|
112 | cellClassName = props.cellClassName;
|
113 | var hoverValue = this.state.hoverValue;
|
114 |
|
115 |
|
116 | var cellContent = [];
|
117 | var cellCls = this.prefixCls + '-cell';
|
118 |
|
119 | var now = datejs();
|
120 | var rowLen = mode2Rows[mode];
|
121 |
|
122 | for (var i = 0; i < cellData.length;) {
|
123 | var children = [];
|
124 |
|
125 | var isCurrentWeek = void 0;
|
126 |
|
127 | var _loop = function _loop(j) {
|
128 | var _extends2;
|
129 |
|
130 | var _cellData = cellData[i++],
|
131 | label = _cellData.label,
|
132 | value = _cellData.value,
|
133 | key = _cellData.key,
|
134 | isCurrent = _cellData.isCurrent;
|
135 |
|
136 | var v = value.startOf(mode);
|
137 |
|
138 | var isDisabled = props.disabledDate && props.disabledDate(v, mode);
|
139 | var hoverState = hoverValue && hoveredState && hoveredState(hoverValue);
|
140 | var className = classnames(cellCls, _extends((_extends2 = {}, _extends2[cellCls + '-current'] = isCurrent, _extends2[cellCls + '-today'] = mode === WEEK ? _this2.isSame(value, now, DATE) : _this2.isSame(v, now, mode), _extends2[cellCls + '-selected'] = _this2.isSame(v, props.value, mode), _extends2[cellCls + '-disabled'] = isDisabled, _extends2[cellCls + '-range-hover'] = hoverState, _extends2), cellClassName && cellClassName(v)));
|
141 |
|
142 | var onEvents = null;
|
143 |
|
144 | if (!isDisabled) {
|
145 | onEvents = {
|
146 | onClick: function onClick(e) {
|
147 | return _this2.handleSelect(v, e, { isCurrent: isCurrent, label: label });
|
148 | },
|
149 | onKeyDown: function onKeyDown(e) {
|
150 | return _this2.handleKeyDown(v, e, { isCurrent: isCurrent, label: label });
|
151 | },
|
152 | onMouseEnter: function onMouseEnter(e) {
|
153 | return _this2.handleMouseEnter(v, e, { isCurrent: isCurrent, label: label });
|
154 | },
|
155 | onMouseLeave: function onMouseLeave(e) {
|
156 | return _this2.handleMouseLeave(v, e, { isCurrent: isCurrent, label: label });
|
157 | }
|
158 | };
|
159 | }
|
160 |
|
161 | if (mode === WEEK && j === 0) {
|
162 | var week = v.week();
|
163 |
|
164 | children.push(React.createElement(
|
165 | 'td',
|
166 | { key: 'w-' + week, className: '' + cellCls },
|
167 | React.createElement(
|
168 | 'div',
|
169 | { className: cellCls + '-inner' },
|
170 | week
|
171 | )
|
172 | ));
|
173 | isCurrentWeek = isCurrent;
|
174 | }
|
175 |
|
176 | var customRender = _this2.getCustomRender(mode);
|
177 |
|
178 | children.push(React.createElement(
|
179 | 'td',
|
180 | _extends({ key: key, title: key }, onEvents, { className: className }),
|
181 | React.createElement(
|
182 | 'div',
|
183 | { className: cellCls + '-inner' },
|
184 | renderNode(customRender, React.createElement(
|
185 | 'div',
|
186 | { className: cellCls + '-value' },
|
187 | label
|
188 | ), [v])
|
189 | )
|
190 | ));
|
191 | };
|
192 |
|
193 | for (var j = 0; j < rowLen; j++) {
|
194 | _loop(j);
|
195 | }
|
196 |
|
197 | var className = void 0;
|
198 | if (mode === WEEK) {
|
199 | var _classnames;
|
200 |
|
201 | className = classnames(this.prefixCls + '-week', (_classnames = {}, _classnames[this.prefixCls + '-week-current'] = isCurrentWeek, _classnames));
|
202 | }
|
203 |
|
204 | cellContent.push(React.createElement(
|
205 | 'tr',
|
206 | { key: i, className: className },
|
207 | children
|
208 | ));
|
209 | }
|
210 |
|
211 | return cellContent;
|
212 | };
|
213 |
|
214 |
|
215 |
|
216 |
|
217 | DateTable.prototype.renderWeekdaysHead = function renderWeekdaysHead() {
|
218 | var weekdaysMin = datejs.weekdaysMin();
|
219 | var firstDayOfWeek = datejs.localeData().firstDayOfWeek();
|
220 |
|
221 |
|
222 | if (firstDayOfWeek !== 0) {
|
223 | weekdaysMin = weekdaysMin.slice(firstDayOfWeek).concat(weekdaysMin.slice(0, firstDayOfWeek));
|
224 | }
|
225 |
|
226 | return React.createElement(
|
227 | 'thead',
|
228 | null,
|
229 | React.createElement(
|
230 | 'tr',
|
231 | null,
|
232 | this.props.mode === WEEK ? React.createElement('th', { className: this.prefixCls + '-cell-week' }) : null,
|
233 | weekdaysMin.map(function (d) {
|
234 | return React.createElement(
|
235 | 'th',
|
236 | { key: d },
|
237 | d
|
238 | );
|
239 | })
|
240 | )
|
241 | );
|
242 | };
|
243 |
|
244 | DateTable.prototype.getDateCellData = function getDateCellData() {
|
245 | var _props = this.props,
|
246 | panelValue = _props.panelValue,
|
247 | colNum = _props.colNum;
|
248 |
|
249 |
|
250 | var firstDayOfMonth = panelValue.clone().startOf('month');
|
251 | var weekOfFirstDay = firstDayOfMonth.day();
|
252 | var daysOfCurMonth = panelValue.endOf('month').date();
|
253 | var firstDayOfWeek = datejs.localeData().firstDayOfWeek();
|
254 |
|
255 | var cellData = [];
|
256 | var preDays = (weekOfFirstDay - firstDayOfWeek + 7) % 7;
|
257 | var nextDays = colNum ? colNum * mode2Rows[DATE] - preDays - daysOfCurMonth : (7 - (preDays + daysOfCurMonth) % 7) % 7;
|
258 |
|
259 |
|
260 | for (var i = preDays; i > 0; i--) {
|
261 | cellData.push(firstDayOfMonth.clone().subtract(i, 'day'));
|
262 | }
|
263 |
|
264 |
|
265 | for (var _i = 0; _i < daysOfCurMonth; _i++) {
|
266 | cellData.push(firstDayOfMonth.clone().add(_i, 'day'));
|
267 | }
|
268 |
|
269 |
|
270 | for (var _i2 = 0; _i2 < nextDays; _i2++) {
|
271 | cellData.push(firstDayOfMonth.clone().add(daysOfCurMonth + _i2, 'day'));
|
272 | }
|
273 |
|
274 | return cellData.map(function (value) {
|
275 | return {
|
276 | value: value,
|
277 | label: value.date(),
|
278 | isCurrent: value.isSame(firstDayOfMonth, 'month'),
|
279 | key: value.format('YYYY-MM-DD')
|
280 | };
|
281 | });
|
282 | };
|
283 |
|
284 | DateTable.prototype.getMonthCellData = function getMonthCellData() {
|
285 | var panelValue = this.props.panelValue;
|
286 |
|
287 |
|
288 | return datejs.monthsShort().map(function (label, index) {
|
289 | var value = panelValue.clone().month(index);
|
290 |
|
291 | return {
|
292 | label: label,
|
293 | value: value,
|
294 | isCurrent: true,
|
295 | key: value.format('YYYY-MM')
|
296 | };
|
297 | });
|
298 | };
|
299 |
|
300 | DateTable.prototype.getQuarterCellData = function getQuarterCellData() {
|
301 | var panelValue = this.props.panelValue;
|
302 |
|
303 |
|
304 | return [1, 2, 3, 4].map(function (i) {
|
305 | return {
|
306 | label: 'Q' + i,
|
307 | value: panelValue.clone().quarter(i),
|
308 | isCurrent: true,
|
309 | key: 'Q' + i
|
310 | };
|
311 | });
|
312 | };
|
313 |
|
314 | DateTable.prototype.getYearCellData = function getYearCellData() {
|
315 | var panelValue = this.props.panelValue;
|
316 |
|
317 | var curYear = panelValue.year();
|
318 | var startYear = curYear - curYear % 10 - 1;
|
319 | var cellData = [];
|
320 |
|
321 | for (var i = 0; i < 12; i++) {
|
322 | var y = startYear + i;
|
323 |
|
324 | cellData.push({
|
325 | value: panelValue.clone().year(y),
|
326 | label: y,
|
327 | isCurrent: i > 0 && i < 11,
|
328 | key: y
|
329 | });
|
330 | }
|
331 |
|
332 | return cellData;
|
333 | };
|
334 |
|
335 | DateTable.prototype.getDecadeData = function getDecadeData() {
|
336 | var panelValue = this.props.panelValue;
|
337 |
|
338 | var curYear = panelValue.year();
|
339 | var startYear = curYear - curYear % 100 - 10;
|
340 | var cellData = [];
|
341 |
|
342 | for (var i = 0; i < 12; i++) {
|
343 | var y = startYear + i * 10;
|
344 |
|
345 | cellData.push({
|
346 | value: panelValue.clone().year(y),
|
347 | label: y + '-' + (y + 9),
|
348 | isCurrent: i > 0 && i < 11,
|
349 | key: y + '-' + (y + 9)
|
350 | });
|
351 | }
|
352 |
|
353 | return cellData;
|
354 | };
|
355 |
|
356 | DateTable.prototype.render = function render() {
|
357 | var _mode2Data;
|
358 |
|
359 | var mode = this.props.mode;
|
360 |
|
361 | var mode2Data = (_mode2Data = {}, _mode2Data[DATE] = this.getDateCellData, _mode2Data[WEEK] = this.getDateCellData, _mode2Data[MONTH] = this.getMonthCellData, _mode2Data[QUARTER] = this.getQuarterCellData, _mode2Data[YEAR] = this.getYearCellData, _mode2Data[DECADE] = this.getDecadeData, _mode2Data);
|
362 |
|
363 | return React.createElement(
|
364 | 'table',
|
365 | { className: this.prefixCls + '-table ' + this.prefixCls + '-table-' + mode },
|
366 | [DATE, WEEK].includes(mode) ? this.renderWeekdaysHead() : null,
|
367 | React.createElement(
|
368 | 'tbody',
|
369 | null,
|
370 | this.renderCellContent(mode2Data[mode]())
|
371 | )
|
372 | );
|
373 | };
|
374 |
|
375 | return DateTable;
|
376 | }(React.Component), _class.propTypes = {
|
377 | mode: SharedPT.panelMode,
|
378 | value: SharedPT.date,
|
379 | panelValue: SharedPT.date,
|
380 | dateCellRender: PT.func,
|
381 | quarterCellRender: PT.func,
|
382 | monthCellRender: PT.func,
|
383 | yearCellRender: PT.func,
|
384 | disabledDate: PT.func,
|
385 | selectedState: PT.func,
|
386 | hoveredState: PT.func,
|
387 | onSelect: PT.func,
|
388 | onDateSelect: PT.func,
|
389 | startOnSunday: PT.bool,
|
390 | cellClassName: PT.oneOfType([PT.func, PT.string]),
|
391 | colNum: PT.number,
|
392 | cellProps: PT.object
|
393 | }, _temp);
|
394 | DateTable.displayName = 'DateTable';
|
395 |
|
396 |
|
397 | export default polyfill(DateTable); |
\ | No newline at end of file |