1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _extends2 = require('babel-runtime/helpers/extends');
|
6 |
|
7 | var _extends3 = _interopRequireDefault(_extends2);
|
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 _react = require('react');
|
22 |
|
23 | var _react2 = _interopRequireDefault(_react);
|
24 |
|
25 | var _reactDom = require('react-dom');
|
26 |
|
27 | var _reactDom2 = _interopRequireDefault(_reactDom);
|
28 |
|
29 | var _propTypes = require('prop-types');
|
30 |
|
31 | var _propTypes2 = _interopRequireDefault(_propTypes);
|
32 |
|
33 | var _KeyCode = require('rc-util/lib/KeyCode');
|
34 |
|
35 | var _KeyCode2 = _interopRequireDefault(_KeyCode);
|
36 |
|
37 | var _reactLifecyclesCompat = require('react-lifecycles-compat');
|
38 |
|
39 | var _DateTable = require('./date/DateTable');
|
40 |
|
41 | var _DateTable2 = _interopRequireDefault(_DateTable);
|
42 |
|
43 | var _CalendarHeader = require('./calendar/CalendarHeader');
|
44 |
|
45 | var _CalendarHeader2 = _interopRequireDefault(_CalendarHeader);
|
46 |
|
47 | var _CalendarFooter = require('./calendar/CalendarFooter');
|
48 |
|
49 | var _CalendarFooter2 = _interopRequireDefault(_CalendarFooter);
|
50 |
|
51 | var _CalendarMixin = require('./mixin/CalendarMixin');
|
52 |
|
53 | var _CommonMixin = require('./mixin/CommonMixin');
|
54 |
|
55 | var _DateInput = require('./date/DateInput');
|
56 |
|
57 | var _DateInput2 = _interopRequireDefault(_DateInput);
|
58 |
|
59 | var _util = require('./util');
|
60 |
|
61 | var _toTime = require('./util/toTime');
|
62 |
|
63 | var _moment = require('moment');
|
64 |
|
65 | var _moment2 = _interopRequireDefault(_moment);
|
66 |
|
67 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
68 |
|
69 | function noop() {}
|
70 |
|
71 | var getMomentObjectIfValid = function getMomentObjectIfValid(date) {
|
72 | if (_moment2['default'].isMoment(date) && date.isValid()) {
|
73 | return date;
|
74 | }
|
75 | return false;
|
76 | };
|
77 |
|
78 | var Calendar = function (_React$Component) {
|
79 | (0, _inherits3['default'])(Calendar, _React$Component);
|
80 |
|
81 | function Calendar(props) {
|
82 | (0, _classCallCheck3['default'])(this, Calendar);
|
83 |
|
84 | var _this = (0, _possibleConstructorReturn3['default'])(this, _React$Component.call(this, props));
|
85 |
|
86 | _initialiseProps.call(_this);
|
87 |
|
88 | _this.state = {
|
89 | mode: _this.props.mode || 'date',
|
90 | value: getMomentObjectIfValid(props.value) || getMomentObjectIfValid(props.defaultValue) || (0, _moment2['default'])(),
|
91 | selectedValue: props.selectedValue || props.defaultSelectedValue
|
92 | };
|
93 | return _this;
|
94 | }
|
95 |
|
96 | Calendar.prototype.componentDidMount = function componentDidMount() {
|
97 | if (this.props.showDateInput) {
|
98 | this.saveFocusElement(_DateInput2['default'].getInstance());
|
99 | }
|
100 | };
|
101 |
|
102 | Calendar.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, state) {
|
103 | var value = nextProps.value,
|
104 | selectedValue = nextProps.selectedValue;
|
105 |
|
106 | var newState = {};
|
107 |
|
108 | if ('mode' in nextProps && state.mode !== nextProps.mode) {
|
109 | newState = { mode: nextProps.mode };
|
110 | }
|
111 | if ('value' in nextProps) {
|
112 | newState.value = getMomentObjectIfValid(value) || getMomentObjectIfValid(nextProps.defaultValue) || (0, _CalendarMixin.getNowByCurrentStateValue)(state.value);
|
113 | }
|
114 | if ('selectedValue' in nextProps) {
|
115 | newState.selectedValue = selectedValue;
|
116 | }
|
117 |
|
118 | return newState;
|
119 | };
|
120 |
|
121 | Calendar.prototype.render = function render() {
|
122 | var props = this.props,
|
123 | state = this.state;
|
124 | var locale = props.locale,
|
125 | prefixCls = props.prefixCls,
|
126 | disabledDate = props.disabledDate,
|
127 | dateInputPlaceholder = props.dateInputPlaceholder,
|
128 | timePicker = props.timePicker,
|
129 | disabledTime = props.disabledTime,
|
130 | clearIcon = props.clearIcon,
|
131 | renderFooter = props.renderFooter,
|
132 | inputMode = props.inputMode,
|
133 | monthCellRender = props.monthCellRender,
|
134 | monthCellContentRender = props.monthCellContentRender;
|
135 | var value = state.value,
|
136 | selectedValue = state.selectedValue,
|
137 | mode = state.mode;
|
138 |
|
139 | var showTimePicker = mode === 'time';
|
140 | var disabledTimeConfig = showTimePicker && disabledTime && timePicker ? (0, _util.getTimeConfig)(selectedValue, disabledTime) : null;
|
141 |
|
142 | var timePickerEle = null;
|
143 |
|
144 | if (timePicker && showTimePicker) {
|
145 | var timePickerProps = (0, _extends3['default'])({
|
146 | showHour: true,
|
147 | showSecond: true,
|
148 | showMinute: true
|
149 | }, timePicker.props, disabledTimeConfig, {
|
150 | onChange: this.onDateInputChange,
|
151 | value: selectedValue,
|
152 | disabledTime: disabledTime
|
153 | });
|
154 |
|
155 | if (timePicker.props.defaultValue !== undefined) {
|
156 | timePickerProps.defaultOpenValue = timePicker.props.defaultValue;
|
157 | }
|
158 |
|
159 | timePickerEle = _react2['default'].cloneElement(timePicker, timePickerProps);
|
160 | }
|
161 |
|
162 | var dateInputElement = props.showDateInput ? _react2['default'].createElement(_DateInput2['default'], {
|
163 | format: this.getFormat(),
|
164 | key: 'date-input',
|
165 | value: value,
|
166 | locale: locale,
|
167 | placeholder: dateInputPlaceholder,
|
168 | showClear: true,
|
169 | disabledTime: disabledTime,
|
170 | disabledDate: disabledDate,
|
171 | onClear: this.onClear,
|
172 | prefixCls: prefixCls,
|
173 | selectedValue: selectedValue,
|
174 | onChange: this.onDateInputChange,
|
175 | onSelect: this.onDateInputSelect,
|
176 | clearIcon: clearIcon,
|
177 | inputMode: inputMode
|
178 | }) : null;
|
179 |
|
180 | var children = [];
|
181 | if (props.renderSidebar) {
|
182 | children.push(props.renderSidebar());
|
183 | }
|
184 | children.push(_react2['default'].createElement(
|
185 | 'div',
|
186 | { className: prefixCls + '-panel', key: 'panel' },
|
187 | dateInputElement,
|
188 | _react2['default'].createElement(
|
189 | 'div',
|
190 | {
|
191 | tabIndex: this.props.focusablePanel ? 0 : undefined,
|
192 | className: prefixCls + '-date-panel'
|
193 | },
|
194 | _react2['default'].createElement(_CalendarHeader2['default'], {
|
195 | locale: locale,
|
196 | mode: mode,
|
197 | value: value,
|
198 | onValueChange: this.setValue,
|
199 | onPanelChange: this.onPanelChange,
|
200 | renderFooter: renderFooter,
|
201 | showTimePicker: showTimePicker,
|
202 | prefixCls: prefixCls,
|
203 | monthCellRender: monthCellRender,
|
204 | monthCellContentRender: monthCellContentRender
|
205 | }),
|
206 | timePicker && showTimePicker ? _react2['default'].createElement(
|
207 | 'div',
|
208 | { className: prefixCls + '-time-picker' },
|
209 | _react2['default'].createElement(
|
210 | 'div',
|
211 | { className: prefixCls + '-time-picker-panel' },
|
212 | timePickerEle
|
213 | )
|
214 | ) : null,
|
215 | _react2['default'].createElement(
|
216 | 'div',
|
217 | { className: prefixCls + '-body' },
|
218 | _react2['default'].createElement(_DateTable2['default'], {
|
219 | locale: locale,
|
220 | value: value,
|
221 | selectedValue: selectedValue,
|
222 | prefixCls: prefixCls,
|
223 | dateRender: props.dateRender,
|
224 | onSelect: this.onDateTableSelect,
|
225 | disabledDate: disabledDate,
|
226 | showWeekNumber: props.showWeekNumber
|
227 | })
|
228 | ),
|
229 | _react2['default'].createElement(_CalendarFooter2['default'], {
|
230 | showOk: props.showOk,
|
231 | mode: mode,
|
232 | renderFooter: props.renderFooter,
|
233 | locale: locale,
|
234 | prefixCls: prefixCls,
|
235 | showToday: props.showToday,
|
236 | disabledTime: disabledTime,
|
237 | showTimePicker: showTimePicker,
|
238 | showDateInput: props.showDateInput,
|
239 | timePicker: timePicker,
|
240 | selectedValue: selectedValue,
|
241 | value: value,
|
242 | disabledDate: disabledDate,
|
243 | okDisabled: props.showOk !== false && (!selectedValue || !this.isAllowedDate(selectedValue)),
|
244 | onOk: this.onOk,
|
245 | onSelect: this.onSelect,
|
246 | onToday: this.onToday,
|
247 | onOpenTimePicker: this.openTimePicker,
|
248 | onCloseTimePicker: this.closeTimePicker
|
249 | })
|
250 | )
|
251 | ));
|
252 |
|
253 | return this.renderRoot({
|
254 | children: children,
|
255 | className: props.showWeekNumber ? prefixCls + '-week-number' : ''
|
256 | });
|
257 | };
|
258 |
|
259 | return Calendar;
|
260 | }(_react2['default'].Component);
|
261 |
|
262 | Calendar.propTypes = (0, _extends3['default'])({}, _CalendarMixin.calendarMixinPropTypes, _CommonMixin.propType, {
|
263 | prefixCls: _propTypes2['default'].string,
|
264 | className: _propTypes2['default'].string,
|
265 | style: _propTypes2['default'].object,
|
266 | defaultValue: _propTypes2['default'].object,
|
267 | value: _propTypes2['default'].object,
|
268 | selectedValue: _propTypes2['default'].object,
|
269 | defaultSelectedValue: _propTypes2['default'].object,
|
270 | mode: _propTypes2['default'].oneOf(['time', 'date', 'month', 'year', 'decade']),
|
271 | locale: _propTypes2['default'].object,
|
272 | showDateInput: _propTypes2['default'].bool,
|
273 | showWeekNumber: _propTypes2['default'].bool,
|
274 | showToday: _propTypes2['default'].bool,
|
275 | showOk: _propTypes2['default'].bool,
|
276 | onSelect: _propTypes2['default'].func,
|
277 | onOk: _propTypes2['default'].func,
|
278 | onKeyDown: _propTypes2['default'].func,
|
279 | timePicker: _propTypes2['default'].element,
|
280 | dateInputPlaceholder: _propTypes2['default'].any,
|
281 | onClear: _propTypes2['default'].func,
|
282 | onChange: _propTypes2['default'].func,
|
283 | onPanelChange: _propTypes2['default'].func,
|
284 | disabledDate: _propTypes2['default'].func,
|
285 | disabledTime: _propTypes2['default'].any,
|
286 | dateRender: _propTypes2['default'].func,
|
287 | renderFooter: _propTypes2['default'].func,
|
288 | renderSidebar: _propTypes2['default'].func,
|
289 | clearIcon: _propTypes2['default'].node,
|
290 | focusablePanel: _propTypes2['default'].bool,
|
291 | inputMode: _propTypes2['default'].string,
|
292 | onBlur: _propTypes2['default'].func
|
293 | });
|
294 | Calendar.defaultProps = (0, _extends3['default'])({}, _CalendarMixin.calendarMixinDefaultProps, _CommonMixin.defaultProp, {
|
295 | showToday: true,
|
296 | showDateInput: true,
|
297 | timePicker: null,
|
298 | onOk: noop,
|
299 | onPanelChange: noop,
|
300 | focusablePanel: true
|
301 | });
|
302 |
|
303 | var _initialiseProps = function _initialiseProps() {
|
304 | var _this2 = this;
|
305 |
|
306 | this.onPanelChange = function (value, mode) {
|
307 | var props = _this2.props,
|
308 | state = _this2.state;
|
309 |
|
310 | if (!('mode' in props)) {
|
311 | _this2.setState({ mode: mode });
|
312 | }
|
313 | props.onPanelChange(value || state.value, mode);
|
314 | };
|
315 |
|
316 | this.onKeyDown = function (event) {
|
317 | if (event.target.nodeName.toLowerCase() === 'input') {
|
318 | return undefined;
|
319 | }
|
320 | var keyCode = event.keyCode;
|
321 |
|
322 | var ctrlKey = event.ctrlKey || event.metaKey;
|
323 | var disabledDate = _this2.props.disabledDate;
|
324 | var value = _this2.state.value;
|
325 |
|
326 | switch (keyCode) {
|
327 | case _KeyCode2['default'].DOWN:
|
328 | _this2.goTime(1, 'weeks');
|
329 | event.preventDefault();
|
330 | return 1;
|
331 | case _KeyCode2['default'].UP:
|
332 | _this2.goTime(-1, 'weeks');
|
333 | event.preventDefault();
|
334 | return 1;
|
335 | case _KeyCode2['default'].LEFT:
|
336 | if (ctrlKey) {
|
337 | _this2.goTime(-1, 'years');
|
338 | } else {
|
339 | _this2.goTime(-1, 'days');
|
340 | }
|
341 | event.preventDefault();
|
342 | return 1;
|
343 | case _KeyCode2['default'].RIGHT:
|
344 | if (ctrlKey) {
|
345 | _this2.goTime(1, 'years');
|
346 | } else {
|
347 | _this2.goTime(1, 'days');
|
348 | }
|
349 | event.preventDefault();
|
350 | return 1;
|
351 | case _KeyCode2['default'].HOME:
|
352 | _this2.setValue((0, _toTime.goStartMonth)(_this2.state.value));
|
353 | event.preventDefault();
|
354 | return 1;
|
355 | case _KeyCode2['default'].END:
|
356 | _this2.setValue((0, _toTime.goEndMonth)(_this2.state.value));
|
357 | event.preventDefault();
|
358 | return 1;
|
359 | case _KeyCode2['default'].PAGE_DOWN:
|
360 | _this2.goTime(1, 'month');
|
361 | event.preventDefault();
|
362 | return 1;
|
363 | case _KeyCode2['default'].PAGE_UP:
|
364 | _this2.goTime(-1, 'month');
|
365 | event.preventDefault();
|
366 | return 1;
|
367 | case _KeyCode2['default'].ENTER:
|
368 | if (!disabledDate || !disabledDate(value)) {
|
369 | _this2.onSelect(value, {
|
370 | source: 'keyboard'
|
371 | });
|
372 | }
|
373 | event.preventDefault();
|
374 | return 1;
|
375 | default:
|
376 | _this2.props.onKeyDown(event);
|
377 | return 1;
|
378 | }
|
379 | };
|
380 |
|
381 | this.onClear = function () {
|
382 | _this2.onSelect(null);
|
383 | _this2.props.onClear();
|
384 | };
|
385 |
|
386 | this.onOk = function () {
|
387 | var selectedValue = _this2.state.selectedValue;
|
388 |
|
389 | if (_this2.isAllowedDate(selectedValue)) {
|
390 | _this2.props.onOk(selectedValue);
|
391 | }
|
392 | };
|
393 |
|
394 | this.onDateInputChange = function (value) {
|
395 | _this2.onSelect(value, {
|
396 | source: 'dateInput'
|
397 | });
|
398 | };
|
399 |
|
400 | this.onDateInputSelect = function (value) {
|
401 | _this2.onSelect(value, {
|
402 | source: 'dateInputSelect'
|
403 | });
|
404 | };
|
405 |
|
406 | this.onDateTableSelect = function (value) {
|
407 | var timePicker = _this2.props.timePicker;
|
408 | var selectedValue = _this2.state.selectedValue;
|
409 |
|
410 | if (!selectedValue && timePicker) {
|
411 | var timePickerDefaultValue = timePicker.props.defaultValue;
|
412 | if (timePickerDefaultValue) {
|
413 | (0, _util.syncTime)(timePickerDefaultValue, value);
|
414 | }
|
415 | }
|
416 | _this2.onSelect(value);
|
417 | };
|
418 |
|
419 | this.onToday = function () {
|
420 | var value = _this2.state.value;
|
421 |
|
422 | var now = (0, _util.getTodayTime)(value);
|
423 | _this2.onSelect(now, {
|
424 | source: 'todayButton'
|
425 | });
|
426 | };
|
427 |
|
428 | this.onBlur = function (event) {
|
429 | setTimeout(function () {
|
430 | var dateInput = _DateInput2['default'].getInstance();
|
431 | var rootInstance = _this2.rootInstance;
|
432 |
|
433 | if (!rootInstance || rootInstance.contains(document.activeElement) || dateInput && dateInput.contains(document.activeElement)) {
|
434 |
|
435 | return;
|
436 | }
|
437 |
|
438 | if (_this2.props.onBlur) {
|
439 | _this2.props.onBlur(event);
|
440 | }
|
441 | }, 0);
|
442 | };
|
443 |
|
444 | this.getRootDOMNode = function () {
|
445 | return _reactDom2['default'].findDOMNode(_this2);
|
446 | };
|
447 |
|
448 | this.openTimePicker = function () {
|
449 | _this2.onPanelChange(null, 'time');
|
450 | };
|
451 |
|
452 | this.closeTimePicker = function () {
|
453 | _this2.onPanelChange(null, 'date');
|
454 | };
|
455 |
|
456 | this.goTime = function (direction, unit) {
|
457 | _this2.setValue((0, _toTime.goTime)(_this2.state.value, direction, unit));
|
458 | };
|
459 | };
|
460 |
|
461 | (0, _reactLifecyclesCompat.polyfill)(Calendar);
|
462 |
|
463 | exports['default'] = (0, _CalendarMixin.calendarMixinWrapper)((0, _CommonMixin.commonMixinWrapper)(Calendar));
|
464 | module.exports = exports['default']; |
\ | No newline at end of file |