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 DatePanelHeader = (_temp2 = _class = function (_React$PureComponent) {
|
16 | _inherits(DatePanelHeader, _React$PureComponent);
|
17 |
|
18 | function DatePanelHeader() {
|
19 | var _temp, _this, _ret;
|
20 |
|
21 | _classCallCheck(this, DatePanelHeader);
|
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 (year) {
|
30 | var _this$props = _this.props,
|
31 | visibleMonth = _this$props.visibleMonth,
|
32 | changeVisibleMonth = _this$props.changeVisibleMonth;
|
33 |
|
34 | changeVisibleMonth(visibleMonth.clone().year(year), 'yearSelect');
|
35 | }, _this.changeVisibleMonth = function (month) {
|
36 | var _this$props2 = _this.props,
|
37 | visibleMonth = _this$props2.visibleMonth,
|
38 | changeVisibleMonth = _this$props2.changeVisibleMonth;
|
39 |
|
40 | changeVisibleMonth(visibleMonth.clone().month(month), 'monthSelect');
|
41 | }, _temp), _possibleConstructorReturn(_this, _ret);
|
42 | }
|
43 |
|
44 | DatePanelHeader.prototype.render = function render() {
|
45 | var _this2 = this;
|
46 |
|
47 | var _props = this.props,
|
48 | prefix = _props.prefix,
|
49 | visibleMonth = _props.visibleMonth,
|
50 | momentLocale = _props.momentLocale,
|
51 | locale = _props.locale,
|
52 | changeMode = _props.changeMode,
|
53 | goNextMonth = _props.goNextMonth,
|
54 | goNextYear = _props.goNextYear,
|
55 | goPrevMonth = _props.goPrevMonth,
|
56 | goPrevYear = _props.goPrevYear,
|
57 | disableChangeMode = _props.disableChangeMode,
|
58 | yearRangeOffset = _props.yearRangeOffset,
|
59 | _props$yearRange = _props.yearRange,
|
60 | yearRange = _props$yearRange === undefined ? [] : _props$yearRange;
|
61 |
|
62 |
|
63 | var localedMonths = momentLocale.months();
|
64 | var monthLabel = localedMonths[visibleMonth.month()];
|
65 | var yearLabel = visibleMonth.year();
|
66 | var btnCls = prefix + 'calendar-btn';
|
67 |
|
68 | var monthButton = React.createElement(
|
69 | 'button',
|
70 | {
|
71 | role: 'button',
|
72 | type: 'button',
|
73 | className: btnCls,
|
74 | title: monthLabel,
|
75 | onClick: function onClick() {
|
76 | return changeMode('month', 'start');
|
77 | }
|
78 | },
|
79 | monthLabel
|
80 | );
|
81 |
|
82 | var yearButton = React.createElement(
|
83 | 'button',
|
84 | {
|
85 | role: 'button',
|
86 | type: 'button',
|
87 | className: btnCls,
|
88 | title: yearLabel,
|
89 | onClick: function onClick() {
|
90 | return changeMode('year', 'start');
|
91 | }
|
92 | },
|
93 | yearLabel
|
94 | );
|
95 |
|
96 | if (disableChangeMode) {
|
97 | var months = getMonths(momentLocale);
|
98 | var years = getYears(yearRange, yearRangeOffset, visibleMonth.year());
|
99 |
|
100 | monthButton = React.createElement(
|
101 | Dropdown,
|
102 | {
|
103 | align: 'tc bc',
|
104 | container: this.selectContainerHandler,
|
105 | trigger: React.createElement(
|
106 | 'button',
|
107 | { role: 'button', type: 'button', className: btnCls, title: monthLabel },
|
108 | monthLabel,
|
109 | React.createElement(Icon, { type: 'arrow-down' })
|
110 | ),
|
111 | triggerType: 'click'
|
112 | },
|
113 | React.createElement(SelectMenu, {
|
114 | prefix: prefix,
|
115 | value: visibleMonth.month(),
|
116 | dataSource: months,
|
117 | onChange: function onChange(value) {
|
118 | return _this2.changeVisibleMonth(value);
|
119 | }
|
120 | })
|
121 | );
|
122 |
|
123 | yearButton = React.createElement(
|
124 | Dropdown,
|
125 | {
|
126 | align: 'tc bc',
|
127 | container: this.selectContainerHandler,
|
128 | trigger: React.createElement(
|
129 | 'button',
|
130 | { role: 'button', type: 'button', className: btnCls, title: yearLabel },
|
131 | yearLabel,
|
132 | React.createElement(Icon, { type: 'arrow-down' })
|
133 | ),
|
134 | triggerType: 'click'
|
135 | },
|
136 | React.createElement(SelectMenu, {
|
137 | prefix: prefix,
|
138 | value: visibleMonth.year(),
|
139 | dataSource: years,
|
140 | onChange: this.onYearChange
|
141 | })
|
142 | );
|
143 | }
|
144 |
|
145 | return React.createElement(
|
146 | 'div',
|
147 | { className: prefix + 'calendar-panel-header' },
|
148 | React.createElement(
|
149 | 'button',
|
150 | {
|
151 | role: 'button',
|
152 | type: 'button',
|
153 | title: locale.prevYear,
|
154 | className: btnCls + ' ' + btnCls + '-prev-year',
|
155 | onClick: goPrevYear
|
156 | },
|
157 | React.createElement(Icon, { type: 'arrow-double-left', className: prefix + 'calendar-symbol-prev-super' })
|
158 | ),
|
159 | React.createElement(
|
160 | 'button',
|
161 | {
|
162 | role: 'button',
|
163 | type: 'button',
|
164 | title: locale.prevMonth,
|
165 | className: btnCls + ' ' + btnCls + '-prev-month',
|
166 | onClick: goPrevMonth
|
167 | },
|
168 | React.createElement(Icon, { type: 'arrow-left', className: prefix + 'calendar-symbol-prev' })
|
169 | ),
|
170 | React.createElement(
|
171 | 'div',
|
172 | { className: prefix + 'calendar-panel-header-full' },
|
173 | monthButton,
|
174 | yearButton
|
175 | ),
|
176 | React.createElement(
|
177 | 'button',
|
178 | {
|
179 | role: 'button',
|
180 | type: 'button',
|
181 | title: locale.nextMonth,
|
182 | className: btnCls + ' ' + btnCls + '-next-month',
|
183 | onClick: goNextMonth
|
184 | },
|
185 | React.createElement(Icon, { type: 'arrow-right', className: prefix + 'calendar-symbol-next' })
|
186 | ),
|
187 | React.createElement(
|
188 | 'button',
|
189 | {
|
190 | role: 'button',
|
191 | type: 'button',
|
192 | title: locale.nextYear,
|
193 | className: btnCls + ' ' + btnCls + '-next-year',
|
194 | onClick: goNextYear
|
195 | },
|
196 | React.createElement(Icon, { type: 'arrow-double-right', className: prefix + 'calendar-symbol-next-super' })
|
197 | )
|
198 | );
|
199 | };
|
200 |
|
201 | return DatePanelHeader;
|
202 | }(React.PureComponent), _class.defaultProps = {
|
203 | yearRangeOffset: 10
|
204 | }, _temp2);
|
205 |
|
206 |
|
207 | export default DatePanelHeader; |
\ | No newline at end of file |