@vtx/components 4.0.0-beta.2 → 4.0.0-beta.21

package/es/vtx-tree/index.js

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["showSearch", "treeData", "searchPlaceholder", "renderMenuList", "fieldNames", "titleClassName", "expandAction"];
+var _excluded = ["showSearch", "treeData", "searchPlaceholder", "renderMenuList", "fieldNames", "titleClassName", "expandAction", "maxButtonCount"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -20,26 +20,27 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { ConfigProvider, Input, Tooltip, Tree } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
+import { Dropdown, ConfigProvider, Input, Menu, Tooltip, Tree } from 'antd';
+import { DownOutlined, EllipsisOutlined } from '@ant-design/icons';
 import { calcRangeKeys, convertDirectoryKeysToNodes } from "./utils";
 import { useDebounceFn, useMemoizedFn } from 'ahooks';
 import { parseTreeData } from '@vtx/utils';
 import classnames from 'classnames';
 import { useStyle } from "./style/index";
 import { VtxProvider, useIntl } from "../vtx-provider";
+import VtxIcon from "../vtx-icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-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;
       }
     }
@@ -63,6 +64,8 @@ var VtxTree = /*#__PURE__*/forwardRef(function (propsAll, ref) {
     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 = useContext(VtxProvider),
     getPrefixCls = _useContext.getPrefixCls;
@@ -93,12 +96,12 @@ var VtxTree = /*#__PURE__*/forwardRef(function (propsAll, ref) {
   var dataList = 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) {
@@ -141,6 +144,7 @@ var VtxTree = /*#__PURE__*/forwardRef(function (propsAll, ref) {
     var newTreeData = 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);
@@ -156,7 +160,7 @@ var VtxTree = /*#__PURE__*/forwardRef(function (propsAll, ref) {
           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;
@@ -168,7 +172,7 @@ var VtxTree = /*#__PURE__*/forwardRef(function (propsAll, ref) {
       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) {
@@ -190,17 +194,29 @@ var VtxTree = /*#__PURE__*/forwardRef(function (propsAll, ref) {
     };
   });
   useEffect(function () {
-    var _treeRef$current2;
-    var resizeObserver = new ResizeObserver(function () {
-      var _treeRef$current;
-      setHeight(treeRef === null || treeRef === void 0 || (_treeRef$current = treeRef.current) === null || _treeRef$current === void 0 ? void 0 : _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();
+      }
     });
-    if (treeRef.current) {
-      resizeObserver.observe(treeRef === null || treeRef === void 0 ? void 0 : treeRef.current, {
-        box: 'border-box'
-      });
-    }
-    setHeight(treeRef === null || treeRef === void 0 || (_treeRef$current2 = treeRef.current) === null || _treeRef$current2 === void 0 ? void 0 : _treeRef$current2.offsetHeight);
+    resizeObserver.observe(element, {
+      box: 'border-box'
+    });
+
+    // 初始化高度
+    setHeight(element.offsetHeight);
     return function () {
       resizeObserver.disconnect();
     };
@@ -252,6 +268,21 @@ var VtxTree = /*#__PURE__*/forwardRef(function (propsAll, ref) {
       setSelectedKeys(newSelectedKeys);
     }
   };
+  var renderMenuIcon = function renderMenuIcon(arr, nodeData) {
+    return arr.map(function (item) {
+      return /*#__PURE__*/_jsx(Tooltip, {
+        title: item.label,
+        children: /*#__PURE__*/_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__*/_jsxs("div", {
     className: classnames("".concat(prefixCls, "-wraaper"), hashId),
     children: [showSearch && /*#__PURE__*/_jsx(Input, {
@@ -268,7 +299,10 @@ var VtxTree = /*#__PURE__*/forwardRef(function (propsAll, ref) {
       ref: treeRef,
       children: /*#__PURE__*/_jsx(Tree, _objectSpread(_objectSpread(_objectSpread({}, props), {}, {
         height: height,
-        switcherIcon: /*#__PURE__*/_jsx(DownOutlined, {}),
+        switcherIcon: /*#__PURE__*/_jsx(VtxIcon, {
+          type: "downOutlined",
+          fileType: "svg"
+        }),
         showLine: {
           showLeafIcon: false
         },
@@ -287,28 +321,54 @@ var VtxTree = /*#__PURE__*/forwardRef(function (propsAll, ref) {
           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__*/_jsx(Dropdown, {
+                placement: "bottom",
+                menu: {
+                  items: menuList.slice(maxButtonCount - 1).map(function (item) {
+                    return {
+                      key: item.label,
+                      label: /*#__PURE__*/_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__*/_jsx("span", {
+                  className: "".concat(prefixCls, "-menu-item-icon"),
+                  onClick: function onClick(e) {
+                    e.stopPropagation();
+                  },
+                  children: /*#__PURE__*/_jsx(EllipsisOutlined, {})
+                })
+              }));
+            } else {
+              arr = arr.concat(renderMenuIcon(menuList, nodeData));
+            }
             return /*#__PURE__*/_jsxs("div", {
               className: classnames("".concat(prefixCls, "-menu-wrap"), hashId),
               children: [/*#__PURE__*/_jsx("span", {
                 children: title
               }), /*#__PURE__*/_jsx("div", {
                 className: classnames("".concat(prefixCls, "-menu-list"), hashId),
-                children: menuList.filter(function (item) {
-                  return item.visible;
-                }).map(function (item) {
-                  return /*#__PURE__*/_jsx(Tooltip, {
-                    title: item.label,
-                    children: /*#__PURE__*/_jsx("span", {
-                      className: classnames("".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__*/_jsxs("div", {
+                  children: [arr, " "]
                 })
               })]
             });
@@ -325,7 +385,7 @@ VtxTree.propTypes = {
   treeData: PropTypes.array,
   selectedKeys: PropTypes.array,
   defaultSelectedKeys: PropTypes.array,
-  expandedKeys: PropTypes.bool,
+  expandedKeys: PropTypes.array,
   onExpand: PropTypes.func,
   multiple: PropTypes.bool,
   autoExpandParent: PropTypes.bool,
@@ -333,7 +393,11 @@ VtxTree.propTypes = {
   searchPlaceholder: PropTypes.string,
   renderMenuList: PropTypes.func,
   titleClassName: PropTypes.func,
-  fieldNames: PropTypes.array,
+  fieldNames: PropTypes.shape({
+    title: PropTypes.string,
+    key: PropTypes.string,
+    children: PropTypes.string
+  }),
   defaultExpandAll: PropTypes.bool,
   expandAction: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };

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

@@ -1,5 +1,5 @@
 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); }
-var _excluded = ["multiple", "treeData", "placeholder", "treeCheckable", "disabled", "style"],
+var _excluded = ["multiple", "treeData", "placeholder", "treeCheckable", "disabled", "style", "fieldNames", "onChange", "labelInValue"],
   _excluded2 = ["children"];
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -38,7 +38,17 @@ var 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",
+      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 = useIntl();
   var _useContext = useContext(VtxProvider),
     getPrefixCls = _useContext.getPrefixCls;
@@ -58,13 +68,15 @@ var VtxTreeSelect = function VtxTreeSelect(_ref) {
   var size = useSize(ref);
   var keyNodesMapping = useMemo(function () {
     var keyNodesMapping = {};
+    // 建议：添加树数据有效性检查
+    if (!treeData || !Array.isArray(treeData)) {
+      return keyNodesMapping;
+    }
     (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
-        });
+        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);
         }
@@ -73,19 +85,17 @@ var 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);
     pull(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 = useMemo(function () {
+  var getSelectedNodes = function getSelectedNodes(value) {
     var value_arr = function (val) {
       if (Array.isArray(val)) {
         return val;
@@ -94,90 +104,29 @@ var 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 = useMemo(function () {
+    return getSelectedNodes(props.value);
   }, [props.value, keyNodesMapping]);
   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__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("div", {
       className: classnames("".concat(prefixCls, "-count-head"), hashId),
@@ -194,21 +143,29 @@ var VtxTreeSelect = function VtxTreeSelect(_ref) {
         children: intl.getMessage('treeSelect.clearSelectedItems', '清空已选项')
       })]
     }), selectedNodes.length > 0 ? selectedNodes.map(function (item) {
+      var _item$fieldNames$labe;
       return /*#__PURE__*/_jsx(Tag, {
         closable: !disabled,
         onClose: function onClose(e) {
           e.stopPropagation();
-          clearKey(item.id);
+          clearKey(item[fieldNames.value]);
         },
-        style: {
-          marginBottom: 5
+        styles: {
+          root: {
+            marginBottom: 5,
+            marginRight: 5
+          }
         },
-        children: item.name.length > 20 ? "".concat(item.name.slice(0, 20), "...") : item.name
-      }, "tab-".concat(item.id));
+        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__*/_jsx(Empty, {
       image: 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__*/_jsx("div", {
     ref: ref,
     style: style,
@@ -217,7 +174,7 @@ var VtxTreeSelect = function VtxTreeSelect(_ref) {
       style: {
         width: '100%'
       },
-      children: [/*#__PURE__*/_jsx(TreeSelect, _objectSpread({
+      children: [/*#__PURE__*/_jsx(TreeSelect, _objectSpread(_objectSpread({
         showSearch: true,
         placeholder: placeholder,
         treeData: treeData,
@@ -241,8 +198,14 @@ var VtxTreeSelect = function VtxTreeSelect(_ref) {
           popup: classnames("".concat(prefixCls, "-popup"), hashId)
         },
         maxTagCount: "responsive",
-        treeDefaultExpandAll: true
-      }, props)), (multiple || treeCheckable) && /*#__PURE__*/_jsx(Popover, {
+        treeDefaultExpandAll: true,
+        fieldNames: fieldNames,
+        labelInValue: _labelInValue
+      }, props), {}, {
+        onChange: function onChange(value, label, extra) {
+          return onChangeTreeSelect(value, label, extra, selectedNodes);
+        }
+      })), (multiple || treeCheckable) && /*#__PURE__*/_jsx(Popover, {
         open: popOpen,
         onOpenChange: setPopOpen,
         placement: "bottomRight",

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

@@ -28,14 +28,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'

package/es/vtx-upload/FilePreview.js

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 // import { volume, playbackRate } from 'xgplayer/dist/controls';
 import { Modal, Button } from 'antd';
 import { VtxProvider, useIntl } from "../vtx-provider";
+import VtxModal from "../vtx-modal";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function Preview(props) {
@@ -77,7 +78,7 @@ function Preview(props) {
     timer && clearTimeout(timer);
     onCancel();
   };
-  return /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({}, modalProps), {}, {
+  return /*#__PURE__*/_jsxs(VtxModal, _objectSpread(_objectSpread({}, modalProps), {}, {
     children: [type == 'file' ? /*#__PURE__*/_jsx("iframe", {
       src: url,
       style: {