acud
Version:
acg react 组件库
833 lines (832 loc) • 38.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = generateSelector;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));
var _classnames = _interopRequireDefault(require("classnames"));
var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _Selector = _interopRequireDefault(require("./Selector"));
var _SelectTrigger = _interopRequireDefault(require("./SelectTrigger"));
var _generator = require("./interface/generator");
var _commonUtil = require("./utils/commonUtil");
var _TransBtn = _interopRequireDefault(require("./TransBtn"));
var _iconUtil = _interopRequireDefault(require("../utils/iconUtil"));
var _useLock3 = _interopRequireDefault(require("./hooks/useLock"));
var _useDelayReset3 = _interopRequireDefault(require("./hooks/useDelayReset"));
var _useLayoutEffect = _interopRequireDefault(require("./hooks/useLayoutEffect"));
var _valueUtil = require("./utils/valueUtil");
var _useSelectTriggerControl = _interopRequireDefault(require("./hooks/useSelectTriggerControl"));
var _useCacheDisplayValue = _interopRequireDefault(require("./hooks/useCacheDisplayValue"));
var _useCacheOptions = _interopRequireDefault(require("./hooks/useCacheOptions"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
* To match accessibility requirement, we always provide an input in the component.
* Other element will not set `tabIndex` to avoid `onBlur` sequence problem.
* For focused select, we set `aria-live="polite"` to update the accessibility content.
*
* ref:
* - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
*/
var __rest = void 0 && (void 0).__rest || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
}
return t;
};
var DEFAULT_OMIT_PROPS = ['removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'tabIndex'];
/**
* This function is in internal usage.
* Do not use it in your prod env since we may refactor this.
*/
function generateSelector(config) {
var defaultPrefixCls = config.prefixCls,
OptionList = config.components.optionList,
convertChildrenToData = config.convertChildrenToData,
flattenOptions = config.flattenOptions,
getLabeledValue = config.getLabeledValue,
filterOptions = config.filterOptions,
isValueDisabled = config.isValueDisabled,
findValueOption = config.findValueOption,
warningProps = config.warningProps,
fillOptionsWithMissingValue = config.fillOptionsWithMissingValue,
omitDOMProps = config.omitDOMProps;
// Use raw define since `React.FC` not support generic
function Select(props, ref) {
var _props$prefixCls = props.prefixCls,
prefixCls = _props$prefixCls === void 0 ? defaultPrefixCls : _props$prefixCls,
className = props.className,
id = props.id,
open = props.open,
defaultOpen = props.defaultOpen,
options = props.options,
children = props.children,
mode = props.mode,
value = props.value,
defaultValue = props.defaultValue,
labelInValue = props.labelInValue,
_props$showAllSelecte = props.showAllSelected,
showAllSelected = _props$showAllSelecte === void 0 ? false : _props$showAllSelecte,
showSearch = props.showSearch,
inputValue = props.inputValue,
searchValue = props.searchValue,
filterOption = props.filterOption,
filterSort = props.filterSort,
_props$optionFilterPr = props.optionFilterProp,
optionFilterProp = _props$optionFilterPr === void 0 ? 'value' : _props$optionFilterPr,
_props$autoClearSearc = props.autoClearSearchValue,
autoClearSearchValue = _props$autoClearSearc === void 0 ? true : _props$autoClearSearc,
onSearch = props.onSearch,
suffixIconPre = props.suffixIconPre,
removeIcon = props.removeIcon,
allowClear = props.allowClear,
clearIcon = props.clearIcon,
showArrow = props.showArrow,
menuItemSelectedIcon = props.menuItemSelectedIcon,
disabled = props.disabled,
loading = props.loading,
defaultActiveFirstOption = props.defaultActiveFirstOption,
notFoundContent = props.notFoundContent,
optionLabelProp = props.optionLabelProp,
backfill = props.backfill,
tabIndex = props.tabIndex,
getInputElement = props.getInputElement,
getPopupContainer = props.getPopupContainer,
_props$listHeight = props.listHeight,
listHeight = _props$listHeight === void 0 ? 200 : _props$listHeight,
_props$listItemHeight = props.listItemHeight,
listItemHeight = _props$listItemHeight === void 0 ? 20 : _props$listItemHeight,
animation = props.animation,
transitionName = props.transitionName,
virtual = props.virtual,
dropdownStyle = props.dropdownStyle,
dropdownClassName = props.dropdownClassName,
dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
dropdownRender = props.dropdownRender,
dropdownAlign = props.dropdownAlign,
_props$showAction = props.showAction,
showAction = _props$showAction === void 0 ? [] : _props$showAction,
showTitle = props.showTitle,
showSelectAll = props.showSelectAll,
direction = props.direction,
placement = props.placement,
popupOverflow = props.popupOverflow,
tokenSeparators = props.tokenSeparators,
groupSelectorRender = props.groupSelectorRender,
tagRender = props.tagRender,
optionRender = props.optionRender,
renderEmpty = props.renderEmpty,
keepExpand = props.keepExpand,
defaultExpandGroupKey = props.defaultExpandGroupKey,
onPopupScroll = props.onPopupScroll,
onDropdownVisibleChange = props.onDropdownVisibleChange,
onFocus = props.onFocus,
onBlur = props.onBlur,
onKeyUp = props.onKeyUp,
onKeyDown = props.onKeyDown,
onMouseDown = props.onMouseDown,
onChange = props.onChange,
onSelect = props.onSelect,
onDeselect = props.onDeselect,
onClear = props.onClear,
onExpandChange = props.onExpandChange,
_props$internalProps = props.internalProps,
internalProps = _props$internalProps === void 0 ? {} : _props$internalProps,
restProps = __rest(props, ["prefixCls", "className", "id", "open", "defaultOpen", "options", "children", "mode", "value", "defaultValue", "labelInValue", "showAllSelected", "showSearch", "inputValue", "searchValue", "filterOption", "filterSort", "optionFilterProp", "autoClearSearchValue", "onSearch", "suffixIconPre", "removeIcon", "allowClear", "clearIcon", "showArrow", "menuItemSelectedIcon", "disabled", "loading", "defaultActiveFirstOption", "notFoundContent", "optionLabelProp", "backfill", "tabIndex", "getInputElement", "getPopupContainer", "listHeight", "listItemHeight", "animation", "transitionName", "virtual", "dropdownStyle", "dropdownClassName", "dropdownMatchSelectWidth", "dropdownRender", "dropdownAlign", "showAction", "showTitle", "showSelectAll", "direction", "placement", "popupOverflow", "tokenSeparators", "groupSelectorRender", "tagRender", "optionRender", "renderEmpty", "keepExpand", "defaultExpandGroupKey", "onPopupScroll", "onDropdownVisibleChange", "onFocus", "onBlur", "onKeyUp", "onKeyDown", "onMouseDown", "onChange", "onSelect", "onDeselect", "onClear", "onExpandChange", "internalProps"]);
var useInternalProps = internalProps.mark === _generator.INTERNAL_PROPS_MARK;
var domProps = omitDOMProps ? omitDOMProps(restProps) : restProps;
DEFAULT_OMIT_PROPS.forEach(function (prop) {
delete domProps[prop];
});
var containerRef = (0, _react.useRef)(null);
var triggerRef = (0, _react.useRef)(null);
var selectorRef = (0, _react.useRef)(null);
var listRef = (0, _react.useRef)(null);
var tokenWithEnter = (0, _react.useMemo)(function () {
return (tokenSeparators || []).some(function (tokenSeparator) {
return ['\n', '\r\n'].includes(tokenSeparator);
});
}, [tokenSeparators]);
/** 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];
// Inner id for accessibility usage. Only work in client side
var _useState = (0, _react.useState)(),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
innerId = _useState2[0],
setInnerId = _useState2[1];
(0, _react.useEffect)(function () {
setInnerId("rc_select_".concat((0, _commonUtil.getUUID)()));
}, []);
var mergedId = id || innerId;
// optionLabelProp
var mergedOptionLabelProp = optionLabelProp;
if (mergedOptionLabelProp === undefined) {
mergedOptionLabelProp = options ? 'label' : 'children';
}
// labelInValue
var mergedLabelInValue = mode === 'combobox' ? false : labelInValue;
var isMultiple = mode === 'tags' || mode === 'multiple';
var mergedShowSearch = showSearch !== undefined ? showSearch : isMultiple || mode === 'combobox';
// ============================== Ref ===============================
var selectorDomRef = (0, _react.useRef)(null);
React.useImperativeHandle(ref, function () {
var _a, _b, _c;
return {
focus: (_a = selectorRef.current) === null || _a === void 0 ? void 0 : _a.focus,
blur: (_b = selectorRef.current) === null || _b === void 0 ? void 0 : _b.blur,
scrollTo: (_c = listRef.current) === null || _c === void 0 ? void 0 : _c.scrollTo
};
});
// ============================= Value ==============================
var _useMergedState = (0, _useMergedState5["default"])(defaultValue, {
value: value
}),
_useMergedState2 = (0, _slicedToArray2["default"])(_useMergedState, 2),
mergedValue = _useMergedState2[0],
setMergedValue = _useMergedState2[1];
/** Unique raw values */
var _useMemo = (0, _react.useMemo)(function () {
return (0, _commonUtil.toInnerValue)(mergedValue, {
labelInValue: mergedLabelInValue,
combobox: mode === 'combobox'
});
}, [mergedValue, mergedLabelInValue]),
_useMemo2 = (0, _slicedToArray2["default"])(_useMemo, 2),
mergedRawValue = _useMemo2[0],
mergedValueMap = _useMemo2[1];
/** We cache a set of raw values to speed up check */
var rawValues = (0, _react.useMemo)(function () {
return new Set(mergedRawValue);
}, [mergedRawValue]);
// ============================= Option =============================
// Set by option list active, it will merge into search input when mode is `combobox`
var _useState3 = (0, _react.useState)(null),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
activeValue = _useState4[0],
setActiveValue = _useState4[1];
var _useState5 = (0, _react.useState)(''),
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
innerSearchValue = _useState6[0],
setInnerSearchValue = _useState6[1];
var mergedSearchValue = innerSearchValue;
if (mode === 'combobox' && mergedValue !== undefined) {
mergedSearchValue = mergedValue;
} else if (searchValue !== undefined) {
mergedSearchValue = searchValue;
} else if (inputValue) {
mergedSearchValue = inputValue;
}
var mergedOptions = (0, _react.useMemo)(function () {
var newOptions = options;
if (newOptions === undefined) {
newOptions = convertChildrenToData(children);
}
/**
* `tags` should fill un-list item.
* This is not cool here since TreeSelect do not need this
*/
if (mode === 'tags' && fillOptionsWithMissingValue) {
newOptions = fillOptionsWithMissingValue(newOptions, mergedValue, mergedOptionLabelProp, labelInValue);
}
return newOptions || [];
}, [options, children, mode, mergedValue]);
var mergedFlattenOptions = (0, _react.useMemo)(function () {
return flattenOptions(mergedOptions, props);
}, [mergedOptions]);
var getValueOption = (0, _useCacheOptions["default"])(mergedFlattenOptions);
// Display options for OptionList
var displayOptions = (0, _react.useMemo)(function () {
if (!mergedSearchValue || !mergedShowSearch) {
return (0, _toConsumableArray2["default"])(mergedOptions);
}
var filteredOptions = filterOptions(mergedSearchValue, mergedOptions, {
optionFilterProp: optionFilterProp,
filterOption: mode === 'combobox' && filterOption === undefined ? function () {
return true;
} : filterOption
});
if (mode === 'tags' && filteredOptions.every(function (opt) {
return opt[optionFilterProp] !== mergedSearchValue;
})) {
filteredOptions.unshift({
value: mergedSearchValue,
label: mergedSearchValue,
key: '__RC_SELECT_TAG_PLACEHOLDER__'
});
}
if (filterSort && Array.isArray(filteredOptions)) {
return (0, _toConsumableArray2["default"])(filteredOptions).sort(filterSort);
}
return filteredOptions;
}, [mergedOptions, mergedSearchValue, mode, mergedShowSearch, filterSort]);
var displayFlattenOptions = (0, _react.useMemo)(function () {
return flattenOptions(displayOptions, props);
}, [displayOptions]);
(0, _react.useEffect)(function () {
if (listRef.current && listRef.current.scrollTo) {
listRef.current.scrollTo(0);
}
}, [mergedSearchValue]);
// ============================ Selector ============================
var displayValues = (0, _react.useMemo)(function () {
var tmpValues = mergedRawValue.map(function (val) {
var valueOptions = getValueOption([val]);
var displayValue = getLabeledValue(val, {
options: valueOptions,
prevValueMap: mergedValueMap,
labelInValue: mergedLabelInValue,
optionLabelProp: mergedOptionLabelProp,
groupSelectorRender: groupSelectorRender
});
return (0, _extends2["default"])((0, _extends2["default"])({}, displayValue), {
disabled: isValueDisabled(val, valueOptions)
});
});
if (!mode && tmpValues.length === 1 && tmpValues[0].value === null && tmpValues[0].label === null) {
return [];
}
return tmpValues;
}, [mergedValue, mergedOptions, mode]);
// Polyfill with cache label
displayValues = (0, _useCacheDisplayValue["default"])(displayValues);
var triggerSelect = function triggerSelect(newValue, isSelect, source) {
var newValueOption = getValueOption([newValue]);
var outOption = findValueOption([newValue], newValueOption)[0];
if (!internalProps.skipTriggerSelect) {
// Skip trigger `onSelect` or `onDeselect` if configured
var selectValue = mergedLabelInValue ? getLabeledValue(newValue, {
options: newValueOption,
prevValueMap: mergedValueMap,
labelInValue: mergedLabelInValue,
optionLabelProp: mergedOptionLabelProp
}) : newValue;
if (isSelect && onSelect) {
onSelect(selectValue, outOption);
} else if (!isSelect && onDeselect) {
onDeselect(selectValue, outOption);
}
}
// Trigger internal event
if (useInternalProps) {
if (isSelect && internalProps.onRawSelect) {
internalProps.onRawSelect(newValue, outOption, source);
} else if (!isSelect && internalProps.onRawDeselect) {
internalProps.onRawDeselect(newValue, outOption, source);
}
}
};
// We need cache options here in case user update the option list
var _useState7 = (0, _react.useState)([]),
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
prevValueOptions = _useState8[0],
setPrevValueOptions = _useState8[1];
var triggerChange = function triggerChange(newRawValues) {
if (useInternalProps && internalProps.skipTriggerChange) {
return;
}
var newRawValuesOptions = getValueOption(newRawValues);
var outValues = (0, _commonUtil.toOuterValues)(Array.from(newRawValues), {
labelInValue: mergedLabelInValue,
options: newRawValuesOptions,
getLabeledValue: getLabeledValue,
prevValueMap: mergedValueMap,
optionLabelProp: mergedOptionLabelProp
});
var outValue = isMultiple ? outValues : outValues[0];
// Skip trigger if prev & current value is both empty
if (onChange && (mergedRawValue.length !== 0 || outValues.length !== 0)) {
var outOptions = findValueOption(newRawValues, newRawValuesOptions, {
prevValueOptions: prevValueOptions
});
// We will cache option in case it removed by ajax
setPrevValueOptions(outOptions.map(function (option, index) {
var clone = (0, _extends2["default"])({}, option);
Object.defineProperty(clone, '_INTERNAL_OPTION_VALUE_', {
get: function get() {
return newRawValues[index];
}
});
return clone;
}));
onChange(outValue, isMultiple ? outOptions : outOptions[0]);
}
setMergedValue(outValue);
};
var onInternalSelect = function onInternalSelect(newValue, _ref) {
var selected = _ref.selected,
source = _ref.source;
if (disabled) {
return;
}
var newRawValue;
if (isMultiple) {
newRawValue = new Set(mergedRawValue);
if (selected) {
newRawValue.add(newValue);
} else {
newRawValue["delete"](newValue);
}
} else {
newRawValue = new Set();
newRawValue.add(newValue);
}
// Multiple always trigger change and single should change if value changed
if (isMultiple || !isMultiple && Array.from(mergedRawValue)[0] !== newValue) {
triggerChange(Array.from(newRawValue));
}
// Trigger `onSelect`. Single mode always trigger select
triggerSelect(newValue, !isMultiple || selected, source);
// Clean search value if single or configured
if (mode === 'combobox') {
setInnerSearchValue(String(newValue));
setActiveValue('');
} else if (!isMultiple || autoClearSearchValue) {
setInnerSearchValue('');
setActiveValue('');
}
};
var onInternalOptionSelect = function onInternalOptionSelect(newValue, info) {
onInternalSelect(newValue, (0, _extends2["default"])((0, _extends2["default"])({}, info), {
source: 'option'
}));
};
var onInternalSelectionSelect = function onInternalSelectionSelect(newValue, info) {
onInternalSelect(newValue, (0, _extends2["default"])((0, _extends2["default"])({}, info), {
source: 'selection'
}));
};
// ============================= Input ==============================
// Only works in `combobox`
var customizeInputElement = mode === 'combobox' && getInputElement && getInputElement() || null;
// ============================== Open ==============================
var _useMergedState3 = (0, _useMergedState5["default"])(undefined, {
defaultValue: defaultOpen,
value: open
}),
_useMergedState4 = (0, _slicedToArray2["default"])(_useMergedState3, 2),
innerOpen = _useMergedState4[0],
setInnerOpen = _useMergedState4[1];
var mergedOpen = innerOpen;
// Not trigger `open` in `combobox` when `notFoundContent` is empty
var emptyListContent = !notFoundContent && !displayOptions.length;
if (disabled || emptyListContent && mergedOpen && mode === 'combobox') {
mergedOpen = false;
}
// const triggerOpen = emptyListContent ? false : mergedOpen;
var triggerOpen = mergedOpen;
var onToggleOpen = function onToggleOpen(newOpen) {
var nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
if (innerOpen !== nextOpen && !disabled) {
setInnerOpen(nextOpen);
if (onDropdownVisibleChange) {
onDropdownVisibleChange(nextOpen);
}
}
};
// ===================== Icons =====================
var _getIcons = (0, _iconUtil["default"])({
suffixIcon: suffixIconPre,
clearIcon: clearIcon,
menuItemSelectedIcon: menuItemSelectedIcon,
removeIcon: removeIcon,
loading: loading,
prefixCls: prefixCls,
multiple: isMultiple,
triggerOpen: triggerOpen
}),
inputIcon = _getIcons.suffixIcon;
(0, _useSelectTriggerControl["default"])([containerRef.current, triggerRef.current && triggerRef.current.getPopupElement()], triggerOpen, onToggleOpen);
// ============================= Search =============================
var triggerSearch = function triggerSearch(searchText, fromTyping, isCompositing) {
var ret = true;
var newSearchText = searchText;
setActiveValue(null);
// Check if match the `tokenSeparators`
var patchLabels = isCompositing ? null : (0, _valueUtil.getSeparatedContent)(searchText, tokenSeparators);
var patchRawValues = patchLabels;
if (mode === 'combobox') {
// Only typing will trigger onChange
if (fromTyping) {
triggerChange([newSearchText]);
}
} else if (patchLabels) {
newSearchText = '';
if (mode !== 'tags') {
patchRawValues = patchLabels.map(function (label) {
var item = mergedFlattenOptions.find(function (_ref2) {
var data = _ref2.data;
return data[mergedOptionLabelProp] === label;
});
return item ? item.data.value : null;
}).filter(function (val) {
return val !== null;
});
}
var newRawValues = Array.from(new Set([].concat((0, _toConsumableArray2["default"])(mergedRawValue), (0, _toConsumableArray2["default"])(patchRawValues))));
triggerChange(newRawValues);
newRawValues.forEach(function (newRawValue) {
triggerSelect(newRawValue, true, 'input');
});
// Should close when paste finish
onToggleOpen(false);
// Tell Selector that break next actions
ret = false;
}
setInnerSearchValue(newSearchText);
if (onSearch && mergedSearchValue !== newSearchText) {
onSearch(newSearchText);
}
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 onSearchSubmit = function onSearchSubmit(searchText) {
var newRawValues = Array.from(new Set([].concat((0, _toConsumableArray2["default"])(mergedRawValue), [searchText])));
triggerChange(newRawValues);
newRawValues.forEach(function (newRawValue) {
triggerSelect(newRawValue, true, 'input');
});
setInnerSearchValue('');
};
// Close dropdown when disabled change
(0, _react.useEffect)(function () {
if (innerOpen && !!disabled) {
setInnerOpen(false);
}
}, [disabled]);
// Close will clean up single mode search text
(0, _react.useEffect)(function () {
if (!mergedOpen && !isMultiple && mode !== 'combobox') {
triggerSearch('', false, false);
}
}, [mergedOpen]);
// ============================ 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];
// KeyDown
var onInternalKeyDown = function onInternalKeyDown(event) {
var clearLock = getClearLock();
var which = event.which;
// We only manage open state here, close logic should handle by list component
if (!mergedOpen && which === _KeyCode["default"].ENTER) {
onToggleOpen(true);
}
setClearLock(!!mergedSearchValue);
// Remove value by `backspace`
if (which === _KeyCode["default"].BACKSPACE && !clearLock && isMultiple && !mergedSearchValue && mergedRawValue.length) {
var removeInfo = (0, _commonUtil.removeLastEnabledValue)(displayValues, mergedRawValue);
if (removeInfo.removedValue !== null) {
triggerChange(removeInfo.values);
triggerSelect(removeInfo.removedValue, false, 'input');
}
}
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 && listRef.current) {
var _listRef$current;
(_listRef$current = listRef.current).onKeyDown.apply(_listRef$current, [event].concat(rest));
}
if (onKeyDown) {
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 && listRef.current) {
var _listRef$current2;
(_listRef$current2 = listRef.current).onKeyUp.apply(_listRef$current2, [event].concat(rest));
}
if (onKeyUp) {
onKeyUp.apply(void 0, [event].concat(rest));
}
};
// ========================== Focus / Blur ==========================
/** Record real focus status */
var focusRef = (0, _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() {
setMockFocused(false, function () {
focusRef.current = false;
onToggleOpen(false);
});
if (disabled) {
return;
}
if (mergedSearchValue) {
// `tags` mode should move `searchValue` into values
if (mode === 'tags') {
triggerSearch('', false, false);
triggerChange(Array.from(new Set([].concat((0, _toConsumableArray2["default"])(mergedRawValue), [mergedSearchValue]))));
}
// else if (mode === 'multiple') {
// // `multiple` mode only clean the search value but not trigger event
// setTimeout(() => {
// setInnerSearchValue('');
// }, 100);
// }
}
if (onBlur) {
onBlur.apply(void 0, arguments);
}
};
var activeTimeoutIds = [];
(0, _react.useEffect)(function () {
return function () {
activeTimeoutIds.forEach(function (timeoutId) {
return clearTimeout(timeoutId);
});
activeTimeoutIds.splice(0, activeTimeoutIds.length);
};
}, []);
var onInternalMouseDown = function onInternalMouseDown(event) {
var target = event.target;
var popupElement = triggerRef.current && 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 (!popupElement.contains(document.activeElement)) {
selectorRef.current.focus();
}
});
activeTimeoutIds.push(timeoutId);
}
if (onMouseDown) {
for (var _len3 = arguments.length, restArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
restArgs[_key3 - 1] = arguments[_key3];
}
onMouseDown.apply(void 0, [event].concat(restArgs));
}
};
// ========================= Accessibility ==========================
var _useState9 = (0, _react.useState)(0),
_useState0 = (0, _slicedToArray2["default"])(_useState9, 2),
accessibilityIndex = _useState0[0],
setAccessibilityIndex = _useState0[1];
var mergedDefaultActiveFirstOption = defaultActiveFirstOption !== undefined ? defaultActiveFirstOption : mode !== 'combobox';
var onActiveValue = function onActiveValue(active, index) {
var _ref3 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
_ref3$source = _ref3.source,
source = _ref3$source === void 0 ? 'keyboard' : _ref3$source;
setAccessibilityIndex(index);
if (backfill && mode === 'combobox' && active !== null && source === 'keyboard') {
setActiveValue(String(active));
}
};
// ============================= Popup ==============================
var _useState1 = (0, _react.useState)(null),
_useState10 = (0, _slicedToArray2["default"])(_useState1, 2),
containerWidth = _useState10[0],
setContainerWidth = _useState10[1];
var _useState11 = (0, _react.useState)({}),
_useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
forceUpdate = _useState12[1];
// We need force update here since popup dom is render async
function onPopupMouseEnter() {
forceUpdate({});
}
(0, _useLayoutEffect["default"])(function () {
if (triggerOpen) {
var newWidth = Math.ceil(containerRef.current.offsetWidth);
if (containerWidth !== newWidth) {
setContainerWidth(newWidth);
}
}
}, [triggerOpen]);
function cleanSearchValue() {
setInnerSearchValue('');
}
var popupNode = /*#__PURE__*/React.createElement(OptionList, {
ref: listRef,
prefixCls: prefixCls,
id: mergedId,
open: mergedOpen,
childrenAsData: !options,
options: displayOptions,
flattenOptions: displayFlattenOptions,
multiple: isMultiple,
values: rawValues,
height: listHeight,
itemHeight: listItemHeight,
onSelect: onInternalOptionSelect,
onToggleOpen: onToggleOpen,
onActiveValue: onActiveValue,
defaultActiveFirstOption: mergedDefaultActiveFirstOption,
notFoundContent: notFoundContent,
renderEmpty: renderEmpty,
keepExpand: keepExpand,
defaultExpandGroupKey: defaultExpandGroupKey,
onExpandChange: onExpandChange,
onScroll: onPopupScroll,
searchValue: mergedSearchValue,
menuItemSelectedIcon: menuItemSelectedIcon,
virtual: virtual !== false && dropdownMatchSelectWidth !== false,
onMouseEnter: onPopupMouseEnter,
triggerChange: triggerChange,
setInnerOpen: setInnerOpen,
showTitle: showTitle,
showSelectAll: showSelectAll,
optionRender: optionRender,
cleanSearchValue: cleanSearchValue
});
// ============================= Clear ==============================
var clearNode;
var onClearMouseDown = function onClearMouseDown() {
// Trigger internal `onClear` event
if (useInternalProps && internalProps.onClear) {
internalProps.onClear();
}
if (onClear) {
onClear();
}
var disabledValues = displayValues.filter(function (value) {
return !!value.disabled;
});
triggerChange(disabledValues.map(function (v) {
return v.value;
}));
triggerSearch('', false, false);
};
if (!disabled && allowClear && (mergedRawValue.length || mergedSearchValue)) {
clearNode = /*#__PURE__*/React.createElement(_TransBtn["default"], {
className: "".concat(prefixCls, "-clear"),
onMouseDown: onClearMouseDown,
customizeIcon: clearIcon
}, "\xD7");
}
// ============================= Arrow ==============================
var mergedShowArrow = showArrow !== undefined ? showArrow : loading || mode !== 'combobox';
var arrowNode;
if (mergedShowArrow) {
arrowNode = /*#__PURE__*/React.createElement(_TransBtn["default"], {
className: (0, _classnames["default"])("".concat(prefixCls, "-arrow"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-arrow-loading"), loading)),
customizeIcon: inputIcon,
customizeIconProps: {
loading: loading,
searchValue: mergedSearchValue,
open: mergedOpen,
focused: mockFocused,
showSearch: mergedShowSearch
}
});
}
// ============================ Warning =============================
if (process.env.NODE_ENV !== 'production' && warningProps) {
warningProps(props);
}
// ============================= Render =============================
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"), isMultiple), "".concat(prefixCls, "-single"), !isMultiple), "".concat(prefixCls, "-allow-clear"), allowClear), "".concat(prefixCls, "-show-arrow"), mergedShowArrow), "".concat(prefixCls, "-disabled"), disabled), "".concat(prefixCls, "-loading"), loading), "".concat(prefixCls, "-open"), mergedOpen), "".concat(prefixCls, "-customize-input"), customizeInputElement), "".concat(prefixCls, "-show-search"), mergedShowSearch));
// mode为multiple时，且属性showAllSelected为true，并且全选时展示全部
// 修复筛选时bug
var showAllSelectedTag = mode === 'multiple' && showAllSelected && displayOptions.length === mergedOptions.length && displayOptions.length === displayValues.length && displayValues.length > 0;
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
className: mergedClassName
}, domProps, {
ref: containerRef,
onMouseDown: onInternalMouseDown,
onKeyDown: onInternalKeyDown,
onKeyUp: onInternalKeyUp,
onFocus: onContainerFocus,
onBlur: onContainerBlur
}), mockFocused && !mergedOpen && /*#__PURE__*/React.createElement("span", {
style: {
width: 0,
height: 0,
display: 'flex',
overflow: 'hidden',
opacity: 0
},
"aria-live": "polite"
}, "".concat(mergedRawValue.join(', '))), /*#__PURE__*/React.createElement(_SelectTrigger["default"], {
ref: triggerRef,
disabled: disabled,
prefixCls: prefixCls,
visible: triggerOpen,
popupElement: popupNode,
popupOverflow: popupOverflow,
multiple: isMultiple,
containerWidth: containerWidth,
animation: animation,
transitionName: transitionName,
dropdownStyle: dropdownStyle,
dropdownClassName: dropdownClassName,
direction: direction,
dropdownMatchSelectWidth: dropdownMatchSelectWidth,
dropdownRender: dropdownRender,
dropdownAlign: dropdownAlign,
getPopupContainer: getPopupContainer,
empty: !mergedOptions.length,
placement: placement,
getTriggerDOMNode: function getTriggerDOMNode() {
return selectorDomRef.current;
}
}, /*#__PURE__*/React.createElement(_Selector["default"], (0, _extends2["default"])({}, props, {
domRef: selectorDomRef,
prefixCls: prefixCls,
inputElement: customizeInputElement,
ref: selectorRef,
id: mergedId,
showSearch: mergedShowSearch,
mode: mode,
accessibilityIndex: accessibilityIndex,
multiple: isMultiple,
tagRender: tagRender,
values: displayValues,
showAllSelectedTag: showAllSelectedTag,
open: mergedOpen,
onToggleOpen: onToggleOpen,
searchValue: mergedSearchValue,
activeValue: activeValue,
onSearch: triggerSearch,
onSearchSubmit: onSearchSubmit,
onSelect: onInternalSelectionSelect,
onClearMouseDown: onClearMouseDown,
tokenWithEnter: tokenWithEnter
}))), arrowNode, clearNode);
}
var RefSelect = /*#__PURE__*/React.forwardRef(Select);
return RefSelect;
}