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 | import React from 'react';
|
8 | import PropTypes from 'prop-types';
|
9 | import Select from '../../select';
|
10 | import Radio from '../../radio';
|
11 | import ConfigProvider from '../../config-provider';
|
12 |
|
13 | var CardHeader = (_temp2 = _class = function (_React$Component) {
|
14 | _inherits(CardHeader, _React$Component);
|
15 |
|
16 | function CardHeader() {
|
17 | var _temp, _this, _ret;
|
18 |
|
19 | _classCallCheck(this, CardHeader);
|
20 |
|
21 | for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
22 | args[_key] = arguments[_key];
|
23 | }
|
24 |
|
25 | return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.selectContainerHandler = function (target) {
|
26 | var device = _this.props.device;
|
27 |
|
28 | if (device === 'phone') {
|
29 | return document.body;
|
30 | }
|
31 | return target.parentNode;
|
32 | }, _this.onYearChange = function (year) {
|
33 | var _this$props = _this.props,
|
34 | visibleMonth = _this$props.visibleMonth,
|
35 | changeVisibleMonth = _this$props.changeVisibleMonth;
|
36 |
|
37 | changeVisibleMonth(visibleMonth.clone().year(year), 'yearSelect');
|
38 | }, _this.changeVisibleMonth = function (month) {
|
39 | var _this$props2 = _this.props,
|
40 | visibleMonth = _this$props2.visibleMonth,
|
41 | changeVisibleMonth = _this$props2.changeVisibleMonth;
|
42 |
|
43 | changeVisibleMonth(visibleMonth.clone().month(month), 'monthSelect');
|
44 | }, _this.onModePanelChange = function (mode) {
|
45 | _this.props.changeMode(mode);
|
46 | }, _temp), _possibleConstructorReturn(_this, _ret);
|
47 | }
|
48 |
|
49 | CardHeader.prototype.getYearSelect = function getYearSelect(year) {
|
50 | var _props = this.props,
|
51 | prefix = _props.prefix,
|
52 | yearRangeOffset = _props.yearRangeOffset,
|
53 | _props$yearRange = _props.yearRange,
|
54 | yearRange = _props$yearRange === undefined ? [] : _props$yearRange,
|
55 | locale = _props.locale;
|
56 | var startYear = yearRange[0],
|
57 | endYear = yearRange[1];
|
58 |
|
59 | if (!startYear || !endYear) {
|
60 | startYear = year - yearRangeOffset;
|
61 | endYear = year + yearRangeOffset;
|
62 | }
|
63 |
|
64 | var options = [];
|
65 | for (var i = startYear; i <= endYear; i++) {
|
66 | options.push(React.createElement(
|
67 | Select.Option,
|
68 | { key: i, value: i },
|
69 | i
|
70 | ));
|
71 | }
|
72 |
|
73 | return React.createElement(
|
74 | Select,
|
75 | {
|
76 | prefix: prefix,
|
77 | value: year,
|
78 | 'aria-label': locale.yearSelectAriaLabel,
|
79 | onChange: this.onYearChange,
|
80 | popupContainer: this.selectContainerHandler
|
81 | },
|
82 | options
|
83 | );
|
84 | };
|
85 |
|
86 | CardHeader.prototype.getMonthSelect = function getMonthSelect(month) {
|
87 | var _props2 = this.props,
|
88 | prefix = _props2.prefix,
|
89 | momentLocale = _props2.momentLocale,
|
90 | locale = _props2.locale;
|
91 |
|
92 | var localeMonths = momentLocale.monthsShort();
|
93 | var options = [];
|
94 | for (var i = 0; i < 12; i++) {
|
95 | options.push(React.createElement(
|
96 | Select.Option,
|
97 | { key: i, value: i },
|
98 | localeMonths[i]
|
99 | ));
|
100 | }
|
101 | return React.createElement(
|
102 | Select,
|
103 | {
|
104 | 'aria-label': locale.monthSelectAriaLabel,
|
105 | prefix: prefix,
|
106 | value: month,
|
107 | onChange: this.changeVisibleMonth,
|
108 | popupContainer: this.selectContainerHandler
|
109 | },
|
110 | options
|
111 | );
|
112 | };
|
113 |
|
114 | CardHeader.prototype.render = function render() {
|
115 | var _props3 = this.props,
|
116 | prefix = _props3.prefix,
|
117 | mode = _props3.mode,
|
118 | locale = _props3.locale,
|
119 | visibleMonth = _props3.visibleMonth;
|
120 |
|
121 |
|
122 | var yearSelect = this.getYearSelect(visibleMonth.year());
|
123 | var monthSelect = mode === 'month' ? null : this.getMonthSelect(visibleMonth.month());
|
124 | var panelSelect = React.createElement(
|
125 | Radio.Group,
|
126 | { shape: 'button', size: 'medium', value: mode, onChange: this.onModePanelChange },
|
127 | React.createElement(
|
128 | Radio,
|
129 | { value: 'date' },
|
130 | locale.month
|
131 | ),
|
132 | React.createElement(
|
133 | Radio,
|
134 | { value: 'month' },
|
135 | locale.year
|
136 | )
|
137 | );
|
138 |
|
139 | return React.createElement(
|
140 | 'div',
|
141 | { className: prefix + 'calendar-header' },
|
142 | yearSelect,
|
143 | monthSelect,
|
144 | panelSelect
|
145 | );
|
146 | };
|
147 |
|
148 | return CardHeader;
|
149 | }(React.Component), _class.propTypes = {
|
150 | yearRange: PropTypes.arrayOf(PropTypes.number),
|
151 | yearRangeOffset: PropTypes.number,
|
152 | locale: PropTypes.object
|
153 | }, _class.defaultProps = {
|
154 | yearRangeOffset: 10
|
155 | }, _temp2);
|
156 | CardHeader.displayName = 'CardHeader';
|
157 |
|
158 |
|
159 | export default ConfigProvider.config(CardHeader); |
\ | No newline at end of file |