@chaoswise/ui 3.1.10 → 3.1.11

package/lib/CWTree/index.js

@@ -1,10 +1,11 @@
+import _Dropdown from "@chaoswise/ui/lib/Dropdown";
 import _Tooltip from "@chaoswise/ui/lib/Tooltip";
 import _TooltipText from "@chaoswise/ui/lib/TooltipText";
-import _Dropdown from "@chaoswise/ui/lib/Dropdown";
 import _Menu from "@chaoswise/ui/lib/Menu";
 import _Tree from "@chaoswise/ui/lib/Tree";
-var _excluded = ["children", "treeData", "menuData", "extendType", "onClickMenu", "menuStyle", "menuRender", "extraFooter", "tooltipPlacement", "searchValue", "multiple", "selectedKeys", "defaultSelectedKeys", "onSelect", "searchHighlight", "draggable", "searchHighlightStyle", "className", "caseSensitive", "onExpand", "renderItem", "useTooltipText"],
-  _excluded2 = ["icon", "title", "key", "children"];
+var _excluded = ["children", "treeData", "menuData", "extendType", "onClickMenu", "menuStyle", "menuRender", "extraFooter", "tooltipPlacement", "searchValue", "multiple", "selectedKeys", "defaultSelectedKeys", "onSelect", "searchHighlight", "draggable", "searchHighlightStyle", "className", "caseSensitive", "onExpand", "renderItem", "useTooltipText", "fieldNames"],
+  _excluded2 = ["key", "title", "children"],
+  _excluded3 = ["icon", "title", "key"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
@@ -19,7 +20,7 @@ import { EllipsisOutlined, DownOutlined } from "@ant-design/icons";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import DragSvg from "./assets/Drag";
-import { createTree, createTitle } from "./utils";
+import { createTitle, processTreeData } from "./utils";
 import useConfigContext from "../useConfigContext";
 import useStyle from "./index.style";
 import { useIntl } from "../locales";
@@ -28,15 +29,20 @@ var TreeNode = _Tree.TreeNode,
 var SubMenu = _Menu.SubMenu;
 
 /**
- * 基于antd Tree封 支持自定义功能菜单内容、主要适用于左侧导航树（符合UIUE规范）
+ * 基于antd Tree封装，支持自定义功能菜单内容、主要适用于左侧导航树（符合UIUE规范）
  */
 
 function CWTree(_ref) {
   var children = _ref.children,
     treeData = _ref.treeData,
-    menuData = _ref.menuData,
-    extendType = _ref.extendType,
-    onClickMenu = _ref.onClickMenu,
+    _ref$menuData = _ref.menuData,
+    menuData = _ref$menuData === void 0 ? function () {
+      return false;
+    } : _ref$menuData,
+    _ref$extendType = _ref.extendType,
+    extendType = _ref$extendType === void 0 ? "button" : _ref$extendType,
+    _ref$onClickMenu = _ref.onClickMenu,
+    onClickMenu = _ref$onClickMenu === void 0 ? function () {} : _ref$onClickMenu,
     menuStyle = _ref.menuStyle,
     menuRender = _ref.menuRender,
     extraFooter = _ref.extraFooter,
@@ -64,6 +70,8 @@ function CWTree(_ref) {
     renderItem = _ref.renderItem,
     _ref$useTooltipText = _ref.useTooltipText,
     useTooltipText = _ref$useTooltipText === void 0 ? true : _ref$useTooltipText,
+    _ref$fieldNames = _ref.fieldNames,
+    fieldNames = _ref$fieldNames === void 0 ? {} : _ref$fieldNames,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useConfigContext = useConfigContext(),
     getPrefixCls = _useConfigContext.getPrefixCls;
@@ -75,8 +83,8 @@ function CWTree(_ref) {
     cssVarCls = _useStyle2[2];
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
-    _showExtend = _useState2[0],
-    setShowExtend = _useState2[1];
+    showExtendKey = _useState2[0],
+    setShowExtendKey = _useState2[1];
   var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
     expandedKeys = _useState4[0],
@@ -86,64 +94,75 @@ function CWTree(_ref) {
     selfSelectedKeys = _useState6[0],
     setSelfSelectedKeys = _useState6[1];
   var intl = useIntl();
+  var memoizedSearchHighlightStyle = useMemo(function () {
+    return searchHighlightStyle;
+  }, [searchHighlightStyle]);
+  var memoizedMenuStyle = useMemo(function () {
+    return menuStyle;
+  }, [menuStyle]);
   useEffect(function () {
     if (selectedKeys !== undefined) {
       setSelfSelectedKeys(selectedKeys);
     }
   }, [selectedKeys]);
-  function selfOnSelect(Keys, e) {
+  var selfOnSelect = useCallback(function (keys, e) {
     if (onSelect) {
-      onSelect(Keys, e);
+      onSelect(keys, e);
     }
     if (selectedKeys === undefined) {
-      setSelfSelectedKeys(Keys);
-    }
-  }
-  var _treeData = useMemo(function () {
-    if (!treeData) {
-      return [];
+      setSelfSelectedKeys(keys);
     }
-    if (!searchHighlight) {
-      return treeData;
-    }
-    return createTree(treeData, searchValue, caseSensitive, rest.checkable);
-  }, [searchHighlight, treeData, searchValue, rest.checkable, caseSensitive]);
+  }, [onSelect, selectedKeys]);
+  var processedTreeData = useMemo(function () {
+    return processTreeData(treeData, {
+      searchHighlight: searchHighlight,
+      searchValue: searchValue,
+      caseSensitive: caseSensitive,
+      checkable: rest.checkable,
+      fieldNames: fieldNames
+    });
+  }, [searchHighlight, treeData, searchValue, caseSensitive, rest.checkable, fieldNames]);
   var buildMenu = useCallback(function (array) {
-    // 递归构建菜单解构
+    // 递归构建菜单结构
     return array.map(function (item) {
-      if (item.children) {
+      var key = item.key,
+        title = item.title,
+        children = item.children,
+        restProps = _objectWithoutProperties(item, _excluded2);
+      if (children) {
         return /*#__PURE__*/React.createElement(SubMenu, _extends({
           popupClassName: "cw-tree-treenode-extend-menu-submenu",
-          key: item.key,
-          title: item.title
-        }, item), buildMenu(item.children));
+          key: key,
+          title: title
+        }, restProps), buildMenu(children));
       } else {
         return /*#__PURE__*/React.createElement(_Menu.Item, _extends({
-          key: item.key
-        }, item), item.title);
+          key: key
+        }, restProps), title);
       }
     });
   }, []);
-  var creatMenu = useCallback(function (treeTitle, treeKey, props) {
-    // 创建扩展菜单
+  var createMenu = useCallback(function (treeTitle, treeKey, props) {
+    // 创建扩展菜单 
     var data = menuData(treeTitle, treeKey, props);
-    if (data.constructor === Array) {
+    if (Array.isArray(data)) {
       return /*#__PURE__*/React.createElement(_Menu, {
-        style: menuStyle,
+        style: memoizedMenuStyle,
         onClick: function onClick(_ref2) {
           var item = _ref2.item,
             key = _ref2.key,
-            keyPath = _ref2.keyPath,
             domEvent = _ref2.domEvent;
           domEvent.stopPropagation();
           onClickMenu(key, treeKey, item, domEvent, props);
         }
       }, buildMenu(data));
     }
-  }, [menuData, onClickMenu, menuStyle]);
-  var creatButton = useCallback(function (icon, treeTitle, treeKey, props) {
+    return null;
+  }, [menuData, onClickMenu, memoizedMenuStyle, buildMenu]);
+  var createButton = useCallback(function (icon, treeTitle, treeKey, props) {
     // 创建扩展功能按钮
     var data = menuData(treeTitle, treeKey, props);
+    if (!Array.isArray(data)) return null;
     return data.map(function (item) {
       return /*#__PURE__*/React.createElement("div", {
         key: item.key,
@@ -157,12 +176,26 @@ function CWTree(_ref) {
       }, item.title));
     });
   }, [menuData, onClickMenu]);
-  var creatTitle = useCallback(function (icon, title, key, children, props) {
+  var renderTooltipTitle = useCallback(function (title) {
+    var placement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "bottomLeft";
+    return useTooltipText ? /*#__PURE__*/React.createElement(_TooltipText, {
+      placement: placement
+    }, title) : title;
+  }, [useTooltipText]);
+  var renderDragIcon = useMemo(function () {
+    if (!draggable) return null;
+    return /*#__PURE__*/React.createElement("span", {
+      className: "cw-tree-treenode-drag-icon"
+    }, /*#__PURE__*/React.createElement(_Tooltip, {
+      title: intl.get("5fe60774-0f08-450f-a9d9-998996485fec").d("拖拽移动")
+    }, /*#__PURE__*/React.createElement(DragSvg, null)));
+  }, [draggable, intl]);
+
+  // 创建标题
+  var createTitleComponent = useCallback(function (icon, title, key, props) {
     var menuDom = /*#__PURE__*/React.createElement(_Dropdown, {
-      overlay: creatMenu(title, key, props),
-      placement: "bottomLeft"
-      // trigger={["click"]}
-      ,
+      overlay: createMenu(title, key, props),
+      placement: "bottomLeft",
       overlayClassName: "cw-tree-treenode-extend-menu"
     }, /*#__PURE__*/React.createElement("span", {
       onClick: function onClick(e) {
@@ -171,117 +204,124 @@ function CWTree(_ref) {
     }, /*#__PURE__*/React.createElement(EllipsisOutlined, {
       className: "cw-tree-treenode-extend-menu-ellipsis"
     })));
+    var isExtendVisible = showExtendKey === key;
     var titleDom = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("span", {
       className: "cw-tree-treenode-content"
     }, /*#__PURE__*/React.createElement("span", {
       className: "cw-tree-treenode-title"
-    }, useTooltipText ? /*#__PURE__*/React.createElement(_TooltipText, {
-      placement: tooltipPlacement ? tooltipPlacement : "bottomLeft"
-    }, title) : title), draggable && /*#__PURE__*/React.createElement("span", {
-      className: "cw-tree-treenode-drag-icon"
-    }, /*#__PURE__*/React.createElement(_Tooltip, {
-      title: intl.get("5fe60774-0f08-450f-a9d9-998996485fec").d("拖拽移动")
-    }, /*#__PURE__*/React.createElement(DragSvg, null)))), /*#__PURE__*/React.createElement("span", {
+    }, renderTooltipTitle(title, tooltipPlacement)), renderDragIcon), /*#__PURE__*/React.createElement("span", {
       className: classnames("cw-tree-treenode-extend", {
-        "cw-tree-treenode-extend-show": _showExtend === key
+        "cw-tree-treenode-extend-show": isExtendVisible
       })
-    }, menuRender ? /*#__PURE__*/React.createElement(Fragment, null, menuRender(title, key, props), menuData(title, key, props) && menuDom) : extendType === "menu" ? menuDom : creatButton(icon, title, key, props)));
+    }, menuRender ? /*#__PURE__*/React.createElement(Fragment, null, menuRender(title, key, props), menuData(title, key, props) && menuDom) : extendType === "menu" ? menuDom : createButton(icon, title, key, props)));
     return titleDom;
-  }, [menuData, extendType, tooltipPlacement, draggable, _showExtend, menuRender, useTooltipText, creatButton, creatMenu]);
-  var innerTreeNode = useMemo(function () {
-    function creatTreeNode(data) {
-      // 创建树结构
-      return data.map(function (_props) {
-        var icon = _props.icon,
-          title = _props.title,
-          key = _props.key,
-          children = _props.children,
-          props = _objectWithoutProperties(_props, _excluded2);
-        var _title = title;
-        if (searchHighlight && typeof title === "string") {
-          var _createTitle = createTitle(caseSensitive, searchValue, title),
-            index = _createTitle.index,
-            beforeTitle = _createTitle.beforeTitle,
-            afterTitle = _createTitle.afterTitle,
-            searchStr = _createTitle.searchStr;
-          _title = index > -1 ? /*#__PURE__*/React.createElement("span", null, beforeTitle, /*#__PURE__*/React.createElement("span", {
-            style: searchHighlightStyle
-          }, searchStr), afterTitle) : /*#__PURE__*/React.createElement("span", null, title);
-        }
+  }, [createMenu, menuData, extendType, showExtendKey, menuRender, createButton, renderTooltipTitle, renderDragIcon, tooltipPlacement]);
 
-        // renderItem 自定义
-        if (renderItem) {
-          _title = renderItem(_title, _props);
-        }
-        return /*#__PURE__*/React.createElement(TreeNode, _extends({
-          className: "cw-tree-treenode",
-          record: _props,
-          icon: icon ? icon : null,
-          title: menuData(_title, key, props) || menuRender ? creatTitle(icon, _title, key, children, props) : /*#__PURE__*/React.createElement("span", {
-            className: "cw-tree-treenode-content"
-          }, /*#__PURE__*/React.createElement("span", {
-            className: "cw-tree-treenode-title"
-          }, useTooltipText ? /*#__PURE__*/React.createElement(_TooltipText, {
-            title: title,
-            placement: "top"
-          }, _title) : _title)),
-          originTitle: title,
-          key: key
-        }, props), children && creatTreeNode(children));
-      });
+  // 搜索高亮逻辑
+  var renderHighlightedTitle = useCallback(function (title) {
+    if (!searchHighlight || typeof title !== "string") {
+      return title;
     }
-    return creatTreeNode(_treeData);
-  }, [_treeData, searchHighlight, caseSensitive, searchValue, searchHighlightStyle, menuData, menuRender, useTooltipText, renderItem, creatTitle]);
-  var _onExpand = function _onExpand(keys, e) {
+    var _createTitle = createTitle(caseSensitive, searchValue, title),
+      index = _createTitle.index,
+      beforeTitle = _createTitle.beforeTitle,
+      afterTitle = _createTitle.afterTitle,
+      searchStr = _createTitle.searchStr;
+    return index > -1 ? /*#__PURE__*/React.createElement("span", null, beforeTitle, /*#__PURE__*/React.createElement("span", {
+      style: memoizedSearchHighlightStyle
+    }, searchStr), afterTitle) : /*#__PURE__*/React.createElement("span", null, title);
+  }, [searchHighlight, caseSensitive, searchValue, memoizedSearchHighlightStyle]);
+
+  // 处理核心功能（扩展菜单、搜索高亮等）
+  var titleRender = useCallback(function (nodeData) {
+    var icon = nodeData.icon,
+      title = nodeData.title,
+      key = nodeData.key,
+      props = _objectWithoutProperties(nodeData, _excluded3);
+    var processedTitle = renderHighlightedTitle(title);
+
+    // renderItem 自定义 - 在基础功能上微调标题内容
+    if (renderItem) {
+      processedTitle = renderItem(processedTitle, nodeData);
+    }
+    var hasMenu = menuData(processedTitle, key, props) || menuRender;
+    return hasMenu ? createTitleComponent(icon, processedTitle, key, props) : /*#__PURE__*/React.createElement("span", {
+      className: "cw-tree-treenode-content"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "cw-tree-treenode-title"
+    }, renderTooltipTitle(processedTitle, "top")));
+  }, [renderHighlightedTitle, renderItem, menuData, menuRender, createTitleComponent, renderTooltipTitle]);
+  var handleExpand = useCallback(function (keys, e) {
     setExpandedKeys(keys);
     onExpand(keys, e);
-  };
+  }, [onExpand]);
+
+  // 搜索展开逻辑优化
+  var searchExpandedKeys = useMemo(function () {
+    if (!searchValue) return [];
+    var expandedKeys = [];
+    var _loop = function loop(treeData) {
+      treeData.forEach(function (item) {
+        if (item.children && item.children.length > 0) {
+          expandedKeys.push(item.key);
+          _loop(item.children);
+        }
+      });
+    };
+    _loop(processedTreeData);
+    return expandedKeys;
+  }, [searchValue, processedTreeData]);
   useEffect(function () {
     if (searchValue) {
-      var _expandedKeys = [];
-      // 遍历树获取所有父节点key
-      var _loop = function loop(treeData) {
-        treeData.forEach(function (item) {
-          if (item.children && item.children.length > 0) {
-            _expandedKeys.push(item.key);
-            _loop(item.children);
-          }
-        });
-      };
-      _loop(_treeData);
-      setExpandedKeys(_expandedKeys);
+      setExpandedKeys(searchExpandedKeys);
     }
-  }, [searchValue, _treeData]);
+  }, [searchValue, searchExpandedKeys]);
 
   // 有搜索内容默认展开搜索节点
   var expandedConfig = useMemo(function () {
-    // 获取全部父节点key
     if (searchValue) {
       return {
         expandedKeys: expandedKeys
-        // autoExpandParent: true,
       };
     }
     return {};
   }, [searchValue, expandedKeys]);
-  var handleMouseEnter = function handleMouseEnter(e) {
+  var handleMouseEnter = useCallback(function (e) {
     if (rest.onMouseEnter) {
       rest.onMouseEnter(e);
     }
     // 显示扩展部分
-    if (e.node.key === _showExtend) {
-      return;
+    var nodeKey = e.node.key;
+    if (nodeKey !== showExtendKey) {
+      setShowExtendKey(nodeKey);
     }
-    setShowExtend(e.node.key);
-  };
-  var handleMouseLeave = function handleMouseLeave(e) {
+  }, [rest.onMouseEnter, showExtendKey]);
+  var handleMouseLeave = useCallback(function (e) {
     if (rest.onMouseLeave) {
-      rest.onMouseLeave(e); // 传递参数给外部的 onMouseLeave
+      rest.onMouseLeave(e);
     }
-    setShowExtend("");
-  };
+    setShowExtendKey("");
+  }, [rest.onMouseLeave]);
+
+  // 拖拽配置优化
+  var draggableConfig = useMemo(function () {
+    return draggable ? {
+      icon: false,
+      nodeDraggable: function nodeDraggable() {
+        return true;
+      }
+    } : false;
+  }, [draggable]);
+
+  // 样式类名配置
+  var wrapperClassName = useMemo(function () {
+    return classnames(hashId, cssVarCls, "".concat(prefixCls, "-cw-tree-outer-wrapper"));
+  }, [hashId, cssVarCls, prefixCls]);
+  var treeClassName = useMemo(function () {
+    return classnames("cw-tree", className);
+  }, [className]);
   return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
-    className: classnames(hashId, cssVarCls, "".concat(prefixCls, "-cw-tree-outer-wrapper"))
+    className: wrapperClassName
   }, /*#__PURE__*/React.createElement("div", {
     className: "cw-tree-inner-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
@@ -293,39 +333,24 @@ function CWTree(_ref) {
     onSelect: selfOnSelect,
     expandAction: false,
     multiple: multiple,
-    className: classnames("cw-tree", className),
-    draggable: draggable ? {
-      icon: false,
-      nodeDraggable: function nodeDraggable() {
-        return true;
-      }
-    } : false,
-    onExpand: _onExpand
-  }, expandedConfig, rest, {
+    className: treeClassName,
+    draggable: draggableConfig,
+    onExpand: handleExpand
+  }, expandedConfig, {
+    showIcon: true,
+    treeData: processedTreeData,
+    titleRender: titleRender
+  }, rest, {
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }), children ? children : innerTreeNode))), /*#__PURE__*/React.createElement("div", {
+  }), children))), extraFooter && /*#__PURE__*/React.createElement("div", {
     className: "cw-tree-footer"
   }, extraFooter)));
 }
-CWTree.defaultProps = {
-  showIcon: true,
-  extendType: "button",
-  menuData: function menuData() {
-    return false;
-  },
-  onClickMenu: function onClickMenu(key, treeKey, item, domEvent, props) {
-    console.log(key, treeKey, item, domEvent, props);
-  },
-  searchHighlight: false,
-  searchHighlightStyle: {
-    color: "#F5222D"
-  },
-  draggable: false
-};
 CWTree.propTypes = {
   /**
-   * 列表内容，每一项应当为一个对象，包含图标icon,名称title,键key,子树children。
+   * 列表内容，每一项应当为一个对象。默认包含图标icon,名称title,键key,子树children。
+   * 可通过fieldNames自定义字段名。
    * key需要遵守格式'0-1-1',每一级都从0开始排列，如:第一级第一个key为'0',它的子树第二个key为'0-1'
    */
   treeData: PropTypes.arrayOf(PropTypes.shape({
@@ -334,6 +359,15 @@ CWTree.propTypes = {
     key: PropTypes.string,
     children: PropTypes.array
   })),
+  /**
+   * 自定义字段名映射，允许指定title、key、children的字段名
+   * 例如: { title: 'name', key: 'id', children: 'subItems' }
+   */
+  fieldNames: PropTypes.shape({
+    title: PropTypes.string,
+    key: PropTypes.string,
+    children: PropTypes.string
+  }),
   /**
    * 自定义菜单内容。返回值为数组。function(treeTitle,treeKey,props):[{
    *      title:PropTypes.oneOfType([PropTypes.string,PropTypes.node]),
@@ -395,9 +429,14 @@ CWTree.propTypes = {
    */
   onDrop: PropTypes.func,
   /**
-   * 自定义render node节点
+   * 自定义render node节点标题内容（在基础功能上微调）
+   */
+  renderItem: PropTypes.func,
+  /**
+   * 自定义渲染整个节点（完全自定义，可获得内部渲染结果作为参考）
+   * function(nodeData, internalResult) => ReactNode
    */
-  renderItem: PropTypes.func
+  titleRender: PropTypes.func
 };
 CWTree.TreeNode = TreeNode;
 CWTree.DirectoryTree = DirectoryTree;

package/lib/CWTree/index.style.js

@@ -51,8 +51,10 @@ var genCustomCWTreeStyle = function genCustomCWTreeStyle(token) {
             lineHeight: "32px",
             display: "inline-flex",
             flex: 1,
-            width: "0",
-            position: "static",
+            width: 0,
+            "&:has(.cw-tree-treenode-content)": {
+              position: "static"
+            },
             ".cw-tree-treenode-content": {
               width: "100%",
               ".cw-tree-treenode-title": {