1 | 'use strict';
|
2 |
|
3 | exports.__esModule = true;
|
4 |
|
5 | var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
|
6 |
|
7 | var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
|
8 |
|
9 | var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
|
10 |
|
11 | var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
|
12 |
|
13 | var _inherits2 = require('babel-runtime/helpers/inherits');
|
14 |
|
15 | var _inherits3 = _interopRequireDefault(_inherits2);
|
16 |
|
17 | var _class, _temp2;
|
18 |
|
19 |
|
20 | var _react = require('react');
|
21 |
|
22 | var _react2 = _interopRequireDefault(_react);
|
23 |
|
24 | var _icon = require('../../icon');
|
25 |
|
26 | var _icon2 = _interopRequireDefault(_icon);
|
27 |
|
28 | var _dropdown = require('../../dropdown');
|
29 |
|
30 | var _dropdown2 = _interopRequireDefault(_dropdown);
|
31 |
|
32 | var _menu = require('./menu');
|
33 |
|
34 | var _menu2 = _interopRequireDefault(_menu);
|
35 |
|
36 | var _utils = require('../utils');
|
37 |
|
38 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
39 |
|
40 |
|
41 | var RangePanelHeader = (_temp2 = _class = function (_React$PureComponent) {
|
42 | (0, _inherits3.default)(RangePanelHeader, _React$PureComponent);
|
43 |
|
44 | function RangePanelHeader() {
|
45 | var _temp, _this, _ret;
|
46 |
|
47 | (0, _classCallCheck3.default)(this, RangePanelHeader);
|
48 |
|
49 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
50 | args[_key] = arguments[_key];
|
51 | }
|
52 |
|
53 | return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args))), _this), _this.selectContainerHandler = function (target) {
|
54 | return target.parentNode;
|
55 | }, _this.onYearChange = function (visibleMonth, year, tag) {
|
56 | var changeVisibleMonth = _this.props.changeVisibleMonth;
|
57 |
|
58 | var startYear = visibleMonth.clone().year(year).add(tag === 'end' ? -1 : 0, 'month');
|
59 | changeVisibleMonth(startYear, 'yearSelect');
|
60 | }, _this.changeVisibleMonth = function (visibleMonth, month, tag) {
|
61 | var changeVisibleMonth = _this.props.changeVisibleMonth;
|
62 |
|
63 | var startMonth = tag === 'end' ? month - 1 : month;
|
64 | changeVisibleMonth(visibleMonth.clone().month(startMonth), 'monthSelect');
|
65 | }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
|
66 | }
|
67 |
|
68 | RangePanelHeader.prototype.render = function render() {
|
69 | var _this2 = this;
|
70 |
|
71 | var _props = this.props,
|
72 | prefix = _props.prefix,
|
73 | startVisibleMonth = _props.startVisibleMonth,
|
74 | endVisibleMonth = _props.endVisibleMonth,
|
75 | _props$yearRange = _props.yearRange,
|
76 | yearRange = _props$yearRange === undefined ? [] : _props$yearRange,
|
77 | yearRangeOffset = _props.yearRangeOffset,
|
78 | momentLocale = _props.momentLocale,
|
79 | locale = _props.locale,
|
80 | changeMode = _props.changeMode,
|
81 | goNextMonth = _props.goNextMonth,
|
82 | goNextYear = _props.goNextYear,
|
83 | goPrevMonth = _props.goPrevMonth,
|
84 | goPrevYear = _props.goPrevYear,
|
85 | disableChangeMode = _props.disableChangeMode;
|
86 |
|
87 |
|
88 | var localedMonths = momentLocale.months();
|
89 | var startMonthLabel = localedMonths[startVisibleMonth.month()];
|
90 | var endMonthLabel = localedMonths[endVisibleMonth.month()];
|
91 | var startYearLabel = startVisibleMonth.year();
|
92 | var endYearLabel = endVisibleMonth.year();
|
93 | var btnCls = prefix + 'calendar-btn';
|
94 |
|
95 | var months = (0, _utils.getMonths)(momentLocale);
|
96 | var startYears = (0, _utils.getYears)(yearRange, yearRangeOffset, startVisibleMonth.year());
|
97 | var endYears = (0, _utils.getYears)(yearRange, yearRangeOffset, endVisibleMonth.year());
|
98 |
|
99 | return _react2.default.createElement(
|
100 | 'div',
|
101 | { className: prefix + 'calendar-panel-header' },
|
102 | _react2.default.createElement(
|
103 | 'button',
|
104 | {
|
105 | role: 'button',
|
106 | type: 'button',
|
107 | title: locale.prevYear,
|
108 | className: btnCls + ' ' + btnCls + '-prev-year',
|
109 | onClick: goPrevYear
|
110 | },
|
111 | _react2.default.createElement(_icon2.default, { type: 'arrow-double-left', className: prefix + 'calendar-symbol-prev-super' })
|
112 | ),
|
113 | _react2.default.createElement(
|
114 | 'button',
|
115 | {
|
116 | role: 'button',
|
117 | type: 'button',
|
118 | title: locale.prevMonth,
|
119 | className: btnCls + ' ' + btnCls + '-prev-month',
|
120 | onClick: goPrevMonth
|
121 | },
|
122 | _react2.default.createElement(_icon2.default, { type: 'arrow-left', className: prefix + 'calendar-symbol-prev' })
|
123 | ),
|
124 | _react2.default.createElement(
|
125 | 'div',
|
126 | { className: prefix + 'calendar-panel-header-left' },
|
127 | disableChangeMode ? _react2.default.createElement(
|
128 | _dropdown2.default,
|
129 | {
|
130 | align: 'tc bc',
|
131 | container: this.selectContainerHandler,
|
132 | trigger: _react2.default.createElement(
|
133 | 'button',
|
134 | { role: 'button', type: 'button', className: btnCls, title: startMonthLabel },
|
135 | startMonthLabel,
|
136 | _react2.default.createElement(_icon2.default, { type: 'arrow-down' })
|
137 | ),
|
138 | triggerType: 'click'
|
139 | },
|
140 | _react2.default.createElement(_menu2.default, {
|
141 | prefix: prefix,
|
142 | value: startVisibleMonth.month(),
|
143 | dataSource: months,
|
144 | onChange: function onChange(value) {
|
145 | return _this2.changeVisibleMonth(startVisibleMonth, value, 'start');
|
146 | }
|
147 | })
|
148 | ) : _react2.default.createElement(
|
149 | 'button',
|
150 | {
|
151 | role: 'button',
|
152 | type: 'button',
|
153 | title: startMonthLabel,
|
154 | className: btnCls,
|
155 | onClick: function onClick() {
|
156 | return changeMode('month', 'start');
|
157 | }
|
158 | },
|
159 | startMonthLabel
|
160 | ),
|
161 | disableChangeMode ? _react2.default.createElement(
|
162 | _dropdown2.default,
|
163 | {
|
164 | align: 'tc bc',
|
165 | container: this.selectContainerHandler,
|
166 | trigger: _react2.default.createElement(
|
167 | 'button',
|
168 | { role: 'button', type: 'button', className: btnCls, title: startYearLabel },
|
169 | startYearLabel,
|
170 | _react2.default.createElement(_icon2.default, { type: 'arrow-down' })
|
171 | ),
|
172 | triggerType: 'click'
|
173 | },
|
174 | _react2.default.createElement(_menu2.default, {
|
175 | prefix: prefix,
|
176 | value: startVisibleMonth.year(),
|
177 | dataSource: startYears,
|
178 | onChange: function onChange(v) {
|
179 | return _this2.onYearChange(startVisibleMonth, v, 'start');
|
180 | }
|
181 | })
|
182 | ) : _react2.default.createElement(
|
183 | 'button',
|
184 | {
|
185 | role: 'button',
|
186 | type: 'button',
|
187 | title: startYearLabel,
|
188 | className: btnCls,
|
189 | onClick: function onClick() {
|
190 | return changeMode('year', 'start');
|
191 | }
|
192 | },
|
193 | startYearLabel
|
194 | )
|
195 | ),
|
196 | _react2.default.createElement(
|
197 | 'div',
|
198 | { className: prefix + 'calendar-panel-header-right' },
|
199 | disableChangeMode ? _react2.default.createElement(
|
200 | _dropdown2.default,
|
201 | {
|
202 | align: 'tc bc',
|
203 | container: this.selectContainerHandler,
|
204 | trigger: _react2.default.createElement(
|
205 | 'button',
|
206 | { role: 'button', type: 'button', className: btnCls, title: endMonthLabel },
|
207 | endMonthLabel,
|
208 | _react2.default.createElement(_icon2.default, { type: 'arrow-down' })
|
209 | ),
|
210 | triggerType: 'click'
|
211 | },
|
212 | _react2.default.createElement(_menu2.default, {
|
213 | prefix: prefix,
|
214 | value: endVisibleMonth.month(),
|
215 | dataSource: months,
|
216 | onChange: function onChange(value) {
|
217 | return _this2.changeVisibleMonth(endVisibleMonth, value, 'end');
|
218 | }
|
219 | })
|
220 | ) : _react2.default.createElement(
|
221 | 'button',
|
222 | {
|
223 | role: 'button',
|
224 | type: 'button',
|
225 | title: endMonthLabel,
|
226 | className: btnCls,
|
227 | onClick: function onClick() {
|
228 | return changeMode('month', 'end');
|
229 | }
|
230 | },
|
231 | endMonthLabel
|
232 | ),
|
233 | disableChangeMode ? _react2.default.createElement(
|
234 | _dropdown2.default,
|
235 | {
|
236 | align: 'tc bc',
|
237 | container: this.selectContainerHandler,
|
238 | trigger: _react2.default.createElement(
|
239 | 'button',
|
240 | { role: 'button', type: 'button', className: btnCls, title: endYearLabel },
|
241 | endYearLabel,
|
242 | _react2.default.createElement(_icon2.default, { type: 'arrow-down' })
|
243 | ),
|
244 | triggerType: 'click'
|
245 | },
|
246 | _react2.default.createElement(_menu2.default, {
|
247 | prefix: prefix,
|
248 | value: endVisibleMonth.year(),
|
249 | dataSource: endYears,
|
250 | onChange: function onChange(v) {
|
251 | return _this2.onYearChange(endVisibleMonth, v, 'end');
|
252 | }
|
253 | })
|
254 | ) : _react2.default.createElement(
|
255 | 'button',
|
256 | {
|
257 | role: 'button',
|
258 | type: 'button',
|
259 | title: endYearLabel,
|
260 | className: btnCls,
|
261 | onClick: function onClick() {
|
262 | return changeMode('year', 'end');
|
263 | }
|
264 | },
|
265 | endYearLabel
|
266 | )
|
267 | ),
|
268 | _react2.default.createElement(
|
269 | 'button',
|
270 | {
|
271 | role: 'button',
|
272 | type: 'button',
|
273 | title: locale.nextMonth,
|
274 | className: btnCls + ' ' + btnCls + '-next-month',
|
275 | onClick: goNextMonth
|
276 | },
|
277 | _react2.default.createElement(_icon2.default, { type: 'arrow-right', className: prefix + 'calendar-symbol-next' })
|
278 | ),
|
279 | _react2.default.createElement(
|
280 | 'button',
|
281 | {
|
282 | role: 'button',
|
283 | type: 'button',
|
284 | title: locale.nextYear,
|
285 | className: btnCls + ' ' + btnCls + '-next-year',
|
286 | onClick: goNextYear
|
287 | },
|
288 | _react2.default.createElement(_icon2.default, { type: 'arrow-double-right', className: prefix + 'calendar-symbol-next-super' })
|
289 | )
|
290 | );
|
291 | };
|
292 |
|
293 | return RangePanelHeader;
|
294 | }(_react2.default.PureComponent), _class.defaultProps = {
|
295 | yearRangeOffset: 10
|
296 | }, _temp2);
|
297 | exports.default = RangePanelHeader;
|
298 | module.exports = exports['default']; |
\ | No newline at end of file |