tdesign-react
Version:
TDesign Component for React
530 lines (522 loc) • 21.2 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-0006fcfa.js');
var slicedToArray = require('../_chunks/dep-8e4d656d.js');
var React = require('react');
var classNames = require('classnames');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useControlled = require('../hooks/useControlled.js');
var tree_index = require('../tree/index.js');
var selectInput_SelectInput = require('../select-input/SelectInput.js');
var hooks_usePersistFn = require('../hooks/usePersistFn.js');
var hooks_useSwitch = require('../hooks/useSwitch.js');
var _util_noop = require('../_util/noop.js');
var treeSelect_hooks_useTreeSelectUtils = require('./hooks/useTreeSelectUtils.js');
var treeSelect_SelectArrow = require('./SelectArrow.js');
var treeSelect_hooks_useTreeSelectPassthroughProps = require('./hooks/useTreeSelectPassthroughProps.js');
var treeSelect_hooks_useTreeSelectLocale = require('./hooks/useTreeSelectLocale.js');
var treeSelect_defaultProps = require('./defaultProps.js');
var _util_parseTNode = require('../_util/parseTNode.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var isFunction = require('../_chunks/dep-ec8d2dca.js');
require('../_chunks/dep-667ac7af.js');
require('../_chunks/dep-00b49251.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-1df1dad8.js');
require('../_chunks/dep-5b5ab11b.js');
require('dayjs');
require('../_chunks/dep-f32c03f1.js');
require('../_chunks/dep-31c4bc3d.js');
require('../_chunks/dep-eea2872a.js');
require('../_chunks/dep-25585736.js');
require('../_chunks/dep-62e73936.js');
require('../_chunks/dep-64577888.js');
require('../_chunks/dep-71455db7.js');
require('../_chunks/dep-9e5a468d.js');
require('../_chunks/dep-f26edb7b.js');
require('../_chunks/dep-f33c1939.js');
require('../_chunks/dep-21ece627.js');
require('../_chunks/dep-25e4aa84.js');
require('../_chunks/dep-fc596d16.js');
require('../_chunks/dep-e1fbe1c3.js');
require('../_chunks/dep-df2b541f.js');
require('../_chunks/dep-edd366db.js');
require('../_chunks/dep-a56c4939.js');
require('../_chunks/dep-6c297e20.js');
require('../_chunks/dep-b7ad4d54.js');
require('../_chunks/dep-a2cb9299.js');
require('../_chunks/dep-f981815b.js');
require('../_chunks/dep-66114ce9.js');
require('../_chunks/dep-62d1dd66.js');
require('../_chunks/dep-7a148045.js');
require('../_chunks/dep-255ceed8.js');
require('../_chunks/dep-79629634.js');
require('../tree/Tree.js');
require('../_chunks/dep-e4e1901e.js');
require('react-transition-group');
require('../_chunks/dep-59671c87.js');
require('../tree/TreeItem.js');
require('../_chunks/dep-8fa3a4c2.js');
require('tdesign-icons-react');
require('../loading/index.js');
require('../loading/Loading.js');
require('../_chunks/dep-381fa848.js');
require('../_chunks/dep-4ed9eda4.js');
require('../common/Portal.js');
require('react-dom');
require('../hooks/useLayoutEffect.js');
require('../loading/gradient.js');
require('../_chunks/dep-dc4ce063.js');
require('../_chunks/dep-002fcc1e.js');
require('../_chunks/dep-2ffa3ff1.js');
require('../hooks/useDomRefCallback.js');
require('../loading/defaultProps.js');
require('../loading/plugin.js');
require('../_util/react-render.js');
require('../_chunks/dep-65ef8e09.js');
require('../common/PluginContainer.js');
require('../config-provider/ConfigProvider.js');
require('../_chunks/dep-ab2f63ec.js');
require('../_chunks/dep-a48c7e8b.js');
require('../_chunks/dep-3d4656ee.js');
require('../_chunks/dep-0ffc9d96.js');
require('../_chunks/dep-efe6d243.js');
require('../_chunks/dep-4b18243f.js');
require('../_chunks/dep-bff2c990.js');
require('../hooks/useRipple.js');
require('../hooks/useAnimation.js');
require('../hooks/useGlobalIcon.js');
require('../checkbox/index.js');
require('../_chunks/dep-e136a981.js');
require('../_util/forwardRefWithStatics.js');
require('hoist-non-react-statics');
require('../common/Check.js');
require('../_util/helper.js');
require('../_chunks/dep-840b1644.js');
require('../_chunks/dep-c16f1dc4.js');
require('../checkbox/defaultProps.js');
require('../tree/hooks/useTreeConfig.js');
require('../locale/LocalReceiver.js');
require('../tree/hooks/useDraggable.js');
require('../tree/hooks/TreeDraggableContext.js');
require('../_util/createHookContext.js');
require('../_chunks/dep-1438af5a.js');
require('../_chunks/dep-a231fdc5.js');
require('../_chunks/dep-cf14666e.js');
require('../_util/composeRefs.js');
require('../tree/hooks/useControllable.js');
require('../tree/hooks/useStore.js');
require('../_chunks/dep-509940b2.js');
require('../_chunks/dep-69792df2.js');
require('mitt');
require('../_chunks/dep-5180cc1e.js');
require('../_chunks/dep-1e4197a4.js');
require('../_chunks/dep-3398c1f2.js');
require('../_chunks/dep-e57bdc8f.js');
require('../_chunks/dep-22b1740a.js');
require('../_chunks/dep-373af7a2.js');
require('../_chunks/dep-fc29b8b5.js');
require('../_chunks/dep-d5e8c967.js');
require('../_chunks/dep-9a375a19.js');
require('../_chunks/dep-d915c90f.js');
require('../_chunks/dep-221787fe.js');
require('../_chunks/dep-0c8c9057.js');
require('../_chunks/dep-95a6dd1c.js');
require('../_chunks/dep-bfc07219.js');
require('../_chunks/dep-0192b053.js');
require('../_chunks/dep-40e87384.js');
require('../_chunks/dep-014b9b78.js');
require('../_chunks/dep-297a4933.js');
require('../hooks/useUpdateLayoutEffect.js');
require('../hooks/useIsFirstRender.js');
require('../hooks/usePrevious.js');
require('../tree/hooks/useTreeVirtualScroll.js');
require('../hooks/useVirtualScroll.js');
require('../_chunks/dep-eb6d55c1.js');
require('../_chunks/dep-abdd786a.js');
require('../hooks/useEventCallback.js');
require('../tree/defaultProps.js');
require('../popup/index.js');
require('../popup/Popup.js');
require('../_util/ref.js');
require('react-is');
require('../_util/isFragment.js');
require('../hooks/useAttach.js');
require('../hooks/useMutationObserver.js');
require('../hooks/useLatest.js');
require('../hooks/usePopper.js');
require('@popperjs/core');
require('react-fast-compare');
require('../hooks/useWindowSize.js');
require('../popup/defaultProps.js');
require('../popup/hooks/useTrigger.js');
require('../_util/listener.js');
require('../popup/utils/transition.js');
require('../popup/PopupPlugin.js');
require('../select-input/useSingle.js');
require('../input/index.js');
require('../input/Input.js');
require('../input/InputGroup.js');
require('../input/defaultProps.js');
require('../input/useLengthLimit.js');
require('../select-input/useMultiple.js');
require('../tag-input/index.js');
require('../tag-input/TagInput.js');
require('../hooks/useDragSorter.js');
require('../tag-input/defaultProps.js');
require('../tag-input/useHover.js');
require('../tag-input/useTagList.js');
require('../tag/index.js');
require('../tag/Tag.js');
require('../_chunks/dep-4d5c26af.js');
require('../tag/defaultProps.js');
require('../tag/CheckTag.js');
require('../_chunks/dep-4406837c.js');
require('../tag/CheckTagGroup.js');
require('../tag-input/useTagScroll.js');
require('../select-input/useOverlayInnerStyle.js');
require('../select-input/defaultProps.js');
require('../common/FakeArrow.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { defineProperty._defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var useMergeFn = function useMergeFn() {
for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
fns[_key] = arguments[_key];
}
return hooks_usePersistFn.usePersistFn(function () {
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return fns.forEach(function (fn) {
return fn === null || fn === void 0 ? void 0 : fn.apply(void 0, args);
});
});
};
var TreeSelect = /*#__PURE__*/React.forwardRef(function (originalProps, ref) {
var props = hooks_useDefaultProps["default"](originalProps, treeSelect_defaultProps.treeSelectDefaultProps);
var _useTreeSelectLocale = treeSelect_hooks_useTreeSelectLocale.useTreeSelectLocale(props),
placeholder = _useTreeSelectLocale.placeholder,
empty = _useTreeSelectLocale.empty,
loadingItem = _useTreeSelectLocale.loadingItem;
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var className = props.className,
onInputChange = props.onInputChange,
readonly = props.readonly,
disabled = props.disabled,
multiple = props.multiple,
prefixIcon = props.prefixIcon,
label = props.label,
loading = props.loading,
size = props.size,
max = props.max,
data = props.data,
panelTopContent = props.panelTopContent,
panelBottomContent = props.panelBottomContent,
rawFilter = props.filter,
rawFilterable = props.filterable,
onClear = props.onClear,
valueDisplay = props.valueDisplay,
treeProps = props.treeProps,
inputProps = props.inputProps,
valueType = props.valueType,
collapsedItems = props.collapsedItems,
onBlur = props.onBlur,
onFocus = props.onFocus,
onSearch = props.onSearch,
onRemove = props.onRemove,
onEnter = props.onEnter;
var selectInputProps = treeSelect_hooks_useTreeSelectPassthroughProps.useTreeSelectPassThroughProps(props);
var _useControlled = hooks_useControlled["default"](props, "value", props.onChange),
_useControlled2 = slicedToArray._slicedToArray(_useControlled, 2),
value = _useControlled2[0],
onChange = _useControlled2[1];
var _useControlled3 = hooks_useControlled["default"](props, "popupVisible", props.onPopupVisibleChange),
_useControlled4 = slicedToArray._slicedToArray(_useControlled3, 2),
popupVisible = _useControlled4[0],
setPopupVisible = _useControlled4[1];
var _useSwitch = hooks_useSwitch["default"](),
_useSwitch2 = slicedToArray._slicedToArray(_useSwitch, 2),
hover = _useSwitch2[0],
hoverAction = _useSwitch2[1];
var _useControlled5 = hooks_useControlled["default"](props, "inputValue", onInputChange),
_useControlled6 = slicedToArray._slicedToArray(_useControlled5, 2),
filterInput = _useControlled6[0],
setFilterInput = _useControlled6[1];
var treeRef = React.useRef(null);
var selectInputRef = React.useRef(null);
var tKeys = React.useMemo(function () {
return _objectSpread({
value: "value",
label: "label",
children: "children"
}, props.keys);
}, [props.keys]);
var passThroughDefaultStore = React.useMemo(function () {
return {
data: data,
treeProps: _objectSpread({
keys: tKeys
}, treeProps),
valueType: valueType
};
}, [tKeys, data, treeProps, valueType]);
var _useTreeSelectUtils = treeSelect_hooks_useTreeSelectUtils.useTreeSelectUtils(passThroughDefaultStore, treeRef),
normalizeValue = _useTreeSelectUtils.normalizeValue,
formatValue = _useTreeSelectUtils.formatValue,
getNodeItem = _useTreeSelectUtils.getNodeItem;
React.useImperativeHandle(ref, function () {
return _objectSpread(_objectSpread({}, selectInputRef.current || {}), treeRef.current || {});
});
var defaultFilter = function defaultFilter(text, option) {
if (!text) return true;
if (!option.label && !option.value) return false;
if (option.label && typeof option.label === "string") {
return option.label.includes(text);
}
if (option.data.text && typeof option.data.text === "string") {
return option.data.text.includes(text);
}
return true;
};
var filter = onSearch ? void 0 : rawFilter || defaultFilter;
var filterable = rawFilterable || !!props.filter;
var normalizedValue = React.useMemo(function () {
var calcValue = Array.isArray(value) ? value : [value];
return calcValue.reduce(function (result, value2) {
var normalized = normalizeValue(value2);
typeof normalized.value !== "undefined" && result.push(normalized);
return result;
}, []);
}, [normalizeValue, value, data]);
var internalInputValue = React.useMemo(function () {
if (multiple) return normalizedValue;
return filterable && popupVisible ? filterInput : normalizedValue[0] || "";
}, [multiple, normalizedValue, filterable, popupVisible, filterInput]);
var normalizedValueDisplay = React.useMemo(function () {
if (!valueDisplay) {
return;
}
if (multiple) {
return function (_ref) {
var onClose = _ref.onClose;
return isFunction.isFunction(valueDisplay) ? valueDisplay({
value: normalizedValue,
onClose: onClose
}) : valueDisplay;
};
}
var displayNode = isFunction.isFunction(valueDisplay) ? valueDisplay({
value: normalizedValue[0],
onClose: _util_noop["default"]
}) : valueDisplay;
return normalizedValue.length ? displayNode : "";
}, [valueDisplay, multiple, normalizedValue]);
var internalInputValueDisplay = React.useMemo(function () {
if (filterable && !multiple && popupVisible) {
return void 0;
}
return normalizedValueDisplay;
}, [filterable, popupVisible, multiple, normalizedValueDisplay]);
var inputPlaceholder = React.useMemo(function () {
if (filterable && !multiple && popupVisible && normalizedValue.length) {
var valueDisplayPlaceholder = normalizedValueDisplay;
if (typeof valueDisplayPlaceholder === "string") {
return valueDisplayPlaceholder;
}
return typeof normalizedValue[0].label === "string" ? normalizedValue[0].label : String(normalizedValue[0].value);
}
return placeholder;
}, [filterable, multiple, popupVisible, normalizedValue, placeholder, normalizedValueDisplay]);
var showLoading = !disabled && loading;
var handleFilter = React.useCallback(function (node) {
return filterable && filter ? filter(filterInput, node) : true;
}, [filter, filterInput, filterable]);
var handleSingleChange = hooks_usePersistFn.usePersistFn(function (value2, context) {
var $value = Array.isArray(value2) && value2.length ? value2[0] : void 0;
if ($value) {
onChange(formatValue($value, context.node.label), _objectSpread(_objectSpread({}, context), {}, {
data: context.node.data,
trigger: "check"
}));
}
setPopupVisible(false, _objectSpread(_objectSpread({}, context), {}, {
trigger: "trigger-element-click"
}));
});
var handleMultiChange = hooks_usePersistFn.usePersistFn(function (value2, context) {
if (max === 0 || value2.length <= max) {
onChange(value2.map(function (value3) {
var _getNodeItem;
return formatValue(value3, (_getNodeItem = getNodeItem(value3)) === null || _getNodeItem === void 0 ? void 0 : _getNodeItem.label);
}), _objectSpread(_objectSpread({}, context), {}, {
data: context.node.data,
trigger: value2.length > normalizedValue.length ? "check" : "uncheck"
}));
}
});
var onInnerPopupVisibleChange = function onInnerPopupVisibleChange(visible, ctx) {
setPopupVisible(visible, {
e: ctx.e
});
};
var handleClear = hooks_usePersistFn.usePersistFn(function (ctx) {
ctx.e.stopPropagation();
onChange(multiple ? [] : formatValue(void 0), {
node: null,
data: null,
trigger: "clear",
e: ctx.e
});
onClear === null || onClear === void 0 || onClear(ctx);
setPopupVisible(false, {
trigger: "clear"
});
});
var handleTagChange = hooks_usePersistFn.usePersistFn(function (tags, ctx) {
if (ctx.trigger === "tag-remove" || ctx.trigger === "backspace") {
var index = ctx.index,
e = ctx.e,
trigger = ctx.trigger;
var node = getNodeItem(normalizedValue[index].value);
onChange(normalizedValue.filter(function (value2, i) {
return i !== index;
}).map(function (_ref2) {
var value2 = _ref2.value,
label2 = _ref2.label;
return formatValue(value2, label2);
}), {
node: node,
data: node.data,
trigger: trigger,
e: e
});
onRemove === null || onRemove === void 0 || onRemove({
value: node.value,
node: node,
index: index,
data: _objectSpread({
value: node.value,
label: node.label
}, node.data),
e: e,
trigger: trigger
});
}
});
var getTreeSelectEventValue = function getTreeSelectEventValue() {
var selectedOptions = Array.isArray(normalizedValue) ? normalizedValue : [normalizedValue];
var value2 = selectedOptions.map(function (item) {
return valueType === "object" ? item : item[tKeys.value];
});
return multiple ? value2 : value2[0];
};
var handleBlur = hooks_usePersistFn.usePersistFn(function (_, ctx) {
onBlur === null || onBlur === void 0 || onBlur(_objectSpread({
value: getTreeSelectEventValue()
}, ctx));
});
var handleFocus = hooks_usePersistFn.usePersistFn(function (_, ctx) {
onFocus === null || onFocus === void 0 || onFocus({
value: getTreeSelectEventValue(),
e: ctx.e
});
});
var handleEnter = hooks_usePersistFn.usePersistFn(function (_, ctx) {
onSearch === null || onSearch === void 0 || onSearch(ctx.inputValue, {
e: ctx.e
});
onEnter === null || onEnter === void 0 || onEnter({
inputValue: ctx.inputValue,
e: ctx.e,
value: getTreeSelectEventValue()
});
});
var handleFilterChange = hooks_usePersistFn.usePersistFn(function (value2, ctx) {
if (ctx.trigger === "clear") return;
setFilterInput(value2, ctx);
onSearch === null || onSearch === void 0 || onSearch(value2, {
e: ctx.e
});
});
var renderTree = function renderTree() {
if (readonly) return empty;
if (showLoading) return loadingItem;
return /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, panelTopContent, /* @__PURE__ */React__default["default"].createElement(tree_index.Tree, _objectSpread(_objectSpread({
ref: treeRef,
hover: true,
transition: true,
filter: filterInput ? handleFilter : null,
data: data,
disabled: disabled,
empty: empty,
expandOnClickNode: false,
allowFoldNodeOnFilter: true,
keys: tKeys
}, multiple ? {
checkable: true,
onChange: handleMultiChange,
value: normalizedValue.map(function (_ref3) {
var value2 = _ref3.value;
return value2;
})
} : {
activable: true,
actived: normalizedValue.map(function (_ref4) {
var value2 = _ref4.value;
return value2;
}),
onActive: handleSingleChange
}), treeProps)), panelBottomContent);
};
return /* @__PURE__ */React__default["default"].createElement(selectInput_SelectInput["default"], _objectSpread(_objectSpread(_objectSpread({
status: props.status,
tips: props.tips
}, props.selectInputProps), selectInputProps), {}, {
ref: selectInputRef,
className: classNames__default["default"]("".concat(classPrefix, "-tree-select"), className),
value: internalInputValue,
inputValue: filterInput,
panel: renderTree(),
allowInput: filterable,
inputProps: _objectSpread(_objectSpread({}, inputProps), {}, {
size: size
}),
tagInputProps: {
size: size,
excessTagsDisplayType: "break-line",
inputProps: inputProps,
tagProps: props.tagProps
},
placeholder: inputPlaceholder,
popupVisible: popupVisible && !disabled,
onInputChange: handleFilterChange,
onPopupVisibleChange: onInnerPopupVisibleChange,
onFocus: useMergeFn(handleFocus),
onBlur: useMergeFn(handleBlur),
onClear: handleClear,
onTagChange: handleTagChange,
onEnter: handleEnter,
onMouseenter: hoverAction.on,
onMouseleave: hoverAction.off,
suffixIcon: props.suffixIcon || (readonly ? null : /* @__PURE__ */React__default["default"].createElement(treeSelect_SelectArrow.SelectArrow, {
isActive: popupVisible,
isHighlight: hover || popupVisible,
disabled: disabled
})),
collapsedItems: collapsedItems,
label: _util_parseTNode["default"](label || prefixIcon),
valueDisplay: internalInputValueDisplay
}));
});
TreeSelect.displayName = "TreeSelect";
exports["default"] = TreeSelect;
//# sourceMappingURL=TreeSelect.js.map