index.js 27 KB

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