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 _extends3 = require('babel-runtime/helpers/extends');
|
10 |
|
11 | var _extends4 = _interopRequireDefault(_extends3);
|
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 _reactLifecyclesCompat = require('react-lifecycles-compat');
|
32 |
|
33 | var _classnames3 = require('classnames');
|
34 |
|
35 | var _classnames4 = _interopRequireDefault(_classnames3);
|
36 |
|
37 | var _propTypes = require('prop-types');
|
38 |
|
39 | var PT = _interopRequireWildcard(_propTypes);
|
40 |
|
41 | var _propTypes2 = require('../prop-types');
|
42 |
|
43 | var _propTypes3 = _interopRequireDefault(_propTypes2);
|
44 |
|
45 | var _util = require('../../util');
|
46 |
|
47 | var _util2 = require('../util');
|
48 |
|
49 | var _constant = require('../constant');
|
50 |
|
51 | var _constant2 = require('../../calendar2/constant');
|
52 |
|
53 | var _calendar = require('../../calendar2');
|
54 |
|
55 | var _calendar2 = _interopRequireDefault(_calendar);
|
56 |
|
57 | var _timePanel = require('./time-panel');
|
58 |
|
59 | var _timePanel2 = _interopRequireDefault(_timePanel);
|
60 |
|
61 | function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
|
62 |
|
63 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
64 |
|
65 | var DATE = _constant2.DATE_PANEL_MODE.DATE,
|
66 | WEEK = _constant2.DATE_PANEL_MODE.WEEK,
|
67 | MONTH = _constant2.DATE_PANEL_MODE.MONTH,
|
68 | QUARTER = _constant2.DATE_PANEL_MODE.QUARTER,
|
69 | YEAR = _constant2.DATE_PANEL_MODE.YEAR;
|
70 | var UN_SELECTED = _constant2.CALENDAR_CELL_STATE.UN_SELECTED,
|
71 | SELECTED = _constant2.CALENDAR_CELL_STATE.SELECTED,
|
72 | SELECTED_BEGIN = _constant2.CALENDAR_CELL_STATE.SELECTED_BEGIN,
|
73 | SELECTED_END = _constant2.CALENDAR_CELL_STATE.SELECTED_END;
|
74 | var BEGIN = _constant.DATE_INPUT_TYPE.BEGIN,
|
75 | END = _constant.DATE_INPUT_TYPE.END;
|
76 |
|
77 |
|
78 | var operate = function operate(mode, value, operator) {
|
79 | var newVal = value.clone();
|
80 |
|
81 | switch (mode) {
|
82 | case DATE:
|
83 | case WEEK:
|
84 | return newVal[operator](1, 'month');
|
85 | case QUARTER:
|
86 | case MONTH:
|
87 | return newVal[operator](1, 'year');
|
88 | case YEAR:
|
89 | return newVal[operator](10, 'year');
|
90 | }
|
91 | };
|
92 |
|
93 | var isSamePanel = function isSamePanel(a, b, mode) {
|
94 | switch (mode) {
|
95 | case DATE:
|
96 | case WEEK:
|
97 | return a.isSame(b, 'month');
|
98 | case QUARTER:
|
99 | case MONTH:
|
100 | return a.isSame(b, 'year');
|
101 | case YEAR:
|
102 | {
|
103 | var begin = a.year() - a.year() % 20;
|
104 | var byear = b.year();
|
105 |
|
106 | return byear >= begin && byear < begin + 20;
|
107 | }
|
108 | }
|
109 | };
|
110 |
|
111 |
|
112 | var getPanelValue = function getPanelValue(_ref, defaultValue) {
|
113 | var mode = _ref.mode,
|
114 | value = _ref.value,
|
115 | inputType = _ref.inputType,
|
116 | showTime = _ref.showTime;
|
117 | var begin = value[0],
|
118 | end = value[1];
|
119 |
|
120 | var otherType = inputType === BEGIN ? END : BEGIN;
|
121 | var _inputType = inputType;
|
122 |
|
123 | if (!value[inputType] && value[otherType]) {
|
124 | _inputType = otherType;
|
125 | }
|
126 |
|
127 | var panelValue = value[_inputType] || (0, _util.datejs)(defaultValue);
|
128 |
|
129 |
|
130 | if (!showTime && _inputType === END && end && (begin && !isSamePanel(begin, end, mode) || !begin)) {
|
131 | panelValue = operate(mode, panelValue, 'subtract');
|
132 | }
|
133 |
|
134 | return panelValue && panelValue.isValid() ? panelValue : (0, _util.datejs)();
|
135 | };
|
136 |
|
137 | var RangePanel = (_temp = _class = function (_React$Component) {
|
138 | (0, _inherits3.default)(RangePanel, _React$Component);
|
139 |
|
140 | function RangePanel(props) {
|
141 | (0, _classCallCheck3.default)(this, RangePanel);
|
142 |
|
143 | var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props));
|
144 |
|
145 | _initialiseProps.call(_this);
|
146 |
|
147 | var mode = props.mode,
|
148 | defaultPanelValue = props.defaultPanelValue,
|
149 | _props$timePanelProps = props.timePanelProps,
|
150 | timePanelProps = _props$timePanelProps === undefined ? {} : _props$timePanelProps;
|
151 |
|
152 |
|
153 |
|
154 | var defaultTime = timePanelProps.defaultValue || [];
|
155 | if (!Array.isArray(defaultTime)) {
|
156 | defaultTime = [defaultTime, defaultTime];
|
157 | }
|
158 | defaultTime = defaultTime.map(function (t) {
|
159 | return (0, _util.datejs)(t, timePanelProps.format || 'HH:mm:ss');
|
160 | });
|
161 |
|
162 | _this.state = {
|
163 | mode: mode,
|
164 | panelValue: getPanelValue(props, defaultPanelValue),
|
165 | inputType: props.inputType,
|
166 | curHoverValue: null,
|
167 | defaultTime: defaultTime
|
168 | };
|
169 | return _this;
|
170 | }
|
171 |
|
172 | RangePanel.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
173 | if (props.inputType !== state.inputType) {
|
174 | return {
|
175 | inputType: props.inputType,
|
176 | panelValue: getPanelValue(props, state.panelValue)
|
177 | };
|
178 | }
|
179 | return null;
|
180 | };
|
181 |
|
182 | RangePanel.prototype.componentWillUnmount = function componentWillUnmount() {
|
183 | this.currentRaf && window.cancelAnimationFrame(this.currentRaf);
|
184 | };
|
185 |
|
186 |
|
187 |
|
188 |
|
189 | RangePanel.prototype.getRanges = function getRanges() {
|
190 | var mode = this.props.mode;
|
191 | var v = this.state.panelValue;
|
192 |
|
193 |
|
194 | var begin = v.clone();
|
195 | var end = operate(mode, v, 'add');
|
196 |
|
197 | return [begin, end];
|
198 | };
|
199 |
|
200 |
|
201 | RangePanel.prototype.handleCellState = function handleCellState(v, value) {
|
202 | var mode = this.props.mode;
|
203 | var begin = value[0],
|
204 | end = value[1];
|
205 |
|
206 |
|
207 | var unit = this.getUnitByMode(mode);
|
208 |
|
209 | return begin && begin.isSame(v, unit) ? SELECTED_BEGIN : end && end.isSame(v, unit) ? SELECTED_END : begin && end && v.isAfter(begin, unit) && v.isBefore(end, unit) ? SELECTED : UN_SELECTED;
|
210 | };
|
211 |
|
212 | RangePanel.prototype.getUnitByMode = function getUnitByMode(mode) {
|
213 | return mode === DATE ? 'day' : mode;
|
214 | };
|
215 |
|
216 |
|
217 |
|
218 |
|
219 | RangePanel.prototype.renderRange = function renderRange(sharedProps) {
|
220 | var _classnames;
|
221 |
|
222 | var handlePanelChange = this.handlePanelChange,
|
223 | handleCanlendarClick = this.handleCanlendarClick,
|
224 | hasModeChanged = this.hasModeChanged;
|
225 | var _props = this.props,
|
226 | value = _props.value,
|
227 | prefix = _props.prefix;
|
228 |
|
229 | var ranges = this.getRanges();
|
230 |
|
231 | var calendarProps = function calendarProps(idx) {
|
232 | return (0, _extends4.default)({}, sharedProps, {
|
233 | value: value[idx],
|
234 | panelValue: ranges[idx],
|
235 | onPanelChange: function onPanelChange(v, m) {
|
236 | return handlePanelChange(v, m, idx);
|
237 | }
|
238 | });
|
239 | };
|
240 |
|
241 | var calendarNodes = [_react2.default.createElement(_calendar2.default, (0, _extends4.default)({}, calendarProps(0), { className: prefix + 'range-picker-left', key: 'range-panel-calendar-left' })), _react2.default.createElement(_calendar2.default, (0, _extends4.default)({}, calendarProps(1), {
|
242 | className: prefix + 'range-picker-right',
|
243 | key: 'range-panel-calendar-right',
|
244 | onNext: handleCanlendarClick,
|
245 | onSuperNext: handleCanlendarClick
|
246 | }))];
|
247 |
|
248 | var className = (0, _classnames4.default)(prefix + 'range-picker2-panel', (_classnames = {}, _classnames[prefix + 'range-picker2-panel-single'] = hasModeChanged, _classnames));
|
249 |
|
250 | return _react2.default.createElement(
|
251 | 'div',
|
252 | { key: 'range-panel', className: className },
|
253 | !this.hasModeChanged ? calendarNodes : calendarNodes[this.state.calendarIdx]
|
254 | );
|
255 | };
|
256 |
|
257 | RangePanel.prototype.render = function render() {
|
258 | var handleSelect = this.handleSelect,
|
259 | getCellClassName = this.getCellClassName,
|
260 | handleMouseEnter = this.handleMouseEnter,
|
261 | handleMouseLeave = this.handleMouseLeave;
|
262 | var _props2 = this.props,
|
263 | mode = _props2.mode,
|
264 | justBeginInput = _props2.justBeginInput,
|
265 | dateCellRender = _props2.dateCellRender,
|
266 | restProps = (0, _objectWithoutProperties3.default)(_props2, ['mode', 'justBeginInput', 'dateCellRender']);
|
267 |
|
268 |
|
269 |
|
270 | this.hasModeChanged = this.state.mode !== this.props.mode;
|
271 |
|
272 | var sharedProps = (0, _extends4.default)({}, _util.obj.pickProps(_calendar2.default.propTypes, restProps), {
|
273 | shape: 'panel',
|
274 | panelMode: mode,
|
275 | dateCellRender: dateCellRender
|
276 | });
|
277 |
|
278 | sharedProps.disabledDate = justBeginInput ? this.props.disabledDate : this.disabledDate;
|
279 |
|
280 |
|
281 | if ([DATE, WEEK].includes(mode)) {
|
282 | sharedProps.colNum = 6;
|
283 | }
|
284 |
|
285 | if (!this.hasModeChanged) {
|
286 | sharedProps = (0, _extends4.default)({}, sharedProps, {
|
287 | onSelect: handleSelect,
|
288 | cellClassName: getCellClassName,
|
289 | cellProps: {
|
290 | onMouseEnter: handleMouseEnter,
|
291 | onMouseLeave: handleMouseLeave
|
292 | }
|
293 | });
|
294 | }
|
295 |
|
296 | return this.props.showTime ? this.renderRangeTime(sharedProps) : this.renderRange(sharedProps);
|
297 | };
|
298 |
|
299 | return RangePanel;
|
300 | }(_react2.default.Component), _class.propTypes = {
|
301 | rtl: PT.bool,
|
302 | prefix: PT.string,
|
303 | locale: PT.object,
|
304 | mode: _propTypes3.default.mode,
|
305 | value: PT.arrayOf(_propTypes3.default.date),
|
306 | inputType: _propTypes3.default.inputType,
|
307 | handleCellState: PT.func,
|
308 | disabledDate: PT.func,
|
309 | justBeginInput: PT.bool,
|
310 | resetTime: PT.bool,
|
311 | showTime: PT.bool,
|
312 | timePanelProps: PT.object,
|
313 | disabledTime: PT.object,
|
314 | dateCellRender: PT.func
|
315 | }, _class.defaultProps = {
|
316 | disabledDate: function disabledDate() {
|
317 | return false;
|
318 | },
|
319 | justBeginInput: true
|
320 | }, _initialiseProps = function _initialiseProps() {
|
321 | var _this2 = this;
|
322 |
|
323 | this.disabledDate = function (v) {
|
324 | var _props3 = _this2.props,
|
325 | mode = _props3.mode,
|
326 | inputType = _props3.inputType,
|
327 | disabledDate = _props3.disabledDate,
|
328 | _props3$value = _props3.value,
|
329 | begin = _props3$value[0],
|
330 | end = _props3$value[1];
|
331 |
|
332 |
|
333 | var unit = (0, _util2.mode2unit)(mode);
|
334 |
|
335 | return disabledDate(v, mode) || inputType === END && begin && begin.isAfter(v, unit) || inputType === BEGIN && end && end.isBefore(v, unit);
|
336 | };
|
337 |
|
338 | this.onTimeSelect = function (v) {
|
339 | var _props4 = _this2.props,
|
340 | value = _props4.value,
|
341 | inputType = _props4.inputType;
|
342 | var begin = value[0],
|
343 | end = value[1];
|
344 |
|
345 |
|
346 | var curDateVal = value[inputType];
|
347 | if (!curDateVal) {
|
348 | curDateVal = inputType === BEGIN && end ? end.subtract(1, 'day') : inputType === END && begin ? begin.add(1, 'day') : (0, _util.datejs)();
|
349 | }
|
350 | curDateVal = (0, _util2.setTime)(curDateVal, v);
|
351 |
|
352 | _this2.handleSelect(curDateVal, true);
|
353 | };
|
354 |
|
355 | this.handleSelect = function (v, fromTimeChange) {
|
356 | var _props5 = _this2.props,
|
357 | value = _props5.value,
|
358 | inputType = _props5.inputType,
|
359 | resetTime = _props5.resetTime;
|
360 |
|
361 | var otherType = (0, _util2.switchInputType)(inputType);
|
362 | var newValue = [].concat(value);
|
363 |
|
364 | var defaultTime = _this2.state.defaultTime[inputType];
|
365 | var timeVal = null;
|
366 |
|
367 |
|
368 |
|
369 |
|
370 |
|
371 |
|
372 |
|
373 | if (!fromTimeChange && !resetTime) {
|
374 | timeVal = value[inputType] || defaultTime || value[otherType] || (0, _util.datejs)();
|
375 | }
|
376 |
|
377 | newValue[inputType === BEGIN ? 0 : 1] = (0, _util2.setTime)(v, timeVal);
|
378 |
|
379 | _util.func.invoke(_this2.props, 'onSelect', [newValue]);
|
380 | };
|
381 |
|
382 | this.handlePanelChange = function (v, mode, idx) {
|
383 | _this2.setState({
|
384 | mode: mode,
|
385 | panelValue: v,
|
386 | calendarIdx: idx
|
387 | });
|
388 |
|
389 | _util.func.invoke(_this2.props, 'onPanelChange', [v, mode]);
|
390 | };
|
391 |
|
392 | this.handleMouseEnter = function (value) {
|
393 | _this2.currentRaf && window.cancelAnimationFrame(_this2.currentRaf);
|
394 | _this2.currentRaf = window.requestAnimationFrame(function () {
|
395 | _this2.setState({
|
396 | curHoverValue: value
|
397 | });
|
398 | });
|
399 | };
|
400 |
|
401 | this.handleMouseLeave = function () {
|
402 | _this2.currentRaf && window.cancelAnimationFrame(_this2.currentRaf);
|
403 | _this2.setState({
|
404 | curHoverValue: null
|
405 | });
|
406 | };
|
407 |
|
408 | this.handleEdgeState = function (value, mode) {
|
409 | var unit = _this2.getUnitByMode(mode);
|
410 |
|
411 | switch (mode) {
|
412 | case DATE:
|
413 | {
|
414 | var endDate = value.endOf('month');
|
415 | var beginDate = value.startOf('month');
|
416 | return beginDate.isSame(value, unit) ? 1 : endDate.isSame(value, unit) ? 2 : 0;
|
417 | }
|
418 | case YEAR:
|
419 | {
|
420 | var year = value.year();
|
421 |
|
422 | var beginYear = value.year() - value.year() % 10;
|
423 | var endYear = beginYear + 9;
|
424 | return year === beginYear ? 1 : year === endYear ? 2 : 0;
|
425 | }
|
426 | default:
|
427 | return 0;
|
428 | }
|
429 | };
|
430 |
|
431 | this.getCellClassName = function (value) {
|
432 | var _extends2;
|
433 |
|
434 | var _props6 = _this2.props,
|
435 | prefix = _props6.prefix,
|
436 | inputType = _props6.inputType,
|
437 | mode = _props6.mode;
|
438 | var curHoverValue = _this2.state.curHoverValue;
|
439 | var _props$value = _this2.props.value,
|
440 | begin = _props$value[0],
|
441 | end = _props$value[1];
|
442 |
|
443 | var unit = _this2.getUnitByMode(mode);
|
444 |
|
445 | var state = _this2.handleCellState(value, _this2.props.value);
|
446 | var prefixCls = prefix + 'calendar2-cell';
|
447 |
|
448 | var hoverClassName = void 0;
|
449 | if (curHoverValue) {
|
450 | var hoverValue = [].concat(_this2.props.value);
|
451 | hoverValue[inputType] = curHoverValue;
|
452 | var hoverBegin = hoverValue[0],
|
453 | hoverEnd = hoverValue[1];
|
454 |
|
455 |
|
456 | if (hoverBegin && hoverEnd && hoverBegin.isBefore(hoverEnd, unit)) {
|
457 | var _hoverClassName;
|
458 |
|
459 | var hoverState = _this2.handleCellState(value, hoverValue);
|
460 |
|
461 | hoverClassName = (_hoverClassName = {}, _hoverClassName[prefixCls + '-hover'] = hoverState >= SELECTED, _hoverClassName[prefixCls + '-hover-begin'] = hoverState === SELECTED_BEGIN, _hoverClassName[prefixCls + '-hover-end'] = hoverState === SELECTED_END, _hoverClassName[prefixCls + '-hover-end'] = hoverState === SELECTED_END, _hoverClassName);
|
462 | }
|
463 | }
|
464 |
|
465 | var rangeClassName = void 0;
|
466 | if (!_this2.hasModeChanged) {
|
467 | var _ref2, _ref3;
|
468 |
|
469 | var edgeState = _this2.handleEdgeState(value, mode);
|
470 | var isIllegal = end && begin && begin.isAfter(end);
|
471 |
|
472 | rangeClassName = mode === WEEK ? (_ref2 = {}, _ref2[prefixCls + '-week-range-begin'] = state === SELECTED_BEGIN, _ref2[prefixCls + '-week-range-end'] = state === SELECTED_END, _ref2) : (_ref3 = {}, _ref3[prefixCls + '-range-begin'] = state === SELECTED_BEGIN, _ref3[prefixCls + '-range-end'] = state === SELECTED_END, _ref3[prefixCls + '-range-begin-single'] = state >= SELECTED && (!end || end.isSame(begin, unit) || isIllegal), _ref3[prefixCls + '-range-end-single'] = state >= SELECTED && (!begin || begin.isSame(end, unit) || isIllegal), _ref3[prefixCls + '-edge-begin'] = edgeState === 1, _ref3[prefixCls + '-edge-end'] = edgeState === 2, _ref3);
|
473 | }
|
474 |
|
475 | return (0, _extends4.default)((_extends2 = {}, _extends2[prefixCls + '-selected'] = state >= SELECTED, _extends2), rangeClassName, hoverClassName);
|
476 | };
|
477 |
|
478 | this.handleCanlendarClick = function (_, _ref4) {
|
479 | var unit = _ref4.unit,
|
480 | num = _ref4.num;
|
481 |
|
482 | _this2.setState({
|
483 | panelValue: _this2.state.panelValue.clone().add(num, unit)
|
484 | });
|
485 | };
|
486 |
|
487 | this.renderRangeTime = function (sharedProps) {
|
488 | var _classnames2;
|
489 |
|
490 | var _props7 = _this2.props,
|
491 | value = _props7.value,
|
492 | prefix = _props7.prefix,
|
493 | showTime = _props7.showTime,
|
494 | inputType = _props7.inputType,
|
495 | _props7$timePanelProp = _props7.timePanelProps,
|
496 | timePanelProps = _props7$timePanelProp === undefined ? {} : _props7$timePanelProp,
|
497 | disabledTime = _props7.disabledTime;
|
498 |
|
499 |
|
500 | var className = (0, _classnames4.default)(prefix + 'range-picker2-panel', (_classnames2 = {}, _classnames2[prefix + 'range-picker2-panel-single'] = _this2.hasModeChanged, _classnames2));
|
501 |
|
502 |
|
503 | var _disabledTime = void 0;
|
504 | if (showTime && !_this2.hasModeChanged && disabledTime) {
|
505 | _disabledTime = typeof disabledTime === 'function' ? disabledTime(value, inputType) : disabledTime;
|
506 | }
|
507 |
|
508 | return _react2.default.createElement(
|
509 | 'div',
|
510 | { key: 'range-time-panel', className: className },
|
511 | _react2.default.createElement(_calendar2.default, (0, _extends4.default)({
|
512 | panelValue: _this2.state.panelValue
|
513 | }, sharedProps, {
|
514 | value: value[inputType],
|
515 | onPanelChange: _this2.handlePanelChange
|
516 | })),
|
517 | showTime && !_this2.hasModeChanged ? _react2.default.createElement(_timePanel2.default, {
|
518 | prefix: prefix,
|
519 | inputType: inputType,
|
520 | value: value[inputType] || _this2.state.defaultTime[inputType],
|
521 | onSelect: _this2.onTimeSelect,
|
522 | disabledTime: disabledTime,
|
523 | timePanelProps: (0, _extends4.default)({}, _disabledTime, timePanelProps)
|
524 | }) : null
|
525 | );
|
526 | };
|
527 | }, _temp);
|
528 | RangePanel.displayName = 'RangePanel';
|
529 | exports.default = (0, _reactLifecyclesCompat.polyfill)(RangePanel);
|
530 | module.exports = exports['default']; |
\ | No newline at end of file |