@vtx/components 4.0.0-beta.7 → 4.0.0-beta.9

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,8 +20,8 @@ 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';
@@ -30,16 +30,16 @@ import { useStyle } from "./style/index";
 import { VtxProvider, useIntl } from "../vtx-provider";
 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 +63,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 +95,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 +143,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 +159,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 +171,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 +193,15 @@ 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);
+      setHeight(treeRef.current.offsetHeight);
     });
     if (treeRef.current) {
-      resizeObserver.observe(treeRef === null || treeRef === void 0 ? void 0 : treeRef.current, {
+      resizeObserver.observe(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);
+    setHeight(treeRef.current.offsetHeight);
     return function () {
       resizeObserver.disconnect();
     };
@@ -252,6 +253,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, {
@@ -287,28 +303,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 +367,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 +375,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

@@ -58,6 +58,10 @@ 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,