1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 |
|
7 | var _class, _temp;
|
8 |
|
9 | import React from 'react';
|
10 | import PropTypes from 'prop-types';
|
11 | import { polyfill } from 'react-lifecycles-compat';
|
12 | import classnames from 'classnames';
|
13 | import moment from 'moment';
|
14 | import ConfigProvider from '../config-provider';
|
15 | import nextLocale from '../locale/zh-cn';
|
16 | import { obj, func } from '../util';
|
17 | import RangePanelHeader from './head/range-panel-header';
|
18 | import MonthPanelHeader from './head/month-panel-header';
|
19 | import YearPanelHeader from './head/year-panel-header';
|
20 | import DateTable from './table/date-table';
|
21 | import MonthTable from './table/month-table';
|
22 | import YearTable from './table/year-table';
|
23 | import { checkMomentObj, formatDateValue, getVisibleMonth, isSameYearMonth, CALENDAR_MODES, CALENDAR_MODE_DATE, CALENDAR_MODE_MONTH, CALENDAR_MODE_YEAR, getLocaleData } from './utils';
|
24 |
|
25 | var RangeCalendar = (_temp = _class = function (_React$Component) {
|
26 | _inherits(RangeCalendar, _React$Component);
|
27 |
|
28 | function RangeCalendar(props, context) {
|
29 | _classCallCheck(this, RangeCalendar);
|
30 |
|
31 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props, context));
|
32 |
|
33 | _this.onSelectCell = function (date, nextMode) {
|
34 | if (_this.state.mode === CALENDAR_MODE_DATE) {
|
35 | _this.props.onSelect(date);
|
36 | } else {
|
37 | _this.changeVisibleMonth(date, 'cellClick');
|
38 | }
|
39 |
|
40 | _this.changeMode(nextMode);
|
41 | };
|
42 |
|
43 | _this.changeMode = function (mode, activePanel) {
|
44 | var _this$state = _this.state,
|
45 | lastMode = _this$state.lastMode,
|
46 | lastPanelType = _this$state.lastPanelType;
|
47 |
|
48 |
|
49 | var state = {
|
50 | lastMode: mode,
|
51 |
|
52 | lastPanelType: lastMode === 'year' ? lastPanelType : activePanel
|
53 | };
|
54 | if (typeof mode === 'string' && mode !== _this.state.mode) {
|
55 | state.mode = mode;
|
56 | }
|
57 | if (activePanel && activePanel !== _this.state.activePanel) {
|
58 | state.activePanel = activePanel;
|
59 | }
|
60 |
|
61 | _this.setState(state);
|
62 | };
|
63 |
|
64 | _this.changeVisibleMonth = function (date, reason) {
|
65 | var lastPanelType = _this.state.lastPanelType;
|
66 |
|
67 | if (!isSameYearMonth(date, _this.state.startVisibleMonth)) {
|
68 | var startVisibleMonth = lastPanelType === 'end' ? date.clone().add(-1, 'month') : date;
|
69 | _this.setState({ startVisibleMonth: startVisibleMonth });
|
70 | _this.props.onVisibleMonthChange(startVisibleMonth, reason);
|
71 | }
|
72 | };
|
73 |
|
74 | _this.changeVisibleMonthByOffset = function (offset, type) {
|
75 | var offsetDate = _this.state.startVisibleMonth.clone().add(offset, type);
|
76 | _this.changeVisibleMonth(offsetDate, 'buttonClick');
|
77 | };
|
78 |
|
79 | _this.goPrevDecade = function () {
|
80 | _this.changeVisibleMonthByOffset(-10, 'years');
|
81 | };
|
82 |
|
83 | _this.goNextDecade = function () {
|
84 | _this.changeVisibleMonthByOffset(10, 'years');
|
85 | };
|
86 |
|
87 | _this.goPrevYear = function () {
|
88 | _this.changeVisibleMonthByOffset(-1, 'years');
|
89 | };
|
90 |
|
91 | _this.goNextYear = function () {
|
92 | _this.changeVisibleMonthByOffset(1, 'years');
|
93 | };
|
94 |
|
95 | _this.goPrevMonth = function () {
|
96 | _this.changeVisibleMonthByOffset(-1, 'months');
|
97 | };
|
98 |
|
99 | _this.goNextMonth = function () {
|
100 | _this.changeVisibleMonthByOffset(1, 'months');
|
101 | };
|
102 |
|
103 | var startValue = formatDateValue(props.startValue || props.defaultStartValue);
|
104 | var endValue = formatDateValue(props.endValue || props.defaultEndValue);
|
105 | var visibleMonth = getVisibleMonth(props.defaultVisibleMonth, startValue);
|
106 |
|
107 | _this.state = {
|
108 | startValue: startValue,
|
109 | endValue: endValue,
|
110 | mode: props.mode,
|
111 | prevMode: props.mode,
|
112 | startVisibleMonth: visibleMonth,
|
113 | activePanel: undefined,
|
114 | lastMode: undefined,
|
115 | lastPanelType: 'start'
|
116 | };
|
117 | _this.today = moment();
|
118 | return _this;
|
119 | }
|
120 |
|
121 | RangeCalendar.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
122 | var st = {};
|
123 | if ('startValue' in props) {
|
124 | var startValue = formatDateValue(props.startValue);
|
125 | st.startValue = startValue;
|
126 | if (startValue && !startValue.isSame(state.startValue, 'day')) {
|
127 | st.startVisibleMonth = startValue;
|
128 | }
|
129 | }
|
130 |
|
131 | if ('endValue' in props) {
|
132 | st.endValue = formatDateValue(props.endValue);
|
133 | }
|
134 |
|
135 | if ('mode' in props && state.prevMode !== props.mode) {
|
136 | st.prevMode = props.mode;
|
137 | st.mode = props.mode;
|
138 | }
|
139 |
|
140 | return st;
|
141 | };
|
142 |
|
143 | |
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 | RangeCalendar.prototype.render = function render() {
|
151 | var _classnames;
|
152 |
|
153 | var _props = this.props,
|
154 | prefix = _props.prefix,
|
155 | rtl = _props.rtl,
|
156 | dateCellRender = _props.dateCellRender,
|
157 | monthCellRender = _props.monthCellRender,
|
158 | yearCellRender = _props.yearCellRender,
|
159 | className = _props.className,
|
160 | format = _props.format,
|
161 | locale = _props.locale,
|
162 | showOtherMonth = _props.showOtherMonth,
|
163 | disabledDate = _props.disabledDate,
|
164 | disableChangeMode = _props.disableChangeMode,
|
165 | yearRange = _props.yearRange,
|
166 | others = _objectWithoutProperties(_props, ['prefix', 'rtl', 'dateCellRender', 'monthCellRender', 'yearCellRender', 'className', 'format', 'locale', 'showOtherMonth', 'disabledDate', 'disableChangeMode', 'yearRange']);
|
167 |
|
168 | var _state = this.state,
|
169 | startValue = _state.startValue,
|
170 | endValue = _state.endValue,
|
171 | mode = _state.mode,
|
172 | startVisibleMonth = _state.startVisibleMonth,
|
173 | activePanel = _state.activePanel;
|
174 |
|
175 |
|
176 |
|
177 | if (locale.momentLocale) {
|
178 | startValue && startValue.locale(locale.momentLocale);
|
179 | endValue && endValue.locale(locale.momentLocale);
|
180 | startVisibleMonth.locale(locale.momentLocale);
|
181 | }
|
182 |
|
183 | if (rtl) {
|
184 | others.dir = 'rtl';
|
185 | }
|
186 | var localeData = getLocaleData(locale.format || {}, startVisibleMonth.localeData());
|
187 |
|
188 | var endVisibleMonth = startVisibleMonth.clone().add(1, 'months');
|
189 |
|
190 | var headerProps = {
|
191 | prefix: prefix,
|
192 | rtl: rtl,
|
193 | mode: mode,
|
194 | locale: locale,
|
195 | momentLocale: localeData,
|
196 | startVisibleMonth: startVisibleMonth,
|
197 | endVisibleMonth: endVisibleMonth,
|
198 | changeVisibleMonth: this.changeVisibleMonth,
|
199 | changeMode: this.changeMode,
|
200 | yearRange: yearRange,
|
201 | disableChangeMode: disableChangeMode
|
202 | };
|
203 |
|
204 | var tableProps = {
|
205 | prefix: prefix,
|
206 | value: startValue,
|
207 | startValue: startValue,
|
208 | endValue: endValue,
|
209 | mode: mode,
|
210 | locale: locale,
|
211 | momentLocale: localeData,
|
212 | showOtherMonth: showOtherMonth,
|
213 | today: this.today,
|
214 | disabledDate: disabledDate,
|
215 | dateCellRender: dateCellRender,
|
216 | monthCellRender: monthCellRender,
|
217 | yearCellRender: yearCellRender,
|
218 | changeMode: this.changeMode,
|
219 | changeVisibleMonth: this.changeVisibleMonth
|
220 | };
|
221 |
|
222 | var visibleMonths = {
|
223 | start: startVisibleMonth,
|
224 | end: endVisibleMonth
|
225 | };
|
226 |
|
227 | var visibleMonth = visibleMonths[activePanel];
|
228 |
|
229 | var header = void 0;
|
230 | var table = void 0;
|
231 |
|
232 | switch (mode) {
|
233 | case CALENDAR_MODE_DATE:
|
234 | {
|
235 | table = [React.createElement(
|
236 | 'div',
|
237 | { className: prefix + 'calendar-body-left', key: 'left-panel' },
|
238 | React.createElement(DateTable, _extends({
|
239 | format: format
|
240 | }, tableProps, {
|
241 | visibleMonth: startVisibleMonth,
|
242 | onSelectDate: this.onSelectCell
|
243 | }))
|
244 | ), React.createElement(
|
245 | 'div',
|
246 | { className: prefix + 'calendar-body-right', key: 'right-panel' },
|
247 | React.createElement(DateTable, _extends({
|
248 | format: format
|
249 | }, tableProps, {
|
250 | visibleMonth: endVisibleMonth,
|
251 | onSelectDate: this.onSelectCell
|
252 | }))
|
253 | )];
|
254 | header = React.createElement(RangePanelHeader, _extends({}, headerProps, {
|
255 | goPrevYear: this.goPrevYear,
|
256 | goPrevMonth: this.goPrevMonth,
|
257 | goNextYear: this.goNextYear,
|
258 | goNextMonth: this.goNextMonth
|
259 | }));
|
260 | break;
|
261 | }
|
262 | case CALENDAR_MODE_MONTH:
|
263 | {
|
264 | table = React.createElement(MonthTable, _extends({}, tableProps, { visibleMonth: visibleMonth, onSelectMonth: this.onSelectCell }));
|
265 | header = React.createElement(MonthPanelHeader, _extends({}, headerProps, {
|
266 | visibleMonth: visibleMonth,
|
267 | goPrevYear: this.goPrevYear,
|
268 | goNextYear: this.goNextYear
|
269 | }));
|
270 | break;
|
271 | }
|
272 | case CALENDAR_MODE_YEAR:
|
273 | {
|
274 | table = React.createElement(YearTable, _extends({}, tableProps, {
|
275 | rtl: rtl,
|
276 | visibleMonth: visibleMonth,
|
277 | onSelectYear: this.onSelectCell,
|
278 | goPrevDecade: this.goPrevDecade,
|
279 | goNextDecade: this.goNextDecade
|
280 | }));
|
281 | header = React.createElement(YearPanelHeader, _extends({}, headerProps, {
|
282 | visibleMonth: visibleMonth,
|
283 | goPrevDecade: this.goPrevDecade,
|
284 | goNextDecade: this.goNextDecade
|
285 | }));
|
286 | break;
|
287 | }
|
288 | }
|
289 |
|
290 | var classNames = classnames((_classnames = {}, _classnames[prefix + 'calendar'] = true, _classnames[prefix + 'calendar-range'] = true, _classnames), className);
|
291 |
|
292 | return React.createElement(
|
293 | 'div',
|
294 | _extends({}, obj.pickOthers(RangeCalendar.propTypes, others), { className: classNames }),
|
295 | header,
|
296 | React.createElement(
|
297 | 'div',
|
298 | { className: prefix + 'calendar-body' },
|
299 | table
|
300 | )
|
301 | );
|
302 | };
|
303 |
|
304 | return RangeCalendar;
|
305 | }(React.Component), _class.propTypes = _extends({}, ConfigProvider.propTypes, {
|
306 | |
307 |
|
308 |
|
309 | prefix: PropTypes.string,
|
310 | rtl: PropTypes.bool,
|
311 | |
312 |
|
313 |
|
314 | defaultStartValue: checkMomentObj,
|
315 | |
316 |
|
317 |
|
318 | defaultEndValue: checkMomentObj,
|
319 | |
320 |
|
321 |
|
322 | startValue: checkMomentObj,
|
323 | |
324 |
|
325 |
|
326 | endValue: checkMomentObj,
|
327 |
|
328 | mode: PropTypes.oneOf(CALENDAR_MODES),
|
329 |
|
330 | disableChangeMode: PropTypes.bool,
|
331 |
|
332 | format: PropTypes.string,
|
333 | yearRange: PropTypes.arrayOf(PropTypes.number),
|
334 | |
335 |
|
336 |
|
337 | showOtherMonth: PropTypes.bool,
|
338 | |
339 |
|
340 |
|
341 | defaultVisibleMonth: PropTypes.func,
|
342 | |
343 |
|
344 |
|
345 |
|
346 |
|
347 | onVisibleMonthChange: PropTypes.func,
|
348 | |
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 | disabledDate: PropTypes.func,
|
355 | |
356 |
|
357 |
|
358 |
|
359 | onSelect: PropTypes.func,
|
360 | |
361 |
|
362 |
|
363 | dateCellRender: PropTypes.func,
|
364 | |
365 |
|
366 |
|
367 |
|
368 |
|
369 | monthCellRender: PropTypes.func,
|
370 | yearCellRender: PropTypes.func,
|
371 | locale: PropTypes.object,
|
372 | className: PropTypes.string
|
373 | }), _class.defaultProps = {
|
374 | prefix: 'next-',
|
375 | rtl: false,
|
376 | mode: CALENDAR_MODE_DATE,
|
377 | disableChangeMode: false,
|
378 | format: 'YYYY-MM-DD',
|
379 | dateCellRender: function dateCellRender(value) {
|
380 | return value.date();
|
381 | },
|
382 | onSelect: func.noop,
|
383 | onVisibleMonthChange: func.noop,
|
384 | locale: nextLocale.Calendar,
|
385 | showOtherMonth: false
|
386 | }, _temp);
|
387 | RangeCalendar.displayName = 'RangeCalendar';
|
388 |
|
389 |
|
390 | export default ConfigProvider.config(polyfill(RangeCalendar), {
|
391 | componentName: 'Calendar'
|
392 | }); |
\ | No newline at end of file |