tdesign-react
Version:
TDesign Component for React
480 lines (476 loc) • 18.1 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import { _ as _slicedToArray } from '../_chunks/dep-48805ab8.js';
import React, { forwardRef, useRef, useMemo, useImperativeHandle, useCallback } from 'react';
import { isFunction } from 'lodash-es';
import classNames from 'classnames';
import useConfig from '../hooks/useConfig.js';
import useControlled from '../hooks/useControlled.js';
import { Tree } from '../tree/index.js';
import SelectInput from '../select-input/SelectInput.js';
import { usePersistFn } from '../hooks/usePersistFn.js';
import useSwitch from '../hooks/useSwitch.js';
import noop from '../_util/noop.js';
import { useTreeSelectUtils } from './hooks/useTreeSelectUtils.js';
import { SelectArrow } from './SelectArrow.js';
import { useTreeSelectPassThroughProps } from './hooks/useTreeSelectPassthroughProps.js';
import { useTreeSelectLocale } from './hooks/useTreeSelectLocale.js';
import { treeSelectDefaultProps } from './defaultProps.js';
import parseTNode from '../_util/parseTNode.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import '../_chunks/dep-eca3a3de.js';
import '../_chunks/dep-026a4c6b.js';
import '../config-provider/ConfigContext.js';
import '../locale/zh_CN.js';
import '../_chunks/dep-e29214cb.js';
import 'dayjs';
import '../_chunks/dep-3c9ab31a.js';
import '../tree/Tree.js';
import '../_chunks/dep-87d110df.js';
import 'react-transition-group';
import '../_chunks/dep-f53c91cd.js';
import '../_chunks/dep-b908e1fe.js';
import '../tree/TreeItem.js';
import '../_chunks/dep-6b660ef0.js';
import 'tdesign-icons-react';
import '../loading/index.js';
import '../loading/Loading.js';
import '../_chunks/dep-3a09424a.js';
import '../common/Portal.js';
import 'react-dom';
import '../hooks/useLayoutEffect.js';
import '../loading/gradient.js';
import '../_chunks/dep-c48e2ca1.js';
import '../_chunks/dep-1630b9b4.js';
import '../hooks/useDomRefCallback.js';
import '../loading/defaultProps.js';
import '../loading/plugin.js';
import '../_util/react-render.js';
import '../_chunks/dep-a74cc5e4.js';
import '../common/PluginContainer.js';
import '../config-provider/index.js';
import '../config-provider/ConfigProvider.js';
import '../config-provider/type.js';
import '../loading/style/index.js';
import '../loading/type.js';
import '../hooks/useRipple.js';
import '../hooks/useAnimation.js';
import '../hooks/useGlobalIcon.js';
import '../checkbox/index.js';
import '../_chunks/dep-0030a252.js';
import '../_util/forwardRefWithStatics.js';
import 'hoist-non-react-statics';
import '../common/Check.js';
import '../_util/helper.js';
import '../checkbox/defaultProps.js';
import '../checkbox/style/index.js';
import '../checkbox/type.js';
import '../tree/hooks/useTreeConfig.js';
import '../locale/LocalReceiver.js';
import '../tree/hooks/useDraggable.js';
import '../tree/hooks/TreeDraggableContext.js';
import '../_util/createHookContext.js';
import '../_util/composeRefs.js';
import '../tree/hooks/useControllable.js';
import '../tree/hooks/useStore.js';
import '../_chunks/dep-6b3ac896.js';
import '../_chunks/dep-83726008.js';
import 'mitt';
import '../_chunks/dep-1d1c579e.js';
import '../hooks/useUpdateLayoutEffect.js';
import '../hooks/useIsFirstRender.js';
import '../hooks/usePrevious.js';
import '../tree/hooks/useTreeVirtualScroll.js';
import '../hooks/useVirtualScroll.js';
import '../hooks/useEventCallback.js';
import '../tree/defaultProps.js';
import '../tree/style/index.js';
import '../tree/type.js';
import '../popup/index.js';
import '../popup/Popup.js';
import '../_util/ref.js';
import 'react-is';
import '../_util/isFragment.js';
import '../hooks/useAttach.js';
import '../hooks/useMutationObserver.js';
import '../hooks/useLatest.js';
import '../hooks/usePopper.js';
import '@popperjs/core';
import 'react-fast-compare';
import '../hooks/useWindowSize.js';
import '../popup/defaultProps.js';
import '../popup/hooks/useTrigger.js';
import '../_util/listener.js';
import '../popup/utils/transition.js';
import '../popup/PopupPlugin.js';
import '../popup/style/index.js';
import '../popup/type.js';
import '../select-input/useSingle.js';
import '../input/index.js';
import '../input/Input.js';
import '../input/InputGroup.js';
import '../input/defaultProps.js';
import '../input/useLengthLimit.js';
import '../input/style/index.js';
import '../input/type.js';
import '../select-input/useMultiple.js';
import '../tag-input/index.js';
import '../tag-input/TagInput.js';
import '../hooks/useDragSorter.js';
import '../tag-input/defaultProps.js';
import '../tag-input/useHover.js';
import '../tag-input/useTagList.js';
import '../tag/index.js';
import '../tag/Tag.js';
import '../_chunks/dep-3c3d29db.js';
import '../tag/defaultProps.js';
import '../tag/CheckTag.js';
import '../_chunks/dep-55732ade.js';
import '../tag/CheckTagGroup.js';
import '../tag/style/index.js';
import '../tag/type.js';
import '../tag-input/useTagScroll.js';
import '../tag-input/style/index.js';
import '../tag-input/type.js';
import '../select-input/useOverlayInnerStyle.js';
import '../select-input/defaultProps.js';
import '../common/FakeArrow.js';
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(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 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__*/forwardRef(function (originalProps, ref) {
var props = useDefaultProps(originalProps, treeSelectDefaultProps);
var _useTreeSelectLocale = useTreeSelectLocale(props),
placeholder = _useTreeSelectLocale.placeholder,
empty = _useTreeSelectLocale.empty,
loadingItem = _useTreeSelectLocale.loadingItem;
var _useConfig = useConfig(),
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 = useTreeSelectPassThroughProps(props);
var _useControlled = useControlled(props, "value", props.onChange),
_useControlled2 = _slicedToArray(_useControlled, 2),
value = _useControlled2[0],
onChange = _useControlled2[1];
var _useControlled3 = useControlled(props, "popupVisible", props.onPopupVisibleChange),
_useControlled4 = _slicedToArray(_useControlled3, 2),
popupVisible = _useControlled4[0],
setPopupVisible = _useControlled4[1];
var _useSwitch = useSwitch(),
_useSwitch2 = _slicedToArray(_useSwitch, 2),
hover = _useSwitch2[0],
hoverAction = _useSwitch2[1];
var _useControlled5 = useControlled(props, "inputValue", onInputChange),
_useControlled6 = _slicedToArray(_useControlled5, 2),
filterInput = _useControlled6[0],
setFilterInput = _useControlled6[1];
var treeRef = useRef(null);
var selectInputRef = useRef(null);
var tKeys = useMemo(function () {
return _objectSpread({
value: "value",
label: "label",
children: "children"
}, props.keys);
}, [props.keys]);
var passThroughDefaultStore = useMemo(function () {
return {
data: data,
treeProps: _objectSpread({
keys: tKeys
}, treeProps),
valueType: valueType
};
}, [tKeys, data, treeProps, valueType]);
var _useTreeSelectUtils = useTreeSelectUtils(passThroughDefaultStore, treeRef),
normalizeValue = _useTreeSelectUtils.normalizeValue,
formatValue = _useTreeSelectUtils.formatValue,
getNodeItem = _useTreeSelectUtils.getNodeItem;
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 = 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 = useMemo(function () {
if (multiple) return normalizedValue;
return filterable && popupVisible ? filterInput : normalizedValue[0] || "";
}, [multiple, normalizedValue, filterable, popupVisible, filterInput]);
var normalizedValueDisplay = useMemo(function () {
if (!valueDisplay) {
return;
}
if (multiple) {
return function (_ref) {
var onClose = _ref.onClose;
return isFunction(valueDisplay) ? valueDisplay({
value: normalizedValue,
onClose: onClose
}) : valueDisplay;
};
}
var displayNode = isFunction(valueDisplay) ? valueDisplay({
value: normalizedValue[0],
onClose: noop
}) : valueDisplay;
return normalizedValue.length ? displayNode : "";
}, [valueDisplay, multiple, normalizedValue]);
var internalInputValueDisplay = useMemo(function () {
if (filterable && !multiple && popupVisible) {
return void 0;
}
return normalizedValueDisplay;
}, [filterable, popupVisible, multiple, normalizedValueDisplay]);
var inputPlaceholder = 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 = useCallback(function (node) {
return filterable && filter ? filter(filterInput, node) : true;
}, [filter, filterInput, filterable]);
var handleSingleChange = 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 = 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 = 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 = 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 = usePersistFn(function (_, ctx) {
onBlur === null || onBlur === void 0 || onBlur(_objectSpread({
value: getTreeSelectEventValue()
}, ctx));
});
var handleFocus = usePersistFn(function (_, ctx) {
onFocus === null || onFocus === void 0 || onFocus({
value: getTreeSelectEventValue(),
e: ctx.e
});
});
var handleEnter = 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 = 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.createElement(React.Fragment, null, panelTopContent, /* @__PURE__ */React.createElement(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.createElement(SelectInput, _objectSpread(_objectSpread(_objectSpread({
status: props.status,
tips: props.tips
}, props.selectInputProps), selectInputProps), {}, {
ref: selectInputRef,
className: classNames("".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.createElement(SelectArrow, {
isActive: popupVisible,
isHighlight: hover || popupVisible,
disabled: disabled
})),
collapsedItems: collapsedItems,
label: parseTNode(label || prefixIcon),
valueDisplay: internalInputValueDisplay
}));
});
TreeSelect.displayName = "TreeSelect";
export { TreeSelect as default };
//# sourceMappingURL=TreeSelect.js.map