@hi-ui/menu 4.2.2-alpha.0 → 4.3.0

package/CHANGELOG.md

@@ -1,19 +1,25 @@
 # @hi-ui/menu
 
-## 4.2.2-alpha.0
+## 4.3.0
+
+### Minor Changes
+
+- [#2880](https://github.com/XiaoMi/hiui/pull/2880) [`1b46f791f`](https://github.com/XiaoMi/hiui/commit/1b46f791f99c20a946250c2921f3362304e86371) Thanks [@xiamiao1121](https://github.com/xiamiao1121)! - feat: 新增支持配置字段别名
+
+## 4.2.2
 
 ### Patch Changes
 
-- 1a00f9fc4: build: style-inject(node 环境下有问题) 替换为 @hi-ui/style-inject
-- Updated dependencies [1a00f9fc4]
-  - @hi-ui/env@4.0.5-alpha.0
-  - @hi-ui/icons@4.0.19-alpha.0
-  - @hi-ui/popper@4.1.5-alpha.0
-  - @hi-ui/scrollbar@4.1.1-alpha.0
-  - @hi-ui/tooltip@4.0.11-alpha.0
-  - @hi-ui/array-utils@4.0.5-alpha.0
-  - @hi-ui/classname@4.0.5-alpha.0
-  - @hi-ui/core@4.0.9-alpha.0
+- [#2791](https://github.com/XiaoMi/hiui/pull/2791) [`1a00f9fc4`](https://github.com/XiaoMi/hiui/commit/1a00f9fc4a44619059d7852e846b54fedbd56715) Thanks [@zyprepare](https://github.com/zyprepare)! - build: style-inject(node 环境下有问题) 替换为 @hi-ui/style-inject
+
+- Updated dependencies [[`1a00f9fc4`](https://github.com/XiaoMi/hiui/commit/1a00f9fc4a44619059d7852e846b54fedbd56715)]:
+  - @hi-ui/env@4.0.5
+  - @hi-ui/icons@4.0.19
+  - @hi-ui/popper@4.1.5
+  - @hi-ui/scrollbar@4.1.1
+  - @hi-ui/tooltip@4.0.11
+  - @hi-ui/array-utils@4.0.5
+  - @hi-ui/classname@4.0.5
 
 ## 4.2.1
 

package/lib/cjs/Menu.js

@@ -52,6 +52,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     className = _a.className,
     _a$data = _a.data,
     data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
+    fieldNames = _a.fieldNames,
     _a$placement = _a.placement,
     placement = _a$placement === void 0 ? 'vertical' : _a$placement,
     _a$showCollapse = _a.showCollapse,
@@ -81,7 +82,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     onClick = _a.onClick,
     _a$size = _a.size,
     size = _a$size === void 0 ? 'lg' : _a$size,
-    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
+    rest = tslib.__rest(_a, ["prefixCls", "role", "className", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
   var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultActiveId, activeIdProp, onClick),
     activeId = _useUncontrolledState[0],
     updateActiveId = _useUncontrolledState[1];
@@ -90,11 +91,14 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }),
     activeParents = _useState[0],
     updateActiveParents = _useState[1];
+  var transformedData = React.useMemo(function () {
+    return util.transformTreeData(data, fieldNames);
+  }, [data, fieldNames]);
   React.useEffect(function () {
-    updateActiveParents(util.getAncestorIds(activeId, data));
-  }, [activeId, data]);
+    updateActiveParents(util.getAncestorIds(activeId, transformedData));
+  }, [activeId, transformedData]);
   var _useUncontrolledState2 = useUncontrolledState.useUncontrolledState(function () {
-      return defaultExpandAll ? treeUtils.getTreeNodesWithChildren(data).map(function (node) {
+      return defaultExpandAll ? treeUtils.getTreeNodesWithChildren(transformedData).map(function (node) {
         return node.id;
       }) : defaultExpandedIds;
     }, expandedIdsProp, onExpand),
@@ -152,14 +156,14 @@ var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     tagMaxCount = _useState4[0],
     setTagMaxCount = _useState4[1];
   var mergedTagList = React.useMemo(function () {
-    if (showVertical) return data;
-    if (containerWidth < MIN_WIDTH) return data;
-    return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
-  }, [showVertical, data, containerWidth]);
+    if (showVertical) return transformedData;
+    if (containerWidth < MIN_WIDTH) return transformedData;
+    return transformedData.slice(0, Math.min(transformedData.length, containerWidth / MIN_WIDTH));
+  }, [showVertical, transformedData, containerWidth]);
   var restTagList = React.useMemo(function () {
-    if (tagMaxCount > 0) return data.slice(tagMaxCount);
+    if (tagMaxCount > 0) return transformedData.slice(tagMaxCount);
     return [];
-  }, [data, tagMaxCount]);
+  }, [transformedData, tagMaxCount]);
   var getTagWidth = React.useCallback(function (index) {
     if (!containerElement) return MIN_WIDTH;
     var elements = containerElement.getElementsByClassName('hi-v4-menu-item');

package/lib/cjs/util.js

@@ -62,7 +62,36 @@ var filterTreeData = function filterTreeData(treeData, searchKey, activeId) {
     return d.title.includes && d.title.includes(searchKey);
   })) !== null && _d !== void 0 ? _d : [];
 };
+var transformTreeData = function transformTreeData(data, fieldNames) {
+  /**
+   * 转换对象
+   */
+  var getKeyFields = function getKeyFields(node, key) {
+    if (fieldNames) {
+      return node[fieldNames[key] || key];
+    }
+    return node[key];
+  };
+  /**
+   * 递归处理树形数组
+   */
+  var traverseTreeNode = function traverseTreeNode(node) {
+    var _a;
+    var newNode = Object.assign({}, node);
+    newNode.id = getKeyFields(newNode, 'id');
+    newNode.title = getKeyFields(newNode, 'title');
+    newNode.icon = getKeyFields(newNode, 'icon');
+    newNode.disabled = (_a = getKeyFields(newNode, 'disabled')) !== null && _a !== void 0 ? _a : false;
+    newNode.children = getKeyFields(newNode, 'children');
+    if (newNode.children) {
+      newNode.children = newNode.children.map(traverseTreeNode);
+    }
+    return newNode;
+  };
+  return data.map(traverseTreeNode);
+};
 exports.filterTreeData = filterTreeData;
 exports.getAncestorIds = getAncestorIds;
 exports.getIdsWithChildren = getIdsWithChildren;
 exports.getParentId = getParentId;
+exports.transformTreeData = transformTreeData;

package/lib/esm/Menu.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React, { forwardRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
+import React, { forwardRef, useState, useMemo, useEffect, useCallback, useLayoutEffect } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { MenuUnfoldOutlined, MenuFoldOutlined } from '@hi-ui/icons';
 import { __DEV__ } from '@hi-ui/env';
@@ -22,7 +22,7 @@ import { useMergeRefs } from '@hi-ui/use-merge-refs';
 import { uuid } from '@hi-ui/use-id';
 import { MenuItem } from './MenuItem.js';
 import MenuContext from './context.js';
-import { getAncestorIds } from './util.js';
+import { getAncestorIds, transformTreeData } from './util.js';
 var MENU_PREFIX = getPrefixCls('menu');
 var DEFAULT_EXPANDED_IDS = [];
 var NOOP_ARRAY = [];
@@ -39,6 +39,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     className = _a.className,
     _a$data = _a.data,
     data = _a$data === void 0 ? NOOP_ARRAY : _a$data,
+    fieldNames = _a.fieldNames,
     _a$placement = _a.placement,
     placement = _a$placement === void 0 ? 'vertical' : _a$placement,
     _a$showCollapse = _a.showCollapse,
@@ -68,7 +69,7 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     onClick = _a.onClick,
     _a$size = _a.size,
     size = _a$size === void 0 ? 'lg' : _a$size,
-    rest = __rest(_a, ["prefixCls", "role", "className", "data", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
+    rest = __rest(_a, ["prefixCls", "role", "className", "data", "fieldNames", "placement", "showCollapse", "expandedType", "showAllSubMenus", "defaultExpandAll", "defaultExpandedIds", "expandedIds", "onExpand", "defaultActiveId", "activeId", "onClickSubMenu", "collapsed", "defaultCollapsed", "overlayClassName", "onCollapse", "footerRender", "render", "extraHeader", "onClick", "size"]);
   var _useUncontrolledState = useUncontrolledState(defaultActiveId, activeIdProp, onClick),
     activeId = _useUncontrolledState[0],
     updateActiveId = _useUncontrolledState[1];
@@ -77,11 +78,14 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     }),
     activeParents = _useState[0],
     updateActiveParents = _useState[1];
+  var transformedData = useMemo(function () {
+    return transformTreeData(data, fieldNames);
+  }, [data, fieldNames]);
   useEffect(function () {
-    updateActiveParents(getAncestorIds(activeId, data));
-  }, [activeId, data]);
+    updateActiveParents(getAncestorIds(activeId, transformedData));
+  }, [activeId, transformedData]);
   var _useUncontrolledState2 = useUncontrolledState(function () {
-      return defaultExpandAll ? getTreeNodesWithChildren(data).map(function (node) {
+      return defaultExpandAll ? getTreeNodesWithChildren(transformedData).map(function (node) {
         return node.id;
       }) : defaultExpandedIds;
     }, expandedIdsProp, onExpand),
@@ -139,14 +143,14 @@ var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
     tagMaxCount = _useState4[0],
     setTagMaxCount = _useState4[1];
   var mergedTagList = useMemo(function () {
-    if (showVertical) return data;
-    if (containerWidth < MIN_WIDTH) return data;
-    return data.slice(0, Math.min(data.length, containerWidth / MIN_WIDTH));
-  }, [showVertical, data, containerWidth]);
+    if (showVertical) return transformedData;
+    if (containerWidth < MIN_WIDTH) return transformedData;
+    return transformedData.slice(0, Math.min(transformedData.length, containerWidth / MIN_WIDTH));
+  }, [showVertical, transformedData, containerWidth]);
   var restTagList = useMemo(function () {
-    if (tagMaxCount > 0) return data.slice(tagMaxCount);
+    if (tagMaxCount > 0) return transformedData.slice(tagMaxCount);
     return [];
-  }, [data, tagMaxCount]);
+  }, [transformedData, tagMaxCount]);
   var getTagWidth = useCallback(function (index) {
     if (!containerElement) return MIN_WIDTH;
     var elements = containerElement.getElementsByClassName('hi-v4-menu-item');

package/lib/esm/util.js

@@ -57,4 +57,32 @@ var filterTreeData = function filterTreeData(treeData, searchKey, activeId) {
     return d.title.includes && d.title.includes(searchKey);
   })) !== null && _d !== void 0 ? _d : [];
 };
-export { filterTreeData, getAncestorIds, getIdsWithChildren, getParentId };
+var transformTreeData = function transformTreeData(data, fieldNames) {
+  /**
+   * 转换对象
+   */
+  var getKeyFields = function getKeyFields(node, key) {
+    if (fieldNames) {
+      return node[fieldNames[key] || key];
+    }
+    return node[key];
+  };
+  /**
+   * 递归处理树形数组
+   */
+  var traverseTreeNode = function traverseTreeNode(node) {
+    var _a;
+    var newNode = Object.assign({}, node);
+    newNode.id = getKeyFields(newNode, 'id');
+    newNode.title = getKeyFields(newNode, 'title');
+    newNode.icon = getKeyFields(newNode, 'icon');
+    newNode.disabled = (_a = getKeyFields(newNode, 'disabled')) !== null && _a !== void 0 ? _a : false;
+    newNode.children = getKeyFields(newNode, 'children');
+    if (newNode.children) {
+      newNode.children = newNode.children.map(traverseTreeNode);
+    }
+    return newNode;
+  };
+  return data.map(traverseTreeNode);
+};
+export { filterTreeData, getAncestorIds, getIdsWithChildren, getParentId, transformTreeData };

package/lib/types/Menu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
+import { HiBaseFieldNames, HiBaseHTMLProps, HiBaseSizeEnum } from '@hi-ui/core';
 import { MenuDataItem, MenuFooterRenderProps } from './types';
 /**
  * 菜单
@@ -10,6 +10,10 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
      * 菜单项数据列表
      */
     data: MenuDataItem[];
+    /**
+     * 设置 data 中 id, title, disabled, children 对应的 key
+     */
+    fieldNames?: HiBaseFieldNames;
     /**
      * 默认激活的菜单项 id
      */

package/lib/types/util.d.ts

@@ -1,6 +1,8 @@
-/// <reference types="react" />
 import { MenuDataItem } from './types';
+import { HiBaseFieldNames } from '@hi-ui/core';
+import React from 'react';
 export declare const getParentId: (id: string | number, data: Record<string, any>[]) => string | number;
 export declare const getAncestorIds: (id: string | number, data: Record<string, any>[], arr?: (string | number)[]) => (string | number)[];
-export declare const getIdsWithChildren: (treeData: MenuDataItem[]) => import("react").ReactText[];
+export declare const getIdsWithChildren: (treeData: MenuDataItem[]) => React.ReactText[];
 export declare const filterTreeData: (treeData: MenuDataItem[], searchKey: string, activeId: string | number) => MenuDataItem[];
+export declare const transformTreeData: (data: MenuDataItem[], fieldNames?: HiBaseFieldNames | undefined) => MenuDataItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/menu",
-  "version": "4.2.2-alpha.0",
+  "version": "4.3.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -43,14 +43,14 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/array-utils": "^4.0.5-alpha.0",
-    "@hi-ui/classname": "^4.0.5-alpha.0",
-    "@hi-ui/env": "^4.0.5-alpha.0",
-    "@hi-ui/icons": "^4.0.19-alpha.0",
-    "@hi-ui/popper": "^4.1.5-alpha.0",
-    "@hi-ui/scrollbar": "^4.1.1-alpha.0",
+    "@hi-ui/array-utils": "^4.0.5",
+    "@hi-ui/classname": "^4.0.5",
+    "@hi-ui/env": "^4.0.5",
+    "@hi-ui/icons": "^4.0.19",
+    "@hi-ui/popper": "^4.1.5",
+    "@hi-ui/scrollbar": "^4.1.1",
     "@hi-ui/times": "^4.0.4",
-    "@hi-ui/tooltip": "^4.0.11-alpha.0",
+    "@hi-ui/tooltip": "^4.0.11",
     "@hi-ui/tree-utils": "^4.1.5",
     "@hi-ui/type-assertion": "^4.0.4",
     "@hi-ui/use-id": "^4.0.4",
@@ -61,12 +61,12 @@
     "react-transition-group": "^4.4.2"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=4.0.9-alpha.0",
+    "@hi-ui/core": ">=4.0.8",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^4.0.9-alpha.0",
+    "@hi-ui/core": "^4.0.8",
     "@hi-ui/core-css": "^4.1.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"