1 | import "core-js/modules/es7.array.includes";
|
2 | import "core-js/modules/es6.string.includes";
|
3 | import _typeof from "@babel/runtime/helpers/typeof";
|
4 | import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
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 from "react";
|
12 | import Tooltip from "@beisen-phoenix/tooltip";
|
13 | import SwitchArrow from "./SwitchArrow";
|
14 | import DeleteInputTxt from "./DelnputTxtIcon";
|
15 | import Tags from "./Tags";
|
16 | import utils from "@beisen-phoenix/common-utils";
|
17 | var classes = utils.BEMClass("select");
|
18 | import "./index.css";
|
19 | var IE = /(msie\s|trident.*rv:)([\w.]+)/.test(navigator.userAgent.toLowerCase());
|
20 |
|
21 | var Select =
|
22 |
|
23 | function (_React$PureComponent) {
|
24 | _inherits(Select, _React$PureComponent);
|
25 |
|
26 | function Select(props) {
|
27 | var _this;
|
28 |
|
29 | _classCallCheck(this, Select);
|
30 |
|
31 | _this = _possibleConstructorReturn(this, _getPrototypeOf(Select).call(this, props));
|
32 | _this.inputRef = React.createRef();
|
33 | _this.hiddenSpanRef = React.createRef();
|
34 | _this.ulRef = React.createRef();
|
35 | _this.clickDelet = false;
|
36 |
|
37 | _this.emitPropsChangeMethod = function () {
|
38 | var onChange = _this.props.onChange;
|
39 | var _this$state = _this.state,
|
40 | value = _this$state.value,
|
41 | searchWord = _this$state.searchWord;
|
42 | onChange && onChange({
|
43 | value: value,
|
44 | searchWord: searchWord
|
45 | });
|
46 | };
|
47 |
|
48 | _this.handleValue = function () {
|
49 | var isMultiSelect = _this.props.isMultiSelect;
|
50 | var value = _this.state.value;
|
51 | return Array.isArray(value) && isMultiSelect ? value : "";
|
52 | };
|
53 |
|
54 | _this.isShowToolTip = function () {
|
55 | var _assertThisInitialize = _assertThisInitialized(_this),
|
56 | hiddenSpanRef = _assertThisInitialize.hiddenSpanRef,
|
57 | inputRef = _assertThisInitialize.inputRef;
|
58 |
|
59 | var active = _this.props.hasOwnProperty("isActive") ? _this.props.isActive : _this.state.isFocus;
|
60 |
|
61 | if (hiddenSpanRef.current && inputRef.current && !active) {
|
62 | var spanCurrent = hiddenSpanRef.current;
|
63 | var inputCurrent = inputRef.current;
|
64 |
|
65 | if (inputCurrent.clientWidth < spanCurrent.clientWidth) {
|
66 | _this.setState({
|
67 | isHasTooltip: true
|
68 | });
|
69 |
|
70 | return;
|
71 | }
|
72 | }
|
73 |
|
74 | _this.state.isHasTooltip && _this.setState({
|
75 | isHasTooltip: false
|
76 | });
|
77 | };
|
78 |
|
79 | _this.adjustArrow = function () {
|
80 | if (IE && _this.props.isMultiSelect) {
|
81 | var current = _this.ulRef.current;
|
82 | var clientHeight = current.clientHeight;
|
83 | var scrollHeight = current.scrollHeight;
|
84 |
|
85 | if (scrollHeight > clientHeight) {
|
86 | !_this.state.adjustArrow && _this.setState({
|
87 | adjustArrow: true
|
88 | });
|
89 | } else {
|
90 | _this.state.adjustArrow && _this.setState({
|
91 | adjustArrow: false
|
92 | });
|
93 | }
|
94 |
|
95 | return;
|
96 | }
|
97 |
|
98 | _this.state.adjustArrow && _this.setState({
|
99 | adjustArrow: false
|
100 | });
|
101 | };
|
102 |
|
103 | _this.resetStatus = function () {
|
104 | _this.setState({
|
105 | isFocus: false,
|
106 | visibleTxt: true,
|
107 | inputValue: "",
|
108 | searchWord: "",
|
109 | value: _this.props.value
|
110 | });
|
111 | };
|
112 |
|
113 | _this.inputing = function (evt) {
|
114 | var searchWord = evt.target.value;
|
115 | var _this$props = _this.props,
|
116 | isSearch = _this$props.isSearch,
|
117 | onSearch = _this$props.onSearch,
|
118 | readOnly = _this$props.readOnly;
|
119 | if (!isSearch || readOnly) return;
|
120 |
|
121 | _this.setState({
|
122 | searchWord: searchWord,
|
123 | inputValue: searchWord
|
124 |
|
125 | }, function () {
|
126 | _this.inputRef.current.style.width = "".concat(_this.handleInputWidth(), "px");
|
127 | });
|
128 |
|
129 | onSearch && onSearch(searchWord);
|
130 | };
|
131 |
|
132 | _this.onBlur = function (e) {
|
133 | var isActive = !_this.props.disabled && _this.props.isActive;
|
134 |
|
135 | _this.setState({
|
136 | isFocus: isActive ? true : false,
|
137 | visibleTxt: isActive ? false : true,
|
138 | inputValue: "",
|
139 | searchWord: "",
|
140 | value: _this.clickDelet ? "" : _this.props.value
|
141 | }, function () {
|
142 | _this.clickDelet = false;
|
143 |
|
144 | if (_this.props.isMultiSelect) {
|
145 | _this.inputRef && _this.inputRef.current && (_this.inputRef.current.style.width = "10px");
|
146 | }
|
147 | });
|
148 | };
|
149 |
|
150 | _this.onKeyDown = function (e) {
|
151 | var keyCode = e.keyCode,
|
152 | target = e.target;
|
153 |
|
154 | if (keyCode === 8 && !target.value) {
|
155 | _this.removeItem(-1);
|
156 | }
|
157 | };
|
158 |
|
159 | _this.onWrapperClick = function (e) {
|
160 | var _this$props2 = _this.props,
|
161 | disabled = _this$props2.disabled,
|
162 | isSearch = _this$props2.isSearch,
|
163 | isMultiSelect = _this$props2.isMultiSelect;
|
164 | if (disabled) return;
|
165 | _this.props.onClick && _this.props.onClick(e);
|
166 |
|
167 | _this.setState({
|
168 | visibleTxt: false
|
169 | });
|
170 |
|
171 | if (_this.inputRef && _this.inputRef.current && isSearch) {
|
172 | var value = isMultiSelect ? _this.state.value : "";
|
173 |
|
174 | _this.setState({
|
175 | isFocus: true,
|
176 | value: value
|
177 | });
|
178 |
|
179 | _this.inputRef.current.focus();
|
180 | }
|
181 | };
|
182 |
|
183 | _this.onWrapperMouseEnter = function () {
|
184 | _this.setState({
|
185 | hover: true
|
186 | });
|
187 | };
|
188 |
|
189 | _this.onWrapperMouseLeave = function () {
|
190 | _this.setState({
|
191 | hover: false
|
192 | });
|
193 | };
|
194 |
|
195 | _this.deleteTxt = function (e) {
|
196 | var _this$props3 = _this.props,
|
197 | onDelete = _this$props3.onDelete,
|
198 | isMultiSelect = _this$props3.isMultiSelect,
|
199 | isSearch = _this$props3.isSearch,
|
200 | onSearch = _this$props3.onSearch,
|
201 | isActive = _this$props3.isActive;
|
202 |
|
203 | if (!isMultiSelect && isSearch && _this.state.isFocus) {
|
204 | _this.onWrapperClick(e);
|
205 |
|
206 | _this.setState({
|
207 | inputValue: "",
|
208 | searchWord: ""
|
209 | }, function () {
|
210 | onSearch && onSearch("");
|
211 | });
|
212 |
|
213 | return;
|
214 | }
|
215 |
|
216 | _this.clickDelet = true;
|
217 |
|
218 | _this.setState({
|
219 | inputValue: "",
|
220 | value: _this.handleValue()
|
221 | }, _this.emitPropsChangeMethod);
|
222 |
|
223 | onDelete && onDelete("");
|
224 | };
|
225 |
|
226 | _this.removeItem = function (item) {
|
227 | var value = _this.state.value;
|
228 | var onDelete = _this.props.onDelete;
|
229 |
|
230 | if (Array.isArray(value)) {
|
231 | var copied = _toConsumableArray(value);
|
232 |
|
233 | if (typeof item === "number" && !isNaN(item)) {
|
234 | var temp = copied[item] || copied[copied.length - 1];
|
235 | !temp.disabled && copied.splice(item, 1);
|
236 | } else if (_typeof(item) === "object" && copied.includes(item) && !item.disabled) {
|
237 | copied.splice(copied.indexOf(item), 1);
|
238 | }
|
239 |
|
240 | if (copied.length !== value.length) {
|
241 | _this.setState({
|
242 | value: copied
|
243 | }, _this.emitPropsChangeMethod);
|
244 |
|
245 | onDelete && onDelete(copied);
|
246 | }
|
247 | }
|
248 | };
|
249 |
|
250 | _this.renderMutiItems = function () {
|
251 | var _this$props4 = _this.props,
|
252 | isMultiSelect = _this$props4.isMultiSelect,
|
253 | disabled = _this$props4.disabled,
|
254 | size = _this$props4.size;
|
255 | var value = _this.state.value;
|
256 |
|
257 | if (Array.isArray(value) && isMultiSelect) {
|
258 | return value.map(function (item, index) {
|
259 | return React.createElement(Tags, {
|
260 | selectDisabled: disabled,
|
261 | key: "".concat(item.value).concat(index),
|
262 | item: item,
|
263 | onClick: _this.removeItem,
|
264 | size: size
|
265 | });
|
266 | });
|
267 | }
|
268 | };
|
269 |
|
270 | _this.renderTxt = function () {
|
271 | var _this$props5 = _this.props,
|
272 | size = _this$props5.size,
|
273 | disabled = _this$props5.disabled,
|
274 | isSearch = _this$props5.isSearch,
|
275 | isActive = _this$props5.isActive;
|
276 | var _this$state2 = _this.state,
|
277 | isFocus = _this$state2.isFocus,
|
278 | value = _this$state2.value,
|
279 | isHasTooltip = _this$state2.isHasTooltip,
|
280 | inputValue = _this$state2.inputValue,
|
281 | visibleTxt = _this$state2.visibleTxt,
|
282 | hover = _this$state2.hover;
|
283 |
|
284 | if (typeof value === "string" && value.length) {
|
285 | if (inputValue) return null;
|
286 | var editable = !disabled;
|
287 | var active = editable && (_this.props.hasOwnProperty("isActive") ? isActive : isFocus);
|
288 | var txtVisible = _this.props.hasOwnProperty("isActive") ? !isActive : visibleTxt;
|
289 | var tipWrapperCls = classes({
|
290 | element: "tipWrapper",
|
291 | modifiers: {
|
292 | visible: txtVisible,
|
293 | large: size === "large",
|
294 | isSearch: isSearch,
|
295 | disabled: disabled,
|
296 | active: active
|
297 | }
|
298 | });
|
299 | var tipCls = classes({
|
300 | element: "tipEle",
|
301 | modifiers: {
|
302 | isSearch: isSearch
|
303 | }
|
304 | });
|
305 | var TempComponent = React.createElement("span", {
|
306 | className: tipWrapperCls
|
307 | }, React.createElement("span", {
|
308 | className: tipCls
|
309 | }, value));
|
310 | return value && isHasTooltip ? React.createElement(Tooltip, {
|
311 | title: value,
|
312 | visible: hover && !active
|
313 | }, TempComponent) : TempComponent;
|
314 | }
|
315 | };
|
316 |
|
317 | _this.handleInputWidth = function () {
|
318 | if (_this.props.isMultiSelect) {
|
319 | var _assertThisInitialize2 = _assertThisInitialized(_this),
|
320 | hiddenSpanRef = _assertThisInitialize2.hiddenSpanRef;
|
321 |
|
322 | if (hiddenSpanRef.current) {
|
323 | var current = hiddenSpanRef.current;
|
324 | return current.clientWidth || 10;
|
325 | }
|
326 |
|
327 | return 10;
|
328 | }
|
329 | };
|
330 |
|
331 | _this.switchDropDown = function () {
|
332 | };
|
333 |
|
334 | _this.isShowPlaceHolder = function () {
|
335 | var _this$state3 = _this.state,
|
336 | inputValue = _this$state3.inputValue,
|
337 | value = _this$state3.value;
|
338 | if (inputValue) return;
|
339 | if (value && typeof value === "string") return;
|
340 | if (Array.isArray(value) && value.length) return;
|
341 | return true;
|
342 | };
|
343 |
|
344 | _this.getInputValue = function () {
|
345 | var _this$state4 = _this.state,
|
346 | inputValue = _this$state4.inputValue,
|
347 | value = _this$state4.value;
|
348 | if (inputValue) return inputValue;
|
349 |
|
350 | if (value && typeof value === "string" && !_this.props.disabled) {
|
351 | return value;
|
352 | }
|
353 |
|
354 | return "";
|
355 | };
|
356 |
|
357 | var _value = _this.props.value;
|
358 | _this.state = {
|
359 | value: _value,
|
360 | inputValue: "",
|
361 | isFocus: false,
|
362 | isHasTooltip: false,
|
363 | visibleTxt: true,
|
364 | hover: false,
|
365 | searchWord: "",
|
366 | inputWidth: 10,
|
367 | adjustArrow: false
|
368 | };
|
369 | return _this;
|
370 | }
|
371 |
|
372 | _createClass(Select, [{
|
373 | key: "componentDidMount",
|
374 | value: function componentDidMount() {
|
375 | this.isShowToolTip();
|
376 | this.adjustArrow();
|
377 | }
|
378 | }, {
|
379 | key: "componentWillReceiveProps",
|
380 | value: function componentWillReceiveProps(nextProps) {
|
381 | "value" in nextProps && this.props.value !== nextProps.value && this.setState({
|
382 | value: nextProps.value
|
383 | });
|
384 | }
|
385 | }, {
|
386 | key: "componentDidUpdate",
|
387 | value: function componentDidUpdate(prevProps) {
|
388 | this.isShowToolTip();
|
389 | this.adjustArrow();
|
390 |
|
391 | if (this.props.isSearch && this.props.hasOwnProperty("isActive") && !this.props.disabled) {
|
392 | if (this.props.hasOwnProperty("exitSearch") && this.props.exitSearch || !this.props.isActive) {
|
393 | this.resetStatus();
|
394 | }
|
395 | }
|
396 | }
|
397 | }, {
|
398 | key: "getDeleteIconState",
|
399 | value: function getDeleteIconState() {
|
400 | var _this$state5 = this.state,
|
401 | inputValue = _this$state5.inputValue,
|
402 | value = _this$state5.value;
|
403 | var _this$props6 = this.props,
|
404 | disabled = _this$props6.disabled,
|
405 | readOnly = _this$props6.readOnly,
|
406 | showDelete = _this$props6.showDelete,
|
407 | isMultiSelect = _this$props6.isMultiSelect;
|
408 | if (!showDelete || isMultiSelect) return false;
|
409 | if (disabled || readOnly) return false;
|
410 | if (inputValue) return true;
|
411 | if (value && typeof value === "string") return true;
|
412 | }
|
413 | }, {
|
414 | key: "render",
|
415 | value: function render() {
|
416 | var _this2 = this;
|
417 |
|
418 | var _this$props7 = this.props,
|
419 | placeHolder = _this$props7.placeHolder,
|
420 | size = _this$props7.size,
|
421 | disabled = _this$props7.disabled,
|
422 | isMultiSelect = _this$props7.isMultiSelect,
|
423 | isSearch = _this$props7.isSearch,
|
424 | error = _this$props7.error,
|
425 | isActive = _this$props7.isActive,
|
426 | _this$props7$translat = _this$props7.translation,
|
427 | translation = _this$props7$translat === void 0 ? {} : _this$props7$translat,
|
428 | inputRef = _this$props7.inputRef,
|
429 | extraCls = _this$props7.extraCls,
|
430 | suffix = _this$props7.suffix;
|
431 | var _this$state6 = this.state,
|
432 | inputValue = _this$state6.inputValue,
|
433 | value = _this$state6.value,
|
434 | isFocus = _this$state6.isFocus;
|
435 | var multiValueLength = isMultiSelect && Array.isArray(value) ? value.length : void 0;
|
436 | var isShowDeleteIcon = this.getDeleteIconState();
|
437 | var editable = !disabled;
|
438 | var borderColorable = !disabled && !error;
|
439 | var active = editable && (this.props.hasOwnProperty("isActive") ? isActive : isFocus);
|
440 | var hideInput = disabled && isMultiSelect || !isSearch && multiValueLength && isMultiSelect;
|
441 | var singleSearch = !isMultiSelect && isSearch;
|
442 | var wrapperCls = classes({
|
443 | element: "",
|
444 | modifiers: {
|
445 | editable: editable,
|
446 | borderColorable: borderColorable,
|
447 | singleSearch: singleSearch,
|
448 | multi: isMultiSelect,
|
449 | error: error,
|
450 | active: active,
|
451 | disabled: disabled,
|
452 | small: size === "small",
|
453 | large: size === "large",
|
454 | normal: size === "normal",
|
455 | exsitMultiValue: multiValueLength
|
456 | },
|
457 | extra: extraCls
|
458 | });
|
459 | var calcEleCls = classes({
|
460 | element: "calcEle"
|
461 | });
|
462 | var placeHolderCls = classes({
|
463 | element: "placeHolder",
|
464 | modifiers: {
|
465 | active: active,
|
466 | large: size === "large",
|
467 | show: this.isShowPlaceHolder()
|
468 | }
|
469 | });
|
470 | var inputWrapperCls = classes({
|
471 | element: "inputWrapper",
|
472 | modifiers: {
|
473 | emptyMultiValue: !multiValueLength,
|
474 | isSearch: isSearch
|
475 | }
|
476 | });
|
477 | var inputCls = classes({
|
478 | element: "input",
|
479 | modifiers: {
|
480 | disabled: disabled,
|
481 | large: size === "large",
|
482 | unText: !isSearch,
|
483 | multiInput: multiValueLength
|
484 | }
|
485 | });
|
486 | return React.createElement("div", {
|
487 | className: wrapperCls,
|
488 | onMouseEnter: this.onWrapperMouseEnter,
|
489 | onMouseLeave: this.onWrapperMouseLeave,
|
490 | onClick: this.onWrapperClick
|
491 | }, React.createElement("span", {
|
492 | className: calcEleCls,
|
493 | ref: this.hiddenSpanRef
|
494 | }, inputValue || (typeof value === "string" ? value : " ")), React.createElement("div", {
|
495 | className: placeHolderCls
|
496 | }, this.props.value && !isMultiSelect ? this.props.value : placeHolder || translation.placeHolder), React.createElement("ul", {
|
497 | ref: this.ulRef,
|
498 | className: classes({
|
499 | element: "content"
|
500 | })
|
501 | }, this.renderMutiItems(), !hideInput && React.createElement("li", {
|
502 | className: inputWrapperCls
|
503 | }, React.createElement("input", {
|
504 | disabled: this.props.disabled,
|
505 | ref: function ref(ele) {
|
506 | inputRef && inputRef(ele);
|
507 | _this2.inputRef = {
|
508 | current: ele
|
509 | };
|
510 | },
|
511 | className: inputCls,
|
512 | value: this.getInputValue(),
|
513 | onChange: this.inputing,
|
514 | onKeyDown: this.onKeyDown
|
515 | })), this.renderTxt()), React.createElement(SwitchArrow, {
|
516 | disabled: disabled,
|
517 | hide: isShowDeleteIcon,
|
518 | onClick: this.switchDropDown,
|
519 | adjustArrow: this.state.adjustArrow,
|
520 | suffix: suffix
|
521 | }), React.createElement(DeleteInputTxt, {
|
522 | onClick: this.deleteTxt,
|
523 | isShowDeleteIcon: isShowDeleteIcon
|
524 | }));
|
525 | }
|
526 | }]);
|
527 |
|
528 | return Select;
|
529 | }(React.PureComponent);
|
530 |
|
531 | Select.defaultProps = {
|
532 | size: "normal",
|
533 | disabled: false,
|
534 | isMultiSelect: false,
|
535 | placeHolder: "",
|
536 | isSearch: false,
|
537 | readOnly: false,
|
538 | showDelete: true,
|
539 | translation: {}
|
540 | };
|
541 | export { Select as default }; |
\ | No newline at end of file |