1 | import _extends from 'babel-runtime/helpers/extends';
|
2 | import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
|
3 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
4 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
5 | import _inherits from 'babel-runtime/helpers/inherits';
|
6 |
|
7 | var _class, _temp, _initialiseProps;
|
8 |
|
9 | import React from 'react';
|
10 | import { polyfill } from 'react-lifecycles-compat';
|
11 | import * as PT from 'prop-types';
|
12 | import classnames from 'classnames';
|
13 | import defaultLocale from '../locale/zh-cn';
|
14 | import { func, datejs, obj } from '../util';
|
15 | import SharedPT from './prop-types';
|
16 |
|
17 | import { CALENDAR_MODE, CALENDAR_SHAPE, DATE_PANEL_MODE } from './constant';
|
18 | import HeaderPanel from './panels/header-panel';
|
19 | import DateTable from './panels/date-table';
|
20 |
|
21 | var pickProps = obj.pickProps,
|
22 | pickOthers = obj.pickOthers;
|
23 |
|
24 |
|
25 |
|
26 | function getPanelMode(mode) {
|
27 | return mode && (mode === CALENDAR_MODE.YEAR ? DATE_PANEL_MODE.MONTH : DATE_PANEL_MODE.DATE);
|
28 | }
|
29 |
|
30 | function isValueChanged(newVal, oldVal) {
|
31 | return newVal !== oldVal && !datejs(newVal).isSame(datejs(oldVal));
|
32 | }
|
33 |
|
34 | var Calendar = (_temp = _class = function (_React$Component) {
|
35 | _inherits(Calendar, _React$Component);
|
36 |
|
37 | function Calendar(props) {
|
38 | _classCallCheck(this, Calendar);
|
39 |
|
40 | var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
41 |
|
42 | _initialiseProps.call(_this);
|
43 |
|
44 | var defaultValue = props.defaultValue,
|
45 | mode = props.mode;
|
46 |
|
47 | var value = 'value' in props ? props.value : defaultValue;
|
48 | var panelValue = datejs('panelValue' in props ? props.panelValue : value || props.defaultPanelValue);
|
49 | var panelMode = props.panelMode || getPanelMode(mode) || DATE_PANEL_MODE.DATE;
|
50 |
|
51 | _this.state = {
|
52 | mode: mode,
|
53 | value: value,
|
54 | panelMode: panelMode,
|
55 | panelValue: panelValue.isValid() ? panelValue : datejs()
|
56 | };
|
57 | return _this;
|
58 | }
|
59 |
|
60 | Calendar.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
|
61 | var newState = null;
|
62 | var value = void 0;
|
63 | var panelValue = void 0;
|
64 |
|
65 | if ('value' in props && isValueChanged(props.value, state.value)) {
|
66 | value = props.value;
|
67 | panelValue = datejs(value);
|
68 | }
|
69 |
|
70 | if ('panelValue' in props) {
|
71 | panelValue = datejs(props.panelValue);
|
72 | }
|
73 |
|
74 |
|
75 | if (panelValue) {
|
76 | panelValue = panelValue.isValid() ? panelValue : datejs();
|
77 | newState = {
|
78 | panelValue: panelValue
|
79 | };
|
80 | }
|
81 | if (value) {
|
82 | newState.value = value;
|
83 | }
|
84 |
|
85 | return newState;
|
86 | };
|
87 |
|
88 | Calendar.prototype.render = function render() {
|
89 | var value = 'value' in this.props ? datejs(this.props.value) : this.state.value;
|
90 | var _state = this.state,
|
91 | panelMode = _state.panelMode,
|
92 | mode = _state.mode,
|
93 | panelValue = _state.panelValue;
|
94 |
|
95 | var _props = this.props,
|
96 | prefix = _props.prefix,
|
97 | shape = _props.shape,
|
98 | rtl = _props.rtl,
|
99 | className = _props.className,
|
100 | restProps = _objectWithoutProperties(_props, ['prefix', 'shape', 'rtl', 'className']);
|
101 |
|
102 | var sharedProps = {
|
103 | rtl: rtl,
|
104 | prefix: prefix,
|
105 | shape: shape,
|
106 | value: value,
|
107 | panelValue: panelValue
|
108 | };
|
109 |
|
110 | var headerPanelProps = _extends({}, pickProps(HeaderPanel.propTypes, restProps), sharedProps, {
|
111 | mode: mode,
|
112 | panelMode: panelMode,
|
113 | onPanelValueChange: this.onPanelValueChange,
|
114 | onModeChange: this.onModeChange,
|
115 | onPanelModeChange: this.onPanelModeChange,
|
116 | showModeSwitch: this.props.mode !== CALENDAR_MODE.YEAR
|
117 | });
|
118 |
|
119 | var dateTableProps = _extends({}, pickProps(DateTable.propTypes, restProps), sharedProps, {
|
120 | mode: panelMode,
|
121 | onSelect: this.onDateSelect
|
122 | });
|
123 |
|
124 | var classNames = classnames([prefix + 'calendar2', prefix + 'calendar2-' + shape, className]);
|
125 |
|
126 | return React.createElement(
|
127 | 'div',
|
128 | _extends({}, pickOthers(Calendar.propTypes, restProps), { dir: rtl ? 'rtl' : undefined, className: classNames }),
|
129 | React.createElement(HeaderPanel, headerPanelProps),
|
130 | React.createElement(
|
131 | 'div',
|
132 | { className: prefix + 'calendar2-body' },
|
133 | React.createElement(DateTable, dateTableProps)
|
134 | )
|
135 | );
|
136 | };
|
137 |
|
138 | return Calendar;
|
139 | }(React.Component), _class.propTypes = {
|
140 | rtl: PT.bool,
|
141 | name: PT.string,
|
142 | prefix: PT.string,
|
143 | locale: PT.object,
|
144 | |
145 |
|
146 |
|
147 | shape: SharedPT.shape,
|
148 | |
149 |
|
150 |
|
151 | mode: SharedPT.mode,
|
152 | |
153 |
|
154 |
|
155 | value: SharedPT.date,
|
156 | |
157 |
|
158 |
|
159 | defaultValue: SharedPT.date,
|
160 | |
161 |
|
162 |
|
163 | panelValue: SharedPT.date,
|
164 | |
165 |
|
166 |
|
167 | defaultPanelValue: SharedPT.date,
|
168 | |
169 |
|
170 |
|
171 | disabledDate: PT.func,
|
172 | |
173 |
|
174 |
|
175 | validRange: PT.arrayOf(SharedPT.date),
|
176 | |
177 |
|
178 |
|
179 | dateCellRender: PT.func,
|
180 | quarterCellRender: PT.func,
|
181 | monthCellRender: PT.func,
|
182 | yearCellRender: PT.func,
|
183 | |
184 |
|
185 |
|
186 | headerRender: PT.func,
|
187 | |
188 |
|
189 |
|
190 | onChange: PT.func,
|
191 | |
192 |
|
193 |
|
194 | onSelect: PT.func,
|
195 | |
196 |
|
197 |
|
198 | onPanelChange: PT.func,
|
199 | cellProps: PT.object,
|
200 | cellClassName: PT.oneOfType([PT.func, PT.string]),
|
201 | panelMode: PT.any,
|
202 | onPrev: PT.func,
|
203 | onNext: PT.func,
|
204 | onSuperPrev: PT.func,
|
205 | onSuperNext: PT.func,
|
206 | colNum: PT.number
|
207 | }, _class.defaultProps = {
|
208 | rtl: false,
|
209 | prefix: 'next-',
|
210 | locale: defaultLocale.Calendar,
|
211 | shape: CALENDAR_SHAPE.FULLSCREEN,
|
212 | mode: CALENDAR_MODE.MONTH,
|
213 | defaultPanelValue: datejs()
|
214 | }, _initialiseProps = function _initialiseProps() {
|
215 | var _this2 = this;
|
216 |
|
217 | this.switchPanelMode = function (mode) {
|
218 | var MONTH = DATE_PANEL_MODE.MONTH,
|
219 | YEAR = DATE_PANEL_MODE.YEAR,
|
220 | DECADE = DATE_PANEL_MODE.DECADE;
|
221 |
|
222 | var originalPanelMode = _this2.props.panelMode || getPanelMode(mode);
|
223 |
|
224 | switch (mode) {
|
225 | case YEAR:
|
226 | return MONTH;
|
227 | case DECADE:
|
228 | return YEAR;
|
229 | default:
|
230 | return originalPanelMode;
|
231 | }
|
232 | };
|
233 |
|
234 | this.shouldSwitchPanelMode = function () {
|
235 | var _props2 = _this2.props,
|
236 | mode = _props2.mode,
|
237 | shape = _props2.shape;
|
238 | var panelMode = _this2.state.panelMode;
|
239 |
|
240 | var originalPanelMode = _this2.props.panelMode || getPanelMode(mode);
|
241 | return shape === CALENDAR_SHAPE.PANEL && panelMode !== originalPanelMode;
|
242 | };
|
243 |
|
244 | this.onDateSelect = function (value, _, _ref) {
|
245 | var isCurrent = _ref.isCurrent;
|
246 | var panelMode = _this2.state.panelMode;
|
247 |
|
248 | var unit = panelMode === 'date' ? 'day' : panelMode;
|
249 |
|
250 | if (_this2.shouldSwitchPanelMode()) {
|
251 | _this2.onPanelChange(value, _this2.switchPanelMode(panelMode), 'DATESELECT_VALUE_SWITCH_MODE');
|
252 | } else {
|
253 | isCurrent || _this2.onPanelValueChange(value, 'DATESELECT');
|
254 | value.isSame(_this2.state.value, unit) || _this2.onChange(value);
|
255 |
|
256 | func.invoke(_this2.props, 'onSelect', [value]);
|
257 | }
|
258 | };
|
259 |
|
260 | this.onModeChange = function (mode, reason) {
|
261 | _this2.setState({
|
262 | mode: mode
|
263 | });
|
264 | var panelMode = getPanelMode(mode);
|
265 |
|
266 | if (_this2.state.panelMode !== panelMode) {
|
267 | _this2.onPanelModeChange(panelMode, reason);
|
268 | }
|
269 | };
|
270 |
|
271 | this.onPanelValueChange = function (panelValue, reason) {
|
272 | _this2.onPanelChange(panelValue, _this2.state.panelMode, reason);
|
273 | };
|
274 |
|
275 | this.onPanelModeChange = function (panelMode, reason) {
|
276 | _this2.onPanelChange(_this2.state.panelValue, panelMode, reason);
|
277 | };
|
278 |
|
279 | this.onPanelChange = function (value, mode, reason) {
|
280 | _this2.setState({
|
281 | panelMode: mode,
|
282 | panelValue: value
|
283 | });
|
284 |
|
285 | func.invoke(_this2.props, 'onPanelChange', [value, mode, reason]);
|
286 | };
|
287 |
|
288 | this.onChange = function (value) {
|
289 | _this2.setState({
|
290 | value: value,
|
291 | panelValue: value
|
292 | });
|
293 | func.invoke(_this2.props, 'onChange', [value]);
|
294 | };
|
295 | }, _temp);
|
296 | Calendar.displayName = 'Calendar';
|
297 |
|
298 |
|
299 | export default polyfill(Calendar); |
\ | No newline at end of file |