index.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  3. import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
  4. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  5. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  6. import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  7. 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", "prefix", "suffixIcon", "clearIcon", "OptionList", "animation", "transitionName", "dropdownStyle", "dropdownClassName", "dropdownMatchSelectWidth", "dropdownRender", "dropdownAlign", "placement", "builtinPlacements", "getPopupContainer", "showAction", "onFocus", "onBlur", "onKeyUp", "onKeyDown", "onMouseDown"];
  8. import classNames from 'classnames';
  9. import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
  10. import useMergedState from "rc-util/es/hooks/useMergedState";
  11. import isMobile from "rc-util/es/isMobile";
  12. import { useComposeRef } from "rc-util/es/ref";
  13. import * as React from 'react';
  14. import { useAllowClear } from "../hooks/useAllowClear";
  15. import { BaseSelectContext } from "../hooks/useBaseProps";
  16. import useDelayReset from "../hooks/useDelayReset";
  17. import useLock from "../hooks/useLock";
  18. import useSelectTriggerControl from "../hooks/useSelectTriggerControl";
  19. import Selector from "../Selector";
  20. import SelectTrigger from "../SelectTrigger";
  21. import TransBtn from "../TransBtn";
  22. import { getSeparatedContent, isValidCount } from "../utils/valueUtil";
  23. import SelectContext from "../SelectContext";
  24. import Polite from "./Polite";
  25. var DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex'];
  26. export var isMultiple = function isMultiple(mode) {
  27. return mode === 'tags' || mode === 'multiple';
  28. };
  29. var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
  30. var _customizeRawInputEle;
  31. var id = props.id,
  32. prefixCls = props.prefixCls,
  33. className = props.className,
  34. showSearch = props.showSearch,
  35. tagRender = props.tagRender,
  36. direction = props.direction,
  37. omitDomProps = props.omitDomProps,
  38. displayValues = props.displayValues,
  39. onDisplayValuesChange = props.onDisplayValuesChange,
  40. emptyOptions = props.emptyOptions,
  41. _props$notFoundConten = props.notFoundContent,
  42. notFoundContent = _props$notFoundConten === void 0 ? 'Not Found' : _props$notFoundConten,
  43. onClear = props.onClear,
  44. mode = props.mode,
  45. disabled = props.disabled,
  46. loading = props.loading,
  47. getInputElement = props.getInputElement,
  48. getRawInputElement = props.getRawInputElement,
  49. open = props.open,
  50. defaultOpen = props.defaultOpen,
  51. onDropdownVisibleChange = props.onDropdownVisibleChange,
  52. activeValue = props.activeValue,
  53. onActiveValueChange = props.onActiveValueChange,
  54. activeDescendantId = props.activeDescendantId,
  55. searchValue = props.searchValue,
  56. autoClearSearchValue = props.autoClearSearchValue,
  57. onSearch = props.onSearch,
  58. onSearchSplit = props.onSearchSplit,
  59. tokenSeparators = props.tokenSeparators,
  60. allowClear = props.allowClear,
  61. prefix = props.prefix,
  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. // ============================== MISC ==============================
  84. var multiple = isMultiple(mode);
  85. var mergedShowSearch = (showSearch !== undefined ? showSearch : multiple) || mode === 'combobox';
  86. var domProps = _objectSpread({}, restProps);
  87. DEFAULT_OMIT_PROPS.forEach(function (propName) {
  88. delete domProps[propName];
  89. });
  90. omitDomProps === null || omitDomProps === void 0 || omitDomProps.forEach(function (propName) {
  91. delete domProps[propName];
  92. });
  93. // ============================= Mobile =============================
  94. var _React$useState = React.useState(false),
  95. _React$useState2 = _slicedToArray(_React$useState, 2),
  96. mobile = _React$useState2[0],
  97. setMobile = _React$useState2[1];
  98. React.useEffect(function () {
  99. // Only update on the client side
  100. setMobile(isMobile());
  101. }, []);
  102. // ============================== Refs ==============================
  103. var containerRef = React.useRef(null);
  104. var selectorDomRef = React.useRef(null);
  105. var triggerRef = React.useRef(null);
  106. var selectorRef = React.useRef(null);
  107. var listRef = React.useRef(null);
  108. var blurRef = React.useRef(false);
  109. /** Used for component focused management */
  110. var _useDelayReset = useDelayReset(),
  111. _useDelayReset2 = _slicedToArray(_useDelayReset, 3),
  112. mockFocused = _useDelayReset2[0],
  113. setMockFocused = _useDelayReset2[1],
  114. cancelSetMockFocused = _useDelayReset2[2];
  115. // =========================== Imperative ===========================
  116. React.useImperativeHandle(ref, function () {
  117. var _selectorRef$current, _selectorRef$current2;
  118. return {
  119. focus: (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.focus,
  120. blur: (_selectorRef$current2 = selectorRef.current) === null || _selectorRef$current2 === void 0 ? void 0 : _selectorRef$current2.blur,
  121. scrollTo: function scrollTo(arg) {
  122. var _listRef$current;
  123. return (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollTo(arg);
  124. },
  125. nativeElement: containerRef.current || selectorDomRef.current
  126. };
  127. });
  128. // ========================== Search Value ==========================
  129. var mergedSearchValue = React.useMemo(function () {
  130. var _displayValues$;
  131. if (mode !== 'combobox') {
  132. return searchValue;
  133. }
  134. var val = (_displayValues$ = displayValues[0]) === null || _displayValues$ === void 0 ? void 0 : _displayValues$.value;
  135. return typeof val === 'string' || typeof val === 'number' ? String(val) : '';
  136. }, [searchValue, mode, displayValues]);
  137. // ========================== Custom Input ==========================
  138. // Only works in `combobox`
  139. var customizeInputElement = mode === 'combobox' && typeof getInputElement === 'function' && getInputElement() || null;
  140. // Used for customize replacement for `rc-cascader`
  141. var customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
  142. var customizeRawInputRef = useComposeRef(selectorDomRef, customizeRawInputElement === null || customizeRawInputElement === void 0 || (_customizeRawInputEle = customizeRawInputElement.props) === null || _customizeRawInputEle === void 0 ? void 0 : _customizeRawInputEle.ref);
  143. // ============================== Open ==============================
  144. // SSR not support Portal which means we need delay `open` for the first time render
  145. var _React$useState3 = React.useState(false),
  146. _React$useState4 = _slicedToArray(_React$useState3, 2),
  147. rendered = _React$useState4[0],
  148. setRendered = _React$useState4[1];
  149. useLayoutEffect(function () {
  150. setRendered(true);
  151. }, []);
  152. var _useMergedState = useMergedState(false, {
  153. defaultValue: defaultOpen,
  154. value: open
  155. }),
  156. _useMergedState2 = _slicedToArray(_useMergedState, 2),
  157. innerOpen = _useMergedState2[0],
  158. setInnerOpen = _useMergedState2[1];
  159. var mergedOpen = rendered ? innerOpen : false;
  160. // Not trigger `open` in `combobox` when `notFoundContent` is empty
  161. var emptyListContent = !notFoundContent && emptyOptions;
  162. if (disabled || emptyListContent && mergedOpen && mode === 'combobox') {
  163. mergedOpen = false;
  164. }
  165. var triggerOpen = emptyListContent ? false : mergedOpen;
  166. var onToggleOpen = React.useCallback(function (newOpen) {
  167. var nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
  168. if (!disabled) {
  169. setInnerOpen(nextOpen);
  170. if (mergedOpen !== nextOpen) {
  171. onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 || onDropdownVisibleChange(nextOpen);
  172. }
  173. }
  174. }, [disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange]);
  175. // ============================= Search =============================
  176. var tokenWithEnter = React.useMemo(function () {
  177. return (tokenSeparators || []).some(function (tokenSeparator) {
  178. return ['\n', '\r\n'].includes(tokenSeparator);
  179. });
  180. }, [tokenSeparators]);
  181. var _ref = React.useContext(SelectContext) || {},
  182. maxCount = _ref.maxCount,
  183. rawValues = _ref.rawValues;
  184. var onInternalSearch = function onInternalSearch(searchText, fromTyping, isCompositing) {
  185. if (multiple && isValidCount(maxCount) && (rawValues === null || rawValues === void 0 ? void 0 : rawValues.size) >= maxCount) {
  186. return;
  187. }
  188. var ret = true;
  189. var newSearchText = searchText;
  190. onActiveValueChange === null || onActiveValueChange === void 0 || onActiveValueChange(null);
  191. var separatedList = getSeparatedContent(searchText, tokenSeparators, isValidCount(maxCount) ? maxCount - rawValues.size : undefined);
  192. // Check if match the `tokenSeparators`
  193. var patchLabels = isCompositing ? null : separatedList;
  194. // Ignore combobox since it's not split-able
  195. if (mode !== 'combobox' && patchLabels) {
  196. newSearchText = '';
  197. onSearchSplit === null || onSearchSplit === void 0 || onSearchSplit(patchLabels);
  198. // Should close when paste finish
  199. onToggleOpen(false);
  200. // Tell Selector that break next actions
  201. ret = false;
  202. }
  203. if (onSearch && mergedSearchValue !== newSearchText) {
  204. onSearch(newSearchText, {
  205. source: fromTyping ? 'typing' : 'effect'
  206. });
  207. }
  208. return ret;
  209. };
  210. // Only triggered when menu is closed & mode is tags
  211. // If menu is open, OptionList will take charge
  212. // If mode isn't tags, press enter is not meaningful when you can't see any option
  213. var onInternalSearchSubmit = function onInternalSearchSubmit(searchText) {
  214. // prevent empty tags from appearing when you click the Enter button
  215. if (!searchText || !searchText.trim()) {
  216. return;
  217. }
  218. onSearch(searchText, {
  219. source: 'submit'
  220. });
  221. };
  222. // Close will clean up single mode search text
  223. React.useEffect(function () {
  224. if (!mergedOpen && !multiple && mode !== 'combobox') {
  225. onInternalSearch('', false, false);
  226. }
  227. }, [mergedOpen]);
  228. // ============================ Disabled ============================
  229. // Close dropdown & remove focus state when disabled change
  230. React.useEffect(function () {
  231. if (innerOpen && disabled) {
  232. setInnerOpen(false);
  233. }
  234. // After onBlur is triggered, the focused does not need to be reset
  235. if (disabled && !blurRef.current) {
  236. setMockFocused(false);
  237. }
  238. }, [disabled]);
  239. // ============================ Keyboard ============================
  240. /**
  241. * We record input value here to check if can press to clean up by backspace
  242. * - null: Key is not down, this is reset by key up
  243. * - true: Search text is empty when first time backspace down
  244. * - false: Search text is not empty when first time backspace down
  245. */
  246. var _useLock = useLock(),
  247. _useLock2 = _slicedToArray(_useLock, 2),
  248. getClearLock = _useLock2[0],
  249. setClearLock = _useLock2[1];
  250. var keyLockRef = React.useRef(false);
  251. // KeyDown
  252. var onInternalKeyDown = function onInternalKeyDown(event) {
  253. var clearLock = getClearLock();
  254. var key = event.key;
  255. var isEnterKey = key === 'Enter';
  256. if (isEnterKey) {
  257. // Do not submit form when type in the input
  258. if (mode !== 'combobox') {
  259. event.preventDefault();
  260. }
  261. // We only manage open state here, close logic should handle by list component
  262. if (!mergedOpen) {
  263. onToggleOpen(true);
  264. }
  265. }
  266. setClearLock(!!mergedSearchValue);
  267. // Remove value by `backspace`
  268. if (key === 'Backspace' && !clearLock && multiple && !mergedSearchValue && displayValues.length) {
  269. var cloneDisplayValues = _toConsumableArray(displayValues);
  270. var removedDisplayValue = null;
  271. for (var i = cloneDisplayValues.length - 1; i >= 0; i -= 1) {
  272. var current = cloneDisplayValues[i];
  273. if (!current.disabled) {
  274. cloneDisplayValues.splice(i, 1);
  275. removedDisplayValue = current;
  276. break;
  277. }
  278. }
  279. if (removedDisplayValue) {
  280. onDisplayValuesChange(cloneDisplayValues, {
  281. type: 'remove',
  282. values: [removedDisplayValue]
  283. });
  284. }
  285. }
  286. for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
  287. rest[_key - 1] = arguments[_key];
  288. }
  289. if (mergedOpen && (!isEnterKey || !keyLockRef.current)) {
  290. var _listRef$current2;
  291. // Lock the Enter key after it is pressed to avoid repeated triggering of the onChange event.
  292. if (isEnterKey) {
  293. keyLockRef.current = true;
  294. }
  295. (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.onKeyDown.apply(_listRef$current2, [event].concat(rest));
  296. }
  297. onKeyDown === null || onKeyDown === void 0 || onKeyDown.apply(void 0, [event].concat(rest));
  298. };
  299. // KeyUp
  300. var onInternalKeyUp = function onInternalKeyUp(event) {
  301. for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
  302. rest[_key2 - 1] = arguments[_key2];
  303. }
  304. if (mergedOpen) {
  305. var _listRef$current3;
  306. (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 || _listRef$current3.onKeyUp.apply(_listRef$current3, [event].concat(rest));
  307. }
  308. if (event.key === 'Enter') {
  309. keyLockRef.current = false;
  310. }
  311. onKeyUp === null || onKeyUp === void 0 || onKeyUp.apply(void 0, [event].concat(rest));
  312. };
  313. // ============================ Selector ============================
  314. var onSelectorRemove = function onSelectorRemove(val) {
  315. var newValues = displayValues.filter(function (i) {
  316. return i !== val;
  317. });
  318. onDisplayValuesChange(newValues, {
  319. type: 'remove',
  320. values: [val]
  321. });
  322. };
  323. var onInputBlur = function onInputBlur() {
  324. // Unlock the Enter key after the input blur; otherwise, the Enter key needs to be pressed twice to trigger the correct effect.
  325. keyLockRef.current = false;
  326. };
  327. // ========================== Focus / Blur ==========================
  328. /** Record real focus status */
  329. var focusRef = React.useRef(false);
  330. var onContainerFocus = function onContainerFocus() {
  331. setMockFocused(true);
  332. if (!disabled) {
  333. if (onFocus && !focusRef.current) {
  334. onFocus.apply(void 0, arguments);
  335. }
  336. // `showAction` should handle `focus` if set
  337. if (showAction.includes('focus')) {
  338. onToggleOpen(true);
  339. }
  340. }
  341. focusRef.current = true;
  342. };
  343. var onContainerBlur = function onContainerBlur() {
  344. blurRef.current = true;
  345. setMockFocused(false, function () {
  346. focusRef.current = false;
  347. blurRef.current = false;
  348. onToggleOpen(false);
  349. });
  350. if (disabled) {
  351. return;
  352. }
  353. if (mergedSearchValue) {
  354. // `tags` mode should move `searchValue` into values
  355. if (mode === 'tags') {
  356. onSearch(mergedSearchValue, {
  357. source: 'submit'
  358. });
  359. } else if (mode === 'multiple') {
  360. // `multiple` mode only clean the search value but not trigger event
  361. onSearch('', {
  362. source: 'blur'
  363. });
  364. }
  365. }
  366. if (onBlur) {
  367. onBlur.apply(void 0, arguments);
  368. }
  369. };
  370. // Give focus back of Select
  371. var activeTimeoutIds = [];
  372. React.useEffect(function () {
  373. return function () {
  374. activeTimeoutIds.forEach(function (timeoutId) {
  375. return clearTimeout(timeoutId);
  376. });
  377. activeTimeoutIds.splice(0, activeTimeoutIds.length);
  378. };
  379. }, []);
  380. var onInternalMouseDown = function onInternalMouseDown(event) {
  381. var _triggerRef$current;
  382. var target = event.target;
  383. var popupElement = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.getPopupElement();
  384. // We should give focus back to selector if clicked item is not focusable
  385. if (popupElement && popupElement.contains(target)) {
  386. var timeoutId = setTimeout(function () {
  387. var index = activeTimeoutIds.indexOf(timeoutId);
  388. if (index !== -1) {
  389. activeTimeoutIds.splice(index, 1);
  390. }
  391. cancelSetMockFocused();
  392. if (!mobile && !popupElement.contains(document.activeElement)) {
  393. var _selectorRef$current3;
  394. (_selectorRef$current3 = selectorRef.current) === null || _selectorRef$current3 === void 0 || _selectorRef$current3.focus();
  395. }
  396. });
  397. activeTimeoutIds.push(timeoutId);
  398. }
  399. for (var _len3 = arguments.length, restArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
  400. restArgs[_key3 - 1] = arguments[_key3];
  401. }
  402. onMouseDown === null || onMouseDown === void 0 || onMouseDown.apply(void 0, [event].concat(restArgs));
  403. };
  404. // ============================ Dropdown ============================
  405. var _React$useState5 = React.useState({}),
  406. _React$useState6 = _slicedToArray(_React$useState5, 2),
  407. forceUpdate = _React$useState6[1];
  408. // We need force update here since popup dom is render async
  409. function onPopupMouseEnter() {
  410. forceUpdate({});
  411. }
  412. // Used for raw custom input trigger
  413. var onTriggerVisibleChange;
  414. if (customizeRawInputElement) {
  415. onTriggerVisibleChange = function onTriggerVisibleChange(newOpen) {
  416. onToggleOpen(newOpen);
  417. };
  418. }
  419. // Close when click on non-select element
  420. useSelectTriggerControl(function () {
  421. var _triggerRef$current2;
  422. return [containerRef.current, (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.getPopupElement()];
  423. }, triggerOpen, onToggleOpen, !!customizeRawInputElement);
  424. // ============================ Context =============================
  425. var baseSelectContext = React.useMemo(function () {
  426. return _objectSpread(_objectSpread({}, props), {}, {
  427. notFoundContent: notFoundContent,
  428. open: mergedOpen,
  429. triggerOpen: triggerOpen,
  430. id: id,
  431. showSearch: mergedShowSearch,
  432. multiple: multiple,
  433. toggleOpen: onToggleOpen
  434. });
  435. }, [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen]);
  436. // ==================================================================
  437. // == Render ==
  438. // ==================================================================
  439. // ============================= Arrow ==============================
  440. var showSuffixIcon = !!suffixIcon || loading;
  441. var arrowNode;
  442. if (showSuffixIcon) {
  443. arrowNode = /*#__PURE__*/React.createElement(TransBtn, {
  444. className: classNames("".concat(prefixCls, "-arrow"), _defineProperty({}, "".concat(prefixCls, "-arrow-loading"), loading)),
  445. customizeIcon: suffixIcon,
  446. customizeIconProps: {
  447. loading: loading,
  448. searchValue: mergedSearchValue,
  449. open: mergedOpen,
  450. focused: mockFocused,
  451. showSearch: mergedShowSearch
  452. }
  453. });
  454. }
  455. // ============================= Clear ==============================
  456. var onClearMouseDown = function onClearMouseDown() {
  457. var _selectorRef$current4;
  458. onClear === null || onClear === void 0 || onClear();
  459. (_selectorRef$current4 = selectorRef.current) === null || _selectorRef$current4 === void 0 || _selectorRef$current4.focus();
  460. onDisplayValuesChange([], {
  461. type: 'clear',
  462. values: displayValues
  463. });
  464. onInternalSearch('', false, false);
  465. };
  466. var _useAllowClear = useAllowClear(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode),
  467. mergedAllowClear = _useAllowClear.allowClear,
  468. clearNode = _useAllowClear.clearIcon;
  469. // =========================== OptionList ===========================
  470. var optionList = /*#__PURE__*/React.createElement(OptionList, {
  471. ref: listRef
  472. });
  473. // ============================= Select =============================
  474. var mergedClassName = classNames(prefixCls, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-focused"), mockFocused), "".concat(prefixCls, "-multiple"), multiple), "".concat(prefixCls, "-single"), !multiple), "".concat(prefixCls, "-allow-clear"), allowClear), "".concat(prefixCls, "-show-arrow"), showSuffixIcon), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-loading"), loading), "".concat(prefixCls, "-open"), mergedOpen), "".concat(prefixCls, "-customize-input"), customizeInputElement), "".concat(prefixCls, "-show-search"), mergedShowSearch));
  475. // >>> Selector
  476. var selectorNode = /*#__PURE__*/React.createElement(SelectTrigger, {
  477. ref: triggerRef,
  478. disabled: disabled,
  479. prefixCls: prefixCls,
  480. visible: triggerOpen,
  481. popupElement: optionList,
  482. animation: animation,
  483. transitionName: transitionName,
  484. dropdownStyle: dropdownStyle,
  485. dropdownClassName: dropdownClassName,
  486. direction: direction,
  487. dropdownMatchSelectWidth: dropdownMatchSelectWidth,
  488. dropdownRender: dropdownRender,
  489. dropdownAlign: dropdownAlign,
  490. placement: placement,
  491. builtinPlacements: builtinPlacements,
  492. getPopupContainer: getPopupContainer,
  493. empty: emptyOptions,
  494. getTriggerDOMNode: function getTriggerDOMNode(node) {
  495. return (
  496. // TODO: This is workaround and should be removed in `rc-select`
  497. // And use new standard `nativeElement` for ref.
  498. // But we should update `rc-resize-observer` first.
  499. selectorDomRef.current || node
  500. );
  501. },
  502. onPopupVisibleChange: onTriggerVisibleChange,
  503. onPopupMouseEnter: onPopupMouseEnter
  504. }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
  505. ref: customizeRawInputRef
  506. })) : /*#__PURE__*/React.createElement(Selector, _extends({}, props, {
  507. domRef: selectorDomRef,
  508. prefixCls: prefixCls,
  509. inputElement: customizeInputElement,
  510. ref: selectorRef,
  511. id: id,
  512. prefix: prefix,
  513. showSearch: mergedShowSearch,
  514. autoClearSearchValue: autoClearSearchValue,
  515. mode: mode,
  516. activeDescendantId: activeDescendantId,
  517. tagRender: tagRender,
  518. values: displayValues,
  519. open: mergedOpen,
  520. onToggleOpen: onToggleOpen,
  521. activeValue: activeValue,
  522. searchValue: mergedSearchValue,
  523. onSearch: onInternalSearch,
  524. onSearchSubmit: onInternalSearchSubmit,
  525. onRemove: onSelectorRemove,
  526. tokenWithEnter: tokenWithEnter,
  527. onInputBlur: onInputBlur
  528. })));
  529. // >>> Render
  530. var renderNode;
  531. // Render raw
  532. if (customizeRawInputElement) {
  533. renderNode = selectorNode;
  534. } else {
  535. renderNode = /*#__PURE__*/React.createElement("div", _extends({
  536. className: mergedClassName
  537. }, domProps, {
  538. ref: containerRef,
  539. onMouseDown: onInternalMouseDown,
  540. onKeyDown: onInternalKeyDown,
  541. onKeyUp: onInternalKeyUp,
  542. onFocus: onContainerFocus,
  543. onBlur: onContainerBlur
  544. }), /*#__PURE__*/React.createElement(Polite, {
  545. visible: mockFocused && !mergedOpen,
  546. values: displayValues
  547. }), selectorNode, arrowNode, mergedAllowClear && clearNode);
  548. }
  549. return /*#__PURE__*/React.createElement(BaseSelectContext.Provider, {
  550. value: baseSelectContext
  551. }, renderNode);
  552. });
  553. // Set display name for dev
  554. if (process.env.NODE_ENV !== 'production') {
  555. BaseSelect.displayName = 'BaseSelect';
  556. }
  557. export default BaseSelect;