1 | import _typeof from 'babel-runtime/helpers/typeof';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 | import _extends from 'babel-runtime/helpers/extends';
|
4 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
5 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
6 | import _inherits from 'babel-runtime/helpers/inherits';
|
7 |
|
8 | var _class, _temp, _initialiseProps;
|
9 |
|
10 | import React, { Component } from 'react';
|
11 | import PropTypes from 'prop-types';
|
12 | import { polyfill } from 'react-lifecycles-compat';
|
13 | import classnames from 'classnames';
|
14 | import moment from 'moment';
|
15 | import ConfigProvider from '../config-provider';
|
16 | import Overlay from '../overlay';
|
17 | import Input from '../input';
|
18 | import Icon from '../icon';
|
19 | import Calendar from '../calendar';
|
20 | import RangeCalendar from '../calendar/range-calendar';
|
21 | import TimePickerPanel from '../time-picker/panel';
|
22 | import nextLocale from '../locale/zh-cn';
|
23 | import { func, obj } from '../util';
|
24 | import { PANEL, resetValueTime, formatDateValue, getDateTimeFormat, isFunction, onDateKeydown, onTimeKeydown } from './util';
|
25 | import PanelFooter from './module/panel-footer';
|
26 |
|
27 | var Popup = Overlay.Popup;
|
28 |
|
29 |
|
30 | function mapInputStateName(name) {
|
31 | return {
|
32 | startValue: 'startDateInputStr',
|
33 | endValue: 'endDateInputStr',
|
34 | startTime: 'startTimeInputStr',
|
35 | endTime: 'endTimeInputStr'
|
36 | }[name];
|
37 | }
|
38 |
|
39 | function mapTimeToValue(name) {
|
40 | return {
|
41 | startTime: 'startValue',
|
42 | endTime: 'endValue'
|
43 | }[name];
|
44 | }
|
45 |
|
46 | function getFormatValues(values, format) {
|
47 | if (!Array.isArray(values)) {
|
48 | return [null, null];
|
49 | }
|
50 | return [formatDateValue(values[0], format), formatDateValue(values[1], format)];
|
51 | }
|
52 |
|
53 |
|
54 |
|
55 |
|
56 | var RangePicker = (_temp = _class = function (_Component) {
|
57 | _inherits(RangePicker, _Component);
|
58 |
|
59 | function RangePicker(props, context) {
|
60 | _classCallCheck(this, RangePicker);
|
61 |
|
62 | var _this = _possibleConstructorReturn(this, _Component.call(this, props, context));
|
63 |
|
64 | _initialiseProps.call(_this);
|
65 |
|
66 | var _getDateTimeFormat = getDateTimeFormat(props.format, props.showTime, props.type),
|
67 | format = _getDateTimeFormat.format,
|
68 | timeFormat = _getDateTimeFormat.timeFormat,
|
69 | dateTimeFormat = _getDateTimeFormat.dateTimeFormat;
|
70 |
|
71 | var val = props.value || props.defaultValue;
|
72 | var values = getFormatValues(val, dateTimeFormat);
|
73 |
|
74 | _this.state = {
|
75 | visible: props.visible || props.defaultVisible,
|
76 | startValue: values[0],
|
77 | endValue: values[1],
|
78 | startDateInputStr: '',
|
79 | endDateInputStr: '',
|
80 | activeDateInput: 'startValue',
|
81 | startTimeInputStr: '',
|
82 | endTimeInputStr: '',
|
83 | inputing: false,
|
84 | panel: PANEL.DATE,
|
85 | format: format,
|
86 | timeFormat: timeFormat,
|
87 | dateTimeFormat: dateTimeFormat,
|
88 | inputAsString: val && (typeof val[0] === 'string' || typeof val[1] === 'string')
|
89 | };
|
90 | return _this;
|
91 | }
|
92 |
|
93 | RangePicker.getDerivedStateFromProps = function getDerivedStateFromProps(props) {
|
94 | var formatStates = getDateTimeFormat(props.format, props.showTime, props.type);
|
95 | var states = {};
|
96 |
|
97 | if ('value' in props) {
|
98 | var values = getFormatValues(props.value, formatStates.dateTimeFormat);
|
99 | states.startValue = values[0];
|
100 | states.endValue = values[1];
|
101 | states.inputAsString = props.value && (typeof props.value[0] === 'string' || typeof props.value[1] === 'string');
|
102 | }
|
103 |
|
104 | if ('visible' in props) {
|
105 | states.visible = props.visible;
|
106 | }
|
107 |
|
108 | return _extends({}, states, formatStates);
|
109 | };
|
110 |
|
111 |
|
112 |
|
113 |
|
114 | RangePicker.prototype.renderPreview = function renderPreview(_ref, others) {
|
115 | var startValue = _ref[0],
|
116 | endValue = _ref[1];
|
117 | var _props = this.props,
|
118 | prefix = _props.prefix,
|
119 | className = _props.className,
|
120 | renderPreview = _props.renderPreview;
|
121 | var dateTimeFormat = this.state.dateTimeFormat;
|
122 |
|
123 |
|
124 | var previewCls = classnames(className, prefix + 'form-preview');
|
125 | var startLabel = startValue ? startValue.format(dateTimeFormat) : '';
|
126 | var endLabel = endValue ? endValue.format(dateTimeFormat) : '';
|
127 |
|
128 | if (typeof renderPreview === 'function') {
|
129 | return React.createElement(
|
130 | 'div',
|
131 | _extends({}, others, { className: previewCls }),
|
132 | renderPreview([startValue, endValue], this.props)
|
133 | );
|
134 | }
|
135 |
|
136 | return React.createElement(
|
137 | 'p',
|
138 | _extends({}, others, { className: previewCls }),
|
139 | startLabel,
|
140 | ' - ',
|
141 | endLabel
|
142 | );
|
143 | };
|
144 |
|
145 | RangePicker.prototype.render = function render() {
|
146 | var _classnames,
|
147 | _classnames2,
|
148 | _classnames3,
|
149 | _classnames4,
|
150 | _classnames5,
|
151 | _this2 = this,
|
152 | _PANEL$DATE$PANEL$TIM;
|
153 |
|
154 | var _props2 = this.props,
|
155 | prefix = _props2.prefix,
|
156 | rtl = _props2.rtl,
|
157 | type = _props2.type,
|
158 | defaultVisibleMonth = _props2.defaultVisibleMonth,
|
159 | onVisibleMonthChange = _props2.onVisibleMonthChange,
|
160 | showTime = _props2.showTime,
|
161 | _disabledDate = _props2.disabledDate,
|
162 | footerRender = _props2.footerRender,
|
163 | label = _props2.label,
|
164 | _props2$ranges = _props2.ranges,
|
165 | ranges = _props2$ranges === undefined ? {} : _props2$ranges,
|
166 | inputState = _props2.state,
|
167 | size = _props2.size,
|
168 | disabled = _props2.disabled,
|
169 | hasClear = _props2.hasClear,
|
170 | popupTriggerType = _props2.popupTriggerType,
|
171 | popupAlign = _props2.popupAlign,
|
172 | popupContainer = _props2.popupContainer,
|
173 | popupStyle = _props2.popupStyle,
|
174 | popupClassName = _props2.popupClassName,
|
175 | popupProps = _props2.popupProps,
|
176 | popupComponent = _props2.popupComponent,
|
177 | popupContent = _props2.popupContent,
|
178 | followTrigger = _props2.followTrigger,
|
179 | className = _props2.className,
|
180 | locale = _props2.locale,
|
181 | inputProps = _props2.inputProps,
|
182 | dateCellRender = _props2.dateCellRender,
|
183 | monthCellRender = _props2.monthCellRender,
|
184 | yearCellRender = _props2.yearCellRender,
|
185 | startDateInputAriaLabel = _props2.startDateInputAriaLabel,
|
186 | startTimeInputAriaLabel = _props2.startTimeInputAriaLabel,
|
187 | endDateInputAriaLabel = _props2.endDateInputAriaLabel,
|
188 | endTimeInputAriaLabel = _props2.endTimeInputAriaLabel,
|
189 | isPreview = _props2.isPreview,
|
190 | disableChangeMode = _props2.disableChangeMode,
|
191 | yearRange = _props2.yearRange,
|
192 | placeholder = _props2.placeholder,
|
193 | others = _objectWithoutProperties(_props2, ['prefix', 'rtl', 'type', 'defaultVisibleMonth', 'onVisibleMonthChange', 'showTime', 'disabledDate', 'footerRender', 'label', 'ranges', 'state', 'size', 'disabled', 'hasClear', 'popupTriggerType', 'popupAlign', 'popupContainer', 'popupStyle', 'popupClassName', 'popupProps', 'popupComponent', 'popupContent', 'followTrigger', 'className', 'locale', 'inputProps', 'dateCellRender', 'monthCellRender', 'yearCellRender', 'startDateInputAriaLabel', 'startTimeInputAriaLabel', 'endDateInputAriaLabel', 'endTimeInputAriaLabel', 'isPreview', 'disableChangeMode', 'yearRange', 'placeholder']);
|
194 |
|
195 | var state = this.state;
|
196 |
|
197 | var classNames = classnames((_classnames = {}, _classnames[prefix + 'range-picker'] = true, _classnames['' + prefix + size] = size, _classnames[prefix + 'disabled'] = disabled, _classnames), className);
|
198 |
|
199 | var panelBodyClassName = classnames((_classnames2 = {}, _classnames2[prefix + 'range-picker-body'] = true, _classnames2[prefix + 'range-picker-body-show-time'] = showTime, _classnames2));
|
200 |
|
201 | var triggerCls = classnames((_classnames3 = {}, _classnames3[prefix + 'range-picker-trigger'] = true, _classnames3[prefix + 'error'] = inputState === 'error', _classnames3));
|
202 |
|
203 | var startDateInputCls = classnames((_classnames4 = {}, _classnames4[prefix + 'range-picker-panel-input-start-date'] = true, _classnames4[prefix + 'focus'] = state.activeDateInput === 'startValue', _classnames4));
|
204 |
|
205 | var endDateInputCls = classnames((_classnames5 = {}, _classnames5[prefix + 'range-picker-panel-input-end-date'] = true, _classnames5[prefix + 'focus'] = state.activeDateInput === 'endValue', _classnames5));
|
206 |
|
207 | if (rtl) {
|
208 | others.dir = 'rtl';
|
209 | }
|
210 |
|
211 | if (isPreview) {
|
212 | return this.renderPreview([state.startValue, state.endValue], obj.pickOthers(others, RangePicker.PropTypes));
|
213 | }
|
214 |
|
215 | var startDateInputValue = state.inputing === 'startValue' ? state.startDateInputStr : state.startValue && state.startValue.format(state.format) || '';
|
216 | var endDateInputValue = state.inputing === 'endValue' ? state.endDateInputStr : state.endValue && state.endValue.format(state.format) || '';
|
217 |
|
218 | var startTriggerValue = startDateInputValue;
|
219 | var endTriggerValue = endDateInputValue;
|
220 |
|
221 | var sharedInputProps = _extends({}, inputProps, {
|
222 | size: size,
|
223 | disabled: disabled,
|
224 | onChange: this.onDateInputChange,
|
225 | onBlur: this.onDateInputBlur,
|
226 | onPressEnter: this.onDateInputBlur,
|
227 | onKeyDown: this.onDateInputKeyDown
|
228 | });
|
229 |
|
230 | var startDateInput = React.createElement(Input, _extends({}, sharedInputProps, {
|
231 | 'aria-label': startDateInputAriaLabel,
|
232 | placeholder: state.format,
|
233 | value: startDateInputValue,
|
234 | onFocus: function onFocus() {
|
235 | return _this2.onFocusDateInput('startValue');
|
236 | },
|
237 | className: startDateInputCls
|
238 | }));
|
239 |
|
240 | var endDateInput = React.createElement(Input, _extends({}, sharedInputProps, {
|
241 | 'aria-label': endDateInputAriaLabel,
|
242 | placeholder: state.format,
|
243 | value: endDateInputValue,
|
244 | onFocus: function onFocus() {
|
245 | return _this2.onFocusDateInput('endValue');
|
246 | },
|
247 | className: endDateInputCls
|
248 | }));
|
249 |
|
250 | var shareCalendarProps = {
|
251 | showOtherMonth: true,
|
252 | dateCellRender: dateCellRender,
|
253 | monthCellRender: monthCellRender,
|
254 | yearCellRender: yearCellRender,
|
255 | format: state.format,
|
256 | defaultVisibleMonth: defaultVisibleMonth,
|
257 | onVisibleMonthChange: onVisibleMonthChange
|
258 | };
|
259 |
|
260 | var datePanel = type === 'date' ? React.createElement(RangeCalendar, _extends({}, shareCalendarProps, {
|
261 | yearRange: yearRange,
|
262 | disableChangeMode: disableChangeMode,
|
263 | disabledDate: _disabledDate,
|
264 | onSelect: this.onSelectCalendarPanel,
|
265 | startValue: state.startValue,
|
266 | endValue: state.endValue
|
267 | })) : React.createElement(
|
268 | 'div',
|
269 | { className: prefix + 'range-picker-panel-body' },
|
270 | React.createElement(Calendar, _extends({
|
271 | shape: 'panel',
|
272 | modes: type === 'month' ? ['month', 'year'] : ['year']
|
273 | }, _extends({}, shareCalendarProps), {
|
274 | disabledDate: function disabledDate(date) {
|
275 | for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
276 | args[_key - 1] = arguments[_key];
|
277 | }
|
278 |
|
279 | return state.endValue && date.isAfter(state.endValue, type) || _disabledDate && _disabledDate.apply(undefined, [date].concat(args));
|
280 | },
|
281 | onSelect: function onSelect(value) {
|
282 | var selectedValue = value.clone().date(1).hour(0).minute(0).second(0);
|
283 | if (type === 'year') {
|
284 | selectedValue.month(0);
|
285 | }
|
286 | _this2.onSelectCalendarPanel(selectedValue, 'startValue');
|
287 | },
|
288 | value: state.startValue
|
289 | })),
|
290 | React.createElement(Calendar, _extends({
|
291 | shape: 'panel',
|
292 | modes: type === 'month' ? ['month', 'year'] : ['year']
|
293 | }, shareCalendarProps, {
|
294 | disabledDate: function disabledDate(date) {
|
295 | for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
296 | args[_key2 - 1] = arguments[_key2];
|
297 | }
|
298 |
|
299 | return state.startValue && date.isBefore(state.startValue, type) || _disabledDate && _disabledDate.apply(undefined, [date].concat(args));
|
300 | },
|
301 | onSelect: function onSelect(value) {
|
302 | var selectedValue = value.clone().hour(23).minute(59).second(59);
|
303 | if (type === 'year') {
|
304 | selectedValue.month(11).date(31);
|
305 | } else {
|
306 | selectedValue.date(selectedValue.daysInMonth());
|
307 | }
|
308 | _this2.onSelectCalendarPanel(selectedValue, 'endValue');
|
309 | },
|
310 | value: state.endValue
|
311 | }))
|
312 | );
|
313 |
|
314 | var startTimeInput = null;
|
315 | var endTimeInput = null;
|
316 | var timePanel = null;
|
317 | var panelFooter = footerRender();
|
318 |
|
319 | if (showTime) {
|
320 | var _classnames6, _classnames7;
|
321 |
|
322 | var startTimeInputValue = state.inputing === 'startTime' ? state.startTimeInputStr : state.startValue && state.startValue.format(state.timeFormat) || '';
|
323 | var endTimeInputValue = state.inputing === 'endTime' ? state.endTimeInputStr : state.endValue && state.endValue.format(state.timeFormat) || '';
|
324 |
|
325 | startTriggerValue = state.startValue && state.startValue.format(state.dateTimeFormat) || '';
|
326 | endTriggerValue = state.endValue && state.endValue.format(state.dateTimeFormat) || '';
|
327 |
|
328 | var sharedTimeInputProps = {
|
329 | size: size,
|
330 | placeholder: state.timeFormat,
|
331 | onFocus: this.onFocusTimeInput,
|
332 | onBlur: this.onTimeInputBlur,
|
333 | onPressEnter: this.onTimeInputBlur,
|
334 | onChange: this.onTimeInputChange,
|
335 | onKeyDown: this.onTimeInputKeyDown
|
336 | };
|
337 |
|
338 | var startTimeInputCls = classnames((_classnames6 = {}, _classnames6[prefix + 'range-picker-panel-input-start-time'] = true, _classnames6[prefix + 'focus'] = state.activeDateInput === 'startTime', _classnames6));
|
339 |
|
340 | startTimeInput = React.createElement(Input, _extends({}, sharedTimeInputProps, {
|
341 | value: startTimeInputValue,
|
342 | 'aria-label': startTimeInputAriaLabel,
|
343 | disabled: disabled || !state.startValue,
|
344 | onFocus: function onFocus() {
|
345 | return _this2.onFocusTimeInput('startTime');
|
346 | },
|
347 | className: startTimeInputCls
|
348 | }));
|
349 |
|
350 | var endTimeInputCls = classnames((_classnames7 = {}, _classnames7[prefix + 'range-picker-panel-input-end-time'] = true, _classnames7[prefix + 'focus'] = state.activeDateInput === 'endTime', _classnames7));
|
351 |
|
352 | endTimeInput = React.createElement(Input, _extends({}, sharedTimeInputProps, {
|
353 | value: endTimeInputValue,
|
354 | 'aria-label': endTimeInputAriaLabel,
|
355 | disabled: disabled || !state.endValue,
|
356 | onFocus: function onFocus() {
|
357 | return _this2.onFocusTimeInput('endTime');
|
358 | },
|
359 | className: endTimeInputCls
|
360 | }));
|
361 |
|
362 | var showSecond = state.timeFormat.indexOf('s') > -1;
|
363 | var showMinute = state.timeFormat.indexOf('m') > -1;
|
364 |
|
365 | var sharedTimePickerProps = _extends({}, showTime, {
|
366 | prefix: prefix,
|
367 | locale: locale,
|
368 | disabled: disabled,
|
369 | showSecond: showSecond,
|
370 | showMinute: showMinute
|
371 | });
|
372 |
|
373 | var disabledTime = this.getDisabledTime(state);
|
374 |
|
375 | timePanel = React.createElement(
|
376 | 'div',
|
377 | { className: prefix + 'range-picker-panel-time' },
|
378 | React.createElement(TimePickerPanel, _extends({}, sharedTimePickerProps, {
|
379 | disabled: disabled || !state.startValue,
|
380 | className: prefix + 'range-picker-panel-time-start',
|
381 | value: state.startValue,
|
382 | onSelect: this.onSelectStartTime
|
383 | })),
|
384 | React.createElement(TimePickerPanel, _extends({}, sharedTimePickerProps, disabledTime, {
|
385 | disabled: disabled || !state.endValue,
|
386 | className: prefix + 'range-picker-panel-time-end',
|
387 | value: state.endValue,
|
388 | onSelect: this.onSelectEndTime
|
389 | }))
|
390 | );
|
391 | }
|
392 |
|
393 | panelFooter = panelFooter || React.createElement(PanelFooter, {
|
394 | prefix: prefix,
|
395 | value: state.startValue || state.endValue,
|
396 | ranges: Object.keys(ranges).map(function (key) {
|
397 | return {
|
398 | label: key,
|
399 | value: ranges[key],
|
400 | onChange: function onChange(values) {
|
401 | _this2.setState({
|
402 | startValue: values[0],
|
403 | endValue: values[1]
|
404 | });
|
405 | _this2.onValueChange(values);
|
406 | }
|
407 | };
|
408 | }),
|
409 | disabledOk: !state.startValue || !state.endValue || state.startValue.valueOf() > state.endValue.valueOf(),
|
410 | locale: locale,
|
411 | panel: state.panel,
|
412 | onPanelChange: showTime ? this.changePanel : null,
|
413 | onOk: this.onOk
|
414 | });
|
415 |
|
416 | var panelBody = (_PANEL$DATE$PANEL$TIM = {}, _PANEL$DATE$PANEL$TIM[PANEL.DATE] = datePanel, _PANEL$DATE$PANEL$TIM[PANEL.TIME] = timePanel, _PANEL$DATE$PANEL$TIM)[state.panel];
|
417 |
|
418 | var allowClear = state.startValue && state.endValue && hasClear;
|
419 |
|
420 | var _ref2 = placeholder || [],
|
421 | startPlaceholder = _ref2[0],
|
422 | endPlaceholder = _ref2[1];
|
423 |
|
424 | if (typeof placeholder === 'string') {
|
425 | startPlaceholder = placeholder;
|
426 | endPlaceholder = placeholder;
|
427 | }
|
428 |
|
429 | var trigger = React.createElement(
|
430 | 'div',
|
431 | { className: triggerCls },
|
432 | React.createElement(Input, _extends({}, sharedInputProps, {
|
433 | readOnly: true,
|
434 | role: 'combobox',
|
435 | 'aria-expanded': state.visible,
|
436 | label: label,
|
437 | placeholder: startPlaceholder || locale.startPlaceholder,
|
438 | value: startTriggerValue,
|
439 | hasBorder: false,
|
440 | className: prefix + 'range-picker-trigger-input',
|
441 | onFocus: function onFocus() {
|
442 | return _this2.onFocusDateInput('startValue');
|
443 | }
|
444 | })),
|
445 | React.createElement(
|
446 | 'span',
|
447 | { className: prefix + 'range-picker-trigger-separator' },
|
448 | '-'
|
449 | ),
|
450 | React.createElement(Input, _extends({}, sharedInputProps, {
|
451 | readOnly: true,
|
452 | role: 'combobox',
|
453 | 'aria-expanded': state.visible,
|
454 | placeholder: endPlaceholder || locale.endPlaceholder,
|
455 | value: endTriggerValue,
|
456 | hasBorder: false,
|
457 | className: prefix + 'range-picker-trigger-input',
|
458 | onFocus: function onFocus() {
|
459 | return _this2.onFocusDateInput('endValue');
|
460 | },
|
461 | hasClear: allowClear,
|
462 | hint: React.createElement(Icon, { type: 'calendar', className: prefix + 'date-picker-symbol-calendar-icon' })
|
463 | }))
|
464 | );
|
465 |
|
466 | var PopupComponent = popupComponent ? popupComponent : Popup;
|
467 |
|
468 | return React.createElement(
|
469 | 'div',
|
470 | _extends({}, obj.pickOthers(RangePicker.propTypes, others), { className: classNames }),
|
471 | React.createElement(
|
472 | PopupComponent,
|
473 | _extends({
|
474 | autoFocus: true,
|
475 | align: popupAlign
|
476 | }, popupProps, {
|
477 | followTrigger: followTrigger,
|
478 | disabled: disabled,
|
479 | visible: state.visible,
|
480 | onVisibleChange: this.onVisibleChange,
|
481 | triggerType: popupTriggerType,
|
482 | container: popupContainer,
|
483 | style: popupStyle,
|
484 | className: popupClassName,
|
485 | trigger: trigger
|
486 | }),
|
487 | popupContent ? popupContent : React.createElement(
|
488 | 'div',
|
489 | { dir: others.dir, className: panelBodyClassName },
|
490 | React.createElement(
|
491 | 'div',
|
492 | { className: prefix + 'range-picker-panel-header' },
|
493 | React.createElement(
|
494 | 'div',
|
495 | { className: prefix + 'range-picker-panel-input' },
|
496 | startDateInput,
|
497 | startTimeInput,
|
498 | React.createElement(
|
499 | 'span',
|
500 | { className: prefix + 'range-picker-panel-input-separator' },
|
501 | '-'
|
502 | ),
|
503 | endDateInput,
|
504 | endTimeInput
|
505 | )
|
506 | ),
|
507 | panelBody,
|
508 | panelFooter
|
509 | )
|
510 | )
|
511 | );
|
512 | };
|
513 |
|
514 | return RangePicker;
|
515 | }(Component), _class.propTypes = _extends({}, ConfigProvider.propTypes, {
|
516 | prefix: PropTypes.string,
|
517 | rtl: PropTypes.bool,
|
518 | |
519 |
|
520 |
|
521 | type: PropTypes.oneOf(['date', 'month', 'year']),
|
522 | |
523 |
|
524 |
|
525 |
|
526 | defaultVisibleMonth: PropTypes.func,
|
527 | onVisibleMonthChange: PropTypes.func,
|
528 | |
529 |
|
530 |
|
531 | value: PropTypes.array,
|
532 | |
533 |
|
534 |
|
535 | defaultValue: PropTypes.array,
|
536 | |
537 |
|
538 |
|
539 | format: PropTypes.string,
|
540 | |
541 |
|
542 |
|
543 | showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
|
544 | |
545 |
|
546 |
|
547 | resetTime: PropTypes.bool,
|
548 | |
549 |
|
550 |
|
551 |
|
552 |
|
553 |
|
554 | disabledDate: PropTypes.func,
|
555 | |
556 |
|
557 |
|
558 |
|
559 | footerRender: PropTypes.func,
|
560 | |
561 |
|
562 |
|
563 |
|
564 | onChange: PropTypes.func,
|
565 | |
566 |
|
567 |
|
568 |
|
569 | onOk: PropTypes.func,
|
570 | |
571 |
|
572 |
|
573 | label: PropTypes.node,
|
574 | |
575 |
|
576 |
|
577 | state: PropTypes.oneOf(['error', 'loading', 'success']),
|
578 | |
579 |
|
580 |
|
581 | size: PropTypes.oneOf(['small', 'medium', 'large']),
|
582 | |
583 |
|
584 |
|
585 | disabled: PropTypes.bool,
|
586 | |
587 |
|
588 |
|
589 | hasClear: PropTypes.bool,
|
590 | |
591 |
|
592 |
|
593 | visible: PropTypes.bool,
|
594 | |
595 |
|
596 |
|
597 | defaultVisible: PropTypes.bool,
|
598 | |
599 |
|
600 |
|
601 |
|
602 |
|
603 | onVisibleChange: PropTypes.func,
|
604 | |
605 |
|
606 |
|
607 | popupTriggerType: PropTypes.oneOf(['click', 'hover']),
|
608 | |
609 |
|
610 |
|
611 | popupAlign: PropTypes.string,
|
612 | |
613 |
|
614 |
|
615 |
|
616 |
|
617 | popupContainer: PropTypes.any,
|
618 | |
619 |
|
620 |
|
621 | popupStyle: PropTypes.object,
|
622 | |
623 |
|
624 |
|
625 | popupClassName: PropTypes.string,
|
626 | |
627 |
|
628 |
|
629 | popupProps: PropTypes.object,
|
630 | |
631 |
|
632 |
|
633 | followTrigger: PropTypes.bool,
|
634 | |
635 |
|
636 |
|
637 | inputProps: PropTypes.object,
|
638 | |
639 |
|
640 |
|
641 | dateCellRender: PropTypes.func,
|
642 | |
643 |
|
644 |
|
645 |
|
646 |
|
647 | monthCellRender: PropTypes.func,
|
648 | yearCellRender: PropTypes.func,
|
649 | |
650 |
|
651 |
|
652 | startDateInputAriaLabel: PropTypes.string,
|
653 | |
654 |
|
655 |
|
656 | startTimeInputAriaLabel: PropTypes.string,
|
657 | |
658 |
|
659 |
|
660 | endDateInputAriaLabel: PropTypes.string,
|
661 | |
662 |
|
663 |
|
664 | endTimeInputAriaLabel: PropTypes.string,
|
665 | |
666 |
|
667 |
|
668 | isPreview: PropTypes.bool,
|
669 | |
670 |
|
671 |
|
672 |
|
673 | renderPreview: PropTypes.func,
|
674 | disableChangeMode: PropTypes.bool,
|
675 | yearRange: PropTypes.arrayOf(PropTypes.number),
|
676 | ranges: PropTypes.object,
|
677 | locale: PropTypes.object,
|
678 | className: PropTypes.string,
|
679 | name: PropTypes.string,
|
680 | popupComponent: PropTypes.elementType,
|
681 | popupContent: PropTypes.node,
|
682 | placeholder: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string])
|
683 | }), _class.defaultProps = {
|
684 | prefix: 'next-',
|
685 | rtl: false,
|
686 | type: 'date',
|
687 | size: 'medium',
|
688 | showTime: false,
|
689 | resetTime: false,
|
690 | disabledDate: function disabledDate() {
|
691 | return false;
|
692 | },
|
693 | footerRender: function footerRender() {
|
694 | return null;
|
695 | },
|
696 | hasClear: true,
|
697 | defaultVisible: false,
|
698 | popupTriggerType: 'click',
|
699 | popupAlign: 'tl tl',
|
700 | locale: nextLocale.DatePicker,
|
701 | disableChangeMode: false,
|
702 | onChange: func.noop,
|
703 | onOk: func.noop,
|
704 | onVisibleChange: func.noop
|
705 | }, _initialiseProps = function _initialiseProps() {
|
706 | var _this3 = this;
|
707 |
|
708 | this.onValueChange = function (values) {
|
709 | var handler = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'onChange';
|
710 |
|
711 | var ret = void 0;
|
712 | if (!values.length || !_this3.state.inputAsString) {
|
713 | ret = values;
|
714 | } else {
|
715 | ret = [values[0] ? values[0].format(_this3.state.dateTimeFormat) : null, values[1] ? values[1].format(_this3.state.dateTimeFormat) : null];
|
716 | }
|
717 | _this3.props[handler](ret);
|
718 | };
|
719 |
|
720 | this.onSelectCalendarPanel = function (value, active) {
|
721 | var _props3 = _this3.props,
|
722 | showTime = _props3.showTime,
|
723 | resetTime = _props3.resetTime;
|
724 | var _state = _this3.state,
|
725 | prevActiveDateInput = _state.activeDateInput,
|
726 | prevStartValue = _state.startValue,
|
727 | prevEndValue = _state.endValue,
|
728 | timeFormat = _state.timeFormat;
|
729 |
|
730 |
|
731 | var newState = {
|
732 | activeDateInput: active || prevActiveDateInput,
|
733 | inputing: false
|
734 | };
|
735 |
|
736 | var newValue = value;
|
737 |
|
738 | switch (active || prevActiveDateInput) {
|
739 | case 'startValue':
|
740 | {
|
741 | if (!prevEndValue || value.valueOf() <= prevEndValue.valueOf()) {
|
742 | newState.activeDateInput = 'endValue';
|
743 | }
|
744 |
|
745 | if (showTime) {
|
746 | if (!prevStartValue) {
|
747 |
|
748 | if (showTime.defaultValue) {
|
749 | var defaultTimeValue = formatDateValue(Array.isArray(showTime.defaultValue) ? showTime.defaultValue[0] : showTime.defaultValue, timeFormat);
|
750 | newValue = resetValueTime(value, defaultTimeValue);
|
751 | }
|
752 | } else if (!resetTime) {
|
753 |
|
754 | newValue = resetValueTime(value, prevStartValue);
|
755 | }
|
756 | }
|
757 |
|
758 | newState.startValue = newValue;
|
759 |
|
760 |
|
761 | if (prevEndValue && newValue.valueOf() > prevEndValue.valueOf()) {
|
762 |
|
763 | newState.endValue = resetTime ? newValue : resetValueTime(value, prevEndValue);
|
764 |
|
765 |
|
766 | if (newState.endValue.valueOf() < newState.startValue.valueOf()) {
|
767 | newState.endValue = moment(newState.startValue);
|
768 | }
|
769 | newState.activeDateInput = 'endValue';
|
770 | }
|
771 | break;
|
772 | }
|
773 |
|
774 | case 'endValue':
|
775 | if (!prevStartValue) {
|
776 | newState.activeDateInput = 'startValue';
|
777 | }
|
778 |
|
779 | if (showTime) {
|
780 | if (!prevEndValue) {
|
781 |
|
782 | if (showTime.defaultValue) {
|
783 | var _defaultTimeValue = formatDateValue(Array.isArray(showTime.defaultValue) ? showTime.defaultValue[1] || showTime.defaultValue[0] : showTime.defaultValue, timeFormat);
|
784 | newValue = resetValueTime(value, _defaultTimeValue);
|
785 | }
|
786 | } else if (!resetTime) {
|
787 |
|
788 | newValue = resetValueTime(value, prevEndValue);
|
789 | }
|
790 | }
|
791 |
|
792 | newState.endValue = newValue;
|
793 |
|
794 |
|
795 | if (prevStartValue && newValue.valueOf() <= prevStartValue.valueOf()) {
|
796 | newState.startValue = resetTime ? value : resetValueTime(value, prevStartValue);
|
797 | newState.endValue = resetTime ? value : resetValueTime(value, prevEndValue);
|
798 |
|
799 |
|
800 | if (newState.endValue.valueOf() < newState.startValue.valueOf()) {
|
801 | newState.endValue = moment(newState.startValue);
|
802 | }
|
803 | }
|
804 | break;
|
805 | }
|
806 |
|
807 | var newStartValue = 'startValue' in newState ? newState.startValue : prevStartValue;
|
808 | var newEndValue = 'endValue' in newState ? newState.endValue : prevEndValue;
|
809 |
|
810 |
|
811 | if ('value' in _this3.props) {
|
812 | delete newState.startValue;
|
813 | delete newState.endValue;
|
814 | }
|
815 |
|
816 | _this3.setState(newState);
|
817 |
|
818 | _this3.onValueChange([newStartValue, newEndValue]);
|
819 | };
|
820 |
|
821 | this.clearRange = function () {
|
822 | _this3.setState({
|
823 | startDateInputStr: '',
|
824 | endDateInputStr: '',
|
825 | startTimeInputStr: '',
|
826 | endTimeInputStr: ''
|
827 | });
|
828 |
|
829 | if (!('value' in _this3.props)) {
|
830 | _this3.setState({
|
831 | startValue: null,
|
832 | endValue: null
|
833 | });
|
834 | }
|
835 |
|
836 | _this3.onValueChange([]);
|
837 | };
|
838 |
|
839 | this.onDateInputChange = function (inputStr, e, eventType) {
|
840 | if (eventType === 'clear' || !inputStr) {
|
841 | e.stopPropagation();
|
842 | _this3.clearRange();
|
843 | } else {
|
844 | var _this3$setState;
|
845 |
|
846 | var stateName = mapInputStateName(_this3.state.activeDateInput);
|
847 | _this3.setState((_this3$setState = {}, _this3$setState[stateName] = inputStr, _this3$setState.inputing = _this3.state.activeDateInput, _this3$setState));
|
848 | }
|
849 | };
|
850 |
|
851 | this.onDateInputBlur = function () {
|
852 | var resetTime = _this3.props.resetTime;
|
853 | var activeDateInput = _this3.state.activeDateInput;
|
854 |
|
855 | var stateName = mapInputStateName(activeDateInput);
|
856 | var dateInputStr = _this3.state[stateName];
|
857 |
|
858 | if (dateInputStr) {
|
859 | var _this3$setState2;
|
860 |
|
861 | var _props4 = _this3.props,
|
862 | format = _props4.format,
|
863 | disabledDate = _props4.disabledDate;
|
864 |
|
865 | var parsed = moment(dateInputStr, format, true);
|
866 |
|
867 | _this3.setState((_this3$setState2 = {}, _this3$setState2[stateName] = '', _this3$setState2.inputing = false, _this3$setState2));
|
868 |
|
869 | if (parsed.isValid() && !disabledDate(parsed, 'date')) {
|
870 | var valueName = activeDateInput;
|
871 | var newValue = resetTime ? parsed : resetValueTime(parsed, _this3.state[activeDateInput]);
|
872 |
|
873 | _this3.handleChange(valueName, newValue);
|
874 | }
|
875 | }
|
876 | };
|
877 |
|
878 | this.onDateInputKeyDown = function (e) {
|
879 | var type = _this3.props.type;
|
880 | var _state2 = _this3.state,
|
881 | activeDateInput = _state2.activeDateInput,
|
882 | format = _state2.format;
|
883 |
|
884 | var stateName = mapInputStateName(activeDateInput);
|
885 | var dateInputStr = _this3.state[stateName];
|
886 | var dateStr = onDateKeydown(e, {
|
887 | format: format,
|
888 | value: _this3.state[activeDateInput],
|
889 | dateInputStr: dateInputStr
|
890 | }, type === 'date' ? 'day' : type);
|
891 | if (!dateStr) return;
|
892 |
|
893 | return _this3.onDateInputChange(dateStr);
|
894 | };
|
895 |
|
896 | this.onFocusDateInput = function (type) {
|
897 | if (type !== _this3.state.activeDateInput) {
|
898 | _this3.setState({
|
899 | activeDateInput: type
|
900 | });
|
901 | }
|
902 | if (_this3.state.panel !== PANEL.DATE) {
|
903 | _this3.setState({
|
904 | panel: PANEL.DATE
|
905 | });
|
906 | }
|
907 | };
|
908 |
|
909 | this.onFocusTimeInput = function (type) {
|
910 | if (type !== _this3.state.activeDateInput) {
|
911 | _this3.setState({
|
912 | activeDateInput: type
|
913 | });
|
914 | }
|
915 |
|
916 | if (_this3.state.panel !== PANEL.TIME) {
|
917 | _this3.setState({
|
918 | panel: PANEL.TIME
|
919 | });
|
920 | }
|
921 | };
|
922 |
|
923 | this.onSelectStartTime = function (value) {
|
924 | if (!('value' in _this3.props)) {
|
925 | _this3.setState({
|
926 | startValue: value,
|
927 | inputing: false,
|
928 | activeDateInput: 'startTime'
|
929 | });
|
930 | }
|
931 |
|
932 | if (value.valueOf() !== _this3.state.startValue.valueOf()) {
|
933 | _this3.onValueChange([value, _this3.state.endValue]);
|
934 | }
|
935 | };
|
936 |
|
937 | this.onSelectEndTime = function (value) {
|
938 | if (!('value' in _this3.props)) {
|
939 | _this3.setState({
|
940 | endValue: value,
|
941 | inputing: false,
|
942 | activeDateInput: 'endTime'
|
943 | });
|
944 | }
|
945 | if (value.valueOf() !== _this3.state.endValue.valueOf()) {
|
946 | _this3.onValueChange([_this3.state.startValue, value]);
|
947 | }
|
948 | };
|
949 |
|
950 | this.onTimeInputChange = function (inputStr) {
|
951 | var _this3$setState3;
|
952 |
|
953 | var stateName = mapInputStateName(_this3.state.activeDateInput);
|
954 | _this3.setState((_this3$setState3 = {}, _this3$setState3[stateName] = inputStr, _this3$setState3.inputing = _this3.state.activeDateInput, _this3$setState3));
|
955 | };
|
956 |
|
957 | this.onTimeInputBlur = function () {
|
958 | var _this3$setState4;
|
959 |
|
960 | var stateName = mapInputStateName(_this3.state.activeDateInput);
|
961 | var timeInputStr = _this3.state[stateName];
|
962 |
|
963 | var parsed = moment(timeInputStr, _this3.state.timeFormat, true);
|
964 |
|
965 | _this3.setState((_this3$setState4 = {}, _this3$setState4[stateName] = '', _this3$setState4.inputing = false, _this3$setState4));
|
966 |
|
967 | if (parsed.isValid()) {
|
968 | var hour = parsed.hour();
|
969 | var minute = parsed.minute();
|
970 | var second = parsed.second();
|
971 | var valueName = mapTimeToValue(_this3.state.activeDateInput);
|
972 | var newValue = _this3.state[valueName].clone().hour(hour).minute(minute).second(second);
|
973 |
|
974 | _this3.handleChange(valueName, newValue);
|
975 | }
|
976 | };
|
977 |
|
978 | this.onTimeInputKeyDown = function (e) {
|
979 | var showTime = _this3.props.showTime;
|
980 | var _state3 = _this3.state,
|
981 | activeDateInput = _state3.activeDateInput,
|
982 | timeFormat = _state3.timeFormat;
|
983 |
|
984 | var stateName = mapInputStateName(activeDateInput);
|
985 | var timeInputStr = _this3.state[stateName];
|
986 |
|
987 | var _ref3 = (typeof showTime === 'undefined' ? 'undefined' : _typeof(showTime)) === 'object' ? showTime : {},
|
988 | disabledMinutes = _ref3.disabledMinutes,
|
989 | disabledSeconds = _ref3.disabledSeconds,
|
990 | _ref3$hourStep = _ref3.hourStep,
|
991 | hourStep = _ref3$hourStep === undefined ? 1 : _ref3$hourStep,
|
992 | _ref3$minuteStep = _ref3.minuteStep,
|
993 | minuteStep = _ref3$minuteStep === undefined ? 1 : _ref3$minuteStep,
|
994 | _ref3$secondStep = _ref3.secondStep,
|
995 | secondStep = _ref3$secondStep === undefined ? 1 : _ref3$secondStep;
|
996 |
|
997 | var unit = 'second';
|
998 |
|
999 | if (disabledSeconds) {
|
1000 | unit = disabledMinutes ? 'hour' : 'minute';
|
1001 | }
|
1002 |
|
1003 | var timeStr = onTimeKeydown(e, {
|
1004 | format: timeFormat,
|
1005 | timeInputStr: timeInputStr,
|
1006 | value: _this3.state[activeDateInput.indexOf('start') ? 'startValue' : 'endValue'],
|
1007 | steps: {
|
1008 | hour: hourStep,
|
1009 | minute: minuteStep,
|
1010 | second: secondStep
|
1011 | }
|
1012 | }, unit);
|
1013 |
|
1014 | if (!timeStr) return;
|
1015 |
|
1016 | _this3.onTimeInputChange(timeStr);
|
1017 | };
|
1018 |
|
1019 | this.handleChange = function (valueName, newValue) {
|
1020 | var values = ['startValue', 'endValue'].map(function (name) {
|
1021 | return valueName === name ? newValue : _this3.state[name];
|
1022 | });
|
1023 |
|
1024 |
|
1025 | if (values[0] && values[1] && values[0].valueOf() > values[1].valueOf()) {
|
1026 | return;
|
1027 | }
|
1028 |
|
1029 | if (!('value' in _this3.props)) {
|
1030 | var _this3$setState5;
|
1031 |
|
1032 | _this3.setState((_this3$setState5 = {}, _this3$setState5[valueName] = newValue, _this3$setState5));
|
1033 | }
|
1034 |
|
1035 | _this3.onValueChange(values);
|
1036 | };
|
1037 |
|
1038 | this.onVisibleChange = function (visible, type) {
|
1039 | if (!('visible' in _this3.props)) {
|
1040 | _this3.setState({
|
1041 | visible: visible
|
1042 | });
|
1043 | }
|
1044 | _this3.props.onVisibleChange(visible, type);
|
1045 | };
|
1046 |
|
1047 | this.changePanel = function (panel) {
|
1048 | var _state4 = _this3.state,
|
1049 | startValue = _state4.startValue,
|
1050 | endValue = _state4.endValue;
|
1051 |
|
1052 | _this3.setState({
|
1053 | panel: panel,
|
1054 | activeDateInput: panel === PANEL.DATE ? !!startValue && !endValue ? 'endValue' : 'startValue' : 'startTime'
|
1055 | });
|
1056 | };
|
1057 |
|
1058 | this.onOk = function (value) {
|
1059 | _this3.onVisibleChange(false, 'okBtnClick');
|
1060 | _this3.onValueChange(value || [_this3.state.startValue, _this3.state.endValue], 'onOk');
|
1061 | };
|
1062 |
|
1063 | this.getDisabledTime = function (_ref4) {
|
1064 | var startValue = _ref4.startValue,
|
1065 | endValue = _ref4.endValue;
|
1066 |
|
1067 | var _ref5 = _this3.props.showTime || {},
|
1068 | disabledHours = _ref5.disabledHours,
|
1069 | disabledMinutes = _ref5.disabledMinutes,
|
1070 | disabledSeconds = _ref5.disabledSeconds;
|
1071 |
|
1072 | var disabledTime = {};
|
1073 |
|
1074 | if (startValue && endValue) {
|
1075 | var isSameDay = startValue.format('L') === endValue.format('L');
|
1076 | var newDisabledHours = isFunction(disabledHours) ? disabledHours : function (index) {
|
1077 | if (isSameDay && index < startValue.hour()) {
|
1078 | return true;
|
1079 | }
|
1080 | };
|
1081 |
|
1082 | var newDisabledMinutes = isFunction(disabledMinutes) ? disabledMinutes : function (index) {
|
1083 | if (isSameDay && startValue.hour() === endValue.hour() && index < startValue.minute()) {
|
1084 | return true;
|
1085 | }
|
1086 | };
|
1087 |
|
1088 | var newDisabledSeconds = isFunction(disabledSeconds) ? disabledSeconds : function (index) {
|
1089 | if (isSameDay && startValue.hour() === endValue.hour() && startValue.minute() === endValue.minute() && index < startValue.second()) {
|
1090 | return true;
|
1091 | }
|
1092 | };
|
1093 | disabledTime = {
|
1094 | disabledHours: newDisabledHours,
|
1095 | disabledMinutes: newDisabledMinutes,
|
1096 | disabledSeconds: newDisabledSeconds
|
1097 | };
|
1098 | }
|
1099 |
|
1100 | return disabledTime;
|
1101 | };
|
1102 | }, _temp);
|
1103 | RangePicker.displayName = 'RangePicker';
|
1104 |
|
1105 |
|
1106 | export default polyfill(RangePicker); |
\ | No newline at end of file |