123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- var _typeof = require("@babel/runtime/helpers/typeof");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.isMultiple = exports.default = void 0;
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
- var _classnames = _interopRequireDefault(require("classnames"));
- var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
- var _useMergedState3 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
- var _isMobile = _interopRequireDefault(require("rc-util/lib/isMobile"));
- var _ref2 = require("rc-util/lib/ref");
- var React = _interopRequireWildcard(require("react"));
- var _useAllowClear2 = require("../hooks/useAllowClear");
- var _useBaseProps = require("../hooks/useBaseProps");
- var _useDelayReset3 = _interopRequireDefault(require("../hooks/useDelayReset"));
- var _useLock3 = _interopRequireDefault(require("../hooks/useLock"));
- var _useSelectTriggerControl = _interopRequireDefault(require("../hooks/useSelectTriggerControl"));
- var _Selector = _interopRequireDefault(require("../Selector"));
- var _SelectTrigger = _interopRequireDefault(require("../SelectTrigger"));
- var _TransBtn = _interopRequireDefault(require("../TransBtn"));
- var _valueUtil = require("../utils/valueUtil");
- var _SelectContext = _interopRequireDefault(require("../SelectContext"));
- var _Polite = _interopRequireDefault(require("./Polite"));
- 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"];
- 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); }
- 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; }
- var DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex'];
- var isMultiple = exports.isMultiple = function isMultiple(mode) {
- return mode === 'tags' || mode === 'multiple';
- };
- var BaseSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
- var _customizeRawInputEle;
- var id = props.id,
- prefixCls = props.prefixCls,
- className = props.className,
- showSearch = props.showSearch,
- tagRender = props.tagRender,
- direction = props.direction,
- omitDomProps = props.omitDomProps,
- displayValues = props.displayValues,
- onDisplayValuesChange = props.onDisplayValuesChange,
- emptyOptions = props.emptyOptions,
- _props$notFoundConten = props.notFoundContent,
- notFoundContent = _props$notFoundConten === void 0 ? 'Not Found' : _props$notFoundConten,
- onClear = props.onClear,
- mode = props.mode,
- disabled = props.disabled,
- loading = props.loading,
- getInputElement = props.getInputElement,
- getRawInputElement = props.getRawInputElement,
- open = props.open,
- defaultOpen = props.defaultOpen,
- onDropdownVisibleChange = props.onDropdownVisibleChange,
- activeValue = props.activeValue,
- onActiveValueChange = props.onActiveValueChange,
- activeDescendantId = props.activeDescendantId,
- searchValue = props.searchValue,
- autoClearSearchValue = props.autoClearSearchValue,
- onSearch = props.onSearch,
- onSearchSplit = props.onSearchSplit,
- tokenSeparators = props.tokenSeparators,
- allowClear = props.allowClear,
- prefix = props.prefix,
- suffixIcon = props.suffixIcon,
- clearIcon = props.clearIcon,
- OptionList = props.OptionList,
- animation = props.animation,
- transitionName = props.transitionName,
- dropdownStyle = props.dropdownStyle,
- dropdownClassName = props.dropdownClassName,
- dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
- dropdownRender = props.dropdownRender,
- dropdownAlign = props.dropdownAlign,
- placement = props.placement,
- builtinPlacements = props.builtinPlacements,
- getPopupContainer = props.getPopupContainer,
- _props$showAction = props.showAction,
- showAction = _props$showAction === void 0 ? [] : _props$showAction,
- onFocus = props.onFocus,
- onBlur = props.onBlur,
- onKeyUp = props.onKeyUp,
- onKeyDown = props.onKeyDown,
- onMouseDown = props.onMouseDown,
- restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
- // ============================== MISC ==============================
- var multiple = isMultiple(mode);
- var mergedShowSearch = (showSearch !== undefined ? showSearch : multiple) || mode === 'combobox';
- var domProps = (0, _objectSpread2.default)({}, restProps);
- DEFAULT_OMIT_PROPS.forEach(function (propName) {
- delete domProps[propName];
- });
- omitDomProps === null || omitDomProps === void 0 || omitDomProps.forEach(function (propName) {
- delete domProps[propName];
- });
- // ============================= Mobile =============================
- var _React$useState = React.useState(false),
- _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
- mobile = _React$useState2[0],
- setMobile = _React$useState2[1];
- React.useEffect(function () {
- // Only update on the client side
- setMobile((0, _isMobile.default)());
- }, []);
- // ============================== Refs ==============================
- var containerRef = React.useRef(null);
- var selectorDomRef = React.useRef(null);
- var triggerRef = React.useRef(null);
- var selectorRef = React.useRef(null);
- var listRef = React.useRef(null);
- var blurRef = React.useRef(false);
- /** Used for component focused management */
- var _useDelayReset = (0, _useDelayReset3.default)(),
- _useDelayReset2 = (0, _slicedToArray2.default)(_useDelayReset, 3),
- mockFocused = _useDelayReset2[0],
- setMockFocused = _useDelayReset2[1],
- cancelSetMockFocused = _useDelayReset2[2];
- // =========================== Imperative ===========================
- React.useImperativeHandle(ref, function () {
- var _selectorRef$current, _selectorRef$current2;
- return {
- focus: (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.focus,
- blur: (_selectorRef$current2 = selectorRef.current) === null || _selectorRef$current2 === void 0 ? void 0 : _selectorRef$current2.blur,
- scrollTo: function scrollTo(arg) {
- var _listRef$current;
- return (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollTo(arg);
- },
- nativeElement: containerRef.current || selectorDomRef.current
- };
- });
- // ========================== Search Value ==========================
- var mergedSearchValue = React.useMemo(function () {
- var _displayValues$;
- if (mode !== 'combobox') {
- return searchValue;
- }
- var val = (_displayValues$ = displayValues[0]) === null || _displayValues$ === void 0 ? void 0 : _displayValues$.value;
- return typeof val === 'string' || typeof val === 'number' ? String(val) : '';
- }, [searchValue, mode, displayValues]);
- // ========================== Custom Input ==========================
- // Only works in `combobox`
- var customizeInputElement = mode === 'combobox' && typeof getInputElement === 'function' && getInputElement() || null;
- // Used for customize replacement for `rc-cascader`
- var customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
- var customizeRawInputRef = (0, _ref2.useComposeRef)(selectorDomRef, customizeRawInputElement === null || customizeRawInputElement === void 0 || (_customizeRawInputEle = customizeRawInputElement.props) === null || _customizeRawInputEle === void 0 ? void 0 : _customizeRawInputEle.ref);
- // ============================== Open ==============================
- // SSR not support Portal which means we need delay `open` for the first time render
- var _React$useState3 = React.useState(false),
- _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
- rendered = _React$useState4[0],
- setRendered = _React$useState4[1];
- (0, _useLayoutEffect.default)(function () {
- setRendered(true);
- }, []);
- var _useMergedState = (0, _useMergedState3.default)(false, {
- defaultValue: defaultOpen,
- value: open
- }),
- _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
- innerOpen = _useMergedState2[0],
- setInnerOpen = _useMergedState2[1];
- var mergedOpen = rendered ? innerOpen : false;
- // Not trigger `open` in `combobox` when `notFoundContent` is empty
- var emptyListContent = !notFoundContent && emptyOptions;
- if (disabled || emptyListContent && mergedOpen && mode === 'combobox') {
- mergedOpen = false;
- }
- var triggerOpen = emptyListContent ? false : mergedOpen;
- var onToggleOpen = React.useCallback(function (newOpen) {
- var nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
- if (!disabled) {
- setInnerOpen(nextOpen);
- if (mergedOpen !== nextOpen) {
- onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 || onDropdownVisibleChange(nextOpen);
- }
- }
- }, [disabled, mergedOpen, setInnerOpen, onDropdownVisibleChange]);
- // ============================= Search =============================
- var tokenWithEnter = React.useMemo(function () {
- return (tokenSeparators || []).some(function (tokenSeparator) {
- return ['\n', '\r\n'].includes(tokenSeparator);
- });
- }, [tokenSeparators]);
- var _ref = React.useContext(_SelectContext.default) || {},
- maxCount = _ref.maxCount,
- rawValues = _ref.rawValues;
- var onInternalSearch = function onInternalSearch(searchText, fromTyping, isCompositing) {
- if (multiple && (0, _valueUtil.isValidCount)(maxCount) && (rawValues === null || rawValues === void 0 ? void 0 : rawValues.size) >= maxCount) {
- return;
- }
- var ret = true;
- var newSearchText = searchText;
- onActiveValueChange === null || onActiveValueChange === void 0 || onActiveValueChange(null);
- var separatedList = (0, _valueUtil.getSeparatedContent)(searchText, tokenSeparators, (0, _valueUtil.isValidCount)(maxCount) ? maxCount - rawValues.size : undefined);
- // Check if match the `tokenSeparators`
- var patchLabels = isCompositing ? null : separatedList;
- // Ignore combobox since it's not split-able
- if (mode !== 'combobox' && patchLabels) {
- newSearchText = '';
- onSearchSplit === null || onSearchSplit === void 0 || onSearchSplit(patchLabels);
- // Should close when paste finish
- onToggleOpen(false);
- // Tell Selector that break next actions
- ret = false;
- }
- if (onSearch && mergedSearchValue !== newSearchText) {
- onSearch(newSearchText, {
- source: fromTyping ? 'typing' : 'effect'
- });
- }
- return ret;
- };
- // Only triggered when menu is closed & mode is tags
- // If menu is open, OptionList will take charge
- // If mode isn't tags, press enter is not meaningful when you can't see any option
- var onInternalSearchSubmit = function onInternalSearchSubmit(searchText) {
- // prevent empty tags from appearing when you click the Enter button
- if (!searchText || !searchText.trim()) {
- return;
- }
- onSearch(searchText, {
- source: 'submit'
- });
- };
- // Close will clean up single mode search text
- React.useEffect(function () {
- if (!mergedOpen && !multiple && mode !== 'combobox') {
- onInternalSearch('', false, false);
- }
- }, [mergedOpen]);
- // ============================ Disabled ============================
- // Close dropdown & remove focus state when disabled change
- React.useEffect(function () {
- if (innerOpen && disabled) {
- setInnerOpen(false);
- }
- // After onBlur is triggered, the focused does not need to be reset
- if (disabled && !blurRef.current) {
- setMockFocused(false);
- }
- }, [disabled]);
- // ============================ Keyboard ============================
- /**
- * We record input value here to check if can press to clean up by backspace
- * - null: Key is not down, this is reset by key up
- * - true: Search text is empty when first time backspace down
- * - false: Search text is not empty when first time backspace down
- */
- var _useLock = (0, _useLock3.default)(),
- _useLock2 = (0, _slicedToArray2.default)(_useLock, 2),
- getClearLock = _useLock2[0],
- setClearLock = _useLock2[1];
- var keyLockRef = React.useRef(false);
- // KeyDown
- var onInternalKeyDown = function onInternalKeyDown(event) {
- var clearLock = getClearLock();
- var key = event.key;
- var isEnterKey = key === 'Enter';
- if (isEnterKey) {
- // Do not submit form when type in the input
- if (mode !== 'combobox') {
- event.preventDefault();
- }
- // We only manage open state here, close logic should handle by list component
- if (!mergedOpen) {
- onToggleOpen(true);
- }
- }
- setClearLock(!!mergedSearchValue);
- // Remove value by `backspace`
- if (key === 'Backspace' && !clearLock && multiple && !mergedSearchValue && displayValues.length) {
- var cloneDisplayValues = (0, _toConsumableArray2.default)(displayValues);
- var removedDisplayValue = null;
- for (var i = cloneDisplayValues.length - 1; i >= 0; i -= 1) {
- var current = cloneDisplayValues[i];
- if (!current.disabled) {
- cloneDisplayValues.splice(i, 1);
- removedDisplayValue = current;
- break;
- }
- }
- if (removedDisplayValue) {
- onDisplayValuesChange(cloneDisplayValues, {
- type: 'remove',
- values: [removedDisplayValue]
- });
- }
- }
- for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
- rest[_key - 1] = arguments[_key];
- }
- if (mergedOpen && (!isEnterKey || !keyLockRef.current)) {
- var _listRef$current2;
- // Lock the Enter key after it is pressed to avoid repeated triggering of the onChange event.
- if (isEnterKey) {
- keyLockRef.current = true;
- }
- (_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.onKeyDown.apply(_listRef$current2, [event].concat(rest));
- }
- onKeyDown === null || onKeyDown === void 0 || onKeyDown.apply(void 0, [event].concat(rest));
- };
- // KeyUp
- var onInternalKeyUp = function onInternalKeyUp(event) {
- for (var _len2 = arguments.length, rest = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
- rest[_key2 - 1] = arguments[_key2];
- }
- if (mergedOpen) {
- var _listRef$current3;
- (_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 || _listRef$current3.onKeyUp.apply(_listRef$current3, [event].concat(rest));
- }
- if (event.key === 'Enter') {
- keyLockRef.current = false;
- }
- onKeyUp === null || onKeyUp === void 0 || onKeyUp.apply(void 0, [event].concat(rest));
- };
- // ============================ Selector ============================
- var onSelectorRemove = function onSelectorRemove(val) {
- var newValues = displayValues.filter(function (i) {
- return i !== val;
- });
- onDisplayValuesChange(newValues, {
- type: 'remove',
- values: [val]
- });
- };
- var onInputBlur = function onInputBlur() {
- // Unlock the Enter key after the input blur; otherwise, the Enter key needs to be pressed twice to trigger the correct effect.
- keyLockRef.current = false;
- };
- // ========================== Focus / Blur ==========================
- /** Record real focus status */
- var focusRef = React.useRef(false);
- var onContainerFocus = function onContainerFocus() {
- setMockFocused(true);
- if (!disabled) {
- if (onFocus && !focusRef.current) {
- onFocus.apply(void 0, arguments);
- }
- // `showAction` should handle `focus` if set
- if (showAction.includes('focus')) {
- onToggleOpen(true);
- }
- }
- focusRef.current = true;
- };
- var onContainerBlur = function onContainerBlur() {
- blurRef.current = true;
- setMockFocused(false, function () {
- focusRef.current = false;
- blurRef.current = false;
- onToggleOpen(false);
- });
- if (disabled) {
- return;
- }
- if (mergedSearchValue) {
- // `tags` mode should move `searchValue` into values
- if (mode === 'tags') {
- onSearch(mergedSearchValue, {
- source: 'submit'
- });
- } else if (mode === 'multiple') {
- // `multiple` mode only clean the search value but not trigger event
- onSearch('', {
- source: 'blur'
- });
- }
- }
- if (onBlur) {
- onBlur.apply(void 0, arguments);
- }
- };
- // Give focus back of Select
- var activeTimeoutIds = [];
- React.useEffect(function () {
- return function () {
- activeTimeoutIds.forEach(function (timeoutId) {
- return clearTimeout(timeoutId);
- });
- activeTimeoutIds.splice(0, activeTimeoutIds.length);
- };
- }, []);
- var onInternalMouseDown = function onInternalMouseDown(event) {
- var _triggerRef$current;
- var target = event.target;
- var popupElement = (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.getPopupElement();
- // We should give focus back to selector if clicked item is not focusable
- if (popupElement && popupElement.contains(target)) {
- var timeoutId = setTimeout(function () {
- var index = activeTimeoutIds.indexOf(timeoutId);
- if (index !== -1) {
- activeTimeoutIds.splice(index, 1);
- }
- cancelSetMockFocused();
- if (!mobile && !popupElement.contains(document.activeElement)) {
- var _selectorRef$current3;
- (_selectorRef$current3 = selectorRef.current) === null || _selectorRef$current3 === void 0 || _selectorRef$current3.focus();
- }
- });
- activeTimeoutIds.push(timeoutId);
- }
- for (var _len3 = arguments.length, restArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
- restArgs[_key3 - 1] = arguments[_key3];
- }
- onMouseDown === null || onMouseDown === void 0 || onMouseDown.apply(void 0, [event].concat(restArgs));
- };
- // ============================ Dropdown ============================
- var _React$useState5 = React.useState({}),
- _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
- forceUpdate = _React$useState6[1];
- // We need force update here since popup dom is render async
- function onPopupMouseEnter() {
- forceUpdate({});
- }
- // Used for raw custom input trigger
- var onTriggerVisibleChange;
- if (customizeRawInputElement) {
- onTriggerVisibleChange = function onTriggerVisibleChange(newOpen) {
- onToggleOpen(newOpen);
- };
- }
- // Close when click on non-select element
- (0, _useSelectTriggerControl.default)(function () {
- var _triggerRef$current2;
- return [containerRef.current, (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : _triggerRef$current2.getPopupElement()];
- }, triggerOpen, onToggleOpen, !!customizeRawInputElement);
- // ============================ Context =============================
- var baseSelectContext = React.useMemo(function () {
- return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
- notFoundContent: notFoundContent,
- open: mergedOpen,
- triggerOpen: triggerOpen,
- id: id,
- showSearch: mergedShowSearch,
- multiple: multiple,
- toggleOpen: onToggleOpen
- });
- }, [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen]);
- // ==================================================================
- // == Render ==
- // ==================================================================
- // ============================= Arrow ==============================
- var showSuffixIcon = !!suffixIcon || loading;
- var arrowNode;
- if (showSuffixIcon) {
- arrowNode = /*#__PURE__*/React.createElement(_TransBtn.default, {
- className: (0, _classnames.default)("".concat(prefixCls, "-arrow"), (0, _defineProperty2.default)({}, "".concat(prefixCls, "-arrow-loading"), loading)),
- customizeIcon: suffixIcon,
- customizeIconProps: {
- loading: loading,
- searchValue: mergedSearchValue,
- open: mergedOpen,
- focused: mockFocused,
- showSearch: mergedShowSearch
- }
- });
- }
- // ============================= Clear ==============================
- var onClearMouseDown = function onClearMouseDown() {
- var _selectorRef$current4;
- onClear === null || onClear === void 0 || onClear();
- (_selectorRef$current4 = selectorRef.current) === null || _selectorRef$current4 === void 0 || _selectorRef$current4.focus();
- onDisplayValuesChange([], {
- type: 'clear',
- values: displayValues
- });
- onInternalSearch('', false, false);
- };
- var _useAllowClear = (0, _useAllowClear2.useAllowClear)(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode),
- mergedAllowClear = _useAllowClear.allowClear,
- clearNode = _useAllowClear.clearIcon;
- // =========================== OptionList ===========================
- var optionList = /*#__PURE__*/React.createElement(OptionList, {
- ref: listRef
- });
- // ============================= Select =============================
- 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));
- // >>> Selector
- var selectorNode = /*#__PURE__*/React.createElement(_SelectTrigger.default, {
- ref: triggerRef,
- disabled: disabled,
- prefixCls: prefixCls,
- visible: triggerOpen,
- popupElement: optionList,
- animation: animation,
- transitionName: transitionName,
- dropdownStyle: dropdownStyle,
- dropdownClassName: dropdownClassName,
- direction: direction,
- dropdownMatchSelectWidth: dropdownMatchSelectWidth,
- dropdownRender: dropdownRender,
- dropdownAlign: dropdownAlign,
- placement: placement,
- builtinPlacements: builtinPlacements,
- getPopupContainer: getPopupContainer,
- empty: emptyOptions,
- getTriggerDOMNode: function getTriggerDOMNode(node) {
- return (
- // TODO: This is workaround and should be removed in `rc-select`
- // And use new standard `nativeElement` for ref.
- // But we should update `rc-resize-observer` first.
- selectorDomRef.current || node
- );
- },
- onPopupVisibleChange: onTriggerVisibleChange,
- onPopupMouseEnter: onPopupMouseEnter
- }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
- ref: customizeRawInputRef
- })) : /*#__PURE__*/React.createElement(_Selector.default, (0, _extends2.default)({}, props, {
- domRef: selectorDomRef,
- prefixCls: prefixCls,
- inputElement: customizeInputElement,
- ref: selectorRef,
- id: id,
- prefix: prefix,
- showSearch: mergedShowSearch,
- autoClearSearchValue: autoClearSearchValue,
- mode: mode,
- activeDescendantId: activeDescendantId,
- tagRender: tagRender,
- values: displayValues,
- open: mergedOpen,
- onToggleOpen: onToggleOpen,
- activeValue: activeValue,
- searchValue: mergedSearchValue,
- onSearch: onInternalSearch,
- onSearchSubmit: onInternalSearchSubmit,
- onRemove: onSelectorRemove,
- tokenWithEnter: tokenWithEnter,
- onInputBlur: onInputBlur
- })));
- // >>> Render
- var renderNode;
- // Render raw
- if (customizeRawInputElement) {
- renderNode = selectorNode;
- } else {
- renderNode = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
- className: mergedClassName
- }, domProps, {
- ref: containerRef,
- onMouseDown: onInternalMouseDown,
- onKeyDown: onInternalKeyDown,
- onKeyUp: onInternalKeyUp,
- onFocus: onContainerFocus,
- onBlur: onContainerBlur
- }), /*#__PURE__*/React.createElement(_Polite.default, {
- visible: mockFocused && !mergedOpen,
- values: displayValues
- }), selectorNode, arrowNode, mergedAllowClear && clearNode);
- }
- return /*#__PURE__*/React.createElement(_useBaseProps.BaseSelectContext.Provider, {
- value: baseSelectContext
- }, renderNode);
- });
- // Set display name for dev
- if (process.env.NODE_ENV !== 'production') {
- BaseSelect.displayName = 'BaseSelect';
- }
- var _default = exports.default = BaseSelect;
|