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 _extends2 = require('babel-runtime/helpers/extends');
|
10 |
|
11 | var _extends3 = _interopRequireDefault(_extends2);
|
12 |
|
13 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
14 |
|
15 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
16 |
|
17 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
18 |
|
19 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
20 |
|
21 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
22 |
|
23 | var _inherits3 = _interopRequireDefault(_inherits2);
|
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 _moment = require('moment');
|
42 |
|
43 | var _moment2 = _interopRequireDefault(_moment);
|
44 |
|
45 | var _configProvider = require('../config-provider');
|
46 |
|
47 | var _configProvider2 = _interopRequireDefault(_configProvider);
|
48 |
|
49 | var _input = require('../input');
|
50 |
|
51 | var _input2 = _interopRequireDefault(_input);
|
52 |
|
53 | var _icon = require('../icon');
|
54 |
|
55 | var _icon2 = _interopRequireDefault(_icon);
|
56 |
|
57 | var _overlay = require('../overlay');
|
58 |
|
59 | var _overlay2 = _interopRequireDefault(_overlay);
|
60 |
|
61 | var _zhCn = require('../locale/zh-cn');
|
62 |
|
63 | var _zhCn2 = _interopRequireDefault(_zhCn);
|
64 |
|
65 | var _util = require('../util');
|
66 |
|
67 | var _panel = require('./panel');
|
68 |
|
69 | var _panel2 = _interopRequireDefault(_panel);
|
70 |
|
71 | var _utils = require('./utils');
|
72 |
|
73 | var _util2 = require('../date-picker/util');
|
74 |
|
75 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
76 |
|
77 | var Popup = _overlay2.default.Popup;
|
78 | var noop = _util.func.noop;
|
79 |
|
80 | var timePickerLocale = _zhCn2.default.TimePicker;
|
81 |
|
82 |
|
83 |
|
84 |
|
85 | var TimePicker = (_temp = _class = function (_Component) {
|
86 | (0, _inherits3.default)(TimePicker, _Component);
|
87 |
|
88 | function TimePicker(props, context) {
|
89 | (0, _classCallCheck3.default)(this, TimePicker);
|
90 |
|
91 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props, context));
|
92 |
|
93 | _initialiseProps.call(_this);
|
94 |
|
95 | var value = (0, _utils.formatDateValue)(props.value || props.defaultValue, props.format);
|
96 | _this.inputAsString = typeof (props.value || props.defaultValue) === 'string';
|
97 | _this.state = {
|
98 | value: value,
|
99 | inputStr: '',
|
100 | inputing: false,
|
101 | visible: props.visible || props.defaultVisible
|
102 | };
|
103 | return _this;
|
104 | }
|
105 |
|
106 | TimePicker.getDerivedStateFromProps = function getDerivedStateFromProps(props) {
|
107 | var state = {};
|
108 |
|
109 | if ('value' in props) {
|
110 | state.value = (0, _utils.formatDateValue)(props.value, props.format);
|
111 | }
|
112 |
|
113 | if ('visible' in props) {
|
114 | state.visible = props.visible;
|
115 | }
|
116 |
|
117 | return state;
|
118 | };
|
119 |
|
120 | TimePicker.prototype.onValueChange = function onValueChange(newValue) {
|
121 | var ret = this.inputAsString && newValue ? newValue.format(this.props.format) : newValue;
|
122 | this.props.onChange(ret);
|
123 | };
|
124 |
|
125 | TimePicker.prototype.renderPreview = function renderPreview(others) {
|
126 | var _props = this.props,
|
127 | prefix = _props.prefix,
|
128 | format = _props.format,
|
129 | className = _props.className,
|
130 | renderPreview = _props.renderPreview;
|
131 | var value = this.state.value;
|
132 |
|
133 | var previewCls = (0, _classnames4.default)(className, prefix + 'form-preview');
|
134 |
|
135 | var label = value ? value.format(format) : '';
|
136 |
|
137 | if (typeof renderPreview === 'function') {
|
138 | return _react2.default.createElement(
|
139 | 'div',
|
140 | (0, _extends3.default)({}, others, { className: previewCls }),
|
141 | renderPreview(value, this.props)
|
142 | );
|
143 | }
|
144 |
|
145 | return _react2.default.createElement(
|
146 | 'p',
|
147 | (0, _extends3.default)({}, others, { className: previewCls }),
|
148 | label
|
149 | );
|
150 | };
|
151 |
|
152 | TimePicker.prototype.render = function render() {
|
153 | var _classnames, _classnames2;
|
154 |
|
155 | var _props2 = this.props,
|
156 | prefix = _props2.prefix,
|
157 | label = _props2.label,
|
158 | state = _props2.state,
|
159 | placeholder = _props2.placeholder,
|
160 | size = _props2.size,
|
161 | format = _props2.format,
|
162 | hasClear = _props2.hasClear,
|
163 | hourStep = _props2.hourStep,
|
164 | minuteStep = _props2.minuteStep,
|
165 | secondStep = _props2.secondStep,
|
166 | disabledHours = _props2.disabledHours,
|
167 | disabledMinutes = _props2.disabledMinutes,
|
168 | disabledSeconds = _props2.disabledSeconds,
|
169 | renderTimeMenuItems = _props2.renderTimeMenuItems,
|
170 | inputProps = _props2.inputProps,
|
171 | popupAlign = _props2.popupAlign,
|
172 | popupTriggerType = _props2.popupTriggerType,
|
173 | popupContainer = _props2.popupContainer,
|
174 | popupStyle = _props2.popupStyle,
|
175 | popupClassName = _props2.popupClassName,
|
176 | popupProps = _props2.popupProps,
|
177 | popupComponent = _props2.popupComponent,
|
178 | popupContent = _props2.popupContent,
|
179 | followTrigger = _props2.followTrigger,
|
180 | disabled = _props2.disabled,
|
181 | className = _props2.className,
|
182 | locale = _props2.locale,
|
183 | rtl = _props2.rtl,
|
184 | isPreview = _props2.isPreview,
|
185 | 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', 'popupContent', 'followTrigger', 'disabled', 'className', 'locale', 'rtl', 'isPreview']);
|
186 | var _state = this.state,
|
187 | value = _state.value,
|
188 | inputStr = _state.inputStr,
|
189 | inputing = _state.inputing,
|
190 | visible = _state.visible;
|
191 |
|
192 |
|
193 | var triggerCls = (0, _classnames4.default)((_classnames = {}, _classnames[prefix + 'time-picker-trigger'] = true, _classnames));
|
194 |
|
195 | if (rtl) {
|
196 | others.dir = 'rtl';
|
197 | }
|
198 |
|
199 | if (isPreview) {
|
200 | return this.renderPreview(_util.obj.pickOthers(others, TimePicker.PropTypes));
|
201 | }
|
202 |
|
203 | var inputValue = inputing ? inputStr : value && value.format(format) || '';
|
204 | var sharedInputProps = (0, _extends3.default)({}, inputProps, {
|
205 | size: size,
|
206 | disabled: disabled,
|
207 | value: inputValue,
|
208 | hasClear: value && hasClear,
|
209 | onChange: this.onInputChange,
|
210 | onBlur: this.onInputBlur,
|
211 | onPressEnter: this.onInputBlur,
|
212 | onKeyDown: this.onKeyown,
|
213 | hint: _react2.default.createElement(_icon2.default, {
|
214 | type: 'clock',
|
215 | className: prefix + 'time-picker-symbol-clock-icon'
|
216 | })
|
217 | });
|
218 |
|
219 | var triggerInput = _react2.default.createElement(
|
220 | 'div',
|
221 | { className: triggerCls },
|
222 | _react2.default.createElement(_input2.default, (0, _extends3.default)({}, sharedInputProps, {
|
223 | label: label,
|
224 | state: state,
|
225 | placeholder: placeholder || locale.placeholder,
|
226 | className: prefix + 'time-picker-input'
|
227 | }))
|
228 | );
|
229 |
|
230 | var panelProps = {
|
231 | prefix: prefix,
|
232 | locale: locale,
|
233 | value: value,
|
234 | disabled: disabled,
|
235 | showHour: format.indexOf('H') > -1,
|
236 | showSecond: format.indexOf('s') > -1,
|
237 | showMinute: format.indexOf('m') > -1,
|
238 | hourStep: hourStep,
|
239 | minuteStep: minuteStep,
|
240 | secondStep: secondStep,
|
241 | disabledHours: disabledHours,
|
242 | disabledMinutes: disabledMinutes,
|
243 | disabledSeconds: disabledSeconds,
|
244 | renderTimeMenuItems: renderTimeMenuItems,
|
245 | onSelect: this.onTimePanelSelect
|
246 | };
|
247 |
|
248 | var classNames = (0, _classnames4.default)((_classnames2 = {}, _classnames2[prefix + 'time-picker'] = true, _classnames2[prefix + 'time-picker-' + size] = size, _classnames2[prefix + 'disabled'] = disabled, _classnames2), className);
|
249 |
|
250 | var PopupComponent = popupComponent ? popupComponent : Popup;
|
251 |
|
252 | return _react2.default.createElement(
|
253 | 'div',
|
254 | (0, _extends3.default)({}, _util.obj.pickOthers(TimePicker.propTypes, others), {
|
255 | className: classNames
|
256 | }),
|
257 | _react2.default.createElement(
|
258 | PopupComponent,
|
259 | (0, _extends3.default)({
|
260 | autoFocus: true,
|
261 | align: popupAlign
|
262 | }, popupProps, {
|
263 | followTrigger: followTrigger,
|
264 | visible: visible,
|
265 | onVisibleChange: this.onVisibleChange,
|
266 | trigger: triggerInput,
|
267 | container: popupContainer,
|
268 | disabled: disabled,
|
269 | triggerType: popupTriggerType,
|
270 | style: popupStyle,
|
271 | className: popupClassName
|
272 | }),
|
273 | popupContent ? popupContent : _react2.default.createElement(
|
274 | 'div',
|
275 | {
|
276 | dir: others.dir,
|
277 | className: prefix + 'time-picker-body'
|
278 | },
|
279 | _react2.default.createElement(
|
280 | 'div',
|
281 | {
|
282 | className: prefix + 'time-picker-panel-header'
|
283 | },
|
284 | _react2.default.createElement(_input2.default, (0, _extends3.default)({}, sharedInputProps, {
|
285 | placeholder: format,
|
286 | className: prefix + 'time-picker-panel-input'
|
287 | }))
|
288 | ),
|
289 | _react2.default.createElement(_panel2.default, panelProps)
|
290 | )
|
291 | )
|
292 | );
|
293 | };
|
294 |
|
295 | return TimePicker;
|
296 | }(_react.Component), _class.propTypes = (0, _extends3.default)({}, _configProvider2.default.propTypes, {
|
297 | prefix: _propTypes2.default.string,
|
298 | rtl: _propTypes2.default.bool,
|
299 | |
300 |
|
301 |
|
302 | label: _propTypes2.default.node,
|
303 | |
304 |
|
305 |
|
306 | state: _propTypes2.default.oneOf(['error', 'success']),
|
307 | |
308 |
|
309 |
|
310 | placeholder: _propTypes2.default.string,
|
311 | |
312 |
|
313 |
|
314 | value: _utils.checkDateValue,
|
315 | |
316 |
|
317 |
|
318 | defaultValue: _utils.checkDateValue,
|
319 | |
320 |
|
321 |
|
322 | size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
|
323 | |
324 |
|
325 |
|
326 | hasClear: _propTypes2.default.bool,
|
327 | |
328 |
|
329 |
|
330 |
|
331 | format: _propTypes2.default.string,
|
332 | |
333 |
|
334 |
|
335 | hourStep: _propTypes2.default.number,
|
336 | |
337 |
|
338 |
|
339 | minuteStep: _propTypes2.default.number,
|
340 | |
341 |
|
342 |
|
343 | secondStep: _propTypes2.default.number,
|
344 | |
345 |
|
346 |
|
347 |
|
348 |
|
349 | disabledHours: _propTypes2.default.func,
|
350 | |
351 |
|
352 |
|
353 |
|
354 |
|
355 | disabledMinutes: _propTypes2.default.func,
|
356 | |
357 |
|
358 |
|
359 |
|
360 |
|
361 | disabledSeconds: _propTypes2.default.func,
|
362 | |
363 |
|
364 |
|
365 |
|
366 |
|
367 |
|
368 |
|
369 |
|
370 |
|
371 |
|
372 |
|
373 | renderTimeMenuItems: _propTypes2.default.func,
|
374 | |
375 |
|
376 |
|
377 | visible: _propTypes2.default.bool,
|
378 | |
379 |
|
380 |
|
381 | defaultVisible: _propTypes2.default.bool,
|
382 | |
383 |
|
384 |
|
385 |
|
386 |
|
387 | popupContainer: _propTypes2.default.any,
|
388 | |
389 |
|
390 |
|
391 | popupAlign: _propTypes2.default.string,
|
392 | |
393 |
|
394 |
|
395 | popupTriggerType: _propTypes2.default.oneOf(['click', 'hover']),
|
396 | |
397 |
|
398 |
|
399 |
|
400 |
|
401 | onVisibleChange: _propTypes2.default.func,
|
402 | |
403 |
|
404 |
|
405 | popupStyle: _propTypes2.default.object,
|
406 | |
407 |
|
408 |
|
409 | popupClassName: _propTypes2.default.string,
|
410 | |
411 |
|
412 |
|
413 | popupProps: _propTypes2.default.object,
|
414 | |
415 |
|
416 |
|
417 | followTrigger: _propTypes2.default.bool,
|
418 | |
419 |
|
420 |
|
421 | disabled: _propTypes2.default.bool,
|
422 | |
423 |
|
424 |
|
425 | isPreview: _propTypes2.default.bool,
|
426 | |
427 |
|
428 |
|
429 |
|
430 | renderPreview: _propTypes2.default.func,
|
431 | |
432 |
|
433 |
|
434 |
|
435 | onChange: _propTypes2.default.func,
|
436 | className: _propTypes2.default.string,
|
437 | name: _propTypes2.default.string,
|
438 | inputProps: _propTypes2.default.object,
|
439 | popupComponent: _propTypes2.default.elementType,
|
440 | popupContent: _propTypes2.default.node
|
441 | }), _class.defaultProps = {
|
442 | prefix: 'next-',
|
443 | rtl: false,
|
444 | locale: timePickerLocale,
|
445 | size: 'medium',
|
446 | format: 'HH:mm:ss',
|
447 | hasClear: true,
|
448 | disabled: false,
|
449 | popupAlign: 'tl tl',
|
450 | popupTriggerType: 'click',
|
451 | onChange: noop,
|
452 | onVisibleChange: noop
|
453 | }, _initialiseProps = function _initialiseProps() {
|
454 | var _this2 = this;
|
455 |
|
456 | this.onClearValue = function () {
|
457 | _this2.setState({
|
458 | value: null
|
459 | });
|
460 | if (_this2.state.value) {
|
461 | _this2.onValueChange(null);
|
462 | }
|
463 | };
|
464 |
|
465 | this.onInputChange = function (inputValue, e, eventType) {
|
466 | if (!('value' in _this2.props)) {
|
467 | if (eventType === 'clear' || !inputValue) {
|
468 | e.stopPropagation();
|
469 | _this2.onClearValue();
|
470 | }
|
471 |
|
472 | _this2.setState({
|
473 | inputStr: inputValue,
|
474 | inputing: true
|
475 | });
|
476 | } else if (eventType === 'clear') {
|
477 |
|
478 | e.stopPropagation();
|
479 | _this2.onValueChange(null);
|
480 | }
|
481 | };
|
482 |
|
483 | this.onInputBlur = function () {
|
484 | var inputStr = _this2.state.inputStr;
|
485 |
|
486 | if (inputStr) {
|
487 | var format = _this2.props.format;
|
488 |
|
489 | var parsed = (0, _moment2.default)(inputStr, format, true);
|
490 | if (parsed.isValid()) {
|
491 | _this2.setState({
|
492 | value: parsed,
|
493 | inputStr: ''
|
494 | });
|
495 | _this2.onValueChange(parsed);
|
496 | }
|
497 | _this2.setState({
|
498 | inputing: false
|
499 | });
|
500 | }
|
501 | };
|
502 |
|
503 | this.onKeyown = function (e) {
|
504 | var _state2 = _this2.state,
|
505 | value = _state2.value,
|
506 | inputStr = _state2.inputStr;
|
507 | var _props3 = _this2.props,
|
508 | format = _props3.format,
|
509 | _props3$hourStep = _props3.hourStep,
|
510 | hourStep = _props3$hourStep === undefined ? 1 : _props3$hourStep,
|
511 | _props3$minuteStep = _props3.minuteStep,
|
512 | minuteStep = _props3$minuteStep === undefined ? 1 : _props3$minuteStep,
|
513 | _props3$secondStep = _props3.secondStep,
|
514 | secondStep = _props3$secondStep === undefined ? 1 : _props3$secondStep,
|
515 | disabledMinutes = _props3.disabledMinutes,
|
516 | disabledSeconds = _props3.disabledSeconds;
|
517 |
|
518 |
|
519 | var unit = 'second';
|
520 |
|
521 | if (disabledSeconds) {
|
522 | unit = disabledMinutes ? 'hour' : 'minute';
|
523 | }
|
524 | var timeStr = (0, _util2.onTimeKeydown)(e, {
|
525 | format: format,
|
526 | timeInputStr: inputStr,
|
527 | steps: {
|
528 | hour: hourStep,
|
529 | minute: minuteStep,
|
530 | second: secondStep
|
531 | },
|
532 | value: value
|
533 | }, unit);
|
534 |
|
535 | if (!timeStr) return;
|
536 |
|
537 | _this2.onInputChange(timeStr);
|
538 | };
|
539 |
|
540 | this.onTimePanelSelect = function (value) {
|
541 | if (!('value' in _this2.props)) {
|
542 | _this2.setState({
|
543 | value: value,
|
544 | inputing: false
|
545 | });
|
546 | }
|
547 | if (!_this2.state.value || value.valueOf() !== _this2.state.value.valueOf()) {
|
548 | _this2.onValueChange(value);
|
549 | }
|
550 | };
|
551 |
|
552 | this.onVisibleChange = function (visible, type) {
|
553 | if (!('visible' in _this2.props)) {
|
554 | _this2.setState({
|
555 | visible: visible
|
556 | });
|
557 | }
|
558 | _this2.props.onVisibleChange(visible, type);
|
559 | };
|
560 | }, _temp);
|
561 | TimePicker.displayName = 'TimePicker';
|
562 | exports.default = (0, _reactLifecyclesCompat.polyfill)(TimePicker);
|
563 | module.exports = exports['default']; |
\ | No newline at end of file |