1 | import _extends from "@babel/runtime/helpers/extends";
|
2 | import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3 | import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
4 | import _createClass from "@babel/runtime/helpers/createClass";
|
5 | import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
6 | import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
7 | import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
8 | import _inherits from "@babel/runtime/helpers/inherits";
|
9 | import React from 'react';
|
10 | import GregorianCalendar from 'gregorian-calendar';
|
11 | import RangeCalendar from './rc-calendar/lib/RangeCalendar';
|
12 | import RcDatePicker from './rc-calendar/lib/Picker';
|
13 | import classNames from 'classnames';
|
14 | import ArrowDownIcon from '@beisen-platform/react-icons/lib/icons/ArrowdownNomal.js';
|
15 |
|
16 | var RangePicker =
|
17 |
|
18 | function (_React$Component) {
|
19 | _inherits(RangePicker, _React$Component);
|
20 |
|
21 | function RangePicker(_props) {
|
22 | var _this;
|
23 |
|
24 | _classCallCheck(this, RangePicker);
|
25 |
|
26 | _this = _possibleConstructorReturn(this, _getPrototypeOf(RangePicker).call(this, _props));
|
27 |
|
28 | _this.handleChange = function (value) {
|
29 | var props = _this.props;
|
30 |
|
31 | if (!('value' in props)) {
|
32 | _this.setState({
|
33 | value: value
|
34 | });
|
35 | }
|
36 |
|
37 | var startDate = value[0] ? new Date(value[0].getTime()) : null;
|
38 | var endDate = value[1] ? new Date(value[1].getTime()) : null;
|
39 | var startDateString = value[0] ? props.getFormatter().format(value[0]) : '';
|
40 | var endDateString = value[1] ? props.getFormatter().format(value[1]) : '';
|
41 | props.onChange([startDate, endDate], [startDateString, endDateString]);
|
42 | };
|
43 |
|
44 | _this.handleKeyUp = function (e) {
|
45 | var self = _assertThisInitialized(_this);
|
46 |
|
47 | if (e.target.className.indexOf('ant-calendar-range-picker') < 0) {
|
48 | }
|
49 | };
|
50 |
|
51 | var _this$props = _this.props,
|
52 | _value = _this$props.value,
|
53 | defaultValue = _this$props.defaultValue,
|
54 | parseDateFromValue = _this$props.parseDateFromValue;
|
55 | var start = _value && _value[0] || defaultValue[0];
|
56 | var end = _value && _value[1] || defaultValue[1];
|
57 | _this.state = {
|
58 | value: [parseDateFromValue(start), parseDateFromValue(end)]
|
59 | };
|
60 | return _this;
|
61 | }
|
62 |
|
63 | _createClass(RangePicker, [{
|
64 | key: "componentDidMount",
|
65 | value: function componentDidMount() {
|
66 | document.addEventListener('keyup', this.handleKeyUp);
|
67 | }
|
68 | }, {
|
69 | key: "componentWillUnmount",
|
70 | value: function componentWillUnmount() {
|
71 | document.removeEventListener('keyup', this.handleKeyUp);
|
72 | }
|
73 | }, {
|
74 | key: "componentWillReceiveProps",
|
75 | value: function componentWillReceiveProps(nextProps) {
|
76 | if ('value' in nextProps) {
|
77 | var value = nextProps.value || [];
|
78 |
|
79 | if (!value[0] || !value[1]) {
|
80 | return;
|
81 | }
|
82 |
|
83 | if (value[0].length == 1 || value[1].length == 1) {
|
84 | return;
|
85 | }
|
86 |
|
87 | var start = nextProps.parseDateFromValue(value[0]);
|
88 | var end = nextProps.parseDateFromValue(value[1]);
|
89 | this.setState({
|
90 | value: [start, end]
|
91 | });
|
92 | }
|
93 | }
|
94 | }, {
|
95 | key: "render",
|
96 | value: function render() {
|
97 | var _this2 = this;
|
98 |
|
99 | var props = this.props;
|
100 | var locale = props.locale;
|
101 |
|
102 |
|
103 |
|
104 | locale.lang.now = "回到此刻";
|
105 | locale.lang.today = "回到今天";
|
106 | var defaultCalendarValue = new GregorianCalendar(locale);
|
107 | defaultCalendarValue.setTime(Date.now());
|
108 | var _this$props2 = this.props,
|
109 | disabledDate = _this$props2.disabledDate,
|
110 | showTime = _this$props2.showTime,
|
111 | getCalendarContainer = _this$props2.getCalendarContainer,
|
112 | transitionName = _this$props2.transitionName,
|
113 | disabled = _this$props2.disabled,
|
114 | popupStyle = _this$props2.popupStyle,
|
115 | align = _this$props2.align,
|
116 | style = _this$props2.style,
|
117 | onOk = _this$props2.onOk;
|
118 | var state = this.state;
|
119 | var calendarClassName = classNames(_defineProperty({}, 'ant-calendar-time', showTime));
|
120 | var pickerChangeHandler = {
|
121 | onChange: this.handleChange
|
122 | };
|
123 | var calendarHandler = {
|
124 | onOk: this.handleChange
|
125 | };
|
126 |
|
127 | if (props.timePicker) {
|
128 | pickerChangeHandler.onChange = function (value) {
|
129 |
|
130 | if (value === null || value.length === 0) {
|
131 | _this2.handleChange(value);
|
132 | }
|
133 | };
|
134 | } else {
|
135 | calendarHandler = {};
|
136 | }
|
137 |
|
138 | var startPlaceholder = 'startPlaceholder' in this.props ? props.startPlaceholder : locale.lang.rangePlaceholder[0];
|
139 | var endPlaceholder = 'endPlaceholder' in props ? props.endPlaceholder : locale.lang.rangePlaceholder[1];
|
140 | var calendar = React.createElement(RangeCalendar, _extends({
|
141 | type: props.type,
|
142 | prefixCls: "ant-calendar",
|
143 | showOk: true,
|
144 | className: calendarClassName,
|
145 | timePicker: props.timePicker,
|
146 | disabledDate: disabledDate,
|
147 | dateInputPlaceholder: [startPlaceholder, endPlaceholder],
|
148 | locale: locale.lang,
|
149 | onOk: onOk,
|
150 | defaultValue: [defaultCalendarValue, defaultCalendarValue]
|
151 | }, calendarHandler));
|
152 | var showClassName = '',
|
153 | icon = React.createElement("span", {
|
154 | className: "ant-calendar-picker-icon arrowdown-nomal-svg"
|
155 | }, React.createElement(ArrowDownIcon, {
|
156 | width: 11,
|
157 | height: 6
|
158 | }));
|
159 |
|
160 | if (props.showStatus == 'search') {
|
161 | icon = React.createElement("span", {
|
162 | className: "icon-label"
|
163 | });
|
164 | showClassName = 'date-time-search-status ';
|
165 | }
|
166 |
|
167 | var showStatus = this.props.showStatus;
|
168 | return React.createElement("span", {
|
169 | className: showClassName + props.pickerClass,
|
170 | style: style
|
171 | }, React.createElement(RcDatePicker, _extends({
|
172 | transitionName: transitionName,
|
173 | type: props.type,
|
174 | disabled: disabled,
|
175 | showStatus: showStatus,
|
176 | calendar: calendar,
|
177 | value: state.value,
|
178 | open: props.open,
|
179 | disabledDate: disabledDate,
|
180 | prefixCls: "ant-calendar-picker-container",
|
181 | style: popupStyle,
|
182 | align: align,
|
183 | getCalendarContainer: getCalendarContainer,
|
184 | onOpen: props.toggleOpen,
|
185 | onClose: props.toggleOpen
|
186 | }, pickerChangeHandler), function (_ref) {
|
187 | var value = _ref.value;
|
188 | var start = value[0];
|
189 | var end = value[1];
|
190 | return React.createElement("span", {
|
191 | className: props.pickerInputClass,
|
192 | disabled: disabled
|
193 | }, React.createElement("input", {
|
194 | disabled: disabled,
|
195 | value: start ? props.getFormatter().format(start) : '',
|
196 | placeholder: startPlaceholder,
|
197 | className: "ant-calendar-range-picker-input",
|
198 | onFocus: props.onFocus
|
199 | }), React.createElement("span", {
|
200 | className: "ant-calendar-range-picker-separator"
|
201 | }, " ~ "), React.createElement("input", {
|
202 | disabled: disabled,
|
203 | value: end ? props.getFormatter().format(end) : '',
|
204 | placeholder: endPlaceholder,
|
205 | className: "ant-calendar-range-picker-input",
|
206 | onFocus: props.onFocus
|
207 | }), icon);
|
208 | }));
|
209 | }
|
210 | }]);
|
211 |
|
212 | return RangePicker;
|
213 | }(React.Component);
|
214 |
|
215 | RangePicker.defaultProps = {
|
216 | defaultValue: []
|
217 | };
|
218 | export { RangePicker as default }; |
\ | No newline at end of file |