UNPKG

27.4 kBJavaScriptView Raw
1'use strict';
2
3exports.__esModule = true;
4
5var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
6
7var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
8
9var _extends2 = require('babel-runtime/helpers/extends');
10
11var _extends3 = _interopRequireDefault(_extends2);
12
13var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
14
15var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
16
17var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
18
19var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
20
21var _inherits2 = require('babel-runtime/helpers/inherits');
22
23var _inherits3 = _interopRequireDefault(_inherits2);
24
25var _class, _temp, _initialiseProps;
26
27var _react = require('react');
28
29var _react2 = _interopRequireDefault(_react);
30
31var _reactLifecyclesCompat = require('react-lifecycles-compat');
32
33var _classnames2 = require('classnames');
34
35var _classnames3 = _interopRequireDefault(_classnames2);
36
37var _propTypes = require('prop-types');
38
39var PT = _interopRequireWildcard(_propTypes);
40
41var _propTypes2 = require('./prop-types');
42
43var _propTypes3 = _interopRequireDefault(_propTypes2);
44
45var _zhCn = require('../locale/zh-cn');
46
47var _zhCn2 = _interopRequireDefault(_zhCn);
48
49var _util = require('../util');
50
51var _util2 = require('./util');
52
53var _constant = require('./constant');
54
55var _overlay = require('../overlay');
56
57var _overlay2 = _interopRequireDefault(_overlay);
58
59var _dateInput = require('./panels/date-input');
60
61var _dateInput2 = _interopRequireDefault(_dateInput);
62
63var _datePanel = require('./panels/date-panel');
64
65var _datePanel2 = _interopRequireDefault(_datePanel);
66
67var _rangePanel = require('./panels/range-panel');
68
69var _rangePanel2 = _interopRequireDefault(_rangePanel);
70
71var _footerPanel = require('./panels/footer-panel');
72
73var _footerPanel2 = _interopRequireDefault(_footerPanel);
74
75function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
76
77function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
78
79var Popup = _overlay2.default.Popup;
80var pickProps = _util.obj.pickProps,
81 pickOthers = _util.obj.pickOthers;
82var renderNode = _util.func.renderNode,
83 checkDate = _util.func.checkDate,
84 checkRangeDate = _util.func.checkRangeDate;
85var Picker = (_temp = _class = function (_React$Component) {
86 (0, _inherits3.default)(Picker, _React$Component);
87
88 function Picker(props) {
89 (0, _classCallCheck3.default)(this, Picker);
90
91 var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props));
92
93 _initialiseProps.call(_this);
94
95 var prefix = props.prefix,
96 type = props.type,
97 format = props.format,
98 mode = props.mode,
99 defaultVisible = props.defaultVisible;
100
101
102 _this.state = {
103 panelMode: mode,
104 visible: defaultVisible
105 };
106
107 if (type === _constant.DATE_PICKER_TYPE.RANGE) {
108 var _this$getInitRangeInp = _this.getInitRangeInputState(),
109 inputType = _this$getInitRangeInp.inputType,
110 justBeginInput = _this$getInitRangeInp.justBeginInput;
111
112 _this.state = (0, _extends3.default)({
113 inputType: inputType,
114 justBeginInput: justBeginInput
115 }, _this.state);
116 }
117
118 var value = _this.getInitValue();
119
120 _this.state = (0, _extends3.default)({
121 value: value, // 确定值
122 curValue: value, // 临时值
123 preValue: value, // 上个值
124 inputValue: (0, _util2.fmtValue)(value, format)
125 }, _this.state);
126
127 _this.prefixCls = prefix + 'date-picker2';
128
129 _this.popupRef = _react2.default.createRef();
130 return _this;
131 }
132
133 Picker.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
134 var type = props.type,
135 showTime = props.showTime,
136 showOk = props.showOk,
137 disabled = props.disabled,
138 format = props.format;
139
140 var isRange = type === _constant.DATE_PICKER_TYPE.RANGE;
141
142 var newState = {
143 isRange: isRange,
144 showOk: !!(showOk || showTime)
145 };
146
147 /**
148 * 如果当前输入框可能被 disabled
149 * 且另一个输入框非 disabled 则切换到另一个输入框
150 */
151 if (isRange) {
152 var inputType = state.inputType;
153
154
155 var _disabled = Array.isArray(disabled) ? disabled : [disabled, disabled];
156
157 if (_disabled[inputType]) {
158 var otherType = (0, _util2.switchInputType)(state.inputType);
159
160 if (!_disabled[otherType]) {
161 inputType = otherType;
162 }
163 }
164
165 newState.inputType = inputType;
166 }
167
168 if ('value' in props) {
169 var value = isRange ? checkRangeDate(props.value, state.inputType, disabled) : checkDate(props.value);
170
171 if ((0, _util2.isValueChanged)(value, state.preValue)) {
172 newState = (0, _extends3.default)({}, newState, {
173 value: value,
174 curValue: value,
175 preValue: value,
176 inputValue: (0, _util2.fmtValue)(value, format)
177 });
178 }
179 }
180
181 return newState;
182 };
183
184 Picker.prototype.componentWillUnmount = function componentWillUnmount() {
185 [this.clearTimeoutId, this.timeoutId].forEach(function (id) {
186 return id && clearTimeout(id);
187 });
188 };
189
190 /**
191 * 获取初始值
192 */
193
194
195 /**
196 * 获取 RangePicker 输入框初始输入状态
197 * @returns {Object} inputState
198 * @returns {boolean} inputState.justBeginInput 是否初始输入
199 * @returns {number} inputState.inputType 当前输入框
200 */
201
202
203 /**
204 * 处理点击文档区域导致的弹层收起逻辑
205 * @param {boolean} visible 是否可见
206 * @param {string} type 事件类型
207 */
208
209
210 Picker.prototype.onVisibleChange = function onVisibleChange(visible) {
211 var _this2 = this;
212
213 if (visible !== this.state.visible) {
214 var callback = function callback() {
215 _this2.setState({
216 visible: visible,
217 justBeginInput: _this2.isEnabled()
218 });
219 };
220
221 if (this.timeoutId) {
222 clearTimeout(this.timeoutId);
223 this.timeoutId = null;
224 }
225
226 if (visible) {
227 callback();
228 } else {
229 this.timeoutId = setTimeout(callback, 0);
230 }
231
232 _util.func.invoke(this.props, 'onVisibleChange', [visible]);
233 }
234 };
235
236 /**
237 * 获取输入框的禁用状态
238 * @param {Number} idx
239 * @returns {Boolean}
240 */
241
242
243 /**
244 * check if value has disabled value
245 *
246 * @param {string|string[]|Dayjs|Dayjs[]} val
247 * @returns {Boolean}
248 */
249
250
251 /**
252 * 获取 `onChange` 和 `onOk` 方法的输出参数
253 * @param {Dayjs} value
254 * @returns 默认返回 `Dayjs` 实例和 `format` 格式化的值
255 * 如果传了了 `outputFormat` 属性则返回 `outputFormat` 格式化的值
256 */
257
258
259 Picker.prototype.render = function render() {
260 var _this3 = this,
261 _classnames;
262
263 var prefixCls = this.prefixCls,
264 handleChange = this.handleChange,
265 handleMouseDown = this.handleMouseDown,
266 handleVisibleChange = this.handleVisibleChange,
267 onOk = this.onOk,
268 onClick = this.onClick,
269 handleInput = this.handleInput,
270 onInputTypeChange = this.onInputTypeChange,
271 onPanelChange = this.onPanelChange,
272 onKeyDown = this.onKeyDown;
273 var _props = this.props,
274 rtl = _props.rtl,
275 locale = _props.locale,
276 prefix = _props.prefix,
277 inputReadOnly = _props.inputReadOnly,
278 showTime = _props.showTime,
279 preset = _props.preset,
280 mode = _props.mode,
281 format = _props.format,
282 trigger = _props.trigger,
283 disabledDate = _props.disabledDate,
284 extraFooterRender = _props.extraFooterRender,
285 timePanelProps = _props.timePanelProps,
286 resetTime = _props.resetTime,
287 placeholder = _props.placeholder,
288 disabledTime = _props.disabledTime,
289 dateCellRender = _props.dateCellRender,
290 disabled = _props.disabled,
291 isPreview = _props.isPreview,
292 className = _props.className,
293 defaultPanelValue = _props.defaultPanelValue,
294 renderPreview = _props.renderPreview,
295 label = _props.label,
296 restProps = (0, _objectWithoutProperties3.default)(_props, ['rtl', 'locale', 'prefix', 'inputReadOnly', 'showTime', 'preset', 'mode', 'format', 'trigger', 'disabledDate', 'extraFooterRender', 'timePanelProps', 'resetTime', 'placeholder', 'disabledTime', 'dateCellRender', 'disabled', 'isPreview', 'className', 'defaultPanelValue', 'renderPreview', 'label']);
297 var _state = this.state,
298 isRange = _state.isRange,
299 inputType = _state.inputType,
300 justBeginInput = _state.justBeginInput,
301 panelMode = _state.panelMode,
302 showOk = _state.showOk,
303 align = _state.align;
304 var _state2 = this.state,
305 inputValue = _state2.inputValue,
306 curValue = _state2.curValue;
307
308 var _getPopupOffsetLeft = this.getPopupOffsetLeft(),
309 arrowLeft = _getPopupOffsetLeft.arrowLeft,
310 panelLeft = _getPopupOffsetLeft.panelLeft;
311
312 // 预览态
313
314
315 if (isPreview) {
316 var previewCls = (0, _classnames3.default)(className, prefix + 'form-preview');
317
318 return _react2.default.createElement(
319 'div',
320 { className: previewCls },
321 renderNode(renderPreview, isRange ? inputValue.join('-') : inputValue, [curValue, this.props])
322 );
323 }
324
325 var visible = 'visible' in this.props ? this.props.visible : this.state.visible;
326 var allDisabled = isRange && Array.isArray(disabled) ? disabled.every(function (v) {
327 return v;
328 }) : disabled;
329 var sharedProps = {
330 rtl: rtl,
331 prefix: prefix,
332 locale: locale,
333 mode: mode,
334 format: format,
335 showTime: showTime,
336 inputType: inputType
337 };
338
339 // 输入框
340 var inputProps = (0, _extends3.default)({}, pickProps(_dateInput2.default.propTypes, restProps), sharedProps, {
341 value: inputValue,
342 label: label,
343 isRange: isRange,
344 disabled: disabled,
345 placeholder: placeholder,
346 onInputTypeChange: onInputTypeChange,
347 focus: visible,
348 onInput: handleInput,
349 readOnly: inputReadOnly,
350 inputProps: this.props.inputProps,
351 ref: function ref(el) {
352 return _this3.dateInput = el;
353 }
354 });
355
356 // 禁用状态下 不允许清空
357 if (!this.isEnabled()) {
358 inputProps.hasClear = false;
359 }
360
361 var triggerNode = renderNode(trigger, _react2.default.createElement(_dateInput2.default, inputProps));
362
363 // 日期
364 var panelProps = (0, _extends3.default)({}, sharedProps, {
365 panelMode: panelMode,
366 value: curValue,
367 disabledDate: disabledDate,
368 onPanelChange: onPanelChange,
369 timePanelProps: timePanelProps,
370 disabledTime: disabledTime,
371 resetTime: resetTime,
372 dateCellRender: dateCellRender,
373 defaultPanelValue: defaultPanelValue,
374 onSelect: handleChange
375 });
376
377 var DateNode = isRange ? _react2.default.createElement(_rangePanel2.default, (0, _extends3.default)({ justBeginInput: justBeginInput }, panelProps)) : _react2.default.createElement(_datePanel2.default, panelProps);
378
379 // 底部节点
380 var oKable = !!(isRange ? inputValue && inputValue[inputType] : inputValue);
381 var shouldShowFooter = showOk || preset || extraFooterRender;
382
383 var footerNode = shouldShowFooter ? _react2.default.createElement(_footerPanel2.default, {
384 oKable: oKable,
385 onOk: onOk,
386 showOk: showOk,
387 onChange: handleChange,
388 preset: preset,
389 locale: locale,
390 prefix: prefix,
391 extraRender: extraFooterRender
392 }) : null;
393
394 var triggerProps = void 0;
395 if (!allDisabled) {
396 triggerProps = { onKeyDown: onKeyDown, onClick: onClick };
397 }
398
399 // popup
400 var _props2 = this.props,
401 followTrigger = _props2.followTrigger,
402 popupTriggerType = _props2.popupTriggerType,
403 popupAlign = _props2.popupAlign,
404 popupContainer = _props2.popupContainer,
405 popupStyle = _props2.popupStyle,
406 popupClassName = _props2.popupClassName,
407 popupComponent = _props2.popupComponent,
408 popupProps = _props2.popupProps;
409
410
411 var popupCls = (0, _classnames3.default)(popupClassName || popupProps && popupProps.className, (_classnames = {}, _classnames[prefixCls + '-overlay'] = true, _classnames[prefixCls + '-' + (align || []).join('-')] = align, _classnames[prefixCls + '-overlay-range'] = isRange, _classnames));
412 var PopupComp = popupComponent || Popup;
413
414 return _react2.default.createElement(
415 'div',
416 (0, _extends3.default)({}, pickOthers(Picker.propTypes, restProps), {
417 dir: rtl ? 'rtl' : undefined,
418 className: (0, _classnames3.default)(className, prefixCls),
419 style: this.props.style
420 }),
421 _react2.default.createElement(
422 PopupComp,
423 (0, _extends3.default)({
424 rtl: rtl,
425 key: 'date-picker-popup',
426 visible: visible,
427 align: popupAlign,
428 container: popupContainer,
429 followTrigger: followTrigger,
430 triggerType: popupTriggerType,
431 style: popupStyle,
432 onVisibleChange: handleVisibleChange,
433 disabled: allDisabled,
434 trigger: _react2.default.createElement(
435 'div',
436 (0, _extends3.default)({}, triggerProps, { role: 'button', tabIndex: '0', style: { width: '100%' } }),
437 triggerNode
438 ),
439 onPosition: this.getCurrentAlign,
440 canCloseByTrigger: false
441 }, popupProps, {
442 className: popupCls
443 }),
444 _react2.default.createElement(
445 'div',
446 { onMouseDown: handleMouseDown, style: { marginLeft: panelLeft } },
447 _react2.default.createElement(
448 'div',
449 { dir: rtl ? 'rtl' : undefined, className: prefixCls + '-wrapper', ref: this.popupRef },
450 isRange ? this.renderArrow(arrowLeft) : null,
451 DateNode,
452 this.state.panelMode !== this.props.mode ? null : footerNode
453 )
454 )
455 )
456 );
457 };
458
459 return Picker;
460}(_react2.default.Component), _class.propTypes = {
461 rtl: PT.bool,
462 prefix: PT.string,
463 locale: PT.object,
464 name: PT.string,
465
466 // calendar
467 mode: _propTypes3.default.mode,
468 type: _propTypes3.default.type,
469 value: _propTypes3.default.value,
470 defaultValue: _propTypes3.default.value,
471 defaultPanelValue: _propTypes3.default.date,
472 disabledDate: PT.func,
473 visible: PT.bool,
474 defaultVisible: PT.bool,
475 dateCellRender: PT.func,
476
477 // event
478 onOk: PT.func,
479 onChange: PT.func,
480 onVisibleChange: PT.func,
481 onPanelChange: PT.func,
482
483 // time
484 showTime: PT.bool,
485 resetTime: PT.bool,
486 timePanelProps: PT.object,
487 disabledTime: PT.object,
488
489 // header
490 titleRender: PT.func,
491
492 // footer
493 preset: PT.oneOfType([PT.array, PT.object]),
494 extraFooterRender: _propTypes3.default.render,
495 showOk: PT.bool,
496
497 // input
498 trigger: _propTypes3.default.render,
499 hasBorder: PT.bool,
500 inputProps: PT.object,
501 hasClear: PT.bool,
502 placeholder: _propTypes3.default.placeholder,
503 disabled: _propTypes3.default.disabled,
504 inputReadOnly: _propTypes3.default.readOnly,
505 /**
506 * 日期显示格式
507 */
508 format: _propTypes3.default.format,
509 label: PT.node,
510 separator: PT.node,
511 /**
512 * 输出格式:控制 onChange、onOk 事件的输出值格式
513 * - string 类型:根据时间格式进行转换
514 * - function 类型:((date: Dayjs, dateStr: string) => any)
515 *
516 * @version 1.23
517 */
518 outputFormat: _propTypes3.default.format,
519
520 // popup
521 followTrigger: PT.bool,
522 popupTriggerType: PT.oneOf(['click', 'hover']),
523 popupAlign: PT.string,
524 popupContainer: PT.any,
525 popupStyle: PT.object,
526 popupClassName: PT.string,
527 popupComponent: PT.elementType,
528 popupProps: PT.object,
529
530 // preview
531 isPreview: PT.bool,
532 renderPreview: PT.func,
533
534 // ariaLabel
535 dateInputAriaLabel: _propTypes3.default.ariaLabel
536}, _class.defaultProps = {
537 rtl: false,
538 prefix: 'next-',
539 popupTriggerType: 'click',
540 locale: _zhCn2.default.DatePicker,
541 defaultVisible: false,
542 type: _constant.DATE_PICKER_TYPE.DATE,
543 mode: _constant.DATE_PICKER_MODE.DATE,
544 format: 'YYYY-MM-DD'
545}, _initialiseProps = function _initialiseProps() {
546 var _this4 = this;
547
548 this.getInitValue = function () {
549 var props = _this4.props;
550 var type = props.type,
551 value = props.value,
552 defaultValue = props.defaultValue;
553
554
555 var val = type === _constant.DATE_PICKER_TYPE.RANGE ? [null, null] : null;
556
557 val = 'value' in props ? value : 'defaultValue' in props ? defaultValue : val;
558
559 return _this4.checkValue(val);
560 };
561
562 this.getInitRangeInputState = function () {
563 return {
564 justBeginInput: _this4.isEnabled(),
565 inputType: _this4.isEnabled(0) ? _constant.DATE_INPUT_TYPE.BEGIN : _constant.DATE_INPUT_TYPE.END
566 };
567 };
568
569 this.handleVisibleChange = function (visible, targetType) {
570 if (['docClick', 'fromTrigger'].indexOf(targetType) > -1) {
571 // 弹层收起 触发 Change 逻辑
572 if (!visible) {
573 _this4.handleChange(_this4.state.curValue, 'VISIBLE_CHANGE');
574 }
575 _this4.onVisibleChange(visible);
576 }
577 };
578
579 this.checkValue = function (value, strictly) {
580 return _this4.props.type === _constant.DATE_PICKER_TYPE.RANGE ? checkRangeDate(value, _this4.state.inputType, _this4.props.disabled, strictly) : checkDate(value);
581 };
582
583 this.handleInputFocus = function (inputType) {
584 var inputEl = _this4.dateInput && _this4.dateInput.input;
585
586 if (_this4.state.isRange) {
587 inputEl = inputEl && inputEl[inputType];
588 }
589
590 inputEl && inputEl.focus();
591 };
592
593 this.handleMouseDown = function (e) {
594 e.preventDefault();
595 };
596
597 this.handleInput = function (v, eventType) {
598 if (eventType === 'clear') {
599 _this4.handleChange(v, 'INPUT_CLEAR');
600
601 if (_this4.state.isRange) {
602 _this4.handleClear();
603 }
604 } else {
605 _this4.setState({
606 inputValue: v,
607 visible: true
608 });
609 }
610 };
611
612 this.onPanelChange = function (value, mode) {
613 _this4.setState({
614 panelMode: mode
615 });
616 _util.func.invoke(_this4.props, 'onPanelChange', [value, mode]);
617 };
618
619 this.handleClear = function () {
620 /**
621 * 清空输入之后 input 组件内部会让第二个输入框获得焦点
622 * 所以这里需要设置 setTimeout 才能让第一个 input 获得焦点
623 */
624 _this4.clearTimeoutId = setTimeout(function () {
625 _this4.handleInputFocus(0);
626 });
627
628 _this4.setState({
629 inputType: _constant.DATE_INPUT_TYPE.BEGIN,
630 justBeginInput: _this4.isEnabled()
631 });
632 };
633
634 this.shouldSwitchInput = function (value) {
635 var _state3 = _this4.state,
636 inputType = _state3.inputType,
637 justBeginInput = _state3.justBeginInput;
638
639 var idx = justBeginInput ? (0, _util2.switchInputType)(inputType) : value.indexOf(null);
640
641 if (idx !== -1 && _this4.isEnabled(idx)) {
642 _this4.onInputTypeChange(idx);
643 _this4.handleInputFocus(idx);
644 return true;
645 }
646
647 return false;
648 };
649
650 this.isEnabled = function (idx) {
651 var disabled = _this4.props.disabled;
652
653
654 return Array.isArray(disabled) ? idx === undefined ? !disabled[0] && !disabled[1] : !disabled[idx] : !disabled;
655 };
656
657 this.checkValueDisabled = function (val) {
658 var disabledDate = _this4.props.disabledDate;
659 var panelMode = _this4.state.panelMode;
660
661 var values = (Array.isArray(val) ? val : [val]).map(function (value) {
662 return checkDate(value);
663 });
664
665 if (!disabledDate) {
666 return false;
667 }
668
669 return values.some(function (value) {
670 return disabledDate(value, panelMode);
671 });
672 };
673
674 this.onKeyDown = function (e) {
675 switch (e.keyCode) {
676 case _util.KEYCODE.ENTER:
677 {
678 var inputValue = _this4.state.inputValue;
679
680 _this4.onClick();
681 if (_this4.checkValueDisabled(inputValue)) {
682 // reset inputValue when current inputValue is disabled
683 _this4.handleChange(inputValue, 'VISIBLE_CHANGE');
684 return;
685 }
686 _this4.handleChange(inputValue, 'KEYDOWN_ENTER');
687 break;
688 }
689 default:
690 return;
691 }
692 };
693
694 this.handleChange = function (v, eventType) {
695 var format = _this4.props.format;
696 var _state4 = _this4.state,
697 isRange = _state4.isRange,
698 showOk = _state4.showOk,
699 value = _state4.value,
700 preValue = _state4.preValue;
701
702 var forceEvents = ['KEYDOWN_ENTER', 'CLICK_PRESET', 'CLICK_OK', 'INPUT_CLEAR', 'VISIBLE_CHANGE'];
703 var isTemporary = showOk && !forceEvents.includes(eventType);
704
705 // 面板收起时候,将值设置为确认值
706 v = eventType === 'VISIBLE_CHANGE' ? value : _this4.checkValue(v, !isTemporary);
707
708 _this4.setState({
709 curValue: v,
710 inputValue: (0, _util2.fmtValue)(v, format)
711 });
712
713 if (!isTemporary) {
714 _this4.setState({
715 value: v
716 }, function () {
717 // 判断当前选择结束,收起面板:
718 // 1. 非 Range 选择
719 // 2. 非 选择预设时间、面板收起、清空输入 操作
720 // 3. 不需要切换输入框
721 var shouldHidePanel = !isRange || ['CLICK_PRESET', 'VISIBLE_CHANGE', 'INPUT_CLEAR'].includes(eventType) || !_this4.shouldSwitchInput(v);
722
723 if (shouldHidePanel) {
724 _this4.onVisibleChange(false);
725
726 if ((0, _util2.isValueChanged)(v, preValue)) {
727 _this4.onChange();
728 }
729 }
730 });
731 }
732 };
733
734 this.onChange = function () {
735 var state = _this4.state,
736 props = _this4.props;
737 var format = props.format;
738
739
740 var value = _this4.checkValue('value' in props ? props.value : state.value);
741
742 _this4.setState({
743 curValue: value,
744 preValue: value,
745 inputValue: (0, _util2.fmtValue)(value, format)
746 });
747
748 _util.func.invoke(_this4.props, 'onChange', _this4.getOutputArgs(state.value));
749 };
750
751 this.onOk = function () {
752 var inputValue = _this4.state.inputValue;
753
754 var checkedValue = _this4.checkValue(inputValue);
755
756 _util.func.invoke(_this4.props, 'onOk', _this4.getOutputArgs(checkedValue));
757
758 _this4.setState({ value: checkedValue });
759 _this4.handleChange(checkedValue, 'CLICK_OK');
760 };
761
762 this.onInputTypeChange = function (idx) {
763 var _state5 = _this4.state,
764 inputType = _state5.inputType,
765 visible = _state5.visible;
766
767
768 if (idx !== inputType) {
769 _this4.setState({
770 inputType: idx,
771 justBeginInput: !(idx !== null && visible)
772 });
773 }
774 };
775
776 this.onClick = function () {
777 var _state6 = _this4.state,
778 visible = _state6.visible,
779 inputType = _state6.inputType;
780
781
782 if (!visible) {
783 _this4.handleInputFocus(inputType);
784 }
785 };
786
787 this.getOutputArgs = function (value) {
788 var _props3 = _this4.props,
789 outputFormat = _props3.outputFormat,
790 format = _props3.format;
791
792
793 if (outputFormat) {
794 return [(0, _util2.fmtValue)(value, outputFormat)];
795 }
796 return [value, (0, _util2.fmtValue)(value, format)];
797 };
798
799 this.getCurrentAlign = function (_ref) {
800 var align = _ref.align;
801
802 _this4.setState({
803 align: align
804 });
805 };
806
807 this.getRangeInputOffsetLeft = function () {
808 var left = _this4.dateInput && _this4.dateInput.input && _this4.dateInput.input[_this4.state.inputType] && _this4.dateInput.input[_this4.state.inputType].getInputNode().offsetLeft;
809
810 return left;
811 };
812
813 this.getPopupOffsetLeft = function () {
814 var inputOffsetLeft = _this4.getRangeInputOffsetLeft();
815 var popupElement = _this4.popupRef.current;
816 var popupElementWidth = popupElement ? popupElement.offsetWidth : 0;
817
818 // 弹层宽度大于输入元素长度,只偏移 arrow
819 if (popupElementWidth > 1.2 * inputOffsetLeft) {
820 return {
821 arrowLeft: inputOffsetLeft,
822 panelLeft: 0
823 };
824 } else {
825 // 否则 panel 整体偏移,arrow 随 panel 整体偏移
826 return {
827 arrowLeft: 0,
828 panelLeft: inputOffsetLeft
829 };
830 }
831 };
832
833 this.renderArrow = function (left) {
834 return _react2.default.createElement('div', { key: 'arrow', className: _this4.props.prefix + 'range-picker2-arrow', style: { left: left } });
835 };
836}, _temp);
837Picker.displayName = 'Picker';
838exports.default = (0, _reactLifecyclesCompat.polyfill)(Picker);
839module.exports = exports['default'];
\No newline at end of file