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 _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
|
10 |
|
11 | var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
|
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 _classnames2 = require('classnames');
|
38 |
|
39 | var _classnames3 = _interopRequireDefault(_classnames2);
|
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 _zhCn = require('../locale/zh-cn');
|
50 |
|
51 | var _zhCn2 = _interopRequireDefault(_zhCn);
|
52 |
|
53 | var _util = require('../util');
|
54 |
|
55 | var _rangePanelHeader = require('./head/range-panel-header');
|
56 |
|
57 | var _rangePanelHeader2 = _interopRequireDefault(_rangePanelHeader);
|
58 |
|
59 | var _monthPanelHeader = require('./head/month-panel-header');
|
60 |
|
61 | var _monthPanelHeader2 = _interopRequireDefault(_monthPanelHeader);
|
62 |
|
63 | var _yearPanelHeader = require('./head/year-panel-header');
|
64 |
|
65 | var _yearPanelHeader2 = _interopRequireDefault(_yearPanelHeader);
|
66 |
|
67 | var _dateTable = require('./table/date-table');
|
68 |
|
69 | var _dateTable2 = _interopRequireDefault(_dateTable);
|
70 |
|
71 | var _monthTable = require('./table/month-table');
|
72 |
|
73 | var _monthTable2 = _interopRequireDefault(_monthTable);
|
74 |
|
75 | var _yearTable = require('./table/year-table');
|
76 |
|
77 | var _yearTable2 = _interopRequireDefault(_yearTable);
|
78 |
|
79 | var _utils = require('./utils');
|
80 |
|
81 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
82 |
|
83 | var RangeCalendar = (_temp = _class = function (_React$Component) {
|
84 | (0, _inherits3.default)(RangeCalendar, _React$Component);
|
85 |
|
86 | function RangeCalendar(props, context) {
|
87 | (0, _classCallCheck3.default)(this, RangeCalendar);
|
88 |
|
89 | var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this, props, context));
|
90 |
|
91 | _this.onSelectCell = function (date, nextMode) {
|
92 | if (_this.state.mode === _utils.CALENDAR_MODE_DATE) {
|
93 | _this.props.onSelect(date);
|
94 | } else {
|
95 | _this.changeVisibleMonth(date, 'cellClick');
|
96 | }
|
97 |
|
98 | _this.changeMode(nextMode);
|
99 | };
|
100 |
|
101 | _this.changeMode = function (mode, activePanel) {
|
102 | if (typeof mode === 'string' && mode !== _this.state.mode) {
|
103 | _this.setState({ mode: mode });
|
104 | }
|
105 | if (activePanel && activePanel !== _this.state.activePanel) {
|
106 | _this.setState({ activePanel: activePanel });
|
107 | }
|
108 | };
|
109 |
|
110 | _this.changeVisibleMonth = function (date, reason) {
|
111 | if (!(0, _utils.isSameYearMonth)(date, _this.state.startVisibleMonth)) {
|
112 | _this.setState({ startVisibleMonth: date });
|
113 | _this.props.onVisibleMonthChange(date, reason);
|
114 | }
|
115 | };
|
116 |
|
117 | _this.changeVisibleMonthByOffset = function (offset, type) {
|
118 | var offsetDate = _this.state.startVisibleMonth.clone().add(offset, type);
|
119 | _this.changeVisibleMonth(offsetDate, 'buttonClick');
|
120 | };
|
121 |
|
122 | _this.goPrevDecade = function () {
|
123 | _this.changeVisibleMonthByOffset(-10, 'years');
|
124 | };
|
125 |
|
126 | _this.goNextDecade = function () {
|
127 | _this.changeVisibleMonthByOffset(10, 'years');
|
128 | };
|
129 |
|
130 | _this.goPrevYear = function () {
|
131 | _this.changeVisibleMonthByOffset(-1, 'years');
|
132 | };
|
133 |
|
134 | _this.goNextYear = function () {
|
135 | _this.changeVisibleMonthByOffset(1, 'years');
|
136 | };
|
137 |
|
138 | _this.goPrevMonth = function () {
|
139 | _this.changeVisibleMonthByOffset(-1, 'months');
|
140 | };
|
141 |
|
142 | _this.goNextMonth = function () {
|
143 | _this.changeVisibleMonthByOffset(1, 'months');
|
144 | };
|
145 |
|
146 | var startValue = (0, _utils.formatDateValue)(props.startValue || props.defaultStartValue);
|
147 | var endValue = (0, _utils.formatDateValue)(props.endValue || props.defaultEndValue);
|
148 | var visibleMonth = (0, _utils.getVisibleMonth)(props.defaultVisibleMonth, startValue);
|
149 |
|
150 | _this.state = {
|
151 | startValue: startValue,
|
152 | endValue: endValue,
|
153 | mode: props.mode,
|
154 | prevMode: props.mode,
|
155 | startVisibleMonth: visibleMonth,
|
156 | activePanel: undefined
|
157 | };
|
158 | _this.today = (0, _moment2.default)();
|
159 | return _this;
|
160 | }
|
161 |
|
162 | RangeCalendar.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
163 | var st = {};
|
164 | if ('startValue' in props) {
|
165 | var startValue = (0, _utils.formatDateValue)(props.startValue);
|
166 | st.startValue = startValue;
|
167 | if (startValue && !startValue.isSame(state.startValue, 'day')) {
|
168 | st.startVisibleMonth = startValue;
|
169 | }
|
170 | }
|
171 |
|
172 | if ('endValue' in props) {
|
173 | st.endValue = (0, _utils.formatDateValue)(props.endValue);
|
174 | }
|
175 |
|
176 | if ('mode' in props && state.prevMode !== props.mode) {
|
177 | st.prevMode = props.mode;
|
178 | st.mode = props.mode;
|
179 | }
|
180 |
|
181 | return st;
|
182 | };
|
183 |
|
184 | |
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 | RangeCalendar.prototype.render = function render() {
|
192 | var _classnames;
|
193 |
|
194 | var _props = this.props,
|
195 | prefix = _props.prefix,
|
196 | rtl = _props.rtl,
|
197 | dateCellRender = _props.dateCellRender,
|
198 | monthCellRender = _props.monthCellRender,
|
199 | yearCellRender = _props.yearCellRender,
|
200 | className = _props.className,
|
201 | format = _props.format,
|
202 | locale = _props.locale,
|
203 | showOtherMonth = _props.showOtherMonth,
|
204 | disabledDate = _props.disabledDate,
|
205 | disableChangeMode = _props.disableChangeMode,
|
206 | yearRange = _props.yearRange,
|
207 | others = (0, _objectWithoutProperties3.default)(_props, ['prefix', 'rtl', 'dateCellRender', 'monthCellRender', 'yearCellRender', 'className', 'format', 'locale', 'showOtherMonth', 'disabledDate', 'disableChangeMode', 'yearRange']);
|
208 | var _state = this.state,
|
209 | startValue = _state.startValue,
|
210 | endValue = _state.endValue,
|
211 | mode = _state.mode,
|
212 | startVisibleMonth = _state.startVisibleMonth,
|
213 | activePanel = _state.activePanel;
|
214 |
|
215 |
|
216 |
|
217 | if (locale.momentLocale) {
|
218 | startValue && startValue.locale(locale.momentLocale);
|
219 | endValue && endValue.locale(locale.momentLocale);
|
220 | startVisibleMonth.locale(locale.momentLocale);
|
221 | }
|
222 |
|
223 | if (rtl) {
|
224 | others.dir = 'rtl';
|
225 | }
|
226 | var localeData = (0, _utils.getLocaleData)(locale.format || {}, startVisibleMonth.localeData());
|
227 |
|
228 | var endVisibleMonth = startVisibleMonth.clone().add(1, 'months');
|
229 |
|
230 | var headerProps = {
|
231 | prefix: prefix,
|
232 | rtl: rtl,
|
233 | mode: mode,
|
234 | locale: locale,
|
235 | momentLocale: localeData,
|
236 | startVisibleMonth: startVisibleMonth,
|
237 | endVisibleMonth: endVisibleMonth,
|
238 | changeVisibleMonth: this.changeVisibleMonth,
|
239 | changeMode: this.changeMode,
|
240 | yearRange: yearRange,
|
241 | disableChangeMode: disableChangeMode
|
242 | };
|
243 |
|
244 | var tableProps = {
|
245 | prefix: prefix,
|
246 | value: startValue,
|
247 | startValue: startValue,
|
248 | endValue: endValue,
|
249 | mode: mode,
|
250 | locale: locale,
|
251 | momentLocale: localeData,
|
252 | showOtherMonth: showOtherMonth,
|
253 | today: this.today,
|
254 | disabledDate: disabledDate,
|
255 | dateCellRender: dateCellRender,
|
256 | monthCellRender: monthCellRender,
|
257 | yearCellRender: yearCellRender,
|
258 | changeMode: this.changeMode,
|
259 | changeVisibleMonth: this.changeVisibleMonth
|
260 | };
|
261 |
|
262 | var visibleMonths = {
|
263 | start: startVisibleMonth,
|
264 | end: endVisibleMonth
|
265 | };
|
266 |
|
267 | var visibleMonth = visibleMonths[activePanel];
|
268 |
|
269 | var header = void 0;
|
270 | var table = void 0;
|
271 |
|
272 | switch (mode) {
|
273 | case _utils.CALENDAR_MODE_DATE:
|
274 | {
|
275 | table = [_react2.default.createElement(
|
276 | 'div',
|
277 | { className: prefix + 'calendar2-body-left', key: 'left-panel' },
|
278 | _react2.default.createElement(_dateTable2.default, (0, _extends3.default)({
|
279 | format: format
|
280 | }, tableProps, {
|
281 | visibleMonth: startVisibleMonth,
|
282 | onSelectDate: this.onSelectCell
|
283 | }))
|
284 | ), _react2.default.createElement(
|
285 | 'div',
|
286 | { className: prefix + 'calendar2-body-right', key: 'right-panel' },
|
287 | _react2.default.createElement(_dateTable2.default, (0, _extends3.default)({
|
288 | format: format
|
289 | }, tableProps, {
|
290 | visibleMonth: endVisibleMonth,
|
291 | onSelectDate: this.onSelectCell
|
292 | }))
|
293 | )];
|
294 | header = _react2.default.createElement(_rangePanelHeader2.default, (0, _extends3.default)({}, headerProps, {
|
295 | goPrevYear: this.goPrevYear,
|
296 | goPrevMonth: this.goPrevMonth,
|
297 | goNextYear: this.goNextYear,
|
298 | goNextMonth: this.goNextMonth
|
299 | }));
|
300 | break;
|
301 | }
|
302 | case _utils.CALENDAR_MODE_MONTH:
|
303 | {
|
304 | table = _react2.default.createElement(_monthTable2.default, (0, _extends3.default)({}, tableProps, { visibleMonth: visibleMonth, onSelectMonth: this.onSelectCell }));
|
305 | header = _react2.default.createElement(_monthPanelHeader2.default, (0, _extends3.default)({}, headerProps, {
|
306 | visibleMonth: visibleMonth,
|
307 | goPrevYear: this.goPrevYear,
|
308 | goNextYear: this.goNextYear
|
309 | }));
|
310 | break;
|
311 | }
|
312 | case _utils.CALENDAR_MODE_YEAR:
|
313 | {
|
314 | table = _react2.default.createElement(_yearTable2.default, (0, _extends3.default)({}, tableProps, {
|
315 | rtl: rtl,
|
316 | visibleMonth: visibleMonth,
|
317 | onSelectYear: this.onSelectCell,
|
318 | goPrevDecade: this.goPrevDecade,
|
319 | goNextDecade: this.goNextDecade
|
320 | }));
|
321 | header = _react2.default.createElement(_yearPanelHeader2.default, (0, _extends3.default)({}, headerProps, {
|
322 | visibleMonth: visibleMonth,
|
323 | goPrevDecade: this.goPrevDecade,
|
324 | goNextDecade: this.goNextDecade
|
325 | }));
|
326 | break;
|
327 | }
|
328 | }
|
329 |
|
330 | var classNames = (0, _classnames3.default)((_classnames = {}, _classnames[prefix + 'calendar2'] = true, _classnames[prefix + 'calendar2-range'] = true, _classnames), className);
|
331 |
|
332 | return _react2.default.createElement(
|
333 | 'div',
|
334 | (0, _extends3.default)({}, _util.obj.pickOthers(RangeCalendar.propTypes, others), { className: classNames }),
|
335 | header,
|
336 | _react2.default.createElement(
|
337 | 'div',
|
338 | { className: prefix + 'calendar2-body' },
|
339 | table
|
340 | )
|
341 | );
|
342 | };
|
343 |
|
344 | return RangeCalendar;
|
345 | }(_react2.default.Component), _class.propTypes = (0, _extends3.default)({}, _configProvider2.default.propTypes, {
|
346 | |
347 |
|
348 |
|
349 | prefix: _propTypes2.default.string,
|
350 | rtl: _propTypes2.default.bool,
|
351 | |
352 |
|
353 |
|
354 | defaultStartValue: _utils.checkMomentObj,
|
355 | |
356 |
|
357 |
|
358 | defaultEndValue: _utils.checkMomentObj,
|
359 | |
360 |
|
361 |
|
362 | startValue: _utils.checkMomentObj,
|
363 | |
364 |
|
365 |
|
366 | endValue: _utils.checkMomentObj,
|
367 |
|
368 | mode: _propTypes2.default.oneOf(_utils.CALENDAR_MODES),
|
369 |
|
370 | disableChangeMode: _propTypes2.default.bool,
|
371 |
|
372 | format: _propTypes2.default.string,
|
373 | yearRange: _propTypes2.default.arrayOf(_propTypes2.default.number),
|
374 | |
375 |
|
376 |
|
377 | showOtherMonth: _propTypes2.default.bool,
|
378 | |
379 |
|
380 |
|
381 | defaultVisibleMonth: _propTypes2.default.func,
|
382 | |
383 |
|
384 |
|
385 |
|
386 |
|
387 | onVisibleMonthChange: _propTypes2.default.func,
|
388 | |
389 |
|
390 |
|
391 |
|
392 |
|
393 |
|
394 | disabledDate: _propTypes2.default.func,
|
395 | |
396 |
|
397 |
|
398 |
|
399 | onSelect: _propTypes2.default.func,
|
400 | |
401 |
|
402 |
|
403 | dateCellRender: _propTypes2.default.func,
|
404 | |
405 |
|
406 |
|
407 |
|
408 |
|
409 | monthCellRender: _propTypes2.default.func,
|
410 | yearCellRender: _propTypes2.default.func,
|
411 | locale: _propTypes2.default.object,
|
412 | className: _propTypes2.default.string
|
413 | }), _class.defaultProps = {
|
414 | prefix: 'next-',
|
415 | rtl: false,
|
416 | mode: _utils.CALENDAR_MODE_DATE,
|
417 | disableChangeMode: false,
|
418 | format: 'YYYY-MM-DD',
|
419 | dateCellRender: function dateCellRender(value) {
|
420 | return value.date();
|
421 | },
|
422 | onSelect: _util.func.noop,
|
423 | onVisibleMonthChange: _util.func.noop,
|
424 | locale: _zhCn2.default.Calendar,
|
425 | showOtherMonth: false
|
426 | }, _temp);
|
427 | RangeCalendar.displayName = 'RangeCalendar';
|
428 | exports.default = _configProvider2.default.config((0, _reactLifecyclesCompat.polyfill)(RangeCalendar), {
|
429 | componentName: 'Calendar'
|
430 | });
|
431 | module.exports = exports['default']; |
\ | No newline at end of file |