1 | import _extends from "@babel/runtime/helpers/extends";
|
2 | import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3 | import "core-js/modules/es6.regexp.to-string";
|
4 | import "core-js/modules/es6.object.to-string";
|
5 | import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
6 | import _createClass from "@babel/runtime/helpers/createClass";
|
7 | import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
8 | import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
9 | import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
10 | import _inherits from "@babel/runtime/helpers/inherits";
|
11 | import React, { Component } from 'react';
|
12 | import { findDOMNode } from 'react-dom';
|
13 | import DatePicker from './DatePicker';
|
14 | import CommonLabel from '@beisen-platform/common-label';
|
15 | import CloseIcon from '@beisen-platform/react-icons/lib/icons/Close.js';
|
16 | var RangePicker = DatePicker.RangePicker;
|
17 | var MonthPicker = DatePicker.MonthPicker;
|
18 | var YearPicker = DatePicker.YearPicker;
|
19 | import './index.css';
|
20 |
|
21 | var DateTime =
|
22 |
|
23 | function (_Component) {
|
24 | _inherits(DateTime, _Component);
|
25 |
|
26 | function DateTime(props) {
|
27 | var _this;
|
28 |
|
29 | _classCallCheck(this, DateTime);
|
30 |
|
31 | _this = _possibleConstructorReturn(this, _getPrototypeOf(DateTime).call(this, props));
|
32 | _this.state = {
|
33 | value: "",
|
34 | active: props.isActive ? props.isActive : false,
|
35 | isActiveStyle: false,
|
36 | isChange: false,
|
37 | isClear: false
|
38 | };
|
39 | _this.clearData = _this.clearData.bind(_assertThisInitialized(_this));
|
40 | _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
|
41 | _this.changeActive = _this.changeActive.bind(_assertThisInitialized(_this));
|
42 | _this.disabledDate = _this.disabledDate.bind(_assertThisInitialized(_this));
|
43 | _this.headInputMouseOver = _this.headInputMouseOver.bind(_assertThisInitialized(_this));
|
44 | _this.headInputMouseOut = _this.headInputMouseOut.bind(_assertThisInitialized(_this));
|
45 | _this.hiddenClose = _this.hiddenClose.bind(_assertThisInitialized(_this));
|
46 | _this.handleFocus = _this.handleFocus.bind(_assertThisInitialized(_this));
|
47 | _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
|
48 | _this.changeActiveStyle = _this.changeActiveStyle.bind(_assertThisInitialized(_this));
|
49 | return _this;
|
50 | }
|
51 |
|
52 | _createClass(DateTime, [{
|
53 | key: "onChange",
|
54 | value: function onChange(value) {
|
55 |
|
56 |
|
57 |
|
58 |
|
59 | var _this$props = this.props,
|
60 | dateStyle = _this$props.dateStyle,
|
61 | onChange = _this$props.onChange;
|
62 | var type = dateStyle;
|
63 |
|
64 | if (value) {
|
65 | onChange && onChange(value, true);
|
66 | type.indexOf("RangePicker") > -1 ? this.setState({
|
67 | value: [this.formatValue(value[0]), this.formatValue(value[1])],
|
68 | isChange: true,
|
69 | isClear: false
|
70 | }) : this.setState({
|
71 | value: this.formatValue(value),
|
72 | isChange: true,
|
73 | isClear: false
|
74 | });
|
75 | } else {
|
76 | this.setState({
|
77 | value: '',
|
78 | isChange: true,
|
79 | isClear: false
|
80 | });
|
81 | onChange && onChange('', true);
|
82 | }
|
83 | }
|
84 | }, {
|
85 | key: "componentWillReceiveProps",
|
86 | value: function componentWillReceiveProps(nextProps) {
|
87 | if (nextProps) this.setState({
|
88 | active: nextProps.isActive,
|
89 | value: nextProps.value
|
90 | });
|
91 | }
|
92 | }, {
|
93 | key: "componentWillMount",
|
94 | value: function componentWillMount() {
|
95 | var _this$props2 = this.props,
|
96 | value = _this$props2.value,
|
97 | defaultValue = _this$props2.defaultValue;
|
98 | this.setState({
|
99 | value: value.length > 0 ? value : defaultValue
|
100 | });
|
101 | }
|
102 | }, {
|
103 | key: "formatValue",
|
104 | value: function formatValue(value) {
|
105 | var tempDate = new Date(value);
|
106 | var tempYear = tempDate.getFullYear().toString();
|
107 | var tempMonth = (tempDate.getMonth() + 1).toString();
|
108 | var tempDay = tempDate.getDate().toString();
|
109 | var tempHours = tempDate.getHours().toString();
|
110 | var tempMinutes = tempDate.getMinutes().toString();
|
111 | var tempSeconds = tempDate.getSeconds().toString();
|
112 | tempMonth = tempMonth.length == 1 ? '0' + tempMonth : tempMonth;
|
113 | tempDay = tempDay.length == 1 ? '0' + tempDay : tempDay;
|
114 | tempHours = tempHours.length == 1 ? '0' + tempHours : tempHours;
|
115 | tempMinutes = tempMinutes.length == 1 ? '0' + tempMinutes : tempMinutes;
|
116 | tempSeconds = tempSeconds.length == 1 ? '0' + tempSeconds : tempSeconds;
|
117 | var formatData = this.props.format.indexOf('-') >= 0 ? tempYear + "-" + tempMonth + "-" + tempDay : tempYear + "/" + tempMonth + "/" + tempDay;
|
118 | return formatData + " " + tempHours + ":" + tempMinutes + ":" + tempSeconds;
|
119 | }
|
120 | }, {
|
121 | key: "disabledDate",
|
122 | value: function disabledDate(current) {
|
123 | switch (this.props.disabledDate) {
|
124 | case "all":
|
125 | return current;
|
126 |
|
127 | case "beforeNotToday":
|
128 |
|
129 |
|
130 |
|
131 | var now = new Date();
|
132 |
|
133 | var _current$fields = _slicedToArray(current.fields, 4),
|
134 | empty = _current$fields[0],
|
135 | yyyy = _current$fields[1],
|
136 | MM = _current$fields[2],
|
137 | dd = _current$fields[3];
|
138 |
|
139 | var nowNumber = now.getFullYear() * 10000 + now.getMonth() * 100 + now.getDate();
|
140 | var currentNumber = yyyy * 10000 + MM * 100 + dd;
|
141 | return currentNumber < nowNumber;
|
142 |
|
143 |
|
144 | case "beforeToday":
|
145 | return current && current.getTime() < Date.now();
|
146 |
|
147 | case "afterToday":
|
148 | return current && current.getTime() > Date.now();
|
149 |
|
150 | case "lasttwoweeks":
|
151 | return !(current.getTime() > Date.now() - 1209600000 && current.getTime() < Date.now());
|
152 |
|
153 | default:
|
154 | return !current;
|
155 | }
|
156 | }
|
157 | }, {
|
158 | key: "clearData",
|
159 | value: function clearData(event) {
|
160 | var _this$props3 = this.props,
|
161 | dateStyle = _this$props3.dateStyle,
|
162 | onChange = _this$props3.onChange;
|
163 | var clearValue = dateStyle == "RangePicker" ? [] : "";
|
164 | this.setState({
|
165 | value: clearValue,
|
166 | isClear: true
|
167 | });
|
168 | this.hiddenClose();
|
169 | onChange && onChange(dateStyle == "RangePicker" ? [] : "", true);
|
170 | }
|
171 | }, {
|
172 | key: "changeActive",
|
173 | value: function changeActive(val) {
|
174 | this.props.changeActive && this.props.changeActive(val);
|
175 | }
|
176 | }, {
|
177 | key: "headInputMouseOver",
|
178 | value: function headInputMouseOver(event) {
|
179 | var dom = findDOMNode(this.refs.DateTimeClose);
|
180 |
|
181 | if (dom && dom.style.display == 'block') {
|
182 | return;
|
183 | } else {
|
184 | this.changeStyle(true);
|
185 | }
|
186 | }
|
187 | }, {
|
188 | key: "headInputMouseOut",
|
189 | value: function headInputMouseOut(event) {
|
190 | var node = event.target;
|
191 |
|
192 | if (node.nodeName.toLowerCase() == 'span' && node.className.indexOf("date-time__input-close") >= 0) {
|
193 | return;
|
194 | } else {
|
195 | this.changeStyle(false);
|
196 | }
|
197 | }
|
198 | }, {
|
199 | key: "handleFocus",
|
200 | value: function handleFocus(event) {
|
201 | this.props.changeActive(true);
|
202 | }
|
203 | }, {
|
204 | key: "handleBlur",
|
205 | value: function handleBlur(event) {
|
206 | this.props.changeActive(false);
|
207 | }
|
208 | }, {
|
209 | key: "hiddenClose",
|
210 | value: function hiddenClose() {
|
211 | this.changeStyle(false);
|
212 | }
|
213 | }, {
|
214 | key: "changeActiveStyle",
|
215 | value: function changeActiveStyle() {
|
216 | this.setState({
|
217 | isActiveStyle: !this.state.isActiveStyle
|
218 | });
|
219 | }
|
220 | }, {
|
221 | key: "changeStyle",
|
222 | value: function changeStyle(bool) {
|
223 | var dateTime = this.refs.dateTimeRef;
|
224 | if (!dateTime) return;
|
225 | var close = dateTime.querySelector(".date-time__input-close");
|
226 | if (!close) return;
|
227 | var dom = document.getElementsByClassName("ant-calendar-picker-open")[0];
|
228 | var _this$props4 = this.props,
|
229 | readonly = _this$props4.readonly,
|
230 | disabled = _this$props4.disabled;
|
231 | var _this$state = this.state,
|
232 | value = _this$state.value,
|
233 | active = _this$state.active;
|
234 | var style = !readonly && !disabled && value.length != 0 && (bool || dom && active) ? "block" : "none";
|
235 | close.style.display = style;
|
236 | }
|
237 | }, {
|
238 | key: "renderCloseIcon",
|
239 | value: function renderCloseIcon() {
|
240 | if (this.props.showOutDel) {
|
241 | return React.createElement("span", {
|
242 | ref: "DateTimeClose",
|
243 | style: {
|
244 | "display": "none"
|
245 | },
|
246 | className: "date-time__input-close",
|
247 | onClick: this.clearData
|
248 | }, React.createElement(CloseIcon, null));
|
249 | } else {
|
250 | return null;
|
251 | }
|
252 | }
|
253 | }, {
|
254 | key: "render",
|
255 | value: function render() {
|
256 | var _this$props5 = this.props,
|
257 | showStatus = _this$props5.showStatus,
|
258 | hidden = _this$props5.hidden,
|
259 | disabled = _this$props5.disabled,
|
260 | readonly = _this$props5.readonly,
|
261 | title = _this$props5.title,
|
262 | format = _this$props5.format,
|
263 | timeValue = _this$props5.timeValue,
|
264 | cmp_id = _this$props5.cmp_id,
|
265 | placeholder = _this$props5.placeholder,
|
266 | showTime = _this$props5.showTime,
|
267 | dateStyle = _this$props5.dateStyle,
|
268 | startPlaceholder = _this$props5.startPlaceholder,
|
269 | endPlaceholder = _this$props5.endPlaceholder,
|
270 | today = _this$props5.today,
|
271 | now = _this$props5.now,
|
272 | style = _this$props5.style,
|
273 | errorStatus = _this$props5.errorStatus,
|
274 | defaultValue = _this$props5.defaultValue,
|
275 | value = _this$props5.value,
|
276 | errorMsg = _this$props5.errorMsg,
|
277 | open = _this$props5.open,
|
278 | lablePos = _this$props5.lablePos,
|
279 | logicContainerId = _this$props5.logicContainerId;
|
280 | var active = this.state.active;
|
281 | var timeLabel = showStatus != 'search' && title && title.length > 0 ? React.createElement(CommonLabel, this.props) : "";
|
282 | var tempErrorMsg = "请填写正确信息",
|
283 | errorContent;
|
284 |
|
285 | if (errorStatus) {
|
286 | tempErrorMsg = errorMsg.length > 0 ? errorMsg : tempErrorMsg;
|
287 | errorContent = React.createElement("div", {
|
288 | className: 'base-input-show ' + (showStatus == 'search' ? 'search-label-margin' : '')
|
289 | }, React.createElement("span", {
|
290 | className: 'base-input-show-text input-pFoucus input-pError '
|
291 | }, tempErrorMsg));
|
292 | }
|
293 |
|
294 | var IsActive = {
|
295 | IsActive: active
|
296 | };
|
297 | var tempValue = value != undefined ? {
|
298 | value: this.state.value
|
299 | } : {};
|
300 | var tempDefaultValue = defaultValue.length > 0 ? {
|
301 | defaultValue: defaultValue
|
302 | } : {};
|
303 | var disabledTime = disabled ? " datetime-disabled" : "";
|
304 | var readonlyTime = readonly ? " datetime-readonly" : "";
|
305 | var tempDisabled = disabled ? true : readonly ? true : false;
|
306 |
|
307 | if (hidden) {
|
308 | return React.createElement("div", null);
|
309 | } else {
|
310 | switch (dateStyle) {
|
311 | case "RangePicker":
|
312 | return React.createElement("div", {
|
313 | ref: "dateTimeRef",
|
314 | className: 'date-time__content form-item ' + disabledTime + readonlyTime
|
315 | }, timeLabel, React.createElement("div", {
|
316 | className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : '')
|
317 | }, React.createElement(RangePicker, _extends({
|
318 | size: "",
|
319 | logicContainerId: logicContainerId
|
320 | }, tempValue, IsActive, {
|
321 | type: dateStyle,
|
322 | defaultValue: defaultValue,
|
323 | showTime: showTime,
|
324 | format: format,
|
325 | disabled: tempDisabled,
|
326 | onChange: this.onChange,
|
327 | onFocus: this.handleFocus,
|
328 | onBlur: this.handleBlur,
|
329 | placeholder: placeholder,
|
330 | disabledDate: this.disabledDate,
|
331 | style: style,
|
332 | errorStatus: errorStatus,
|
333 | changeActive: this.changeActive,
|
334 | startPlaceholder: startPlaceholder,
|
335 | endPlaceholder: endPlaceholder,
|
336 | now: now,
|
337 | readonly: readonly,
|
338 | today: today,
|
339 | showStatus: showStatus,
|
340 | lablePos: lablePos
|
341 | })), errorContent));
|
342 |
|
343 | case 'RangePickerMonth':
|
344 | return React.createElement("div", {
|
345 | ref: "dateTimeRef",
|
346 | className: 'date-time__content form-item ' + disabledTime + readonlyTime
|
347 | }, timeLabel, React.createElement("div", {
|
348 | className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : '')
|
349 | }, React.createElement(RangePicker, _extends({
|
350 | size: "",
|
351 | logicContainerId: logicContainerId
|
352 | }, tempValue, IsActive, {
|
353 | type: 'RangePickerMonth',
|
354 | defaultValue: defaultValue,
|
355 | showTime: showTime,
|
356 | format: format,
|
357 | disabled: tempDisabled,
|
358 | onChange: this.onChange,
|
359 | disabledDate: this.disabledDate,
|
360 | onFocus: this.handleFocus,
|
361 | onBlur: this.handleBlur,
|
362 | placeholder: placeholder,
|
363 | style: style,
|
364 | errorStatus: errorStatus,
|
365 | changeActive: this.changeActive,
|
366 | startPlaceholder: startPlaceholder,
|
367 | endPlaceholder: endPlaceholder,
|
368 | now: now,
|
369 | readonly: readonly,
|
370 | today: today,
|
371 | showStatus: showStatus,
|
372 | lablePos: lablePos
|
373 | })), errorContent));
|
374 |
|
375 | case 'RangePickerYear':
|
376 | return React.createElement("div", {
|
377 | ref: "dateTimeRef",
|
378 | className: 'date-time__content form-item ' + disabledTime + readonlyTime
|
379 | }, timeLabel, React.createElement("div", {
|
380 | className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : '')
|
381 | }, React.createElement(RangePicker, _extends({
|
382 | size: "",
|
383 | logicContainerId: logicContainerId
|
384 | }, tempValue, IsActive, {
|
385 | type: 'RangePickerYear',
|
386 | defaultValue: defaultValue,
|
387 | showTime: showTime,
|
388 | format: format,
|
389 | disabled: tempDisabled,
|
390 | onChange: this.onChange,
|
391 | onFocus: this.handleFocus,
|
392 | onBlur: this.handleBlur,
|
393 | placeholder: placeholder,
|
394 | disabledDate: this.disabledDate,
|
395 | style: style,
|
396 | errorStatus: errorStatus,
|
397 | changeActive: this.changeActive,
|
398 | startPlaceholder: startPlaceholder,
|
399 | endPlaceholder: endPlaceholder,
|
400 | now: now,
|
401 | lablePos: lablePos,
|
402 | readonly: readonly,
|
403 | today: today,
|
404 | showStatus: showStatus
|
405 | })), errorContent));
|
406 |
|
407 | case "MonthPicker":
|
408 | return React.createElement("div", {
|
409 | ref: "dateTimeRef",
|
410 | className: 'date-time__content form-item ' + disabledTime + readonlyTime
|
411 | }, timeLabel, React.createElement("div", {
|
412 | className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : ''),
|
413 | onMouseOver: this.headInputMouseOver,
|
414 | onMouseOut: this.headInputMouseOut
|
415 | }, React.createElement(MonthPicker, _extends({
|
416 | size: "",
|
417 | logicContainerId: logicContainerId,
|
418 | type: dateStyle,
|
419 | defaultValue: defaultValue
|
420 | }, tempValue, IsActive, {
|
421 | format: format,
|
422 | disabledDate: this.disabledDate,
|
423 | disabled: tempDisabled,
|
424 | onChange: this.onChange,
|
425 | onFocus: this.handleFocus,
|
426 | onBlur: this.handleBlur,
|
427 | hiddenClose: this.hiddenClose,
|
428 | changeActive: this.changeActive,
|
429 | placeholder: placeholder,
|
430 | style: style,
|
431 | readonly: readonly,
|
432 | lablePos: lablePos,
|
433 | errorStatus: errorStatus,
|
434 | showStatus: showStatus
|
435 | })), this.renderCloseIcon(), errorContent));
|
436 |
|
437 | case 'YearPicker':
|
438 | return React.createElement("div", {
|
439 | ref: "dateTimeRef",
|
440 | className: 'date-time__content form-item ' + disabledTime + readonlyTime
|
441 | }, timeLabel, React.createElement("div", {
|
442 | className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : ''),
|
443 | onMouseOver: this.headInputMouseOver,
|
444 | onMouseOut: this.headInputMouseOut
|
445 | }, React.createElement(YearPicker, _extends({
|
446 | logicContainerId: logicContainerId,
|
447 | size: "",
|
448 | yearPicker: true,
|
449 | defaultValue: defaultValue,
|
450 | type: dateStyle
|
451 | }, tempValue, IsActive, {
|
452 | format: format,
|
453 | disabled: tempDisabled,
|
454 | disabledDate: this.disabledDate,
|
455 | onChange: this.onChange,
|
456 | onFocus: this.handleFocus,
|
457 | onBlur: this.handleBlur,
|
458 | changeActive: this.changeActive,
|
459 | hiddenClose: this.hiddenClose,
|
460 | placeholder: placeholder,
|
461 | style: style,
|
462 | readonly: readonly,
|
463 | lablePos: lablePos,
|
464 | errorStatus: errorStatus,
|
465 | showStatus: showStatus
|
466 | })), this.renderCloseIcon(), errorContent));
|
467 |
|
468 | default:
|
469 | return React.createElement("div", {
|
470 | ref: "dateTimeRef",
|
471 | className: 'date-time__content form-item ' + disabledTime + readonlyTime
|
472 | }, timeLabel, React.createElement("div", {
|
473 | tabIndex: "0",
|
474 | className: 'form-item__control ' + (active ? 'form-item__control_is-active' : '') + (errorStatus ? ' form-item__control_has-error' : ''),
|
475 | onMouseOver: this.headInputMouseOver,
|
476 | onMouseOut: this.headInputMouseOut
|
477 | }, React.createElement(DatePicker, _extends({
|
478 | size: "",
|
479 | logicContainerId: logicContainerId
|
480 | }, IsActive, tempDefaultValue, tempValue, {
|
481 | showTime: showTime
|
482 | ,
|
483 | dateStyle: dateStyle
|
484 | ,
|
485 | cmp_id: cmp_id
|
486 | ,
|
487 | format: format,
|
488 | timeValue: timeValue,
|
489 | disabled: tempDisabled,
|
490 | changeActive: this.changeActive,
|
491 | onChange: this.onChange,
|
492 | onFocus: this.handleFocus,
|
493 | onBlur: this.handleBlur,
|
494 | placeholder: placeholder,
|
495 | disabledDate: this.disabledDate,
|
496 | hiddenClose: this.hiddenClose,
|
497 | showStatus: showStatus,
|
498 | readonly: readonly,
|
499 | lablePos: lablePos,
|
500 | open: open,
|
501 | style: style,
|
502 | errorStatus: errorStatus,
|
503 | changeActiveStyle: this.changeActiveStyle,
|
504 | removeSuffixIcon: this.props.removeSuffixIcon
|
505 | })), this.renderCloseIcon(), errorContent));
|
506 | }
|
507 | }
|
508 | }
|
509 | }]);
|
510 |
|
511 | return DateTime;
|
512 | }(Component);
|
513 |
|
514 | DateTime.defaultProps = {
|
515 | placeholder: "请选择",
|
516 | showOutDel: true,
|
517 | dateStyle: 'DatePicker',
|
518 | changeActive: function changeActive() {}
|
519 | };
|
520 | export { DateTime as default }; |
\ | No newline at end of file |