1 | import _typeof from "@babel/runtime/helpers/esm/typeof";
|
2 | import _extends from "@babel/runtime/helpers/esm/extends";
|
3 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
4 | import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
5 | import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
6 | import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
7 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
8 | var _excluded = ["id", "prefixCls", "className", "showSearch", "tagRender", "direction", "omitDomProps", "displayValues", "onDisplayValuesChange", "emptyOptions", "notFoundContent", "onClear", "mode", "disabled", "loading", "getInputElement", "getRawInputElement", "open", "defaultOpen", "onDropdownVisibleChange", "activeValue", "onActiveValueChange", "activeDescendantId", "searchValue", "autoClearSearchValue", "onSearch", "onSearchSplit", "tokenSeparators", "allowClear", "suffixIcon", "clearIcon", "OptionList", "animation", "transitionName", "dropdownStyle", "dropdownClassName", "dropdownMatchSelectWidth", "dropdownRender", "dropdownAlign", "placement", "builtinPlacements", "getPopupContainer", "showAction", "onFocus", "onBlur", "onKeyUp", "onKeyDown", "onMouseDown"];
|
9 | import classNames from 'classnames';
|
10 | import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
|
11 | import useMergedState from "rc-util/es/hooks/useMergedState";
|
12 | import isMobile from "rc-util/es/isMobile";
|
13 | import KeyCode from "rc-util/es/KeyCode";
|
14 | import { useComposeRef } from "rc-util/es/ref";
|
15 | import * as React from 'react';
|
16 | import { BaseSelectContext } from "./hooks/useBaseProps";
|
17 | import useDelayReset from "./hooks/useDelayReset";
|
18 | import useLock from "./hooks/useLock";
|
19 | import useSelectTriggerControl from "./hooks/useSelectTriggerControl";
|
20 | import Selector from "./Selector";
|
21 | import SelectTrigger from "./SelectTrigger";
|
22 | import TransBtn from "./TransBtn";
|
23 | import { getSeparatedContent } from "./utils/valueUtil";
|
24 | import { useAllowClear } from "./hooks/useAllowClear";
|
25 | import { warning } from 'rc-util';
|
26 | var DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex'];
|
27 | export function isMultiple(mode) {
|
28 | return mode === 'tags' || mode === 'multiple';
|
29 | }
|
30 | var BaseSelect = React.forwardRef(function (props, ref) {
|
31 | var _customizeRawInputEle, _classNames2;
|
32 | var id = props.id,
|
33 | prefixCls = props.prefixCls,
|
34 | className = props.className,
|
35 | showSearch = props.showSearch,
|
36 | tagRender = props.tagRender,
|
37 | direction = props.direction,
|
38 | omitDomProps = props.omitDomProps,
|
39 | displayValues = props.displayValues,
|
40 | onDisplayValuesChange = props.onDisplayValuesChange,
|
41 | emptyOptions = props.emptyOptions,
|
42 | _props$notFoundConten = props.notFoundContent,
|
43 | notFoundContent = _props$notFoundConten === void 0 ? 'Not Found' : _props$notFoundConten,
|
44 | onClear = props.onClear,
|
45 | mode = props.mode,
|
46 | disabled = props.disabled,
|
47 | loading = props.loading,
|
48 | getInputElement = props.getInputElement,
|
49 | getRawInputElement = props.getRawInputElement,
|
50 | open = props.open,
|
51 | defaultOpen = props.defaultOpen,
|
52 | onDropdownVisibleChange = props.onDropdownVisibleChange,
|
53 | activeValue = props.activeValue,
|
54 | onActiveValueChange = props.onActiveValueChange,
|
55 | activeDescendantId = props.activeDescendantId,
|
56 | searchValue = props.searchValue,
|
57 | autoClearSearchValue = props.autoClearSearchValue,
|
58 | onSearch = props.onSearch,
|
59 | onSearchSplit = props.onSearchSplit,
|
60 | tokenSeparators = props.tokenSeparators,
|
61 | allowClear = props.allowClear,
|
62 | suffixIcon = props.suffixIcon,
|
63 | clearIcon = props.clearIcon,
|
64 | OptionList = props.OptionList,
|
65 | animation = props.animation,
|
66 | transitionName = props.transitionName,
|
67 | dropdownStyle = props.dropdownStyle,
|
68 | dropdownClassName = props.dropdownClassName,
|
69 | dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
|
70 | dropdownRender = props.dropdownRender,
|
71 | dropdownAlign = props.dropdownAlign,
|
72 | placement = props.placement,
|
73 | builtinPlacements = props.builtinPlacements,
|
74 | getPopupContainer = props.getPopupContainer,
|
75 | _props$showAction = props.showAction,
|
76 | showAction = _props$showAction === void 0 ? [] : _props$showAction,
|
77 | onFocus = props.onFocus,
|
78 | onBlur = props.onBlur,
|
79 | onKeyUp = props.onKeyUp,
|
80 | onKeyDown = props.onKeyDown,
|
81 | onMouseDown = props.onMouseDown,
|
82 | restProps = _objectWithoutProperties(props, _excluded);
|
83 |
|
84 |
|
85 | var multiple = isMultiple(mode);
|
86 | var mergedShowSearch = (showSearch !== undefined ? showSearch : multiple) || mode === 'combobox';
|
87 | var domProps = _objectSpread({}, restProps);
|
88 | DEFAULT_OMIT_PROPS.forEach(function (propName) {
|
89 | delete domProps[propName];
|
90 | });
|
91 | omitDomProps === null || omitDomProps === void 0 ? void 0 : omitDomProps.forEach(function (propName) {
|
92 | delete domProps[propName];
|
93 | });
|
94 |
|
95 |
|
96 | var _React$useState = React.useState(false),
|
97 | _React$useState2 = _slicedToArray(_React$useState, 2),
|
98 | mobile = _React$useState2[0],
|
99 | setMobile = _React$useState2[1];
|
100 | React.useEffect(function () {
|
101 |
|
102 | setMobile(isMobile());
|
103 | }, []);
|
104 |
|
105 |
|
106 | var containerRef = React.useRef(null);
|
107 | var selectorDomRef = React.useRef(null);
|
108 | var triggerRef = React.useRef(null);
|
109 | var selectorRef = React.useRef(null);
|
110 | var listRef = React.useRef(null);
|
111 |
|
112 |
|
113 | var _useDelayReset = useDelayReset(),
|
114 | _useDelayReset2 = _slicedToArray(_useDelayReset, 3),
|
115 | mockFocused = _useDelayReset2[0],
|
116 | setMockFocused = _useDelayReset2[1],
|
117 | cancelSetMockFocused = _useDelayReset2[2];
|
118 |
|
119 |
|
120 | React.useImperativeHandle(ref, function () {
|
121 | var _selectorRef$current, _selectorRef$current2;
|
122 | return {
|
123 | focus: (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.focus,
|
124 | blur: (_selectorRef$current2 = selectorRef.current) === null || _selectorRef$current2 === void 0 ? void 0 : _selectorRef$current2.blur,
|
125 | scrollTo: function scrollTo(arg) {
|
126 | var _listRef$current;
|
127 | return (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollTo(arg);
|
128 | }
|
129 | };
|
130 | });
|
131 |
|
132 |
|
133 | var mergedSearchValue = React.useMemo(function () {
|
134 | var _displayValues$;
|
135 | if (mode !== 'combobox') {
|
136 | return searchValue;
|
137 | }
|
138 | var val = (_displayValues$ = displayValues[0]) === null || _displayValues$ === void 0 ? void 0 : _displayValues$.value;
|
139 | return typeof val === 'string' || typeof val === 'number' ? String(val) : '';
|
140 | }, [searchValue, mode, displayValues]);
|
141 |
|
142 |
|
143 |
|
144 | var customizeInputElement = mode === 'combobox' && typeof getInputElement === 'function' && getInputElement() || null;
|
145 |
|
146 |
|
147 | var customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
|
148 | var customizeRawInputRef = useComposeRef(selectorDomRef, customizeRawInputElement === null || customizeRawInputElement === void 0 ? void 0 : (_customizeRawInputEle = customizeRawInputElement.props) === null || _customizeRawInputEle === void 0 ? void 0 : _customizeRawInputEle.ref);
|
149 |
|
150 |
|
151 |
|
152 | var _React$useState3 = React.useState(false),
|
153 | _React$useState4 = _slicedToArray(_React$useState3, 2),
|
154 | rendered = _React$useState4[0],
|
155 | setRendered = _React$useState4[1];
|
156 | useLayoutEffect(function () {
|
157 | setRendered(true);
|
158 | }, []);
|
159 | var _useMergedState = useMergedState(false, {
|
160 | defaultValue: defaultOpen,
|
161 | value: open
|
162 | }),
|
163 | _useMergedState2 = _slicedToArray(_useMergedState, 2),
|
164 | innerOpen = _useMergedState2[0],
|
165 | setInnerOpen = _useMergedState2[1];
|
166 | var mergedOpen = rendered ? innerOpen : false;
|
167 |
|
168 |
|
169 | var emptyListContent = !notFoundContent && emptyOptions;
|
170 | if (disabled || emptyListContent && mergedOpen && mode === 'combobox') {
|
171 | mergedOpen = false;
|
172 | }
|
173 | var triggerOpen = emptyListContent ? false : mergedOpen;
|
174 | var onToggleOpen = React.useCallback(function (newOpen) {
|
175 | var nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
|
176 | if (!disabled) {
|
177 | setInnerOpen(nextOpen);
|
178 | if (mergedOpen !== nextOpen) {
|
179 | onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 ? void 0 : onDropdownVisibleChange(nextOpen);
|
180 | }
|
181 | }
|
182 | }, [disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange]);
|
183 |
|
184 |
|
185 | var tokenWithEnter = React.useMemo(function () {
|
186 | return (tokenSeparators || []).some(function (tokenSeparator) {
|
187 | return ['\n', '\r\n'].includes(tokenSeparator);
|
188 | });
|
189 | }, [tokenSeparators]);
|
190 | var onInternalSearch = function onInternalSearch(searchText, fromTyping, isCompositing) {
|
191 | var ret = true;
|
192 | var newSearchText = searchText;
|
193 | onActiveValueChange === null || onActiveValueChange === void 0 ? void 0 : onActiveValueChange(null);
|
194 |
|
195 |
|
196 | var patchLabels = isCompositing ? null : getSeparatedContent(searchText, tokenSeparators);
|
197 |
|
198 |
|
199 | if (mode !== 'combobox' && patchLabels) {
|
200 | newSearchText = '';
|
201 | onSearchSplit === null || onSearchSplit === void 0 ? void 0 : onSearchSplit(patchLabels);
|
202 |
|
203 |
|
204 | onToggleOpen(false);
|
205 |
|
206 |
|
207 | ret = false;
|
208 | }
|
209 | if (onSearch && mergedSearchValue !== newSearchText) {
|
210 | onSearch(newSearchText, {
|
211 | source: fromTyping ? 'typing' : 'effect'
|
212 | });
|
213 | }
|
214 | return ret;
|
215 | };
|
216 |
|
217 |
|
218 |
|
219 |
|
220 | var onInternalSearchSubmit = function onInternalSearchSubmit(searchText) {
|
221 |
|
222 | if (!searchText || !searchText.trim()) {
|
223 | return;
|
224 | }
|
225 | onSearch(searchText, {
|
226 | source: 'submit'
|
227 | });
|
228 | };
|
229 |
|
230 |
|
231 | React.useEffect(function () {
|
232 | if (!mergedOpen && !multiple && mode !== 'combobox') {
|
233 | onInternalSearch('', false, false);
|
234 | }
|
235 | }, [mergedOpen]);
|
236 |
|
237 |
|
238 |
|
239 | React.useEffect(function () {
|
240 | if (innerOpen && disabled) {
|
241 | setInnerOpen(false);
|
242 | }
|
243 | if (disabled) {
|
244 | setMockFocused(false);
|
245 | }
|
246 | }, [disabled]);
|
247 |
|
248 |
|
249 | |
250 |
|
251 |
|
252 |
|
253 |
|
254 |
|
255 | var _useLock = useLock(),
|
256 | _useLock2 = _slicedToArray(_useLock, 2),
|
257 | getClearLock = _useLock2[0],
|
258 | setClearLock = _useLock2[1];
|
259 |
|
260 |
|
261 | var onInternalKeyDown = function onInternalKeyDown(event) {
|
262 | var clearLock = getClearLock();
|
263 | var which = event.which;
|
264 | if (which === KeyCode.ENTER) {
|
265 |
|
266 | if (mode !== 'combobox') {
|
267 | event.preventDefault();
|
268 | }
|
269 |
|
270 |
|
271 | if (!mergedOpen) {
|
272 | onToggleOpen(true);
|
273 | }
|
274 | }
|
275 | setClearLock(!!mergedSearchValue);
|
276 |
|
277 |
|
278 | if (which === KeyCode.BACKSPACE && !clearLock && multiple && !mergedSearchValue && displayValues.length) {
|
279 | var cloneDisplayValues = _toConsumableArray(displayValues);
|
280 | var removedDisplayValue = null;
|
281 | for (var i = cloneDisplayValues.length - 1; i >= 0; i -= 1) {
|
282 | var current = cloneDisplayValues[i];
|
283 | if (!current.disabled) {
|
284 | cloneDisplayValues.splice(i, 1);
|
285 | removedDisplayValue = current;
|
286 | break;
|
287 | }
|
288 | }
|
289 | if (removedDisplayValue) {
|
290 | onDisplayValuesChange(cloneDisplayValues, {
|
291 | type: 'remove',
|
292 | values: [removedDisplayValue]
|
293 | });
|
294 | }
|
295 | }
|
296 | for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
297 | rest[_key - 1] = arguments[_key];
|
298 | }
|
299 | if (mergedOpen && listRef.current) {
|
300 | var _listRef$current2;
|
301 | (_listRef$current2 = listRef.current).onKeyDown.apply(_listRef$current2, [event].concat(rest));
|
302 | }
|
303 | onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown.apply(void 0, [event].concat(rest));
|
304 | };
|
305 |
|
306 |
|
307 | var onInternalKeyUp = function onInternalKeyUp(event) {
|
308 | for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
309 | rest[_key2 - 1] = arguments[_key2];
|
310 | }
|
311 | if (mergedOpen && listRef.current) {
|
312 | var _listRef$current3;
|
313 | (_listRef$current3 = listRef.current).onKeyUp.apply(_listRef$current3, [event].concat(rest));
|
314 | }
|
315 | onKeyUp === null || onKeyUp === void 0 ? void 0 : onKeyUp.apply(void 0, [event].concat(rest));
|
316 | };
|
317 |
|
318 |
|
319 | var onSelectorRemove = function onSelectorRemove(val) {
|
320 | var newValues = displayValues.filter(function (i) {
|
321 | return i !== val;
|
322 | });
|
323 | onDisplayValuesChange(newValues, {
|
324 | type: 'remove',
|
325 | values: [val]
|
326 | });
|
327 | };
|
328 |
|
329 |
|
330 |
|
331 | var focusRef = React.useRef(false);
|
332 | var onContainerFocus = function onContainerFocus() {
|
333 | setMockFocused(true);
|
334 | if (!disabled) {
|
335 | if (onFocus && !focusRef.current) {
|
336 | onFocus.apply(void 0, arguments);
|
337 | }
|
338 |
|
339 |
|
340 | if (showAction.includes('focus')) {
|
341 | onToggleOpen(true);
|
342 | }
|
343 | }
|
344 | focusRef.current = true;
|
345 | };
|
346 | var onContainerBlur = function onContainerBlur() {
|
347 | setMockFocused(false, function () {
|
348 | focusRef.current = false;
|
349 | onToggleOpen(false);
|
350 | });
|
351 | if (disabled) {
|
352 | return;
|
353 | }
|
354 | if (mergedSearchValue) {
|
355 |
|
356 | if (mode === 'tags') {
|
357 | onSearch(mergedSearchValue, {
|
358 | source: 'submit'
|
359 | });
|
360 | } else if (mode === 'multiple') {
|
361 |
|
362 | onSearch('', {
|
363 | source: 'blur'
|
364 | });
|
365 | }
|
366 | }
|
367 | if (onBlur) {
|
368 | onBlur.apply(void 0, arguments);
|
369 | }
|
370 | };
|
371 |
|
372 |
|
373 | var activeTimeoutIds = [];
|
374 | React.useEffect(function () {
|
375 | return function () {
|
376 | activeTimeoutIds.forEach(function (timeoutId) {
|
377 | return clearTimeout(timeoutId);
|
378 | });
|
379 | activeTimeoutIds.splice(0, activeTimeoutIds.length);
|
380 | };
|
381 | }, []);
|
382 | var onInternalMouseDown = function onInternalMouseDown(event) {
|
383 | var _triggerRef$current;
|
384 | var target = event.target;
|
385 | var popupElement = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.getPopupElement();
|
386 |
|
387 |
|
388 | if (popupElement && popupElement.contains(target)) {
|
389 | var timeoutId = setTimeout(function () {
|
390 | var index = activeTimeoutIds.indexOf(timeoutId);
|
391 | if (index !== -1) {
|
392 | activeTimeoutIds.splice(index, 1);
|
393 | }
|
394 | cancelSetMockFocused();
|
395 | if (!mobile && !popupElement.contains(document.activeElement)) {
|
396 | var _selectorRef$current3;
|
397 | (_selectorRef$current3 = selectorRef.current) === null || _selectorRef$current3 === void 0 ? void 0 : _selectorRef$current3.focus();
|
398 | }
|
399 | });
|
400 | activeTimeoutIds.push(timeoutId);
|
401 | }
|
402 | for (var _len3 = arguments.length, restArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
|
403 | restArgs[_key3 - 1] = arguments[_key3];
|
404 | }
|
405 | onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown.apply(void 0, [event].concat(restArgs));
|
406 | };
|
407 |
|
408 |
|
409 | var _React$useState5 = React.useState(null),
|
410 | _React$useState6 = _slicedToArray(_React$useState5, 2),
|
411 | containerWidth = _React$useState6[0],
|
412 | setContainerWidth = _React$useState6[1];
|
413 | var _React$useState7 = React.useState({}),
|
414 | _React$useState8 = _slicedToArray(_React$useState7, 2),
|
415 | forceUpdate = _React$useState8[1];
|
416 |
|
417 | function onPopupMouseEnter() {
|
418 | forceUpdate({});
|
419 | }
|
420 | useLayoutEffect(function () {
|
421 | if (triggerOpen) {
|
422 | var _containerRef$current;
|
423 |
|
424 | var newWidth = Math.ceil((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width);
|
425 | if (containerWidth !== newWidth && !Number.isNaN(newWidth)) {
|
426 | setContainerWidth(newWidth);
|
427 | }
|
428 | }
|
429 | }, [triggerOpen]);
|
430 |
|
431 |
|
432 | var onTriggerVisibleChange;
|
433 | if (customizeRawInputElement) {
|
434 | onTriggerVisibleChange = function onTriggerVisibleChange(newOpen) {
|
435 | onToggleOpen(newOpen);
|
436 | };
|
437 | }
|
438 |
|
439 |
|
440 | useSelectTriggerControl(function () {
|
441 | var _triggerRef$current2;
|
442 | return [containerRef.current, (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.getPopupElement()];
|
443 | }, triggerOpen, onToggleOpen, !!customizeRawInputElement);
|
444 |
|
445 |
|
446 | var baseSelectContext = React.useMemo(function () {
|
447 | return _objectSpread(_objectSpread({}, props), {}, {
|
448 | notFoundContent: notFoundContent,
|
449 | open: mergedOpen,
|
450 | triggerOpen: triggerOpen,
|
451 | id: id,
|
452 | showSearch: mergedShowSearch,
|
453 | multiple: multiple,
|
454 | toggleOpen: onToggleOpen
|
455 | });
|
456 | }, [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen]);
|
457 |
|
458 |
|
459 |
|
460 |
|
461 |
|
462 |
|
463 | var showSuffixIcon = !!suffixIcon || loading;
|
464 | var arrowNode;
|
465 | if (showSuffixIcon) {
|
466 | arrowNode = React.createElement(TransBtn, {
|
467 | className: classNames("".concat(prefixCls, "-arrow"), _defineProperty({}, "".concat(prefixCls, "-arrow-loading"), loading)),
|
468 | customizeIcon: suffixIcon,
|
469 | customizeIconProps: {
|
470 | loading: loading,
|
471 | searchValue: mergedSearchValue,
|
472 | open: mergedOpen,
|
473 | focused: mockFocused,
|
474 | showSearch: mergedShowSearch
|
475 | }
|
476 | });
|
477 | }
|
478 |
|
479 |
|
480 | if (process.env.NODE_ENV !== 'production') {
|
481 | warning(!props.clearIcon, '`clearIcon` will be removed in future. Please use `allowClear` instead.');
|
482 | }
|
483 | var onClearMouseDown = function onClearMouseDown() {
|
484 | var _selectorRef$current4;
|
485 | onClear === null || onClear === void 0 ? void 0 : onClear();
|
486 | (_selectorRef$current4 = selectorRef.current) === null || _selectorRef$current4 === void 0 ? void 0 : _selectorRef$current4.focus();
|
487 | onDisplayValuesChange([], {
|
488 | type: 'clear',
|
489 | values: displayValues
|
490 | });
|
491 | onInternalSearch('', false, false);
|
492 | };
|
493 | var _useAllowClear = useAllowClear(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode),
|
494 | mergedAllowClear = _useAllowClear.allowClear,
|
495 | clearNode = _useAllowClear.clearIcon;
|
496 |
|
497 |
|
498 | var optionList = React.createElement(OptionList, {
|
499 | ref: listRef
|
500 | });
|
501 |
|
502 |
|
503 | var mergedClassName = classNames(prefixCls, className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-focused"), mockFocused), _defineProperty(_classNames2, "".concat(prefixCls, "-multiple"), multiple), _defineProperty(_classNames2, "".concat(prefixCls, "-single"), !multiple), _defineProperty(_classNames2, "".concat(prefixCls, "-allow-clear"), allowClear), _defineProperty(_classNames2, "".concat(prefixCls, "-show-arrow"), showSuffixIcon), _defineProperty(_classNames2, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames2, "".concat(prefixCls, "-loading"), loading), _defineProperty(_classNames2, "".concat(prefixCls, "-open"), mergedOpen), _defineProperty(_classNames2, "".concat(prefixCls, "-customize-input"), customizeInputElement), _defineProperty(_classNames2, "".concat(prefixCls, "-show-search"), mergedShowSearch), _classNames2));
|
504 |
|
505 |
|
506 | var selectorNode = React.createElement(SelectTrigger, {
|
507 | ref: triggerRef,
|
508 | disabled: disabled,
|
509 | prefixCls: prefixCls,
|
510 | visible: triggerOpen,
|
511 | popupElement: optionList,
|
512 | containerWidth: containerWidth,
|
513 | animation: animation,
|
514 | transitionName: transitionName,
|
515 | dropdownStyle: dropdownStyle,
|
516 | dropdownClassName: dropdownClassName,
|
517 | direction: direction,
|
518 | dropdownMatchSelectWidth: dropdownMatchSelectWidth,
|
519 | dropdownRender: dropdownRender,
|
520 | dropdownAlign: dropdownAlign,
|
521 | placement: placement,
|
522 | builtinPlacements: builtinPlacements,
|
523 | getPopupContainer: getPopupContainer,
|
524 | empty: emptyOptions,
|
525 | getTriggerDOMNode: function getTriggerDOMNode() {
|
526 | return selectorDomRef.current;
|
527 | },
|
528 | onPopupVisibleChange: onTriggerVisibleChange,
|
529 | onPopupMouseEnter: onPopupMouseEnter
|
530 | }, customizeRawInputElement ? React.cloneElement(customizeRawInputElement, {
|
531 | ref: customizeRawInputRef
|
532 | }) : React.createElement(Selector, _extends({}, props, {
|
533 | domRef: selectorDomRef,
|
534 | prefixCls: prefixCls,
|
535 | inputElement: customizeInputElement,
|
536 | ref: selectorRef,
|
537 | id: id,
|
538 | showSearch: mergedShowSearch,
|
539 | autoClearSearchValue: autoClearSearchValue,
|
540 | mode: mode,
|
541 | activeDescendantId: activeDescendantId,
|
542 | tagRender: tagRender,
|
543 | values: displayValues,
|
544 | open: mergedOpen,
|
545 | onToggleOpen: onToggleOpen,
|
546 | activeValue: activeValue,
|
547 | searchValue: mergedSearchValue,
|
548 | onSearch: onInternalSearch,
|
549 | onSearchSubmit: onInternalSearchSubmit,
|
550 | onRemove: onSelectorRemove,
|
551 | tokenWithEnter: tokenWithEnter
|
552 | })));
|
553 |
|
554 |
|
555 | var renderNode;
|
556 |
|
557 |
|
558 | if (customizeRawInputElement) {
|
559 | renderNode = selectorNode;
|
560 | } else {
|
561 | renderNode = React.createElement("div", _extends({
|
562 | className: mergedClassName
|
563 | }, domProps, {
|
564 | ref: containerRef,
|
565 | onMouseDown: onInternalMouseDown,
|
566 | onKeyDown: onInternalKeyDown,
|
567 | onKeyUp: onInternalKeyUp,
|
568 | onFocus: onContainerFocus,
|
569 | onBlur: onContainerBlur
|
570 | }), mockFocused && !mergedOpen && React.createElement("span", {
|
571 | style: {
|
572 | width: 0,
|
573 | height: 0,
|
574 | position: 'absolute',
|
575 | overflow: 'hidden',
|
576 | opacity: 0
|
577 | },
|
578 | "aria-live": "polite"
|
579 | }, "".concat(displayValues.map(function (_ref) {
|
580 | var label = _ref.label,
|
581 | value = _ref.value;
|
582 | return ['number', 'string'].includes(_typeof(label)) ? label : value;
|
583 | }).join(', '))), selectorNode, arrowNode, mergedAllowClear && clearNode);
|
584 | }
|
585 | return React.createElement(BaseSelectContext.Provider, {
|
586 | value: baseSelectContext
|
587 | }, renderNode);
|
588 | });
|
589 |
|
590 |
|
591 | if (process.env.NODE_ENV !== 'production') {
|
592 | BaseSelect.displayName = 'BaseSelect';
|
593 | }
|
594 | export default BaseSelect; |
\ | No newline at end of file |