SingleSelector.js
3.04 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from 'react';
import pickAttrs from "rc-util/es/pickAttrs";
import Input from './Input';
var SingleSelector = function SingleSelector(props) {
var inputElement = props.inputElement,
prefixCls = props.prefixCls,
id = props.id,
inputRef = props.inputRef,
disabled = props.disabled,
autoFocus = props.autoFocus,
autoComplete = props.autoComplete,
accessibilityIndex = props.accessibilityIndex,
mode = props.mode,
open = props.open,
values = props.values,
placeholder = props.placeholder,
tabIndex = props.tabIndex,
showSearch = props.showSearch,
searchValue = props.searchValue,
activeValue = props.activeValue,
maxLength = props.maxLength,
onInputKeyDown = props.onInputKeyDown,
onInputMouseDown = props.onInputMouseDown,
onInputChange = props.onInputChange,
onInputPaste = props.onInputPaste,
onInputCompositionStart = props.onInputCompositionStart,
onInputCompositionEnd = props.onInputCompositionEnd;
var _React$useState = React.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
inputChanged = _React$useState2[0],
setInputChanged = _React$useState2[1];
var combobox = mode === 'combobox';
var inputEditable = combobox || showSearch;
var item = values[0];
var inputValue = searchValue || '';
if (combobox && activeValue && !inputChanged) {
inputValue = activeValue;
}
React.useEffect(function () {
if (combobox) {
setInputChanged(false);
}
}, [combobox, activeValue]); // Not show text when closed expect combobox mode
var hasTextInput = mode !== 'combobox' && !open ? false : !!inputValue;
var title = item && (typeof item.label === 'string' || typeof item.label === 'number') ? item.label.toString() : undefined;
return React.createElement(React.Fragment, null, React.createElement("span", {
className: "".concat(prefixCls, "-selection-search")
}, React.createElement(Input, {
ref: inputRef,
prefixCls: prefixCls,
id: id,
open: open,
inputElement: inputElement,
disabled: disabled,
autoFocus: autoFocus,
autoComplete: autoComplete,
editable: inputEditable,
accessibilityIndex: accessibilityIndex,
value: inputValue,
onKeyDown: onInputKeyDown,
onMouseDown: onInputMouseDown,
onChange: function onChange(e) {
setInputChanged(true);
onInputChange(e);
},
onPaste: onInputPaste,
onCompositionStart: onInputCompositionStart,
onCompositionEnd: onInputCompositionEnd,
tabIndex: tabIndex,
attrs: pickAttrs(props, true),
maxLength: combobox ? maxLength : undefined
})), !combobox && item && !hasTextInput && React.createElement("span", {
className: "".concat(prefixCls, "-selection-item"),
title: title
}, item.label), !item && !hasTextInput && React.createElement("span", {
className: "".concat(prefixCls, "-selection-placeholder")
}, placeholder));
};
export default SingleSelector;