1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
6 |
|
7 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
8 |
|
9 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
10 |
|
11 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
12 |
|
13 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
14 |
|
15 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
16 |
|
17 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
18 |
|
19 | var _inherits3 = _interopRequireDefault(_inherits2);
|
20 |
|
21 | var _extends2 = require('babel-runtime/helpers/extends');
|
22 |
|
23 | var _extends3 = _interopRequireDefault(_extends2);
|
24 |
|
25 | var _class, _temp, _initialiseProps;
|
26 |
|
27 | var _react = require('react');
|
28 |
|
29 | var _react2 = _interopRequireDefault(_react);
|
30 |
|
31 | var _propTypes = require('prop-types');
|
32 |
|
33 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
34 |
|
35 | var _reactLifecyclesCompat = require('react-lifecycles-compat');
|
36 |
|
37 | var _classnames3 = require('classnames');
|
38 |
|
39 | var _classnames4 = _interopRequireDefault(_classnames3);
|
40 |
|
41 | var _configProvider = require('../config-provider');
|
42 |
|
43 | var _configProvider2 = _interopRequireDefault(_configProvider);
|
44 |
|
45 | var _input = require('../input');
|
46 |
|
47 | var _input2 = _interopRequireDefault(_input);
|
48 |
|
49 | var _button = require('../button');
|
50 |
|
51 | var _button2 = _interopRequireDefault(_button);
|
52 |
|
53 | var _overlay = require('../overlay');
|
54 |
|
55 | var _overlay2 = _interopRequireDefault(_overlay);
|
56 |
|
57 | var _zhCn = require('../locale/zh-cn');
|
58 |
|
59 | var _zhCn2 = _interopRequireDefault(_zhCn);
|
60 |
|
61 | var _util = require('../util');
|
62 |
|
63 | var _panel = require('./panel');
|
64 |
|
65 | var _panel2 = _interopRequireDefault(_panel);
|
66 |
|
67 | var _utils = require('./utils');
|
68 |
|
69 | var _propTypes3 = require('./prop-types');
|
70 |
|
71 | var _propTypes4 = _interopRequireDefault(_propTypes3);
|
72 |
|
73 | var _util2 = require('../date-picker2/util');
|
74 |
|
75 | var _footerPanel = require('../date-picker2/panels/footer-panel');
|
76 |
|
77 | var _footerPanel2 = _interopRequireDefault(_footerPanel);
|
78 |
|
79 | var _dateInput = require('./module/date-input');
|
80 |
|
81 | var _dateInput2 = _interopRequireDefault(_dateInput);
|
82 |
|
83 | var _constant = require('./constant');
|
84 |
|
85 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
86 |
|
87 | var Popup = _overlay2.default.Popup;
|
88 | var noop = _util.func.noop,
|
89 | checkDate = _util.func.checkDate,
|
90 | checkRangeDate = _util.func.checkRangeDate;
|
91 |
|
92 | var timePickerLocale = _zhCn2.default.TimePicker;
|
93 |
|
94 | var presetPropType = _propTypes2.default.shape((0, _extends3.default)({
|
95 | label: _propTypes2.default.string,
|
96 | value: _propTypes2.default.oneOfType([_propTypes2.default.func, _utils.checkDateValue])
|
97 | }, _button2.default.propTypes));
|
98 |
|
99 | var TimePicker2 = (_temp = _class = function (_Component) {
|
100 | (0, _inherits3.default)(TimePicker2, _Component);
|
101 |
|
102 | function TimePicker2(props, context) {
|
103 | (0, _classCallCheck3.default)(this, TimePicker2);
|
104 |
|
105 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props, context));
|
106 |
|
107 | _initialiseProps.call(_this);
|
108 |
|
109 | var isRange = props.type === _constant.TIME_PICKER_TYPE.RANGE;
|
110 |
|
111 | _this.state = {};
|
112 | if (isRange) {
|
113 | var _this$getInitRangeInp = _this.getInitRangeInputState(),
|
114 | inputType = _this$getInitRangeInp.inputType,
|
115 | justBeginInput = _this$getInitRangeInp.justBeginInput;
|
116 |
|
117 | _this.state = {
|
118 | inputType: inputType,
|
119 | justBeginInput: justBeginInput
|
120 | };
|
121 | }
|
122 |
|
123 | var _this$props = _this.props,
|
124 | format = _this$props.format,
|
125 | visible = _this$props.visible,
|
126 | defaultVisible = _this$props.defaultVisible,
|
127 | prefix = _this$props.prefix;
|
128 |
|
129 |
|
130 | var value = _this.getInitValue();
|
131 |
|
132 |
|
133 | _this.state = (0, _extends3.default)({}, _this.state, {
|
134 | isRange: isRange,
|
135 | inputStr: '',
|
136 | value: value,
|
137 | curValue: value,
|
138 | preValue: value,
|
139 | inputValue: (0, _util2.fmtValue)(value, format),
|
140 | inputing: false,
|
141 | visible: 'visible' in _this.props ? visible : defaultVisible
|
142 | });
|
143 | _this.prefixCls = prefix + 'time-picker2';
|
144 | return _this;
|
145 | }
|
146 |
|
147 | TimePicker2.getDerivedStateFromProps = function getDerivedStateFromProps(props, prevState) {
|
148 | var disabled = props.disabled,
|
149 | type = props.type,
|
150 | format = props.format,
|
151 | propsValue = props.value;
|
152 |
|
153 | var isRange = type === _constant.TIME_PICKER_TYPE.RANGE;
|
154 | var state = {
|
155 | isRange: isRange
|
156 | };
|
157 |
|
158 | if ('value' in props) {
|
159 |
|
160 | var formatter = function formatter(v) {
|
161 | return typeof v === 'string' ? (0, _util.datejs)(v, format) : v;
|
162 | };
|
163 | var formattedValue = Array.isArray(propsValue) ? propsValue.map(function (v) {
|
164 | return formatter(v);
|
165 | }) : formatter(propsValue);
|
166 | var value = isRange ? checkRangeDate(formattedValue, state.inputType, disabled) : checkDate(formattedValue);
|
167 | if ((0, _util2.isValueChanged)(value, state.preValue)) {
|
168 | state = (0, _extends3.default)({}, state, {
|
169 | value: value,
|
170 | preValue: value
|
171 | });
|
172 | if (isRange && !prevState.selecting) {
|
173 | state.inputValue = (0, _util2.fmtValue)(value, format);
|
174 | state.curValue = formattedValue;
|
175 | }
|
176 | }
|
177 | }
|
178 |
|
179 | if ('visible' in props) {
|
180 | state.visible = props.visible;
|
181 | }
|
182 |
|
183 | return state;
|
184 | };
|
185 |
|
186 | |
187 |
|
188 |
|
189 |
|
190 |
|
191 | |
192 |
|
193 |
|
194 |
|
195 |
|
196 |
|
197 |
|
198 | |
199 |
|
200 |
|
201 |
|
202 |
|
203 |
|
204 |
|
205 | |
206 |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 |
|
212 |
|
213 | |
214 |
|
215 |
|
216 |
|
217 |
|
218 |
|
219 |
|
220 | TimePicker2.prototype.renderPreview = function renderPreview(others) {
|
221 | var _props = this.props,
|
222 | prefix = _props.prefix,
|
223 | format = _props.format,
|
224 | className = _props.className,
|
225 | renderPreview = _props.renderPreview;
|
226 | var value = this.state.value;
|
227 |
|
228 | var previewCls = (0, _classnames4.default)(className, prefix + 'form-preview');
|
229 |
|
230 | var label = value ? value.format(format) : '';
|
231 |
|
232 | if (typeof renderPreview === 'function') {
|
233 | return _react2.default.createElement(
|
234 | 'div',
|
235 | (0, _extends3.default)({}, others, { className: previewCls }),
|
236 | renderPreview(value, this.props)
|
237 | );
|
238 | }
|
239 |
|
240 | return _react2.default.createElement(
|
241 | 'p',
|
242 | (0, _extends3.default)({}, others, { className: previewCls }),
|
243 | label
|
244 | );
|
245 | };
|
246 |
|
247 | TimePicker2.prototype.render = function render() {
|
248 | var _classnames,
|
249 | _this2 = this,
|
250 | _classnames2;
|
251 |
|
252 | var _props2 = this.props,
|
253 | prefix = _props2.prefix,
|
254 | label = _props2.label,
|
255 | state = _props2.state,
|
256 | placeholder = _props2.placeholder,
|
257 | size = _props2.size,
|
258 | format = _props2.format,
|
259 | hasClear = _props2.hasClear,
|
260 | hourStep = _props2.hourStep,
|
261 | minuteStep = _props2.minuteStep,
|
262 | secondStep = _props2.secondStep,
|
263 | disabledHours = _props2.disabledHours,
|
264 | disabledMinutes = _props2.disabledMinutes,
|
265 | disabledSeconds = _props2.disabledSeconds,
|
266 | renderTimeMenuItems = _props2.renderTimeMenuItems,
|
267 | inputProps = _props2.inputProps,
|
268 | popupAlign = _props2.popupAlign,
|
269 | popupTriggerType = _props2.popupTriggerType,
|
270 | popupContainer = _props2.popupContainer,
|
271 | popupStyle = _props2.popupStyle,
|
272 | popupClassName = _props2.popupClassName,
|
273 | popupProps = _props2.popupProps,
|
274 | popupComponent = _props2.popupComponent,
|
275 | followTrigger = _props2.followTrigger,
|
276 | disabled = _props2.disabled,
|
277 | hasBorder = _props2.hasBorder,
|
278 | className = _props2.className,
|
279 | locale = _props2.locale,
|
280 | rtl = _props2.rtl,
|
281 | isPreview = _props2.isPreview,
|
282 | preset = _props2.preset,
|
283 | others = (0, _objectWithoutProperties3.default)(_props2, ['prefix', 'label', 'state', 'placeholder', 'size', 'format', 'hasClear', 'hourStep', 'minuteStep', 'secondStep', 'disabledHours', 'disabledMinutes', 'disabledSeconds', 'renderTimeMenuItems', 'inputProps', 'popupAlign', 'popupTriggerType', 'popupContainer', 'popupStyle', 'popupClassName', 'popupProps', 'popupComponent', 'followTrigger', 'disabled', 'hasBorder', 'className', 'locale', 'rtl', 'isPreview', 'preset']);
|
284 | var _state = this.state,
|
285 | value = _state.value,
|
286 | inputStr = _state.inputStr,
|
287 | inputValue = _state.inputValue,
|
288 | curValue = _state.curValue,
|
289 | inputing = _state.inputing,
|
290 | visible = _state.visible,
|
291 | isRange = _state.isRange,
|
292 | inputType = _state.inputType;
|
293 |
|
294 | var triggerCls = (0, _classnames4.default)((_classnames = {}, _classnames[this.prefixCls + '-trigger'] = true, _classnames));
|
295 |
|
296 | if (rtl) {
|
297 | others.dir = 'rtl';
|
298 | }
|
299 |
|
300 | if (isPreview) {
|
301 | return this.renderPreview(_util.obj.pickOthers(others, TimePicker2.PropTypes));
|
302 | }
|
303 |
|
304 | var sharedInputProps = (0, _extends3.default)({
|
305 | prefix: prefix,
|
306 | locale: locale,
|
307 | label: label,
|
308 | state: state,
|
309 | placeholder: placeholder
|
310 | }, inputProps, {
|
311 | size: size,
|
312 | disabled: disabled,
|
313 |
|
314 | value: inputing ? inputStr : isRange ? inputValue : (0, _util2.fmtValue)(value, format) || '',
|
315 | hasClear: value && hasClear,
|
316 | inputType: inputType,
|
317 | isRange: isRange,
|
318 | onInputTypeChange: this.onInputTypeChange,
|
319 | onInput: this.handleInput,
|
320 | onKeyDown: this.onKeyDown,
|
321 | ref: function ref(el) {
|
322 | return _this2.dateInput = el;
|
323 | }
|
324 | });
|
325 |
|
326 | var triggerInput = _react2.default.createElement(
|
327 | 'div',
|
328 | { className: triggerCls },
|
329 | _react2.default.createElement(_dateInput2.default, (0, _extends3.default)({}, sharedInputProps, {
|
330 | label: label,
|
331 | state: state,
|
332 | onClick: this.onClick,
|
333 | hasBorder: hasBorder,
|
334 | placeholder: placeholder || locale.placeholder,
|
335 | className: (0, _classnames4.default)(this.prefixCls + '-input')
|
336 | }))
|
337 | );
|
338 |
|
339 | var panelProps = {
|
340 | prefix: prefix,
|
341 | locale: locale,
|
342 | value: inputing ? this.checkValue(inputStr) : curValue,
|
343 |
|
344 | isRange: isRange,
|
345 | disabled: disabled,
|
346 | showHour: format.indexOf('H') > -1,
|
347 | showSecond: format.indexOf('s') > -1,
|
348 | showMinute: format.indexOf('m') > -1,
|
349 | hourStep: hourStep,
|
350 | minuteStep: minuteStep,
|
351 | secondStep: secondStep,
|
352 | disabledHours: disabledHours,
|
353 | disabledMinutes: disabledMinutes,
|
354 | disabledSeconds: disabledSeconds,
|
355 | renderTimeMenuItems: renderTimeMenuItems,
|
356 | onSelect: this.handleChange
|
357 | };
|
358 |
|
359 | var classNames = (0, _classnames4.default)((_classnames2 = {}, _classnames2['' + this.prefixCls] = true, _classnames2[this.prefixCls + '-' + size] = size, _classnames2[prefix + 'disabled'] = disabled, _classnames2), className);
|
360 |
|
361 | var PopupComponent = popupComponent ? popupComponent : Popup;
|
362 | var oKable = !!(isRange ? inputValue && inputValue[inputType] : inputValue);
|
363 |
|
364 | return _react2.default.createElement(
|
365 | 'div',
|
366 | (0, _extends3.default)({}, _util.obj.pickOthers(TimePicker2.propTypes, others), { className: classNames }),
|
367 | _react2.default.createElement(
|
368 | PopupComponent,
|
369 | (0, _extends3.default)({
|
370 | align: popupAlign
|
371 | }, popupProps, {
|
372 | followTrigger: followTrigger,
|
373 | visible: visible,
|
374 | onVisibleChange: this.handleVisibleChange,
|
375 | trigger: triggerInput,
|
376 | container: popupContainer,
|
377 | disabled: disabled,
|
378 | triggerType: popupTriggerType,
|
379 | style: popupStyle,
|
380 | className: popupClassName
|
381 | }),
|
382 | _react2.default.createElement(
|
383 | 'div',
|
384 | { dir: others.dir, className: this.prefixCls + '-wrapper' },
|
385 | _react2.default.createElement(
|
386 | 'div',
|
387 | { className: this.prefixCls + '-body' },
|
388 | _react2.default.createElement(_panel2.default, panelProps),
|
389 | preset || isRange ? _react2.default.createElement(_footerPanel2.default, {
|
390 | prefix: prefix,
|
391 | className: this.prefixCls + '-footer',
|
392 | showTime: true,
|
393 | oKable: oKable,
|
394 | showOk: isRange,
|
395 | onOk: this.onOk,
|
396 | onChange: this.handleChange,
|
397 | preset: preset
|
398 | }) : null
|
399 | )
|
400 | )
|
401 | )
|
402 | );
|
403 | };
|
404 |
|
405 | return TimePicker2;
|
406 | }(_react.Component), _class.propTypes = (0, _extends3.default)({}, _configProvider2.default.propTypes, {
|
407 | prefix: _propTypes2.default.string,
|
408 | rtl: _propTypes2.default.bool,
|
409 | |
410 |
|
411 |
|
412 | label: _propTypes2.default.node,
|
413 | |
414 |
|
415 |
|
416 | state: _propTypes2.default.oneOf(['error', 'success']),
|
417 | |
418 |
|
419 |
|
420 | placeholder: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(_propTypes2.default.string), _propTypes2.default.string]),
|
421 | |
422 |
|
423 |
|
424 | value: _propTypes4.default.value,
|
425 | |
426 |
|
427 |
|
428 | defaultValue: _propTypes4.default.value,
|
429 | |
430 |
|
431 |
|
432 | size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
|
433 | |
434 |
|
435 |
|
436 | hasClear: _propTypes2.default.bool,
|
437 | |
438 |
|
439 |
|
440 |
|
441 | format: _propTypes2.default.string,
|
442 | |
443 |
|
444 |
|
445 | hourStep: _propTypes2.default.number,
|
446 | |
447 |
|
448 |
|
449 | minuteStep: _propTypes2.default.number,
|
450 | |
451 |
|
452 |
|
453 | secondStep: _propTypes2.default.number,
|
454 | |
455 |
|
456 |
|
457 |
|
458 |
|
459 | disabledHours: _propTypes2.default.func,
|
460 | |
461 |
|
462 |
|
463 |
|
464 |
|
465 | disabledMinutes: _propTypes2.default.func,
|
466 | |
467 |
|
468 |
|
469 |
|
470 |
|
471 | disabledSeconds: _propTypes2.default.func,
|
472 | |
473 |
|
474 |
|
475 |
|
476 |
|
477 |
|
478 |
|
479 |
|
480 |
|
481 |
|
482 |
|
483 | renderTimeMenuItems: _propTypes2.default.func,
|
484 | |
485 |
|
486 |
|
487 | visible: _propTypes2.default.bool,
|
488 | |
489 |
|
490 |
|
491 | defaultVisible: _propTypes2.default.bool,
|
492 | |
493 |
|
494 |
|
495 |
|
496 |
|
497 | popupContainer: _propTypes2.default.any,
|
498 | |
499 |
|
500 |
|
501 | popupAlign: _propTypes2.default.string,
|
502 | |
503 |
|
504 |
|
505 | popupTriggerType: _propTypes2.default.oneOf(['click', 'hover']),
|
506 | |
507 |
|
508 |
|
509 |
|
510 |
|
511 | onVisibleChange: _propTypes2.default.func,
|
512 | |
513 |
|
514 |
|
515 | popupStyle: _propTypes2.default.object,
|
516 | |
517 |
|
518 |
|
519 | popupClassName: _propTypes2.default.string,
|
520 | |
521 |
|
522 |
|
523 | popupProps: _propTypes2.default.object,
|
524 | |
525 |
|
526 |
|
527 | followTrigger: _propTypes2.default.bool,
|
528 | |
529 |
|
530 |
|
531 | disabled: _propTypes2.default.bool,
|
532 | |
533 |
|
534 |
|
535 | hasBorder: _propTypes2.default.bool,
|
536 | |
537 |
|
538 |
|
539 | isPreview: _propTypes2.default.bool,
|
540 | |
541 |
|
542 |
|
543 |
|
544 | renderPreview: _propTypes2.default.func,
|
545 | |
546 |
|
547 |
|
548 |
|
549 |
|
550 | onChange: _propTypes2.default.func,
|
551 | className: _propTypes2.default.string,
|
552 | name: _propTypes2.default.string,
|
553 | |
554 |
|
555 |
|
556 | preset: _propTypes2.default.oneOfType([_propTypes2.default.arrayOf(presetPropType), presetPropType]),
|
557 | inputProps: _propTypes2.default.shape(_input2.default.propTypes),
|
558 | popupComponent: _propTypes2.default.elementType,
|
559 | type: _propTypes2.default.oneOf(['time', 'range'])
|
560 | }), _class.defaultProps = {
|
561 | prefix: 'next-',
|
562 | rtl: false,
|
563 | locale: timePickerLocale,
|
564 | size: 'medium',
|
565 | format: 'HH:mm:ss',
|
566 | hasClear: true,
|
567 | disabled: false,
|
568 | hasBorder: true,
|
569 | type: 'time',
|
570 | popupAlign: 'tl bl',
|
571 | popupTriggerType: 'click',
|
572 | onChange: noop,
|
573 | onVisibleChange: noop
|
574 | }, _initialiseProps = function _initialiseProps() {
|
575 | var _this3 = this;
|
576 |
|
577 | this.getInitValue = function () {
|
578 | var props = _this3.props;
|
579 | var type = props.type,
|
580 | value = props.value,
|
581 | defaultValue = props.defaultValue;
|
582 |
|
583 |
|
584 | var val = type === _constant.TIME_PICKER_TYPE.RANGE ? [null, null] : null;
|
585 |
|
586 | val = 'value' in props ? value : 'defaultValue' in props ? defaultValue : val;
|
587 |
|
588 | return _this3.checkValue(val);
|
589 | };
|
590 |
|
591 | this.getInitRangeInputState = function () {
|
592 | return {
|
593 | justBeginInput: _this3.isEnabled(),
|
594 | inputType: _this3.isEnabled(0) ? _constant.TIME_INPUT_TYPE.BEGIN : _constant.TIME_INPUT_TYPE.END
|
595 | };
|
596 | };
|
597 |
|
598 | this.onKeyDown = function (e) {
|
599 | if (e.keyCode === _util.KEYCODE.ENTER) {
|
600 | var inputValue = _this3.state.inputValue;
|
601 |
|
602 | _this3.handleChange(inputValue, 'KEYDOWN_ENTER');
|
603 | _this3.onClick();
|
604 | return;
|
605 | }
|
606 |
|
607 | var _state2 = _this3.state,
|
608 | value = _state2.value,
|
609 | inputStr = _state2.inputStr,
|
610 | inputType = _state2.inputType,
|
611 | isRange = _state2.isRange;
|
612 | var _props3 = _this3.props,
|
613 | format = _props3.format,
|
614 | _props3$hourStep = _props3.hourStep,
|
615 | hourStep = _props3$hourStep === undefined ? 1 : _props3$hourStep,
|
616 | _props3$minuteStep = _props3.minuteStep,
|
617 | minuteStep = _props3$minuteStep === undefined ? 1 : _props3$minuteStep,
|
618 | _props3$secondStep = _props3.secondStep,
|
619 | secondStep = _props3$secondStep === undefined ? 1 : _props3$secondStep,
|
620 | disabledMinutes = _props3.disabledMinutes,
|
621 | disabledSeconds = _props3.disabledSeconds;
|
622 |
|
623 |
|
624 | var unit = 'second';
|
625 |
|
626 | if (disabledSeconds) {
|
627 | unit = disabledMinutes ? 'hour' : 'minute';
|
628 | }
|
629 |
|
630 | var timeStr = (0, _utils.onTimeKeydown)(e, {
|
631 | format: format,
|
632 | timeInputStr: isRange ? inputStr[inputType] : inputStr,
|
633 | steps: {
|
634 | hour: hourStep,
|
635 | minute: minuteStep,
|
636 | second: secondStep
|
637 | },
|
638 | value: value
|
639 | }, unit);
|
640 |
|
641 | if (!timeStr) return;
|
642 | var newInputStr = timeStr;
|
643 | if (isRange) {
|
644 | newInputStr = inputStr;
|
645 | newInputStr[inputType] = timeStr;
|
646 | }
|
647 |
|
648 | _this3.handleChange(newInputStr, 'KEYDOWN_CODE');
|
649 | };
|
650 |
|
651 | this.onVisibleChange = function (visible, type) {
|
652 | if (!('visible' in _this3.props)) {
|
653 | _this3.setState({
|
654 | visible: visible
|
655 | });
|
656 | }
|
657 | _this3.props.onVisibleChange(visible, type);
|
658 | };
|
659 |
|
660 | this.onClick = function () {
|
661 | var _state3 = _this3.state,
|
662 | visible = _state3.visible,
|
663 | inputType = _state3.inputType;
|
664 |
|
665 |
|
666 | if (!visible) {
|
667 | _this3.onVisibleChange(true);
|
668 | _this3.handleInputFocus(inputType);
|
669 | }
|
670 | };
|
671 |
|
672 | this.handleVisibleChange = function (visible, targetType) {
|
673 | if (targetType === 'docClick') {
|
674 |
|
675 | if (!visible) {
|
676 | _this3.handleChange(_this3.state.curValue, 'VISIBLE_CHANGE');
|
677 | }
|
678 | _this3.onVisibleChange(visible);
|
679 | }
|
680 | };
|
681 |
|
682 | this.handleInputFocus = function (inputType) {
|
683 | var inputEl = _this3.dateInput && _this3.dateInput.input;
|
684 |
|
685 | if (_this3.state.isRange) {
|
686 | inputEl = inputEl && inputEl[inputType];
|
687 | }
|
688 |
|
689 | inputEl && inputEl.focus();
|
690 | };
|
691 |
|
692 | this.onOk = function () {
|
693 | var curValue = _this3.state.curValue;
|
694 |
|
695 | var checkedValue = _this3.checkValue(curValue);
|
696 |
|
697 | _util.func.invoke(_this3.props, 'onOk', _this3.getOutputArgs(checkedValue));
|
698 |
|
699 | _this3.setState({ value: checkedValue });
|
700 | _this3.handleChange(checkedValue, 'CLICK_OK');
|
701 | };
|
702 |
|
703 | this.onInputTypeChange = function (idx) {
|
704 | var _state4 = _this3.state,
|
705 | inputType = _state4.inputType,
|
706 | visible = _state4.visible;
|
707 |
|
708 |
|
709 | if (idx !== inputType) {
|
710 | _this3.setState({
|
711 | inputType: idx,
|
712 | justBeginInput: !(idx !== null && visible)
|
713 | });
|
714 | }
|
715 | };
|
716 |
|
717 | this.checkValue = function (value, strictly) {
|
718 | var inputType = _this3.state.inputType;
|
719 |
|
720 | var formatter = function formatter(v) {
|
721 | return typeof v === 'string' ? (0, _util.datejs)(v, 'HH:mm:ss') : v;
|
722 | };
|
723 | var formattedValue = Array.isArray(value) ? value.map(function (v) {
|
724 | return formatter(v);
|
725 | }) : formatter(value);
|
726 |
|
727 | return _this3.props.type === _constant.TIME_PICKER_TYPE.RANGE ? checkRangeDate(formattedValue, inputType, _this3.props.disabled, strictly) : checkDate(formattedValue);
|
728 | };
|
729 |
|
730 | this.getOutputArgs = function (value) {
|
731 | var format = _this3.props.format;
|
732 |
|
733 | return [value, (0, _util2.fmtValue)(value, format)];
|
734 | };
|
735 |
|
736 | this.onChange = function (v) {
|
737 | var state = _this3.state,
|
738 | props = _this3.props;
|
739 | var format = props.format;
|
740 |
|
741 |
|
742 | var nextValue = v === undefined ? state.value : v;
|
743 | var value = _this3.checkValue(nextValue);
|
744 |
|
745 | _this3.setState({
|
746 | curValue: value,
|
747 | preValue: value,
|
748 | inputStr: (0, _util2.fmtValue)(value, format),
|
749 | inputValue: (0, _util2.fmtValue)(value, format)
|
750 | });
|
751 |
|
752 | _util.func.invoke(_this3.props, 'onChange', _this3.getOutputArgs(nextValue));
|
753 | };
|
754 |
|
755 | this.shouldSwitchInput = function (value) {
|
756 | var _state5 = _this3.state,
|
757 | inputType = _state5.inputType,
|
758 | justBeginInput = _state5.justBeginInput;
|
759 |
|
760 | var idx = justBeginInput ? (0, _util2.switchInputType)(inputType) : value.indexOf(null);
|
761 |
|
762 | if (idx !== -1 && _this3.isEnabled(idx)) {
|
763 | _this3.onInputTypeChange(idx);
|
764 | _this3.handleInputFocus(idx);
|
765 | return true;
|
766 | }
|
767 |
|
768 | return false;
|
769 | };
|
770 |
|
771 | this.handleChange = function (v, eventType) {
|
772 | var format = _this3.props.format;
|
773 | var _state6 = _this3.state,
|
774 | isRange = _state6.isRange,
|
775 | value = _state6.value,
|
776 | preValue = _state6.preValue;
|
777 |
|
778 | var forceEvents = ['KEYDOWN_ENTER', 'CLICK_PRESET', 'CLICK_OK', 'INPUT_CLEAR', 'VISIBLE_CHANGE'];
|
779 | var isTemporary = isRange && !forceEvents.includes(eventType);
|
780 |
|
781 |
|
782 | v = eventType === 'VISIBLE_CHANGE' ? value : _this3.checkValue(v, !isTemporary);
|
783 |
|
784 | var stringV = (0, _util2.fmtValue)(v, format);
|
785 |
|
786 | _this3.setState({
|
787 | curValue: v,
|
788 | inputStr: stringV,
|
789 | inputValue: stringV,
|
790 | inputing: false,
|
791 | selecting: eventType === 'start' || eventType === 'end'
|
792 | });
|
793 |
|
794 | if (!isTemporary) {
|
795 | _this3.setState({
|
796 | value: v
|
797 | }, function () {
|
798 |
|
799 |
|
800 |
|
801 |
|
802 | var shouldHidePanel = ['CLICK_PRESET', 'VISIBLE_CHANGE', 'KEYDOWN_ENTER', 'INPUT_CLEAR', 'CLICK_OK'].includes(eventType) || isRange && !_this3.shouldSwitchInput(v);
|
803 | if (shouldHidePanel) {
|
804 | _this3.onVisibleChange(false);
|
805 | }
|
806 |
|
807 | if ((0, _util2.isValueChanged)(v, preValue)) {
|
808 | _this3.onChange(v);
|
809 | }
|
810 | });
|
811 | }
|
812 | };
|
813 |
|
814 | this.isEnabled = function (idx) {
|
815 | var disabled = _this3.props.disabled;
|
816 |
|
817 |
|
818 | return Array.isArray(disabled) ? idx === undefined ? !disabled[0] && !disabled[1] : !disabled[idx] : !disabled;
|
819 | };
|
820 |
|
821 | this.handleClear = function () {
|
822 | |
823 |
|
824 |
|
825 |
|
826 | _this3.clearTimeoutId = setTimeout(function () {
|
827 | _this3.handleInputFocus(0);
|
828 | });
|
829 |
|
830 | _this3.setState({
|
831 | inputType: _constant.TIME_INPUT_TYPE.BEGIN,
|
832 | justBeginInput: _this3.isEnabled()
|
833 | });
|
834 | };
|
835 |
|
836 | this.handleInput = function (v, eventType) {
|
837 | var isRange = _this3.state.isRange;
|
838 |
|
839 | if (eventType === 'clear') {
|
840 | _this3.handleChange(v, 'INPUT_CLEAR');
|
841 |
|
842 | if (isRange) {
|
843 | _this3.handleClear();
|
844 | }
|
845 | } else {
|
846 | _this3.setState({
|
847 | inputStr: v,
|
848 | inputValue: v,
|
849 | curValue: _this3.checkValue(v),
|
850 | inputing: true,
|
851 | visible: true
|
852 | });
|
853 | }
|
854 | };
|
855 | }, _temp);
|
856 | TimePicker2.displayName = 'TimePicker2';
|
857 | exports.default = (0, _reactLifecyclesCompat.polyfill)(TimePicker2);
|
858 | module.exports = exports['default']; |
\ | No newline at end of file |