@vtx/components 4.0.0-beta.8 → 4.0.0-beta.81

package/lib/vtx-tree/index.js

@@ -15,8 +15,9 @@ var _utils2 = require("@vtx/utils");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _index = require("./style/index");
 var _vtxProvider = require("../vtx-provider");
+var _vtxIcon = _interopRequireDefault(require("../vtx-icon"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["showSearch", "treeData", "searchPlaceholder", "renderMenuList", "fieldNames", "titleClassName", "expandAction"];
+var _excluded = ["showSearch", "treeData", "searchPlaceholder", "renderMenuList", "fieldNames", "titleClassName", "expandAction", "maxButtonCount"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -38,16 +39,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-var getParentKey = function getParentKey(key, tree) {
-  var parentKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+var getParentKey = function getParentKey(keyValue, key, tree) {
+  var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
   var _iterator = _createForOfIteratorHelper(tree),
     _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var node = _step.value;
-      if (node.key === key) return parentKey;
+      if (node[keyValue] === key) return parentKey;
       if (node.children) {
-        var found = getParentKey(key, node.children, node.key);
+        var found = getParentKey(keyValue, key, node.children, node[keyValue]);
         if (found !== undefined) return found;
       }
     }
@@ -71,6 +72,8 @@ var VtxTree = exports.VtxTree = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     titleClassName = propsAll.titleClassName,
     _propsAll$expandActio = propsAll.expandAction,
     expandAction = _propsAll$expandActio === void 0 ? 'click' : _propsAll$expandActio,
+    _propsAll$maxButtonCo = propsAll.maxButtonCount,
+    maxButtonCount = _propsAll$maxButtonCo === void 0 ? 3 : _propsAll$maxButtonCo,
     props = _objectWithoutProperties(propsAll, _excluded);
   var _useContext = (0, _react.useContext)(_vtxProvider.VtxProvider),
     getPrefixCls = _useContext.getPrefixCls;
@@ -101,12 +104,12 @@ var VtxTree = exports.VtxTree = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   var dataList = (0, _react.useMemo)(function () {
     var dataList = [];
     var titleKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.title) || 'title';
+    var keyName = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.key) || 'key';
     var generateList = function generateList(data) {
       for (var i = 0; i < data.length; i++) {
         var node = data[i];
-        var key = node.key;
         dataList.push({
-          key: key,
+          key: node[keyName],
           title: node[titleKey]
         });
         if (node.children) {
@@ -149,6 +152,7 @@ var VtxTree = exports.VtxTree = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     var newTreeData = (0, _utils2.parseTreeData)(treeData, {
       renderNode: function renderNode(item) {
         var titleKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.title) || 'title';
+        var keyName = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.key) || 'key';
         var strTitle = item[titleKey] || '';
         var index = strTitle.indexOf(searchValue);
         var beforeStr = strTitle.substring(0, index);
@@ -164,7 +168,7 @@ var VtxTree = exports.VtxTree = /*#__PURE__*/(0, _react.forwardRef)(function (pr
           className: className,
           children: strTitle
         });
-        return _objectSpread(_objectSpread({}, item), {}, _defineProperty(_defineProperty(_defineProperty({}, titleKey, title), "key", item.key), "strTitle", strTitle));
+        return _objectSpread(_objectSpread({}, item), {}, _defineProperty(_defineProperty(_defineProperty({}, titleKey, title), keyName, item[keyName]), "strTitle", strTitle));
       },
       filterNode: function filterNode(item) {
         return item.strTitle.indexOf(searchValue) > -1;
@@ -176,7 +180,7 @@ var VtxTree = exports.VtxTree = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       var _props$onExpand2;
       var newExpandedKeys = dataList.map(function (item) {
         if (item.title.indexOf(value) > -1) {
-          return getParentKey(item.key, treeData);
+          return getParentKey((fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.key) || 'key', item.key, treeData);
         }
         return null;
       }).filter(function (item, i, self) {
@@ -198,18 +202,33 @@ var VtxTree = exports.VtxTree = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     };
   });
   (0, _react.useEffect)(function () {
-    if (!treeRef.current) return;
-    var resizeObserver = new ResizeObserver(function () {
-      setHeight(treeRef.current.offsetHeight);
+    var element = treeRef.current;
+    if (!element) return; // 提前返回，避免后续问题
+
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var _iterator2 = _createForOfIteratorHelper(entries),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var entry = _step2.value;
+          setHeight(entry.contentRect.height);
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
     });
-    resizeObserver.observe(treeRef.current, {
+    resizeObserver.observe(element, {
       box: 'border-box'
     });
+
+    // 初始化高度
+    setHeight(element.offsetHeight);
     return function () {
-      return resizeObserver.disconnect();
+      resizeObserver.disconnect();
     };
-  }, [treeRef]); // 添加依赖
-
+  }, []);
   var onSelect = function onSelect(keys, event) {
     var _props$onSelect;
     var multiple = props.multiple;
@@ -257,6 +276,21 @@ var VtxTree = exports.VtxTree = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       setSelectedKeys(newSelectedKeys);
     }
   };
+  var renderMenuIcon = function renderMenuIcon(arr, nodeData) {
+    return arr.map(function (item) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: item.label,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: "".concat(prefixCls, "-menu-item-icon"),
+          onClick: function onClick(e) {
+            e.stopPropagation();
+            item.onClick && item.onClick(nodeData);
+          },
+          children: item.icon
+        })
+      }, item.label);
+    });
+  };
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)("".concat(prefixCls, "-wraaper"), hashId),
     children: [showSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input, {
@@ -273,7 +307,10 @@ var VtxTree = exports.VtxTree = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       ref: treeRef,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tree, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
         height: height,
-        switcherIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {}),
+        switcherIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vtxIcon.default, {
+          type: "downOutlined",
+          fileType: "svg"
+        }),
         showLine: {
           showLeafIcon: false
         },
@@ -292,28 +329,54 @@ var VtxTree = exports.VtxTree = /*#__PURE__*/(0, _react.forwardRef)(function (pr
           var titleKey = (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.title) || 'title';
           var title = nodeData[titleKey];
           if (renderMenuList) {
-            var menuList = renderMenuList(nodeData);
+            var menuList = renderMenuList(nodeData).filter(function (item) {
+              return item.visible;
+            });
+            var arr = [];
+            if (menuList.length > maxButtonCount) {
+              arr = arr.concat(renderMenuIcon(menuList.slice(0, maxButtonCount - 1), nodeData));
+              arr.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Dropdown, {
+                placement: "bottom",
+                menu: {
+                  items: menuList.slice(maxButtonCount - 1).map(function (item) {
+                    return {
+                      key: item.label,
+                      label: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                        className: "".concat(prefixCls, "-menu-item-label"),
+                        children: [item.icon, item.label]
+                      })
+                    };
+                  }),
+                  onClick: function onClick(obj) {
+                    var key = obj.key,
+                      domEvent = obj.domEvent;
+                    domEvent.stopPropagation();
+                    var temp = menuList.find(function (v) {
+                      return v.label == key;
+                    });
+                    (temp === null || temp === void 0 ? void 0 : temp.onClick) && temp.onClick(nodeData);
+                  }
+                },
+                trigger: ['click'],
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                  className: "".concat(prefixCls, "-menu-item-icon"),
+                  onClick: function onClick(e) {
+                    e.stopPropagation();
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EllipsisOutlined, {})
+                })
+              }));
+            } else {
+              arr = arr.concat(renderMenuIcon(menuList, nodeData));
+            }
             return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
               className: (0, _classnames.default)("".concat(prefixCls, "-menu-wrap"), hashId),
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
                 children: title
               }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                 className: (0, _classnames.default)("".concat(prefixCls, "-menu-list"), hashId),
-                children: menuList.filter(function (item) {
-                  return item.visible;
-                }).map(function (item) {
-                  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
-                    title: item.label,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                      className: (0, _classnames.default)("".concat(prefixCls, "-menu-item-icon"), hashId),
-                      onClick: function onClick(e) {
-                        e.stopPropagation();
-                        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-                        item.onClick && item.onClick(nodeData);
-                      },
-                      children: item.icon
-                    })
-                  }, item.label);
+                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                  children: [arr, " "]
                 })
               })]
             });

package/lib/vtx-tree-select/index.js

@@ -15,8 +15,7 @@ var _index = require("./style/index");
 var _ahooks = require("ahooks");
 var _vtxProvider = require("../vtx-provider");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["multiple", "treeData", "placeholder", "treeCheckable", "disabled", "style"],
-  _excluded2 = ["children"];
+var _excluded = ["multiple", "treeData", "placeholder", "treeCheckable", "disabled", "style", "fieldNames", "onChange", "labelInValue"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -29,6 +28,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -45,7 +45,18 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     style = _ref.style,
+    _ref$fieldNames = _ref.fieldNames,
+    fieldNames = _ref$fieldNames === void 0 ? {
+      label: "title",
+      value: "value",
+      key: "value",
+      children: 'children'
+    } : _ref$fieldNames,
+    onChange = _ref.onChange,
+    labelInValue = _ref.labelInValue,
     props = _objectWithoutProperties(_ref, _excluded);
+  // checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 labelInValue 强制为 true
+  var _labelInValue = treeCheckable && props.treeCheckStrictly ? true : labelInValue;
   var intl = (0, _vtxProvider.useIntl)();
   var _useContext = (0, _react.useContext)(_vtxProvider.VtxProvider),
     getPrefixCls = _useContext.getPrefixCls;
@@ -71,11 +82,9 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
     }
     (function genNodes(nodes) {
       nodes.map(function (item) {
-        var children = item.children,
-          rest = _objectWithoutProperties(item, _excluded2);
-        keyNodesMapping[item.value || item.key] = _objectSpread(_objectSpread({}, rest), {}, {
-          id: item.value || item.key
-        });
+        var rest = Object.assign({}, (_objectDestructuringEmpty(item), item));
+        var children = item[fieldNames.children];
+        keyNodesMapping[item[fieldNames.value]] = _objectSpread(_objectSpread({}, rest), {}, _defineProperty(_defineProperty({}, fieldNames.value, item[fieldNames.value]), fieldNames.label, item[fieldNames.label]));
         if (Array.isArray(children) && children.length > 0) {
           genNodes(children);
         }
@@ -84,19 +93,17 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
     return keyNodesMapping;
   }, [treeData]);
   var clear = function clear() {
-    var _props$onChange;
-    (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, [], [], {});
+    onChangeTreeSelect === null || onChangeTreeSelect === void 0 || onChangeTreeSelect([], [], {});
   };
   var clearKey = function clearKey(id) {
-    var _props$onChange2;
     var newValue = _toConsumableArray(props.value);
     (0, _pull.default)(newValue, id);
     var label = newValue.map(function (item) {
-      return keyNodesMapping[item].title;
+      return keyNodesMapping[item[fieldNames.label]];
     });
-    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, newValue, label, {});
+    onChangeTreeSelect === null || onChangeTreeSelect === void 0 || onChangeTreeSelect(newValue, label, {});
   };
-  var selectedNodes = (0, _react.useMemo)(function () {
+  var getSelectedNodes = function getSelectedNodes(value) {
     var value_arr = function (val) {
       if (Array.isArray(val)) {
         return val;
@@ -105,90 +112,29 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
       } else {
         return [];
       }
-    }(props.value);
+    }(value);
     var selectedNodes = value_arr.filter(function (k) {
-      return k in keyNodesMapping;
+      if (_labelInValue) {
+        return k.value in keyNodesMapping;
+      } else {
+        return k in keyNodesMapping;
+      }
     }).map(function (item) {
-      return {
-        id: item,
-        name: keyNodesMapping[item].title
-      };
+      if (_labelInValue) {
+        return _objectSpread({}, keyNodesMapping[item.value]);
+      }
+      return _objectSpread({}, keyNodesMapping[item]);
     });
     return selectedNodes;
+  };
+  var selectedNodes = (0, _react.useMemo)(function () {
+    return getSelectedNodes(props.value);
   }, [props.value, keyNodesMapping]);
   (0, _react.useEffect)(function () {
     if (size !== null && size !== void 0 && size.width) {
       setPopWidth(size === null || size === void 0 ? void 0 : size.width);
     }
   }, [size === null || size === void 0 ? void 0 : size.width]);
-
-  // let suffixIconObj = {};
-  // if (multiple || treeCheckable) {
-  //     suffixIconObj.suffixIcon = (
-  //         <Popover
-  //             content={
-  //                 <>
-  //                     <div
-  //                         className={classnames(`${prefixCls}-count-head`, hashId,)}
-
-  //                     >
-  //                         <span>已选择：{selectedNodes.length}</span>
-  //                         <span
-  //                             className={classnames(
-  //                                 selectedNodes.length > 0 && !disabled
-  //                                     ? 'clear-count'
-  //                                     : 'disabled-count',
-  //                             )}
-  //                             onClick={e => {
-  //                                 if (!disabled) {
-  //                                     e.stopPropagation();
-  //                                     clear();
-  //                                 }
-  //                             }}
-  //                         >
-  //                             清空已选项
-  //                         </span>
-  //                     </div>
-  //                     {selectedNodes.length > 0 ? (
-  //                         selectedNodes.map(item => (
-  //                             <Tag
-  //                                 key={`tab-${item.id}`}
-  //                                 closable={!disabled}
-  //                                 onClose={e => {
-  //                                     e.stopPropagation();
-  //                                     clearKey(item.id);
-  //                                 }}
-  //                                 style={{ marginBottom: '5px' }}
-  //                             >
-  //                                 {item.name && item.name.length > 20
-  //                                     ? `${item.name.slice(0, 20)}...`
-  //                                     : item.name}
-  //                             </Tag>
-  //                         ))
-  //                     ) : (
-  //                         <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-  //                     )}
-  //                 </>
-  //             }
-  //             placement="bottomRight"
-  //             trigger="click"
-  //             // overlayStyle={{ width: popWidth }}
-  //             styles={{ root: { width: popWidth } }}
-  //         >
-  //             <Button
-  //                 className={classnames(`${prefixCls}-count`, hashId,)}
-
-  //                 icon={<MoreOutlined />}
-  //                 size="default"
-  //                 onClick={e => {
-  //                     console.log('click', e)
-  //                     e.stopPropagation();
-  //                 }}
-  //             />
-  //         </Popover>
-  //     );
-  // }
-
   var popoverContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classnames.default)("".concat(prefixCls, "-count-head"), hashId),
@@ -204,22 +150,33 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
         },
         children: intl.getMessage('treeSelect.clearSelectedItems', '清空已选项')
       })]
-    }), selectedNodes.length > 0 ? selectedNodes.map(function (item) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tag, {
-        closable: !disabled,
-        onClose: function onClose(e) {
-          e.stopPropagation();
-          clearKey(item.id);
-        },
-        style: {
-          marginBottom: 5
-        },
-        children: item.name.length > 20 ? "".concat(item.name.slice(0, 20), "...") : item.name
-      }, "tab-".concat(item.id));
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Empty, {
-      image: _antd.Empty.PRESENTED_IMAGE_SIMPLE
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-all-list"), hashId),
+      children: selectedNodes.length > 0 ? selectedNodes.map(function (item) {
+        var _item$fieldNames$labe;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tag, {
+          closable: !disabled,
+          onClose: function onClose(e) {
+            e.stopPropagation();
+            clearKey(item[fieldNames.value]);
+          },
+          styles: {
+            root: {
+              marginBottom: 5,
+              marginRight: 5
+            }
+          },
+          children: ((_item$fieldNames$labe = item[fieldNames.label]) === null || _item$fieldNames$labe === void 0 ? void 0 : _item$fieldNames$labe.length) > 20 ? "".concat(item[fieldNames.label].slice(0, 20), "...") : item[fieldNames.label]
+        }, "tab-".concat(item[fieldNames.value]));
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Empty, {
+        image: _antd.Empty.PRESENTED_IMAGE_SIMPLE
+      })
     })]
   });
+  var onChangeTreeSelect = function onChangeTreeSelect(value, label, extra) {
+    extra.list = getSelectedNodes(value);
+    onChange === null || onChange === void 0 || onChange(value, label, extra);
+  };
   return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     style: style,
@@ -228,8 +185,10 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
       style: {
         width: '100%'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TreeSelect, _objectSpread({
-        showSearch: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.TreeSelect, _objectSpread(_objectSpread({
+        showSearch: {
+          treeNodeFilterProp: fieldNames.label
+        },
         placeholder: placeholder,
         treeData: treeData,
         treeLine: {
@@ -252,8 +211,15 @@ var VtxTreeSelect = exports.VtxTreeSelect = function VtxTreeSelect(_ref) {
           popup: (0, _classnames.default)("".concat(prefixCls, "-popup"), hashId)
         },
         maxTagCount: "responsive",
-        treeDefaultExpandAll: true
-      }, props)), (multiple || treeCheckable) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
+        treeDefaultExpandAll: true,
+        fieldNames: fieldNames,
+        labelInValue: _labelInValue,
+        disabled: disabled
+      }, props), {}, {
+        onChange: function onChange(value, label, extra) {
+          return onChangeTreeSelect(value, label, extra, selectedNodes);
+        }
+      })), (multiple || treeCheckable) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
         open: popOpen,
         onOpenChange: setPopOpen,
         placement: "bottomRight",

package/lib/vtx-tree-select/style/index.js

@@ -13,7 +13,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 var genVtxTreeSelectStyle = function genVtxTreeSelectStyle(token) {
   var componentCls = token.componentCls;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '&-popover', {
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, '&-popover', {
     minWidth: '200px',
     height: '300px',
     overflow: 'auto',
@@ -34,14 +34,16 @@ var genVtxTreeSelectStyle = function genVtxTreeSelectStyle(token) {
     color: '@input-placeholder-color'
   }), '&-count', {
     marginRight: '-12px'
-  })), "".concat(componentCls, "-popup"), _defineProperty({}, '&', _defineProperty(_defineProperty({}, '.ant-select-tree .ant-select-tree-treenode:not(.ant-select-tree .ant-select-tree-treenode-disabled).filter-node .ant-select-tree-title', {
+  })), "".concat(componentCls, "-popup"), _defineProperty({}, '&', _defineProperty(_defineProperty(_defineProperty({}, '.ant-select-tree .ant-select-tree-treenode:not(.ant-select-tree .ant-select-tree-treenode-disabled).filter-node .ant-select-tree-title', {
     color: '#1890ff'
   }), '.ant-select-tree .ant-select-tree-node-content-wrapper .ant-select-tree-node-selected', {
     backgroundColor: '#e6f7ff'
+  }), '.ant-select-tree .ant-select-tree-list-holder-inner .ant-select-tree-treenode .ant-select-tree-node-content-wrapper', {
+    flex: 1
   }))), "".concat(componentCls, "-count-head"), {
     display: 'flex',
     justifyContent: 'space-between',
-    marginBottom: '5px',
+    marginBottom: 5,
     '.disabled-count': {
       color: '#aaa',
       cursor: 'not-allowed'
@@ -51,6 +53,9 @@ var genVtxTreeSelectStyle = function genVtxTreeSelectStyle(token) {
     }, '&:hover', {
       color: '#40a9ff'
     })
+  }), "".concat(componentCls, "-all-list"), {
+    maxHeight: 300,
+    overflowY: "auto"
   }), "".concat(componentCls, "-outer"), {
     position: 'relative',
     display: 'inline-flex',
@@ -63,6 +68,7 @@ var genVtxTreeSelectStyle = function genVtxTreeSelectStyle(token) {
     color: token.colorTextDescription,
     display: 'inline-flex',
     alignItems: 'center',
+    width: token.controlHeight,
     '&:hover': {
       color: token.colorPrimary
     }

package/lib/vtx-upload/FilePreview.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
 var _vtxProvider = require("../vtx-provider");
+var _vtxModal = _interopRequireDefault(require("../vtx-modal"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -82,7 +83,7 @@ function Preview(props) {
     timer && clearTimeout(timer);
     onCancel();
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Modal, _objectSpread(_objectSpread({}, modalProps), {}, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_vtxModal.default, _objectSpread(_objectSpread({}, modalProps), {}, {
     children: [type == 'file' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", {
       src: url,
       style: {