1 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
2 | import _extends from 'babel-runtime/helpers/extends';
|
3 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 |
|
7 | var _class, _temp, _initialiseProps;
|
8 |
|
9 | import React from 'react';
|
10 | import { polyfill } from 'react-lifecycles-compat';
|
11 | import classnames from 'classnames';
|
12 | import * as PT from 'prop-types';
|
13 |
|
14 | import SharedPT from './prop-types';
|
15 | import defaultLocale from '../locale/zh-cn';
|
16 | import { func, KEYCODE, obj } from '../util';
|
17 | import { switchInputType, fmtValue, isValueChanged } from './util';
|
18 | import { DATE_PICKER_TYPE, DATE_INPUT_TYPE, DATE_PICKER_MODE } from './constant';
|
19 |
|
20 | import Overlay from '../overlay';
|
21 | import DateInput from './panels/date-input';
|
22 | import DatePanel from './panels/date-panel';
|
23 | import RangePanel from './panels/range-panel';
|
24 | import FooterPanel from './panels/footer-panel';
|
25 |
|
26 | var Popup = Overlay.Popup;
|
27 | var pickProps = obj.pickProps,
|
28 | pickOthers = obj.pickOthers;
|
29 | var renderNode = func.renderNode,
|
30 | checkDate = func.checkDate,
|
31 | checkRangeDate = func.checkRangeDate;
|
32 | var Picker = (_temp = _class = function (_React$Component) {
|
33 | _inherits(Picker, _React$Component);
|
34 |
|
35 | function Picker(props) {
|
36 | _classCallCheck(this, Picker);
|
37 |
|
38 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
39 |
|
40 | _initialiseProps.call(_this);
|
41 |
|
42 | var prefix = props.prefix,
|
43 | type = props.type,
|
44 | format = props.format,
|
45 | mode = props.mode,
|
46 | defaultVisible = props.defaultVisible;
|
47 |
|
48 |
|
49 | _this.state = {
|
50 | panelMode: mode,
|
51 | visible: defaultVisible
|
52 | };
|
53 |
|
54 | if (type === DATE_PICKER_TYPE.RANGE) {
|
55 | var _this$getInitRangeInp = _this.getInitRangeInputState(),
|
56 | inputType = _this$getInitRangeInp.inputType,
|
57 | justBeginInput = _this$getInitRangeInp.justBeginInput;
|
58 |
|
59 | _this.state = _extends({
|
60 | inputType: inputType,
|
61 | justBeginInput: justBeginInput
|
62 | }, _this.state);
|
63 | }
|
64 |
|
65 | var value = _this.getInitValue();
|
66 |
|
67 | _this.state = _extends({
|
68 | value: value,
|
69 | curValue: value,
|
70 | preValue: value,
|
71 | inputValue: fmtValue(value, format)
|
72 | }, _this.state);
|
73 |
|
74 | _this.prefixCls = prefix + 'date-picker2';
|
75 |
|
76 | _this.popupRef = React.createRef();
|
77 | return _this;
|
78 | }
|
79 |
|
80 | Picker.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
81 | var type = props.type,
|
82 | showTime = props.showTime,
|
83 | showOk = props.showOk,
|
84 | disabled = props.disabled,
|
85 | format = props.format;
|
86 |
|
87 | var isRange = type === DATE_PICKER_TYPE.RANGE;
|
88 |
|
89 | var newState = {
|
90 | isRange: isRange,
|
91 | showOk: !!(showOk || showTime)
|
92 | };
|
93 |
|
94 | |
95 |
|
96 |
|
97 |
|
98 | if (isRange) {
|
99 | var inputType = state.inputType;
|
100 |
|
101 |
|
102 | var _disabled = Array.isArray(disabled) ? disabled : [disabled, disabled];
|
103 |
|
104 | if (_disabled[inputType]) {
|
105 | var otherType = switchInputType(state.inputType);
|
106 |
|
107 | if (!_disabled[otherType]) {
|
108 | inputType = otherType;
|
109 | }
|
110 | }
|
111 |
|
112 | newState.inputType = inputType;
|
113 | }
|
114 |
|
115 | if ('value' in props) {
|
116 | var value = isRange ? checkRangeDate(props.value, state.inputType, disabled) : checkDate(props.value);
|
117 |
|
118 | if (isValueChanged(value, state.preValue)) {
|
119 | newState = _extends({}, newState, {
|
120 | value: value,
|
121 | curValue: value,
|
122 | preValue: value,
|
123 | inputValue: fmtValue(value, format)
|
124 | });
|
125 | }
|
126 | }
|
127 |
|
128 | return newState;
|
129 | };
|
130 |
|
131 | Picker.prototype.componentWillUnmount = function componentWillUnmount() {
|
132 | [this.clearTimeoutId, this.timeoutId].forEach(function (id) {
|
133 | return id && clearTimeout(id);
|
134 | });
|
135 | };
|
136 |
|
137 | |
138 |
|
139 |
|
140 |
|
141 |
|
142 | |
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 | |
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 | Picker.prototype.onVisibleChange = function onVisibleChange(visible) {
|
158 | var _this2 = this;
|
159 |
|
160 | if (visible !== this.state.visible) {
|
161 | var callback = function callback() {
|
162 | _this2.setState({
|
163 | visible: visible,
|
164 | justBeginInput: _this2.isEnabled()
|
165 | });
|
166 | };
|
167 |
|
168 | if (this.timeoutId) {
|
169 | clearTimeout(this.timeoutId);
|
170 | this.timeoutId = null;
|
171 | }
|
172 |
|
173 | if (visible) {
|
174 | callback();
|
175 | } else {
|
176 | this.timeoutId = setTimeout(callback, 0);
|
177 | }
|
178 |
|
179 | func.invoke(this.props, 'onVisibleChange', [visible]);
|
180 | }
|
181 | };
|
182 |
|
183 | |
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 | |
191 |
|
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 | |
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 | Picker.prototype.render = function render() {
|
207 | var _this3 = this,
|
208 | _classnames;
|
209 |
|
210 | var prefixCls = this.prefixCls,
|
211 | handleChange = this.handleChange,
|
212 | handleMouseDown = this.handleMouseDown,
|
213 | handleVisibleChange = this.handleVisibleChange,
|
214 | onOk = this.onOk,
|
215 | onClick = this.onClick,
|
216 | handleInput = this.handleInput,
|
217 | onInputTypeChange = this.onInputTypeChange,
|
218 | onPanelChange = this.onPanelChange,
|
219 | onKeyDown = this.onKeyDown;
|
220 |
|
221 | var _props = this.props,
|
222 | rtl = _props.rtl,
|
223 | locale = _props.locale,
|
224 | prefix = _props.prefix,
|
225 | inputReadOnly = _props.inputReadOnly,
|
226 | showTime = _props.showTime,
|
227 | preset = _props.preset,
|
228 | mode = _props.mode,
|
229 | format = _props.format,
|
230 | trigger = _props.trigger,
|
231 | disabledDate = _props.disabledDate,
|
232 | extraFooterRender = _props.extraFooterRender,
|
233 | timePanelProps = _props.timePanelProps,
|
234 | resetTime = _props.resetTime,
|
235 | placeholder = _props.placeholder,
|
236 | disabledTime = _props.disabledTime,
|
237 | dateCellRender = _props.dateCellRender,
|
238 | disabled = _props.disabled,
|
239 | isPreview = _props.isPreview,
|
240 | className = _props.className,
|
241 | defaultPanelValue = _props.defaultPanelValue,
|
242 | renderPreview = _props.renderPreview,
|
243 | label = _props.label,
|
244 | restProps = _objectWithoutProperties(_props, ['rtl', 'locale', 'prefix', 'inputReadOnly', 'showTime', 'preset', 'mode', 'format', 'trigger', 'disabledDate', 'extraFooterRender', 'timePanelProps', 'resetTime', 'placeholder', 'disabledTime', 'dateCellRender', 'disabled', 'isPreview', 'className', 'defaultPanelValue', 'renderPreview', 'label']);
|
245 |
|
246 | var _state = this.state,
|
247 | isRange = _state.isRange,
|
248 | inputType = _state.inputType,
|
249 | justBeginInput = _state.justBeginInput,
|
250 | panelMode = _state.panelMode,
|
251 | showOk = _state.showOk,
|
252 | align = _state.align;
|
253 | var _state2 = this.state,
|
254 | inputValue = _state2.inputValue,
|
255 | curValue = _state2.curValue;
|
256 |
|
257 | var _getPopupOffsetLeft = this.getPopupOffsetLeft(),
|
258 | arrowLeft = _getPopupOffsetLeft.arrowLeft,
|
259 | panelLeft = _getPopupOffsetLeft.panelLeft;
|
260 |
|
261 |
|
262 |
|
263 |
|
264 | if (isPreview) {
|
265 | var previewCls = classnames(className, prefix + 'form-preview');
|
266 |
|
267 | return React.createElement(
|
268 | 'div',
|
269 | { className: previewCls },
|
270 | renderNode(renderPreview, isRange ? inputValue.join('-') : inputValue, [curValue, this.props])
|
271 | );
|
272 | }
|
273 |
|
274 | var visible = 'visible' in this.props ? this.props.visible : this.state.visible;
|
275 | var allDisabled = isRange && Array.isArray(disabled) ? disabled.every(function (v) {
|
276 | return v;
|
277 | }) : disabled;
|
278 | var sharedProps = {
|
279 | rtl: rtl,
|
280 | prefix: prefix,
|
281 | locale: locale,
|
282 | mode: mode,
|
283 | format: format,
|
284 | showTime: showTime,
|
285 | inputType: inputType
|
286 | };
|
287 |
|
288 |
|
289 | var inputProps = _extends({}, pickProps(DateInput.propTypes, restProps), sharedProps, {
|
290 | value: inputValue,
|
291 | label: label,
|
292 | isRange: isRange,
|
293 | disabled: disabled,
|
294 | placeholder: placeholder,
|
295 | onInputTypeChange: onInputTypeChange,
|
296 | focus: visible,
|
297 | onInput: handleInput,
|
298 | readOnly: inputReadOnly,
|
299 | inputProps: this.props.inputProps,
|
300 | ref: function ref(el) {
|
301 | return _this3.dateInput = el;
|
302 | }
|
303 | });
|
304 |
|
305 |
|
306 | if (!this.isEnabled()) {
|
307 | inputProps.hasClear = false;
|
308 | }
|
309 |
|
310 | var triggerNode = renderNode(trigger, React.createElement(DateInput, inputProps));
|
311 |
|
312 |
|
313 | var panelProps = _extends({}, sharedProps, {
|
314 | panelMode: panelMode,
|
315 | value: curValue,
|
316 | disabledDate: disabledDate,
|
317 | onPanelChange: onPanelChange,
|
318 | timePanelProps: timePanelProps,
|
319 | disabledTime: disabledTime,
|
320 | resetTime: resetTime,
|
321 | dateCellRender: dateCellRender,
|
322 | defaultPanelValue: defaultPanelValue,
|
323 | onSelect: handleChange
|
324 | });
|
325 |
|
326 | var DateNode = isRange ? React.createElement(RangePanel, _extends({ justBeginInput: justBeginInput }, panelProps)) : React.createElement(DatePanel, panelProps);
|
327 |
|
328 |
|
329 | var oKable = !!(isRange ? inputValue && inputValue[inputType] : inputValue);
|
330 | var shouldShowFooter = showOk || preset || extraFooterRender;
|
331 |
|
332 | var footerNode = shouldShowFooter ? React.createElement(FooterPanel, {
|
333 | oKable: oKable,
|
334 | onOk: onOk,
|
335 | showOk: showOk,
|
336 | onChange: handleChange,
|
337 | preset: preset,
|
338 | locale: locale,
|
339 | prefix: prefix,
|
340 | extraRender: extraFooterRender
|
341 | }) : null;
|
342 |
|
343 | var triggerProps = void 0;
|
344 | if (!allDisabled) {
|
345 | triggerProps = { onKeyDown: onKeyDown, onClick: onClick };
|
346 | }
|
347 |
|
348 |
|
349 | var _props2 = this.props,
|
350 | followTrigger = _props2.followTrigger,
|
351 | popupTriggerType = _props2.popupTriggerType,
|
352 | popupAlign = _props2.popupAlign,
|
353 | popupContainer = _props2.popupContainer,
|
354 | popupStyle = _props2.popupStyle,
|
355 | popupClassName = _props2.popupClassName,
|
356 | popupComponent = _props2.popupComponent,
|
357 | popupProps = _props2.popupProps;
|
358 |
|
359 |
|
360 | var popupCls = classnames(popupClassName || popupProps && popupProps.className, (_classnames = {}, _classnames[prefixCls + '-overlay'] = true, _classnames[prefixCls + '-' + (align || []).join('-')] = align, _classnames[prefixCls + '-overlay-range'] = isRange, _classnames));
|
361 | var PopupComp = popupComponent || Popup;
|
362 |
|
363 | return React.createElement(
|
364 | 'div',
|
365 | _extends({}, pickOthers(Picker.propTypes, restProps), {
|
366 | dir: rtl ? 'rtl' : undefined,
|
367 | className: classnames(className, prefixCls),
|
368 | style: this.props.style
|
369 | }),
|
370 | React.createElement(
|
371 | PopupComp,
|
372 | _extends({
|
373 | rtl: rtl,
|
374 | key: 'date-picker-popup',
|
375 | visible: visible,
|
376 | align: popupAlign,
|
377 | container: popupContainer,
|
378 | followTrigger: followTrigger,
|
379 | triggerType: popupTriggerType,
|
380 | style: popupStyle,
|
381 | onVisibleChange: handleVisibleChange,
|
382 | disabled: allDisabled,
|
383 | trigger: React.createElement(
|
384 | 'div',
|
385 | _extends({}, triggerProps, { role: 'button', tabIndex: '0', style: { width: '100%' } }),
|
386 | triggerNode
|
387 | ),
|
388 | onPosition: this.getCurrentAlign,
|
389 | canCloseByTrigger: false
|
390 | }, popupProps, {
|
391 | className: popupCls
|
392 | }),
|
393 | React.createElement(
|
394 | 'div',
|
395 | { onMouseDown: handleMouseDown, style: { marginLeft: panelLeft } },
|
396 | React.createElement(
|
397 | 'div',
|
398 | { dir: rtl ? 'rtl' : undefined, className: prefixCls + '-wrapper', ref: this.popupRef },
|
399 | isRange ? this.renderArrow(arrowLeft) : null,
|
400 | DateNode,
|
401 | this.state.panelMode !== this.props.mode ? null : footerNode
|
402 | )
|
403 | )
|
404 | )
|
405 | );
|
406 | };
|
407 |
|
408 | return Picker;
|
409 | }(React.Component), _class.propTypes = {
|
410 | rtl: PT.bool,
|
411 | prefix: PT.string,
|
412 | locale: PT.object,
|
413 | name: PT.string,
|
414 |
|
415 |
|
416 | mode: SharedPT.mode,
|
417 | type: SharedPT.type,
|
418 | value: SharedPT.value,
|
419 | defaultValue: SharedPT.value,
|
420 | defaultPanelValue: SharedPT.date,
|
421 | disabledDate: PT.func,
|
422 | visible: PT.bool,
|
423 | defaultVisible: PT.bool,
|
424 | dateCellRender: PT.func,
|
425 |
|
426 |
|
427 | onOk: PT.func,
|
428 | onChange: PT.func,
|
429 | onVisibleChange: PT.func,
|
430 | onPanelChange: PT.func,
|
431 |
|
432 |
|
433 | showTime: PT.bool,
|
434 | resetTime: PT.bool,
|
435 | timePanelProps: PT.object,
|
436 | disabledTime: PT.object,
|
437 |
|
438 |
|
439 | titleRender: PT.func,
|
440 |
|
441 |
|
442 | preset: PT.oneOfType([PT.array, PT.object]),
|
443 | extraFooterRender: SharedPT.render,
|
444 | showOk: PT.bool,
|
445 |
|
446 |
|
447 | trigger: SharedPT.render,
|
448 | hasBorder: PT.bool,
|
449 | inputProps: PT.object,
|
450 | hasClear: PT.bool,
|
451 | placeholder: SharedPT.placeholder,
|
452 | disabled: SharedPT.disabled,
|
453 | inputReadOnly: SharedPT.readOnly,
|
454 | |
455 |
|
456 |
|
457 | format: SharedPT.format,
|
458 | label: PT.node,
|
459 | separator: PT.node,
|
460 | |
461 |
|
462 |
|
463 |
|
464 |
|
465 |
|
466 |
|
467 | outputFormat: SharedPT.format,
|
468 |
|
469 |
|
470 | followTrigger: PT.bool,
|
471 | popupTriggerType: PT.oneOf(['click', 'hover']),
|
472 | popupAlign: PT.string,
|
473 | popupContainer: PT.any,
|
474 | popupStyle: PT.object,
|
475 | popupClassName: PT.string,
|
476 | popupComponent: PT.elementType,
|
477 | popupProps: PT.object,
|
478 |
|
479 |
|
480 | isPreview: PT.bool,
|
481 | renderPreview: PT.func,
|
482 |
|
483 |
|
484 | dateInputAriaLabel: SharedPT.ariaLabel
|
485 | }, _class.defaultProps = {
|
486 | rtl: false,
|
487 | prefix: 'next-',
|
488 | popupTriggerType: 'click',
|
489 | locale: defaultLocale.DatePicker,
|
490 | defaultVisible: false,
|
491 | type: DATE_PICKER_TYPE.DATE,
|
492 | mode: DATE_PICKER_MODE.DATE,
|
493 | format: 'YYYY-MM-DD'
|
494 | }, _initialiseProps = function _initialiseProps() {
|
495 | var _this4 = this;
|
496 |
|
497 | this.getInitValue = function () {
|
498 | var props = _this4.props;
|
499 | var type = props.type,
|
500 | value = props.value,
|
501 | defaultValue = props.defaultValue;
|
502 |
|
503 |
|
504 | var val = type === DATE_PICKER_TYPE.RANGE ? [null, null] : null;
|
505 |
|
506 | val = 'value' in props ? value : 'defaultValue' in props ? defaultValue : val;
|
507 |
|
508 | return _this4.checkValue(val);
|
509 | };
|
510 |
|
511 | this.getInitRangeInputState = function () {
|
512 | return {
|
513 | justBeginInput: _this4.isEnabled(),
|
514 | inputType: _this4.isEnabled(0) ? DATE_INPUT_TYPE.BEGIN : DATE_INPUT_TYPE.END
|
515 | };
|
516 | };
|
517 |
|
518 | this.handleVisibleChange = function (visible, targetType) {
|
519 | if (['docClick', 'fromTrigger'].indexOf(targetType) > -1) {
|
520 |
|
521 | if (!visible) {
|
522 | _this4.handleChange(_this4.state.curValue, 'VISIBLE_CHANGE');
|
523 | }
|
524 | _this4.onVisibleChange(visible);
|
525 | }
|
526 | };
|
527 |
|
528 | this.checkValue = function (value, strictly) {
|
529 | return _this4.props.type === DATE_PICKER_TYPE.RANGE ? checkRangeDate(value, _this4.state.inputType, _this4.props.disabled, strictly) : checkDate(value);
|
530 | };
|
531 |
|
532 | this.handleInputFocus = function (inputType) {
|
533 | var inputEl = _this4.dateInput && _this4.dateInput.input;
|
534 |
|
535 | if (_this4.state.isRange) {
|
536 | inputEl = inputEl && inputEl[inputType];
|
537 | }
|
538 |
|
539 | inputEl && inputEl.focus();
|
540 | };
|
541 |
|
542 | this.handleMouseDown = function (e) {
|
543 | e.preventDefault();
|
544 | };
|
545 |
|
546 | this.handleInput = function (v, eventType) {
|
547 | if (eventType === 'clear') {
|
548 | _this4.handleChange(v, 'INPUT_CLEAR');
|
549 |
|
550 | if (_this4.state.isRange) {
|
551 | _this4.handleClear();
|
552 | }
|
553 | } else {
|
554 | _this4.setState({
|
555 | inputValue: v,
|
556 | visible: true
|
557 | });
|
558 | }
|
559 | };
|
560 |
|
561 | this.onPanelChange = function (value, mode) {
|
562 | _this4.setState({
|
563 | panelMode: mode
|
564 | });
|
565 | func.invoke(_this4.props, 'onPanelChange', [value, mode]);
|
566 | };
|
567 |
|
568 | this.handleClear = function () {
|
569 | |
570 |
|
571 |
|
572 |
|
573 | _this4.clearTimeoutId = setTimeout(function () {
|
574 | _this4.handleInputFocus(0);
|
575 | });
|
576 |
|
577 | _this4.setState({
|
578 | inputType: DATE_INPUT_TYPE.BEGIN,
|
579 | justBeginInput: _this4.isEnabled()
|
580 | });
|
581 | };
|
582 |
|
583 | this.shouldSwitchInput = function (value) {
|
584 | var _state3 = _this4.state,
|
585 | inputType = _state3.inputType,
|
586 | justBeginInput = _state3.justBeginInput;
|
587 |
|
588 | var idx = justBeginInput ? switchInputType(inputType) : value.indexOf(null);
|
589 |
|
590 | if (idx !== -1 && _this4.isEnabled(idx)) {
|
591 | _this4.onInputTypeChange(idx);
|
592 | _this4.handleInputFocus(idx);
|
593 | return true;
|
594 | }
|
595 |
|
596 | return false;
|
597 | };
|
598 |
|
599 | this.isEnabled = function (idx) {
|
600 | var disabled = _this4.props.disabled;
|
601 |
|
602 |
|
603 | return Array.isArray(disabled) ? idx === undefined ? !disabled[0] && !disabled[1] : !disabled[idx] : !disabled;
|
604 | };
|
605 |
|
606 | this.checkValueDisabled = function (val) {
|
607 | var disabledDate = _this4.props.disabledDate;
|
608 | var panelMode = _this4.state.panelMode;
|
609 |
|
610 | var values = (Array.isArray(val) ? val : [val]).map(function (value) {
|
611 | return checkDate(value);
|
612 | });
|
613 |
|
614 | if (!disabledDate) {
|
615 | return false;
|
616 | }
|
617 |
|
618 | return values.some(function (value) {
|
619 | return disabledDate(value, panelMode);
|
620 | });
|
621 | };
|
622 |
|
623 | this.onKeyDown = function (e) {
|
624 | switch (e.keyCode) {
|
625 | case KEYCODE.ENTER:
|
626 | {
|
627 | var inputValue = _this4.state.inputValue;
|
628 |
|
629 | _this4.onClick();
|
630 | if (_this4.checkValueDisabled(inputValue)) {
|
631 |
|
632 | _this4.handleChange(inputValue, 'VISIBLE_CHANGE');
|
633 | return;
|
634 | }
|
635 | _this4.handleChange(inputValue, 'KEYDOWN_ENTER');
|
636 | break;
|
637 | }
|
638 | default:
|
639 | return;
|
640 | }
|
641 | };
|
642 |
|
643 | this.handleChange = function (v, eventType) {
|
644 | var format = _this4.props.format;
|
645 | var _state4 = _this4.state,
|
646 | isRange = _state4.isRange,
|
647 | showOk = _state4.showOk,
|
648 | value = _state4.value,
|
649 | preValue = _state4.preValue;
|
650 |
|
651 | var forceEvents = ['KEYDOWN_ENTER', 'CLICK_PRESET', 'CLICK_OK', 'INPUT_CLEAR', 'VISIBLE_CHANGE'];
|
652 | var isTemporary = showOk && !forceEvents.includes(eventType);
|
653 |
|
654 |
|
655 | v = eventType === 'VISIBLE_CHANGE' ? value : _this4.checkValue(v, !isTemporary);
|
656 |
|
657 | _this4.setState({
|
658 | curValue: v,
|
659 | inputValue: fmtValue(v, format)
|
660 | });
|
661 |
|
662 | if (!isTemporary) {
|
663 | _this4.setState({
|
664 | value: v
|
665 | }, function () {
|
666 |
|
667 |
|
668 |
|
669 |
|
670 | var shouldHidePanel = !isRange || ['CLICK_PRESET', 'VISIBLE_CHANGE', 'INPUT_CLEAR'].includes(eventType) || !_this4.shouldSwitchInput(v);
|
671 |
|
672 | if (shouldHidePanel) {
|
673 | _this4.onVisibleChange(false);
|
674 |
|
675 | if (isValueChanged(v, preValue)) {
|
676 | _this4.onChange();
|
677 | }
|
678 | }
|
679 | });
|
680 | }
|
681 | };
|
682 |
|
683 | this.onChange = function () {
|
684 | var state = _this4.state,
|
685 | props = _this4.props;
|
686 | var format = props.format;
|
687 |
|
688 |
|
689 | var value = _this4.checkValue('value' in props ? props.value : state.value);
|
690 |
|
691 | _this4.setState({
|
692 | curValue: value,
|
693 | preValue: value,
|
694 | inputValue: fmtValue(value, format)
|
695 | });
|
696 |
|
697 | func.invoke(_this4.props, 'onChange', _this4.getOutputArgs(state.value));
|
698 | };
|
699 |
|
700 | this.onOk = function () {
|
701 | var inputValue = _this4.state.inputValue;
|
702 |
|
703 | var checkedValue = _this4.checkValue(inputValue);
|
704 |
|
705 | func.invoke(_this4.props, 'onOk', _this4.getOutputArgs(checkedValue));
|
706 |
|
707 | _this4.setState({ value: checkedValue });
|
708 | _this4.handleChange(checkedValue, 'CLICK_OK');
|
709 | };
|
710 |
|
711 | this.onInputTypeChange = function (idx) {
|
712 | var _state5 = _this4.state,
|
713 | inputType = _state5.inputType,
|
714 | visible = _state5.visible;
|
715 |
|
716 |
|
717 | if (idx !== inputType) {
|
718 | _this4.setState({
|
719 | inputType: idx,
|
720 | justBeginInput: !(idx !== null && visible)
|
721 | });
|
722 | }
|
723 | };
|
724 |
|
725 | this.onClick = function () {
|
726 | var _state6 = _this4.state,
|
727 | visible = _state6.visible,
|
728 | inputType = _state6.inputType;
|
729 |
|
730 |
|
731 | if (!visible) {
|
732 | _this4.handleInputFocus(inputType);
|
733 | }
|
734 | };
|
735 |
|
736 | this.getOutputArgs = function (value) {
|
737 | var _props3 = _this4.props,
|
738 | outputFormat = _props3.outputFormat,
|
739 | format = _props3.format;
|
740 |
|
741 |
|
742 | if (outputFormat) {
|
743 | return [fmtValue(value, outputFormat)];
|
744 | }
|
745 | return [value, fmtValue(value, format)];
|
746 | };
|
747 |
|
748 | this.getCurrentAlign = function (_ref) {
|
749 | var align = _ref.align;
|
750 |
|
751 | _this4.setState({
|
752 | align: align
|
753 | });
|
754 | };
|
755 |
|
756 | this.getRangeInputOffsetLeft = function () {
|
757 | var left = _this4.dateInput && _this4.dateInput.input && _this4.dateInput.input[_this4.state.inputType] && _this4.dateInput.input[_this4.state.inputType].getInputNode().offsetLeft;
|
758 |
|
759 | return left;
|
760 | };
|
761 |
|
762 | this.getPopupOffsetLeft = function () {
|
763 | var inputOffsetLeft = _this4.getRangeInputOffsetLeft();
|
764 | var popupElement = _this4.popupRef.current;
|
765 | var popupElementWidth = popupElement ? popupElement.offsetWidth : 0;
|
766 |
|
767 |
|
768 | if (popupElementWidth > 1.2 * inputOffsetLeft) {
|
769 | return {
|
770 | arrowLeft: inputOffsetLeft,
|
771 | panelLeft: 0
|
772 | };
|
773 | } else {
|
774 |
|
775 | return {
|
776 | arrowLeft: 0,
|
777 | panelLeft: inputOffsetLeft
|
778 | };
|
779 | }
|
780 | };
|
781 |
|
782 | this.renderArrow = function (left) {
|
783 | return React.createElement('div', { key: 'arrow', className: _this4.props.prefix + 'range-picker2-arrow', style: { left: left } });
|
784 | };
|
785 | }, _temp);
|
786 | Picker.displayName = 'Picker';
|
787 |
|
788 |
|
789 | export default polyfill(Picker); |
\ | No newline at end of file |