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 from 'react';
|
6 | import PropTypes from 'prop-types';
|
7 | import moment from 'moment';
|
8 | import classnames from 'classnames';
|
9 | import { polyfill } from 'react-lifecycles-compat';
|
10 | import KeyCode from 'rc-util/es/KeyCode';
|
11 | import CalendarPart from './range-calendar/CalendarPart';
|
12 | import TodayButton from './calendar/TodayButton';
|
13 | import OkButton from './calendar/OkButton';
|
14 | import TimePickerButton from './calendar/TimePickerButton';
|
15 | import { commonMixinWrapper, propType, defaultProp } from './mixin/CommonMixin';
|
16 | import { syncTime, getTodayTime, isAllowedDate } from './util';
|
17 | import { goTime, goStartMonth, goEndMonth, includesTime } from './util/toTime';
|
18 |
|
19 | function noop() {}
|
20 |
|
21 | function isEmptyArray(arr) {
|
22 | return Array.isArray(arr) && (arr.length === 0 || arr.every(function (i) {
|
23 | return !i;
|
24 | }));
|
25 | }
|
26 |
|
27 | function isArraysEqual(a, b) {
|
28 | if (a === b) return true;
|
29 | if (a === null || typeof a === 'undefined' || b === null || typeof b === 'undefined') {
|
30 | return false;
|
31 | }
|
32 | if (a.length !== b.length) return false;
|
33 |
|
34 | for (var i = 0; i < a.length; ++i) {
|
35 | if (a[i] !== b[i]) return false;
|
36 | }
|
37 | return true;
|
38 | }
|
39 |
|
40 | function getValueFromSelectedValue(selectedValue) {
|
41 | var start = selectedValue[0],
|
42 | end = selectedValue[1];
|
43 |
|
44 | if (end && (start === undefined || start === null)) {
|
45 | start = end.clone().subtract(1, 'month');
|
46 | }
|
47 |
|
48 | if (start && (end === undefined || end === null)) {
|
49 | end = start.clone().add(1, 'month');
|
50 | }
|
51 | return [start, end];
|
52 | }
|
53 |
|
54 | function normalizeAnchor(props, init) {
|
55 | var selectedValue = props.selectedValue || init && props.defaultSelectedValue;
|
56 | var value = props.value || init && props.defaultValue;
|
57 | var normalizedValue = value ? getValueFromSelectedValue(value) : getValueFromSelectedValue(selectedValue);
|
58 | return !isEmptyArray(normalizedValue) ? normalizedValue : init && [moment(), moment().add(1, 'months')];
|
59 | }
|
60 |
|
61 | function generateOptions(length, extraOptionGen) {
|
62 | var arr = extraOptionGen ? extraOptionGen().concat() : [];
|
63 | for (var value = 0; value < length; value++) {
|
64 | if (arr.indexOf(value) === -1) {
|
65 | arr.push(value);
|
66 | }
|
67 | }
|
68 | return arr;
|
69 | }
|
70 |
|
71 | function onInputSelect(direction, value, cause) {
|
72 | if (!value) {
|
73 | return;
|
74 | }
|
75 | var originalValue = this.state.selectedValue;
|
76 | var selectedValue = originalValue.concat();
|
77 | var index = direction === 'left' ? 0 : 1;
|
78 | selectedValue[index] = value;
|
79 | if (selectedValue[0] && this.compare(selectedValue[0], selectedValue[1]) > 0) {
|
80 | selectedValue[1 - index] = this.state.showTimePicker ? selectedValue[index] : undefined;
|
81 | }
|
82 | this.props.onInputSelect(selectedValue);
|
83 | this.fireSelectValueChange(selectedValue, null, cause || { source: 'dateInput' });
|
84 | }
|
85 |
|
86 | var RangeCalendar = function (_React$Component) {
|
87 | _inherits(RangeCalendar, _React$Component);
|
88 |
|
89 | function RangeCalendar(props) {
|
90 | _classCallCheck(this, RangeCalendar);
|
91 |
|
92 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
93 |
|
94 | _initialiseProps.call(_this);
|
95 |
|
96 | var selectedValue = props.selectedValue || props.defaultSelectedValue;
|
97 | var value = normalizeAnchor(props, 1);
|
98 | _this.state = {
|
99 | selectedValue: selectedValue,
|
100 | prevSelectedValue: selectedValue,
|
101 | firstSelectedValue: null,
|
102 | hoverValue: props.hoverValue || [],
|
103 | value: value,
|
104 | showTimePicker: false,
|
105 | mode: props.mode || ['date', 'date'],
|
106 | panelTriggerSource: ''
|
107 | };
|
108 | return _this;
|
109 | }
|
110 |
|
111 | RangeCalendar.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
|
112 | var newState = {};
|
113 | if ('value' in nextProps) {
|
114 | newState.value = normalizeAnchor(nextProps, 0);
|
115 | }
|
116 | if ('hoverValue' in nextProps && !isArraysEqual(state.hoverValue, nextProps.hoverValue)) {
|
117 | newState.hoverValue = nextProps.hoverValue;
|
118 | }
|
119 | if ('selectedValue' in nextProps) {
|
120 | newState.selectedValue = nextProps.selectedValue;
|
121 | newState.prevSelectedValue = nextProps.selectedValue;
|
122 | }
|
123 | if ('mode' in nextProps && !isArraysEqual(state.mode, nextProps.mode)) {
|
124 | newState.mode = nextProps.mode;
|
125 | }
|
126 | return newState;
|
127 | };
|
128 |
|
129 |
|
130 |
|
131 |
|
132 | RangeCalendar.prototype.render = function render() {
|
133 | var _className, _classnames;
|
134 |
|
135 | var props = this.props,
|
136 | state = this.state;
|
137 | var prefixCls = props.prefixCls,
|
138 | dateInputPlaceholder = props.dateInputPlaceholder,
|
139 | seperator = props.seperator,
|
140 | timePicker = props.timePicker,
|
141 | showOk = props.showOk,
|
142 | locale = props.locale,
|
143 | showClear = props.showClear,
|
144 | showToday = props.showToday,
|
145 | type = props.type,
|
146 | clearIcon = props.clearIcon;
|
147 | var hoverValue = state.hoverValue,
|
148 | selectedValue = state.selectedValue,
|
149 | mode = state.mode,
|
150 | showTimePicker = state.showTimePicker;
|
151 |
|
152 | var className = (_className = {}, _className[props.className] = !!props.className, _className[prefixCls] = 1, _className[prefixCls + '-hidden'] = !props.visible, _className[prefixCls + '-range'] = 1, _className[prefixCls + '-show-time-picker'] = showTimePicker, _className[prefixCls + '-week-number'] = props.showWeekNumber, _className);
|
153 | var classes = classnames(className);
|
154 | var newProps = {
|
155 | selectedValue: state.selectedValue,
|
156 | onSelect: this.onSelect,
|
157 | onDayHover: type === 'start' && selectedValue[1] || type === 'end' && selectedValue[0] || !!hoverValue.length ? this.onDayHover : undefined
|
158 | };
|
159 |
|
160 | var placeholder1 = void 0;
|
161 | var placeholder2 = void 0;
|
162 |
|
163 | if (dateInputPlaceholder) {
|
164 | if (Array.isArray(dateInputPlaceholder)) {
|
165 | placeholder1 = dateInputPlaceholder[0];
|
166 | placeholder2 = dateInputPlaceholder[1];
|
167 | } else {
|
168 | placeholder1 = placeholder2 = dateInputPlaceholder;
|
169 | }
|
170 | }
|
171 | var showOkButton = showOk === true || showOk !== false && !!timePicker;
|
172 | var cls = classnames((_classnames = {}, _classnames[prefixCls + '-footer'] = true, _classnames[prefixCls + '-range-bottom'] = true, _classnames[prefixCls + '-footer-show-ok'] = showOkButton, _classnames));
|
173 |
|
174 | var startValue = this.getStartValue();
|
175 | var endValue = this.getEndValue();
|
176 | var todayTime = getTodayTime(startValue);
|
177 | var thisMonth = todayTime.month();
|
178 | var thisYear = todayTime.year();
|
179 | var isTodayInView = startValue.year() === thisYear && startValue.month() === thisMonth || endValue.year() === thisYear && endValue.month() === thisMonth;
|
180 | var nextMonthOfStart = startValue.clone().add(1, 'months');
|
181 | var isClosestMonths = nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month();
|
182 |
|
183 | var extraFooter = props.renderFooter();
|
184 |
|
185 | return React.createElement(
|
186 | 'div',
|
187 | {
|
188 | ref: this.saveRoot,
|
189 | className: classes,
|
190 | style: props.style,
|
191 | tabIndex: '0',
|
192 | onKeyDown: this.onKeyDown
|
193 | },
|
194 | props.renderSidebar(),
|
195 | React.createElement(
|
196 | 'div',
|
197 | { className: prefixCls + '-panel' },
|
198 | showClear && selectedValue[0] && selectedValue[1] ? React.createElement(
|
199 | 'a',
|
200 | {
|
201 | role: 'button',
|
202 | title: locale.clear,
|
203 | onClick: this.clear
|
204 | },
|
205 | clearIcon || React.createElement('span', { className: prefixCls + '-clear-btn' })
|
206 | ) : null,
|
207 | React.createElement(
|
208 | 'div',
|
209 | {
|
210 | className: prefixCls + '-date-panel',
|
211 | onMouseLeave: type !== 'both' ? this.onDatePanelLeave : undefined,
|
212 | onMouseEnter: type !== 'both' ? this.onDatePanelEnter : undefined
|
213 | },
|
214 | React.createElement(CalendarPart, _extends({}, props, newProps, {
|
215 | hoverValue: hoverValue,
|
216 | direction: 'left',
|
217 | disabledTime: this.disabledStartTime,
|
218 | disabledMonth: this.disabledStartMonth,
|
219 | format: this.getFormat(),
|
220 | value: startValue,
|
221 | mode: mode[0],
|
222 | placeholder: placeholder1,
|
223 | onInputChange: this.onStartInputChange,
|
224 | onInputSelect: this.onStartInputSelect,
|
225 | onValueChange: this.onStartValueChange,
|
226 | onPanelChange: this.onStartPanelChange,
|
227 | showDateInput: this.props.showDateInput,
|
228 | timePicker: timePicker,
|
229 | showTimePicker: showTimePicker || mode[0] === 'time',
|
230 | enablePrev: true,
|
231 | enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]),
|
232 | clearIcon: clearIcon
|
233 | })),
|
234 | React.createElement(
|
235 | 'span',
|
236 | { className: prefixCls + '-range-middle' },
|
237 | seperator
|
238 | ),
|
239 | React.createElement(CalendarPart, _extends({}, props, newProps, {
|
240 | hoverValue: hoverValue,
|
241 | direction: 'right',
|
242 | format: this.getFormat(),
|
243 | timePickerDisabledTime: this.getEndDisableTime(),
|
244 | placeholder: placeholder2,
|
245 | value: endValue,
|
246 | mode: mode[1],
|
247 | onInputChange: this.onEndInputChange,
|
248 | onInputSelect: this.onEndInputSelect,
|
249 | onValueChange: this.onEndValueChange,
|
250 | onPanelChange: this.onEndPanelChange,
|
251 | showDateInput: this.props.showDateInput,
|
252 | timePicker: timePicker,
|
253 | showTimePicker: showTimePicker || mode[1] === 'time',
|
254 | disabledTime: this.disabledEndTime,
|
255 | disabledMonth: this.disabledEndMonth,
|
256 | enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]),
|
257 | enableNext: true,
|
258 | clearIcon: clearIcon
|
259 | }))
|
260 | ),
|
261 | React.createElement(
|
262 | 'div',
|
263 | { className: cls },
|
264 | showToday || props.timePicker || showOkButton || extraFooter ? React.createElement(
|
265 | 'div',
|
266 | { className: prefixCls + '-footer-btn' },
|
267 | extraFooter,
|
268 | showToday ? React.createElement(TodayButton, _extends({}, props, {
|
269 | disabled: isTodayInView,
|
270 | value: state.value[0],
|
271 | onToday: this.onToday,
|
272 | text: locale.backToToday
|
273 | })) : null,
|
274 | props.timePicker ? React.createElement(TimePickerButton, _extends({}, props, {
|
275 | showTimePicker: showTimePicker,
|
276 | onOpenTimePicker: this.onOpenTimePicker,
|
277 | onCloseTimePicker: this.onCloseTimePicker,
|
278 | timePickerDisabled: !this.hasSelectedValue() || hoverValue.length
|
279 | })) : null,
|
280 | showOkButton ? React.createElement(OkButton, _extends({}, props, {
|
281 | onOk: this.onOk,
|
282 | okDisabled: !this.isAllowedDateAndTime(selectedValue) || !this.hasSelectedValue() || hoverValue.length
|
283 | })) : null
|
284 | ) : null
|
285 | )
|
286 | )
|
287 | );
|
288 | };
|
289 |
|
290 | return RangeCalendar;
|
291 | }(React.Component);
|
292 |
|
293 | RangeCalendar.propTypes = _extends({}, propType, {
|
294 | prefixCls: PropTypes.string,
|
295 | dateInputPlaceholder: PropTypes.any,
|
296 | seperator: PropTypes.string,
|
297 | defaultValue: PropTypes.any,
|
298 | value: PropTypes.any,
|
299 | hoverValue: PropTypes.any,
|
300 | mode: PropTypes.arrayOf(PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade'])),
|
301 | showDateInput: PropTypes.bool,
|
302 | timePicker: PropTypes.any,
|
303 | showOk: PropTypes.bool,
|
304 | showToday: PropTypes.bool,
|
305 | defaultSelectedValue: PropTypes.array,
|
306 | selectedValue: PropTypes.array,
|
307 | onOk: PropTypes.func,
|
308 | showClear: PropTypes.bool,
|
309 | locale: PropTypes.object,
|
310 | onChange: PropTypes.func,
|
311 | onSelect: PropTypes.func,
|
312 | onValueChange: PropTypes.func,
|
313 | onHoverChange: PropTypes.func,
|
314 | onPanelChange: PropTypes.func,
|
315 | format: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
|
316 | onClear: PropTypes.func,
|
317 | type: PropTypes.any,
|
318 | disabledDate: PropTypes.func,
|
319 | disabledTime: PropTypes.func,
|
320 | clearIcon: PropTypes.node,
|
321 | onKeyDown: PropTypes.func
|
322 | });
|
323 | RangeCalendar.defaultProps = _extends({}, defaultProp, {
|
324 | type: 'both',
|
325 | seperator: '~',
|
326 | defaultSelectedValue: [],
|
327 | onValueChange: noop,
|
328 | onHoverChange: noop,
|
329 | onPanelChange: noop,
|
330 | disabledTime: noop,
|
331 | onInputSelect: noop,
|
332 | showToday: true,
|
333 | showDateInput: true
|
334 | });
|
335 |
|
336 | var _initialiseProps = function _initialiseProps() {
|
337 | var _this2 = this;
|
338 |
|
339 | this.onDatePanelEnter = function () {
|
340 | if (_this2.hasSelectedValue()) {
|
341 | _this2.fireHoverValueChange(_this2.state.selectedValue.concat());
|
342 | }
|
343 | };
|
344 |
|
345 | this.onDatePanelLeave = function () {
|
346 | if (_this2.hasSelectedValue()) {
|
347 | _this2.fireHoverValueChange([]);
|
348 | }
|
349 | };
|
350 |
|
351 | this.onSelect = function (value) {
|
352 | var type = _this2.props.type;
|
353 | var _state = _this2.state,
|
354 | selectedValue = _state.selectedValue,
|
355 | prevSelectedValue = _state.prevSelectedValue,
|
356 | firstSelectedValue = _state.firstSelectedValue;
|
357 |
|
358 | var nextSelectedValue = void 0;
|
359 | if (type === 'both') {
|
360 | if (!firstSelectedValue) {
|
361 | syncTime(prevSelectedValue[0], value);
|
362 | nextSelectedValue = [value];
|
363 | } else if (_this2.compare(firstSelectedValue, value) < 0) {
|
364 | syncTime(prevSelectedValue[1], value);
|
365 | nextSelectedValue = [firstSelectedValue, value];
|
366 | } else {
|
367 | syncTime(prevSelectedValue[0], value);
|
368 | syncTime(prevSelectedValue[1], firstSelectedValue);
|
369 | nextSelectedValue = [value, firstSelectedValue];
|
370 | }
|
371 | } else if (type === 'start') {
|
372 | syncTime(prevSelectedValue[0], value);
|
373 | var endValue = selectedValue[1];
|
374 | nextSelectedValue = endValue && _this2.compare(endValue, value) > 0 ? [value, endValue] : [value];
|
375 | } else {
|
376 |
|
377 | var startValue = selectedValue[0];
|
378 | if (startValue && _this2.compare(startValue, value) <= 0) {
|
379 | syncTime(prevSelectedValue[1], value);
|
380 | nextSelectedValue = [startValue, value];
|
381 | } else {
|
382 | syncTime(prevSelectedValue[0], value);
|
383 | nextSelectedValue = [value];
|
384 | }
|
385 | }
|
386 |
|
387 | _this2.fireSelectValueChange(nextSelectedValue);
|
388 | };
|
389 |
|
390 | this.onKeyDown = function (event) {
|
391 | if (event.target.nodeName.toLowerCase() === 'input') {
|
392 | return;
|
393 | }
|
394 |
|
395 | var keyCode = event.keyCode;
|
396 |
|
397 | var ctrlKey = event.ctrlKey || event.metaKey;
|
398 |
|
399 | var _state2 = _this2.state,
|
400 | selectedValue = _state2.selectedValue,
|
401 | hoverValue = _state2.hoverValue,
|
402 | firstSelectedValue = _state2.firstSelectedValue,
|
403 | value = _state2.value;
|
404 | var _props = _this2.props,
|
405 | onKeyDown = _props.onKeyDown,
|
406 | disabledDate = _props.disabledDate;
|
407 |
|
408 |
|
409 |
|
410 | var updateHoverPoint = function updateHoverPoint(func) {
|
411 |
|
412 | var currentHoverTime = void 0;
|
413 | var nextHoverTime = void 0;
|
414 | var nextHoverValue = void 0;
|
415 |
|
416 | if (!firstSelectedValue) {
|
417 | currentHoverTime = hoverValue[0] || selectedValue[0] || value[0] || moment();
|
418 | nextHoverTime = func(currentHoverTime);
|
419 | nextHoverValue = [nextHoverTime];
|
420 | _this2.fireHoverValueChange(nextHoverValue);
|
421 | } else {
|
422 | if (hoverValue.length === 1) {
|
423 | currentHoverTime = hoverValue[0].clone();
|
424 | nextHoverTime = func(currentHoverTime);
|
425 | nextHoverValue = _this2.onDayHover(nextHoverTime);
|
426 | } else {
|
427 | currentHoverTime = hoverValue[0].isSame(firstSelectedValue, 'day') ? hoverValue[1] : hoverValue[0];
|
428 | nextHoverTime = func(currentHoverTime);
|
429 | nextHoverValue = _this2.onDayHover(nextHoverTime);
|
430 | }
|
431 | }
|
432 |
|
433 |
|
434 | if (nextHoverValue.length >= 2) {
|
435 | var miss = nextHoverValue.some(function (ht) {
|
436 | return !includesTime(value, ht, 'month');
|
437 | });
|
438 | if (miss) {
|
439 | var newValue = nextHoverValue.slice().sort(function (t1, t2) {
|
440 | return t1.valueOf() - t2.valueOf();
|
441 | });
|
442 | if (newValue[0].isSame(newValue[1], 'month')) {
|
443 | newValue[1] = newValue[0].clone().add(1, 'month');
|
444 | }
|
445 | _this2.fireValueChange(newValue);
|
446 | }
|
447 | } else if (nextHoverValue.length === 1) {
|
448 |
|
449 | var oriValueIndex = value.findIndex(function (time) {
|
450 | return time.isSame(currentHoverTime, 'month');
|
451 | });
|
452 | if (oriValueIndex === -1) oriValueIndex = 0;
|
453 |
|
454 | if (value.every(function (time) {
|
455 | return !time.isSame(nextHoverTime, 'month');
|
456 | })) {
|
457 | var _newValue = value.slice();
|
458 | _newValue[oriValueIndex] = nextHoverTime.clone();
|
459 | _this2.fireValueChange(_newValue);
|
460 | }
|
461 | }
|
462 |
|
463 | event.preventDefault();
|
464 |
|
465 | return nextHoverTime;
|
466 | };
|
467 |
|
468 | switch (keyCode) {
|
469 | case KeyCode.DOWN:
|
470 | updateHoverPoint(function (time) {
|
471 | return goTime(time, 1, 'weeks');
|
472 | });
|
473 | return;
|
474 | case KeyCode.UP:
|
475 | updateHoverPoint(function (time) {
|
476 | return goTime(time, -1, 'weeks');
|
477 | });
|
478 | return;
|
479 | case KeyCode.LEFT:
|
480 | if (ctrlKey) {
|
481 | updateHoverPoint(function (time) {
|
482 | return goTime(time, -1, 'years');
|
483 | });
|
484 | } else {
|
485 | updateHoverPoint(function (time) {
|
486 | return goTime(time, -1, 'days');
|
487 | });
|
488 | }
|
489 | return;
|
490 | case KeyCode.RIGHT:
|
491 | if (ctrlKey) {
|
492 | updateHoverPoint(function (time) {
|
493 | return goTime(time, 1, 'years');
|
494 | });
|
495 | } else {
|
496 | updateHoverPoint(function (time) {
|
497 | return goTime(time, 1, 'days');
|
498 | });
|
499 | }
|
500 | return;
|
501 | case KeyCode.HOME:
|
502 | updateHoverPoint(function (time) {
|
503 | return goStartMonth(time);
|
504 | });
|
505 | return;
|
506 | case KeyCode.END:
|
507 | updateHoverPoint(function (time) {
|
508 | return goEndMonth(time);
|
509 | });
|
510 | return;
|
511 | case KeyCode.PAGE_DOWN:
|
512 | updateHoverPoint(function (time) {
|
513 | return goTime(time, 1, 'month');
|
514 | });
|
515 | return;
|
516 | case KeyCode.PAGE_UP:
|
517 | updateHoverPoint(function (time) {
|
518 | return goTime(time, -1, 'month');
|
519 | });
|
520 | return;
|
521 | case KeyCode.ENTER:
|
522 | {
|
523 | var lastValue = void 0;
|
524 | if (hoverValue.length === 0) {
|
525 | lastValue = updateHoverPoint(function (time) {
|
526 | return time;
|
527 | });
|
528 | } else if (hoverValue.length === 1) {
|
529 | lastValue = hoverValue[0];
|
530 | } else {
|
531 | lastValue = hoverValue[0].isSame(firstSelectedValue, 'day') ? hoverValue[1] : hoverValue[0];
|
532 | }
|
533 | if (lastValue && (!disabledDate || !disabledDate(lastValue))) {
|
534 | _this2.onSelect(lastValue);
|
535 | }
|
536 | event.preventDefault();
|
537 | return;
|
538 | }
|
539 | default:
|
540 | if (onKeyDown) {
|
541 | onKeyDown(event);
|
542 | }
|
543 | }
|
544 | };
|
545 |
|
546 | this.onDayHover = function (value) {
|
547 | var hoverValue = [];
|
548 | var _state3 = _this2.state,
|
549 | selectedValue = _state3.selectedValue,
|
550 | firstSelectedValue = _state3.firstSelectedValue;
|
551 | var type = _this2.props.type;
|
552 |
|
553 | if (type === 'start' && selectedValue[1]) {
|
554 | hoverValue = _this2.compare(value, selectedValue[1]) < 0 ? [value, selectedValue[1]] : [value];
|
555 | } else if (type === 'end' && selectedValue[0]) {
|
556 | hoverValue = _this2.compare(value, selectedValue[0]) > 0 ? [selectedValue[0], value] : [];
|
557 | } else {
|
558 | if (!firstSelectedValue) {
|
559 | if (_this2.state.hoverValue.length) {
|
560 | _this2.setState({ hoverValue: [] });
|
561 | }
|
562 | return hoverValue;
|
563 | }
|
564 | hoverValue = _this2.compare(value, firstSelectedValue) < 0 ? [value, firstSelectedValue] : [firstSelectedValue, value];
|
565 | }
|
566 | _this2.fireHoverValueChange(hoverValue);
|
567 |
|
568 | return hoverValue;
|
569 | };
|
570 |
|
571 | this.onToday = function () {
|
572 | var startValue = getTodayTime(_this2.state.value[0]);
|
573 | var endValue = startValue.clone().add(1, 'months');
|
574 | _this2.setState({ value: [startValue, endValue] });
|
575 | };
|
576 |
|
577 | this.onOpenTimePicker = function () {
|
578 | _this2.setState({
|
579 | showTimePicker: true
|
580 | });
|
581 | };
|
582 |
|
583 | this.onCloseTimePicker = function () {
|
584 | _this2.setState({
|
585 | showTimePicker: false
|
586 | });
|
587 | };
|
588 |
|
589 | this.onOk = function () {
|
590 | var selectedValue = _this2.state.selectedValue;
|
591 |
|
592 | if (_this2.isAllowedDateAndTime(selectedValue)) {
|
593 | _this2.props.onOk(_this2.state.selectedValue);
|
594 | }
|
595 | };
|
596 |
|
597 | this.onStartInputChange = function () {
|
598 | for (var _len = arguments.length, oargs = Array(_len), _key = 0; _key < _len; _key++) {
|
599 | oargs[_key] = arguments[_key];
|
600 | }
|
601 |
|
602 | var args = ['left'].concat(oargs);
|
603 | return onInputSelect.apply(_this2, args);
|
604 | };
|
605 |
|
606 | this.onEndInputChange = function () {
|
607 | for (var _len2 = arguments.length, oargs = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
608 | oargs[_key2] = arguments[_key2];
|
609 | }
|
610 |
|
611 | var args = ['right'].concat(oargs);
|
612 | return onInputSelect.apply(_this2, args);
|
613 | };
|
614 |
|
615 | this.onStartInputSelect = function (value) {
|
616 | var args = ['left', value, { source: 'dateInputSelect' }];
|
617 | return onInputSelect.apply(_this2, args);
|
618 | };
|
619 |
|
620 | this.onEndInputSelect = function (value) {
|
621 | var args = ['right', value, { source: 'dateInputSelect' }];
|
622 | return onInputSelect.apply(_this2, args);
|
623 | };
|
624 |
|
625 | this.onStartValueChange = function (leftValue) {
|
626 | var value = [].concat(_this2.state.value);
|
627 | value[0] = leftValue;
|
628 | return _this2.fireValueChange(value);
|
629 | };
|
630 |
|
631 | this.onEndValueChange = function (rightValue) {
|
632 | var value = [].concat(_this2.state.value);
|
633 | value[1] = rightValue;
|
634 | return _this2.fireValueChange(value);
|
635 | };
|
636 |
|
637 | this.onStartPanelChange = function (value, mode) {
|
638 | var props = _this2.props,
|
639 | state = _this2.state;
|
640 |
|
641 | var newMode = [mode, state.mode[1]];
|
642 | var newState = {
|
643 | panelTriggerSource: 'start'
|
644 | };
|
645 | if (!('mode' in props)) {
|
646 | newState.mode = newMode;
|
647 | }
|
648 | _this2.setState(newState);
|
649 | var newValue = [value || state.value[0], state.value[1]];
|
650 | props.onPanelChange(newValue, newMode);
|
651 | };
|
652 |
|
653 | this.onEndPanelChange = function (value, mode) {
|
654 | var props = _this2.props,
|
655 | state = _this2.state;
|
656 |
|
657 | var newMode = [state.mode[0], mode];
|
658 | var newState = {
|
659 | panelTriggerSource: 'end'
|
660 | };
|
661 | if (!('mode' in props)) {
|
662 | newState.mode = newMode;
|
663 | }
|
664 | _this2.setState(newState);
|
665 | var newValue = [state.value[0], value || state.value[1]];
|
666 | props.onPanelChange(newValue, newMode);
|
667 | };
|
668 |
|
669 | this.getStartValue = function () {
|
670 | var _state4 = _this2.state,
|
671 | selectedValue = _state4.selectedValue,
|
672 | showTimePicker = _state4.showTimePicker,
|
673 | value = _state4.value,
|
674 | mode = _state4.mode,
|
675 | panelTriggerSource = _state4.panelTriggerSource;
|
676 |
|
677 | var startValue = value[0];
|
678 |
|
679 | if (selectedValue[0] && _this2.props.timePicker) {
|
680 | startValue = startValue.clone();
|
681 | syncTime(selectedValue[0], startValue);
|
682 | }
|
683 | if (showTimePicker && selectedValue[0]) {
|
684 | startValue = selectedValue[0];
|
685 | }
|
686 |
|
687 |
|
688 | if (panelTriggerSource === 'end' && mode[0] === 'date' && mode[1] === 'date' && startValue.isSame(value[1], 'month')) {
|
689 | startValue = startValue.clone().subtract(1, 'month');
|
690 | }
|
691 |
|
692 | return startValue;
|
693 | };
|
694 |
|
695 | this.getEndValue = function () {
|
696 | var _state5 = _this2.state,
|
697 | value = _state5.value,
|
698 | selectedValue = _state5.selectedValue,
|
699 | showTimePicker = _state5.showTimePicker,
|
700 | mode = _state5.mode,
|
701 | panelTriggerSource = _state5.panelTriggerSource;
|
702 |
|
703 | var endValue = value[1] ? value[1].clone() : value[0].clone().add(1, 'month');
|
704 |
|
705 | if (selectedValue[1] && _this2.props.timePicker) {
|
706 | syncTime(selectedValue[1], endValue);
|
707 | }
|
708 | if (showTimePicker) {
|
709 | endValue = selectedValue[1] ? selectedValue[1] : _this2.getStartValue();
|
710 | }
|
711 |
|
712 |
|
713 | if (!showTimePicker && panelTriggerSource !== 'end' && mode[0] === 'date' && mode[1] === 'date' && endValue.isSame(value[0], 'month')) {
|
714 | endValue = endValue.clone().add(1, 'month');
|
715 | }
|
716 |
|
717 | return endValue;
|
718 | };
|
719 |
|
720 | this.getEndDisableTime = function () {
|
721 | var _state6 = _this2.state,
|
722 | selectedValue = _state6.selectedValue,
|
723 | value = _state6.value;
|
724 | var disabledTime = _this2.props.disabledTime;
|
725 |
|
726 | var userSettingDisabledTime = disabledTime(selectedValue, 'end') || {};
|
727 | var startValue = selectedValue && selectedValue[0] || value[0].clone();
|
728 |
|
729 |
|
730 | if (!selectedValue[1] || startValue.isSame(selectedValue[1], 'day')) {
|
731 | var hours = startValue.hour();
|
732 | var minutes = startValue.minute();
|
733 | var second = startValue.second();
|
734 | var _disabledHours = userSettingDisabledTime.disabledHours,
|
735 | _disabledMinutes = userSettingDisabledTime.disabledMinutes,
|
736 | _disabledSeconds = userSettingDisabledTime.disabledSeconds;
|
737 |
|
738 | var oldDisabledMinutes = _disabledMinutes ? _disabledMinutes() : [];
|
739 | var olddisabledSeconds = _disabledSeconds ? _disabledSeconds() : [];
|
740 | _disabledHours = generateOptions(hours, _disabledHours);
|
741 | _disabledMinutes = generateOptions(minutes, _disabledMinutes);
|
742 | _disabledSeconds = generateOptions(second, _disabledSeconds);
|
743 | return {
|
744 | disabledHours: function disabledHours() {
|
745 | return _disabledHours;
|
746 | },
|
747 | disabledMinutes: function disabledMinutes(hour) {
|
748 | if (hour === hours) {
|
749 | return _disabledMinutes;
|
750 | }
|
751 | return oldDisabledMinutes;
|
752 | },
|
753 | disabledSeconds: function disabledSeconds(hour, minute) {
|
754 | if (hour === hours && minute === minutes) {
|
755 | return _disabledSeconds;
|
756 | }
|
757 | return olddisabledSeconds;
|
758 | }
|
759 | };
|
760 | }
|
761 | return userSettingDisabledTime;
|
762 | };
|
763 |
|
764 | this.isAllowedDateAndTime = function (selectedValue) {
|
765 | return isAllowedDate(selectedValue[0], _this2.props.disabledDate, _this2.disabledStartTime) && isAllowedDate(selectedValue[1], _this2.props.disabledDate, _this2.disabledEndTime);
|
766 | };
|
767 |
|
768 | this.isMonthYearPanelShow = function (mode) {
|
769 | return ['month', 'year', 'decade'].indexOf(mode) > -1;
|
770 | };
|
771 |
|
772 | this.hasSelectedValue = function () {
|
773 | var selectedValue = _this2.state.selectedValue;
|
774 |
|
775 | return !!selectedValue[1] && !!selectedValue[0];
|
776 | };
|
777 |
|
778 | this.compare = function (v1, v2) {
|
779 | if (_this2.props.timePicker) {
|
780 | return v1.diff(v2);
|
781 | }
|
782 | return v1.diff(v2, 'days');
|
783 | };
|
784 |
|
785 | this.fireSelectValueChange = function (selectedValue, direct, cause) {
|
786 | var timePicker = _this2.props.timePicker;
|
787 | var prevSelectedValue = _this2.state.prevSelectedValue;
|
788 |
|
789 | if (timePicker && timePicker.props.defaultValue) {
|
790 | var timePickerDefaultValue = timePicker.props.defaultValue;
|
791 | if (!prevSelectedValue[0] && selectedValue[0]) {
|
792 | syncTime(timePickerDefaultValue[0], selectedValue[0]);
|
793 | }
|
794 | if (!prevSelectedValue[1] && selectedValue[1]) {
|
795 | syncTime(timePickerDefaultValue[1], selectedValue[1]);
|
796 | }
|
797 | }
|
798 |
|
799 | if (!('selectedValue' in _this2.props)) {
|
800 | _this2.setState({
|
801 | selectedValue: selectedValue
|
802 | });
|
803 | }
|
804 |
|
805 |
|
806 | if (!_this2.state.selectedValue[0] || !_this2.state.selectedValue[1]) {
|
807 | var startValue = selectedValue[0] || moment();
|
808 | var endValue = selectedValue[1] || startValue.clone().add(1, 'months');
|
809 | _this2.setState({
|
810 | selectedValue: selectedValue,
|
811 | value: getValueFromSelectedValue([startValue, endValue])
|
812 | });
|
813 | }
|
814 |
|
815 | if (selectedValue[0] && !selectedValue[1]) {
|
816 | _this2.setState({ firstSelectedValue: selectedValue[0] });
|
817 | _this2.fireHoverValueChange(selectedValue.concat());
|
818 | }
|
819 | _this2.props.onChange(selectedValue);
|
820 | if (direct || selectedValue[0] && selectedValue[1]) {
|
821 | _this2.setState({
|
822 | prevSelectedValue: selectedValue,
|
823 | firstSelectedValue: null
|
824 | });
|
825 | _this2.fireHoverValueChange([]);
|
826 | _this2.props.onSelect(selectedValue, cause);
|
827 | }
|
828 | };
|
829 |
|
830 | this.fireValueChange = function (value) {
|
831 | var props = _this2.props;
|
832 | if (!('value' in props)) {
|
833 | _this2.setState({
|
834 | value: value
|
835 | });
|
836 | }
|
837 | props.onValueChange(value);
|
838 | };
|
839 |
|
840 | this.fireHoverValueChange = function (hoverValue) {
|
841 | var props = _this2.props;
|
842 | if (!('hoverValue' in props)) {
|
843 | _this2.setState({ hoverValue: hoverValue });
|
844 | }
|
845 | props.onHoverChange(hoverValue);
|
846 | };
|
847 |
|
848 | this.clear = function () {
|
849 | _this2.fireSelectValueChange([], true);
|
850 | _this2.props.onClear();
|
851 | };
|
852 |
|
853 | this.disabledStartTime = function (time) {
|
854 | return _this2.props.disabledTime(time, 'start');
|
855 | };
|
856 |
|
857 | this.disabledEndTime = function (time) {
|
858 | return _this2.props.disabledTime(time, 'end');
|
859 | };
|
860 |
|
861 | this.disabledStartMonth = function (month) {
|
862 | var value = _this2.state.value;
|
863 |
|
864 | return month.isAfter(value[1], 'month');
|
865 | };
|
866 |
|
867 | this.disabledEndMonth = function (month) {
|
868 | var value = _this2.state.value;
|
869 |
|
870 | return month.isBefore(value[0], 'month');
|
871 | };
|
872 | };
|
873 |
|
874 | polyfill(RangeCalendar);
|
875 |
|
876 | export default commonMixinWrapper(RangeCalendar); |
\ | No newline at end of file |