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