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;
|
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 _classnames4 = require('classnames');
|
38 |
|
39 | var _classnames5 = _interopRequireDefault(_classnames4);
|
40 |
|
41 | var _moment = require('moment');
|
42 |
|
43 | var _moment2 = _interopRequireDefault(_moment);
|
44 |
|
45 | var _overlay = require('../overlay');
|
46 |
|
47 | var _overlay2 = _interopRequireDefault(_overlay);
|
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 _calendar = require('../calendar');
|
58 |
|
59 | var _calendar2 = _interopRequireDefault(_calendar);
|
60 |
|
61 | var _zhCn = require('../locale/zh-cn');
|
62 |
|
63 | var _zhCn2 = _interopRequireDefault(_zhCn);
|
64 |
|
65 | var _util = require('../util');
|
66 |
|
67 | var _util2 = require('./util');
|
68 |
|
69 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
70 |
|
71 | var Popup = _overlay2.default.Popup;
|
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | var YearPicker = (_temp = _class = function (_Component) {
|
78 | (0, _inherits3.default)(YearPicker, _Component);
|
79 |
|
80 | function YearPicker(props, context) {
|
81 | (0, _classCallCheck3.default)(this, YearPicker);
|
82 |
|
83 | var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props, context));
|
84 |
|
85 | _this.onValueChange = function (newValue) {
|
86 | var ret = _this.state.inputAsString && newValue ? newValue.format(_this.props.format) : newValue;
|
87 | _this.props.onChange(ret);
|
88 | };
|
89 |
|
90 | _this.onSelectCalendarPanel = function (value) {
|
91 |
|
92 | var prevSelectedMonth = _this.state.value;
|
93 | var selectedMonth = value.clone().month(0).date(1).hour(0).minute(0).second(0);
|
94 |
|
95 | _this.handleChange(selectedMonth, prevSelectedMonth, { inputing: false }, function () {
|
96 | _this.onVisibleChange(false, 'calendarSelect');
|
97 | });
|
98 | };
|
99 |
|
100 | _this.clearValue = function () {
|
101 | _this.setState({
|
102 | dateInputStr: ''
|
103 | });
|
104 |
|
105 | _this.handleChange(null, _this.state.value);
|
106 | };
|
107 |
|
108 | _this.onDateInputChange = function (inputStr, e, eventType) {
|
109 | if (eventType === 'clear' || !inputStr) {
|
110 | e.stopPropagation();
|
111 | _this.clearValue();
|
112 | } else {
|
113 | _this.setState({
|
114 | dateInputStr: inputStr,
|
115 | inputing: true
|
116 | });
|
117 | }
|
118 | };
|
119 |
|
120 | _this.onDateInputBlur = function () {
|
121 | var dateInputStr = _this.state.dateInputStr;
|
122 |
|
123 | if (dateInputStr) {
|
124 | var _this$props = _this.props,
|
125 | disabledDate = _this$props.disabledDate,
|
126 | format = _this$props.format;
|
127 |
|
128 | var parsed = (0, _moment2.default)(dateInputStr, format, true);
|
129 |
|
130 | _this.setState({
|
131 | dateInputStr: '',
|
132 | inputing: false
|
133 | });
|
134 |
|
135 | if (parsed.isValid() && !disabledDate(parsed, 'year')) {
|
136 | _this.handleChange(parsed, _this.state.value);
|
137 | }
|
138 | }
|
139 | };
|
140 |
|
141 | _this.onKeyDown = function (e) {
|
142 | var format = _this.props.format;
|
143 | var _this$state = _this.state,
|
144 | dateInputStr = _this$state.dateInputStr,
|
145 | value = _this$state.value;
|
146 |
|
147 | var dateStr = (0, _util2.onDateKeydown)(e, { format: format, dateInputStr: dateInputStr, value: value }, 'year');
|
148 | if (!dateStr) return;
|
149 | _this.onDateInputChange(dateStr);
|
150 | };
|
151 |
|
152 | _this.handleChange = function (newValue, prevValue) {
|
153 | var others = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
154 | var callback = arguments[3];
|
155 |
|
156 | if (!('value' in _this.props)) {
|
157 | _this.setState((0, _extends3.default)({
|
158 | value: newValue
|
159 | }, others));
|
160 | } else {
|
161 | _this.setState((0, _extends3.default)({}, others));
|
162 | }
|
163 |
|
164 | var format = _this.props.format;
|
165 |
|
166 |
|
167 | var newValueOf = newValue ? newValue.format(format) : null;
|
168 | var preValueOf = prevValue ? prevValue.format(format) : null;
|
169 |
|
170 | if (newValueOf !== preValueOf) {
|
171 | _this.onValueChange(newValue);
|
172 | if (typeof callback === 'function') {
|
173 | return callback();
|
174 | }
|
175 | }
|
176 | };
|
177 |
|
178 | _this.onVisibleChange = function (visible, reason) {
|
179 | if (!('visible' in _this.props)) {
|
180 | _this.setState({
|
181 | visible: visible
|
182 | });
|
183 | }
|
184 | _this.props.onVisibleChange(visible, reason);
|
185 | };
|
186 |
|
187 | _this.state = {
|
188 | value: (0, _util2.formatDateValue)(props.defaultValue, props.format),
|
189 | dateInputStr: '',
|
190 | inputing: false,
|
191 | visible: props.defaultVisible,
|
192 | inputAsString: typeof props.defaultValue === 'string'
|
193 | };
|
194 | return _this;
|
195 | }
|
196 |
|
197 | YearPicker.getDerivedStateFromProps = function getDerivedStateFromProps(props) {
|
198 | var states = {};
|
199 | if ('value' in props) {
|
200 | states.value = (0, _util2.formatDateValue)(props.value, props.format);
|
201 | states.inputAsString = typeof props.value === 'string';
|
202 | }
|
203 |
|
204 | if ('visible' in props) {
|
205 | states.visible = props.visible;
|
206 | }
|
207 |
|
208 | return states;
|
209 | };
|
210 |
|
211 | YearPicker.prototype.renderPreview = function renderPreview(others) {
|
212 | var _props = this.props,
|
213 | prefix = _props.prefix,
|
214 | format = _props.format,
|
215 | className = _props.className,
|
216 | renderPreview = _props.renderPreview;
|
217 | var value = this.state.value;
|
218 |
|
219 | var previewCls = (0, _classnames5.default)(className, prefix + 'form-preview');
|
220 |
|
221 | var label = value ? value.format(format) : '';
|
222 |
|
223 | if (typeof renderPreview === 'function') {
|
224 | return _react2.default.createElement(
|
225 | 'div',
|
226 | (0, _extends3.default)({}, others, { className: previewCls }),
|
227 | renderPreview(value, this.props)
|
228 | );
|
229 | }
|
230 |
|
231 | return _react2.default.createElement(
|
232 | 'p',
|
233 | (0, _extends3.default)({}, others, { className: previewCls }),
|
234 | label
|
235 | );
|
236 | };
|
237 |
|
238 | YearPicker.prototype.render = function render() {
|
239 | var _classnames, _classnames2, _classnames3;
|
240 |
|
241 | var _props2 = this.props,
|
242 | prefix = _props2.prefix,
|
243 | rtl = _props2.rtl,
|
244 | locale = _props2.locale,
|
245 | label = _props2.label,
|
246 | state = _props2.state,
|
247 | format = _props2.format,
|
248 | disabledDate = _props2.disabledDate,
|
249 | footerRender = _props2.footerRender,
|
250 | placeholder = _props2.placeholder,
|
251 | size = _props2.size,
|
252 | disabled = _props2.disabled,
|
253 | hasClear = _props2.hasClear,
|
254 | popupTriggerType = _props2.popupTriggerType,
|
255 | popupAlign = _props2.popupAlign,
|
256 | popupContainer = _props2.popupContainer,
|
257 | popupStyle = _props2.popupStyle,
|
258 | popupClassName = _props2.popupClassName,
|
259 | popupProps = _props2.popupProps,
|
260 | popupComponent = _props2.popupComponent,
|
261 | popupContent = _props2.popupContent,
|
262 | followTrigger = _props2.followTrigger,
|
263 | className = _props2.className,
|
264 | inputProps = _props2.inputProps,
|
265 | dateInputAriaLabel = _props2.dateInputAriaLabel,
|
266 | yearCellRender = _props2.yearCellRender,
|
267 | isPreview = _props2.isPreview,
|
268 | others = (0, _objectWithoutProperties3.default)(_props2, ['prefix', 'rtl', 'locale', 'label', 'state', 'format', 'disabledDate', 'footerRender', 'placeholder', 'size', 'disabled', 'hasClear', 'popupTriggerType', 'popupAlign', 'popupContainer', 'popupStyle', 'popupClassName', 'popupProps', 'popupComponent', 'popupContent', 'followTrigger', 'className', 'inputProps', 'dateInputAriaLabel', 'yearCellRender', 'isPreview']);
|
269 | var _state = this.state,
|
270 | visible = _state.visible,
|
271 | value = _state.value,
|
272 | dateInputStr = _state.dateInputStr,
|
273 | inputing = _state.inputing;
|
274 |
|
275 |
|
276 | var yearPickerCls = (0, _classnames5.default)((_classnames = {}, _classnames[prefix + 'year-picker'] = true, _classnames), className);
|
277 |
|
278 | var triggerInputCls = (0, _classnames5.default)((_classnames2 = {}, _classnames2[prefix + 'year-picker-input'] = true, _classnames2[prefix + 'error'] = false, _classnames2));
|
279 |
|
280 | var panelBodyClassName = (0, _classnames5.default)((_classnames3 = {}, _classnames3[prefix + 'year-picker-body'] = true, _classnames3));
|
281 |
|
282 | if (rtl) {
|
283 | others.dir = 'rtl';
|
284 | }
|
285 |
|
286 | if (isPreview) {
|
287 | return this.renderPreview(_util.obj.pickOthers(others, YearPicker.PropTypes));
|
288 | }
|
289 |
|
290 | var panelInputCls = prefix + 'year-picker-panel-input';
|
291 |
|
292 | var sharedInputProps = (0, _extends3.default)({}, inputProps, {
|
293 | size: size,
|
294 | disabled: disabled,
|
295 | onChange: this.onDateInputChange,
|
296 | onBlur: this.onDateInputBlur,
|
297 | onPressEnter: this.onDateInputBlur,
|
298 | onKeyDown: this.onKeyDown
|
299 | });
|
300 |
|
301 | var dateInputValue = inputing ? dateInputStr : value && value.format(format) || '';
|
302 | var triggerInputValue = dateInputValue;
|
303 |
|
304 | var dateInput = _react2.default.createElement(_input2.default, (0, _extends3.default)({}, sharedInputProps, {
|
305 | 'aria-label': dateInputAriaLabel,
|
306 | value: dateInputValue,
|
307 | placeholder: format,
|
308 | className: panelInputCls
|
309 | }));
|
310 |
|
311 | var datePanel = _react2.default.createElement(_calendar2.default, {
|
312 | shape: 'panel',
|
313 | modes: ['year'],
|
314 | value: value,
|
315 | yearCellRender: yearCellRender,
|
316 | onSelect: this.onSelectCalendarPanel,
|
317 | disabledDate: disabledDate
|
318 | });
|
319 |
|
320 | var panelBody = datePanel;
|
321 | var panelFooter = footerRender();
|
322 |
|
323 | var allowClear = value && hasClear;
|
324 | var trigger = _react2.default.createElement(
|
325 | 'div',
|
326 | { className: prefix + 'year-picker-trigger' },
|
327 | _react2.default.createElement(_input2.default, (0, _extends3.default)({}, sharedInputProps, {
|
328 | label: label,
|
329 | state: state,
|
330 | value: triggerInputValue,
|
331 | role: 'combobox',
|
332 | 'aria-expanded': visible,
|
333 | readOnly: true,
|
334 | placeholder: placeholder || locale.yearPlaceholder,
|
335 | hint: _react2.default.createElement(_icon2.default, {
|
336 | type: 'calendar',
|
337 | className: prefix + 'date-picker-symbol-calendar-icon'
|
338 | }),
|
339 | hasClear: allowClear,
|
340 | className: triggerInputCls
|
341 | }))
|
342 | );
|
343 |
|
344 | var PopupComponent = popupComponent ? popupComponent : Popup;
|
345 |
|
346 | return _react2.default.createElement(
|
347 | 'div',
|
348 | (0, _extends3.default)({}, _util.obj.pickOthers(YearPicker.propTypes, others), {
|
349 | className: yearPickerCls
|
350 | }),
|
351 | _react2.default.createElement(
|
352 | PopupComponent,
|
353 | (0, _extends3.default)({
|
354 | autoFocus: true,
|
355 | align: popupAlign
|
356 | }, popupProps, {
|
357 | followTrigger: followTrigger,
|
358 | disabled: disabled,
|
359 | visible: visible,
|
360 | onVisibleChange: this.onVisibleChange,
|
361 | triggerType: popupTriggerType,
|
362 | container: popupContainer,
|
363 | style: popupStyle,
|
364 | className: popupClassName,
|
365 | trigger: trigger
|
366 | }),
|
367 | popupContent ? popupContent : _react2.default.createElement(
|
368 | 'div',
|
369 | { dir: others.dir, className: panelBodyClassName },
|
370 | _react2.default.createElement(
|
371 | 'div',
|
372 | {
|
373 | className: prefix + 'year-picker-panel-header'
|
374 | },
|
375 | dateInput
|
376 | ),
|
377 | panelBody,
|
378 | panelFooter
|
379 | )
|
380 | )
|
381 | );
|
382 | };
|
383 |
|
384 | return YearPicker;
|
385 | }(_react.Component), _class.propTypes = {
|
386 | prefix: _propTypes2.default.string,
|
387 | rtl: _propTypes2.default.bool,
|
388 | |
389 |
|
390 |
|
391 | label: _propTypes2.default.node,
|
392 | |
393 |
|
394 |
|
395 | state: _propTypes2.default.oneOf(['success', 'loading', 'error']),
|
396 | |
397 |
|
398 |
|
399 | placeholder: _propTypes2.default.string,
|
400 | |
401 |
|
402 |
|
403 | value: _util2.checkDateValue,
|
404 | |
405 |
|
406 |
|
407 | defaultValue: _util2.checkDateValue,
|
408 | |
409 |
|
410 |
|
411 | format: _propTypes2.default.string,
|
412 | |
413 |
|
414 |
|
415 |
|
416 |
|
417 |
|
418 | disabledDate: _propTypes2.default.func,
|
419 | |
420 |
|
421 |
|
422 |
|
423 | footerRender: _propTypes2.default.func,
|
424 | |
425 |
|
426 |
|
427 |
|
428 | onChange: _propTypes2.default.func,
|
429 | |
430 |
|
431 |
|
432 | size: _propTypes2.default.oneOf(['small', 'medium', 'large']),
|
433 | |
434 |
|
435 |
|
436 | disabled: _propTypes2.default.bool,
|
437 | |
438 |
|
439 |
|
440 | hasClear: _propTypes2.default.bool,
|
441 | |
442 |
|
443 |
|
444 | visible: _propTypes2.default.bool,
|
445 | |
446 |
|
447 |
|
448 | defaultVisible: _propTypes2.default.bool,
|
449 | |
450 |
|
451 |
|
452 |
|
453 |
|
454 | onVisibleChange: _propTypes2.default.func,
|
455 | |
456 |
|
457 |
|
458 | popupTriggerType: _propTypes2.default.oneOf(['click', 'hover']),
|
459 | |
460 |
|
461 |
|
462 | popupAlign: _propTypes2.default.string,
|
463 | |
464 |
|
465 |
|
466 |
|
467 |
|
468 | popupContainer: _propTypes2.default.any,
|
469 | |
470 |
|
471 |
|
472 | popupStyle: _propTypes2.default.object,
|
473 | |
474 |
|
475 |
|
476 | popupClassName: _propTypes2.default.string,
|
477 | |
478 |
|
479 |
|
480 | popupProps: _propTypes2.default.object,
|
481 | |
482 |
|
483 |
|
484 | followTrigger: _propTypes2.default.bool,
|
485 | |
486 |
|
487 |
|
488 | inputProps: _propTypes2.default.object,
|
489 | yearCellRender: _propTypes2.default.func,
|
490 | |
491 |
|
492 |
|
493 | dateInputAriaLabel: _propTypes2.default.string,
|
494 | |
495 |
|
496 |
|
497 | isPreview: _propTypes2.default.bool,
|
498 | |
499 |
|
500 |
|
501 |
|
502 | renderPreview: _propTypes2.default.func,
|
503 | locale: _propTypes2.default.object,
|
504 | className: _propTypes2.default.string,
|
505 | name: _propTypes2.default.string,
|
506 | popupComponent: _propTypes2.default.elementType,
|
507 | popupContent: _propTypes2.default.node
|
508 | }, _class.defaultProps = {
|
509 | prefix: 'next-',
|
510 | rtl: false,
|
511 | format: 'YYYY',
|
512 | size: 'medium',
|
513 | disabledDate: function disabledDate() {
|
514 | return false;
|
515 | },
|
516 | footerRender: function footerRender() {
|
517 | return null;
|
518 | },
|
519 | hasClear: true,
|
520 | popupTriggerType: 'click',
|
521 | popupAlign: 'tl tl',
|
522 | locale: _zhCn2.default.DatePicker,
|
523 | onChange: _util.func.noop,
|
524 | onVisibleChange: _util.func.noop
|
525 | }, _temp);
|
526 | YearPicker.displayName = 'YearPicker';
|
527 | exports.default = (0, _reactLifecyclesCompat.polyfill)(YearPicker);
|
528 | module.exports = exports['default']; |
\ | No newline at end of file |