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