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 | import React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import toFragment from 'rc-util/es/Children/mapSelf';
|
7 | import MonthPanel from '../month/MonthPanel';
|
8 | import YearPanel from '../year/YearPanel';
|
9 | import DecadePanel from '../decade/DecadePanel';
|
10 |
|
11 | function goMonth(direction) {
|
12 | var next = this.props.value.clone();
|
13 | next.add(direction, 'months');
|
14 | this.props.onValueChange(next);
|
15 | }
|
16 |
|
17 | function goYear(direction) {
|
18 | var next = this.props.value.clone();
|
19 | next.add(direction, 'years');
|
20 | this.props.onValueChange(next);
|
21 | }
|
22 |
|
23 | function showIf(condition, el) {
|
24 | return condition ? el : null;
|
25 | }
|
26 |
|
27 | var CalendarHeader = function (_React$Component) {
|
28 | _inherits(CalendarHeader, _React$Component);
|
29 |
|
30 | function CalendarHeader(props) {
|
31 | _classCallCheck(this, CalendarHeader);
|
32 |
|
33 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
34 |
|
35 | _initialiseProps.call(_this);
|
36 |
|
37 | _this.nextMonth = goMonth.bind(_this, 1);
|
38 | _this.previousMonth = goMonth.bind(_this, -1);
|
39 | _this.nextYear = goYear.bind(_this, 1);
|
40 | _this.previousYear = goYear.bind(_this, -1);
|
41 |
|
42 | _this.state = { yearPanelReferer: null };
|
43 | return _this;
|
44 | }
|
45 |
|
46 | CalendarHeader.prototype.render = function render() {
|
47 | var _this2 = this;
|
48 |
|
49 | var props = this.props;
|
50 | var prefixCls = props.prefixCls,
|
51 | locale = props.locale,
|
52 | mode = props.mode,
|
53 | value = props.value,
|
54 | showTimePicker = props.showTimePicker,
|
55 | enableNext = props.enableNext,
|
56 | enablePrev = props.enablePrev,
|
57 | disabledMonth = props.disabledMonth,
|
58 | renderFooter = props.renderFooter;
|
59 |
|
60 |
|
61 | var panel = null;
|
62 | if (mode === 'month') {
|
63 | panel = React.createElement(MonthPanel, {
|
64 | locale: locale,
|
65 | value: value,
|
66 | rootPrefixCls: prefixCls,
|
67 | onSelect: this.onMonthSelect,
|
68 | onYearPanelShow: function onYearPanelShow() {
|
69 | return _this2.showYearPanel('month');
|
70 | },
|
71 | disabledDate: disabledMonth,
|
72 | cellRender: props.monthCellRender,
|
73 | contentRender: props.monthCellContentRender,
|
74 | renderFooter: renderFooter,
|
75 | changeYear: this.changeYear
|
76 | });
|
77 | }
|
78 | if (mode === 'year') {
|
79 | panel = React.createElement(YearPanel, {
|
80 | locale: locale,
|
81 | defaultValue: value,
|
82 | rootPrefixCls: prefixCls,
|
83 | onSelect: this.onYearSelect,
|
84 | onDecadePanelShow: this.showDecadePanel,
|
85 | renderFooter: renderFooter
|
86 | });
|
87 | }
|
88 | if (mode === 'decade') {
|
89 | panel = React.createElement(DecadePanel, {
|
90 | locale: locale,
|
91 | defaultValue: value,
|
92 | rootPrefixCls: prefixCls,
|
93 | onSelect: this.onDecadeSelect,
|
94 | renderFooter: renderFooter
|
95 | });
|
96 | }
|
97 |
|
98 | return React.createElement(
|
99 | 'div',
|
100 | { className: prefixCls + '-header' },
|
101 | React.createElement(
|
102 | 'div',
|
103 | { style: { position: 'relative' } },
|
104 | showIf(enablePrev && !showTimePicker, React.createElement('a', {
|
105 | className: prefixCls + '-prev-year-btn',
|
106 | role: 'button',
|
107 | onClick: this.previousYear,
|
108 | title: locale.previousYear
|
109 | })),
|
110 | showIf(enablePrev && !showTimePicker, React.createElement('a', {
|
111 | className: prefixCls + '-prev-month-btn',
|
112 | role: 'button',
|
113 | onClick: this.previousMonth,
|
114 | title: locale.previousMonth
|
115 | })),
|
116 | this.monthYearElement(showTimePicker),
|
117 | showIf(enableNext && !showTimePicker, React.createElement('a', {
|
118 | className: prefixCls + '-next-month-btn',
|
119 | onClick: this.nextMonth,
|
120 | title: locale.nextMonth
|
121 | })),
|
122 | showIf(enableNext && !showTimePicker, React.createElement('a', {
|
123 | className: prefixCls + '-next-year-btn',
|
124 | onClick: this.nextYear,
|
125 | title: locale.nextYear
|
126 | }))
|
127 | ),
|
128 | panel
|
129 | );
|
130 | };
|
131 |
|
132 | return CalendarHeader;
|
133 | }(React.Component);
|
134 |
|
135 | CalendarHeader.propTypes = {
|
136 | prefixCls: PropTypes.string,
|
137 | value: PropTypes.object,
|
138 | onValueChange: PropTypes.func,
|
139 | showTimePicker: PropTypes.bool,
|
140 | onPanelChange: PropTypes.func,
|
141 | locale: PropTypes.object,
|
142 | enablePrev: PropTypes.any,
|
143 | enableNext: PropTypes.any,
|
144 | disabledMonth: PropTypes.func,
|
145 | renderFooter: PropTypes.func,
|
146 | onMonthSelect: PropTypes.func
|
147 | };
|
148 | CalendarHeader.defaultProps = {
|
149 | enableNext: 1,
|
150 | enablePrev: 1,
|
151 | onPanelChange: function onPanelChange() {},
|
152 | onValueChange: function onValueChange() {}
|
153 | };
|
154 |
|
155 | var _initialiseProps = function _initialiseProps() {
|
156 | var _this3 = this;
|
157 |
|
158 | this.onMonthSelect = function (value) {
|
159 | _this3.props.onPanelChange(value, 'date');
|
160 | if (_this3.props.onMonthSelect) {
|
161 | _this3.props.onMonthSelect(value);
|
162 | } else {
|
163 | _this3.props.onValueChange(value);
|
164 | }
|
165 | };
|
166 |
|
167 | this.onYearSelect = function (value) {
|
168 | var referer = _this3.state.yearPanelReferer;
|
169 | _this3.setState({ yearPanelReferer: null });
|
170 | _this3.props.onPanelChange(value, referer);
|
171 | _this3.props.onValueChange(value);
|
172 | };
|
173 |
|
174 | this.onDecadeSelect = function (value) {
|
175 | _this3.props.onPanelChange(value, 'year');
|
176 | _this3.props.onValueChange(value);
|
177 | };
|
178 |
|
179 | this.changeYear = function (direction) {
|
180 | if (direction > 0) {
|
181 | _this3.nextYear();
|
182 | } else {
|
183 | _this3.previousYear();
|
184 | }
|
185 | };
|
186 |
|
187 | this.monthYearElement = function (showTimePicker) {
|
188 | var props = _this3.props;
|
189 | var prefixCls = props.prefixCls;
|
190 | var locale = props.locale;
|
191 | var value = props.value;
|
192 | var localeData = value.localeData();
|
193 | var monthBeforeYear = locale.monthBeforeYear;
|
194 | var selectClassName = prefixCls + '-' + (monthBeforeYear ? 'my-select' : 'ym-select');
|
195 | var timeClassName = showTimePicker ? ' ' + prefixCls + '-time-status' : '';
|
196 | var year = React.createElement(
|
197 | 'a',
|
198 | {
|
199 | className: prefixCls + '-year-select' + timeClassName,
|
200 | role: 'button',
|
201 | onClick: showTimePicker ? null : function () {
|
202 | return _this3.showYearPanel('date');
|
203 | },
|
204 | title: showTimePicker ? null : locale.yearSelect
|
205 | },
|
206 | value.format(locale.yearFormat)
|
207 | );
|
208 | var month = React.createElement(
|
209 | 'a',
|
210 | {
|
211 | className: prefixCls + '-month-select' + timeClassName,
|
212 | role: 'button',
|
213 | onClick: showTimePicker ? null : _this3.showMonthPanel,
|
214 | title: showTimePicker ? null : locale.monthSelect
|
215 | },
|
216 | locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value)
|
217 | );
|
218 | var day = void 0;
|
219 | if (showTimePicker) {
|
220 | day = React.createElement(
|
221 | 'a',
|
222 | {
|
223 | className: prefixCls + '-day-select' + timeClassName,
|
224 | role: 'button'
|
225 | },
|
226 | value.format(locale.dayFormat)
|
227 | );
|
228 | }
|
229 | var my = [];
|
230 | if (monthBeforeYear) {
|
231 | my = [month, day, year];
|
232 | } else {
|
233 | my = [year, month, day];
|
234 | }
|
235 | return React.createElement(
|
236 | 'span',
|
237 | { className: selectClassName },
|
238 | toFragment(my)
|
239 | );
|
240 | };
|
241 |
|
242 | this.showMonthPanel = function () {
|
243 |
|
244 | _this3.props.onPanelChange(null, 'month');
|
245 | };
|
246 |
|
247 | this.showYearPanel = function (referer) {
|
248 | _this3.setState({ yearPanelReferer: referer });
|
249 | _this3.props.onPanelChange(null, 'year');
|
250 | };
|
251 |
|
252 | this.showDecadePanel = function () {
|
253 | _this3.props.onPanelChange(null, 'decade');
|
254 | };
|
255 | };
|
256 |
|
257 | export default CalendarHeader; |
\ | No newline at end of file |