From 5f664df5cda7be4b04159a2c08c150bbef7e3822 Mon Sep 17 00:00:00 2001
From: xiamiao <xiamiao@xiaomi.com>
Date: Thu, 27 Jun 2024 10:50:49 +0800
Subject: [PATCH] =?UTF-8?q?feat(menu):=20=E4=BB=A3=E7=A0=81=E8=A7=84?=
 =?UTF-8?q?=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/menu/src/Menu.tsx | 20 ++++++++++----------
 packages/ui/menu/src/util.ts  | 26 ++++++++++++--------------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/packages/ui/menu/src/Menu.tsx b/packages/ui/menu/src/Menu.tsx
index b0de0115c..c091e273e 100644
--- a/packages/ui/menu/src/Menu.tsx
+++ b/packages/ui/menu/src/Menu.tsx
@@ -71,18 +71,18 @@ export const Menu = forwardRef<HTMLDivElement | null, MenuProps>(
 
     const [activeParents, updateActiveParents] = useState(() => getAncestorIds(activeId, data))
 
-    data = useMemo(() => {
+    const transformedData = useMemo(() => {
       return transformTreeData(data, fieldNames)
     }, [data, fieldNames])
 
     useEffect(() => {
-      updateActiveParents(getAncestorIds(activeId, data))
-    }, [activeId, data])
+      updateActiveParents(getAncestorIds(activeId, transformedData))
+    }, [activeId, transformedData])
 
     const [expandedIds, updateExpandedIds] = useUncontrolledState(
       () => {
         return defaultExpandAll
-          ? getTreeNodesWithChildren(data).map((node) => node.id)
+          ? getTreeNodesWithChildren(transformedData).map((node) => node.id)
           : defaultExpandedIds
       },
       expandedIdsProp,
@@ -148,15 +148,15 @@ export const Menu = forwardRef<HTMLDivElement | null, MenuProps>(
     const [tagMaxCount, setTagMaxCount] = useState(0)
 
     const mergedTagList = useMemo(() => {
-      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])
 
     const restTagList = useMemo(() => {
-      if (tagMaxCount > 0) return data.slice(tagMaxCount)
+      if (tagMaxCount > 0) return transformedData.slice(tagMaxCount)
       return []
-    }, [data, tagMaxCount])
+    }, [transformedData, tagMaxCount])
 
     const getTagWidth = useCallback(
       (index: number) => {
diff --git a/packages/ui/menu/src/util.ts b/packages/ui/menu/src/util.ts
index 7ebcda63b..6ae78efef 100644
--- a/packages/ui/menu/src/util.ts
+++ b/packages/ui/menu/src/util.ts
@@ -1,6 +1,7 @@
 import { filterTree, cloneTree, getTreeNodesWithChildren } from '@hi-ui/tree-utils'
 import { MenuDataItem } from './types'
-import { HiBaseFieldNames } from '@hi-ui/core'
+import { HiBaseFieldNameKeys, HiBaseFieldNames } from '@hi-ui/core'
+import React from 'react'
 
 // 寻找某一节点的父节点
 export const getParentId = (id: string | number, data: Record<string, any>[]): string | number => {
@@ -57,16 +58,13 @@ export const filterTreeData = (
   )
 }
 
-export const transformTreeData = (
-  data: MenuDataItem[],
-  fieldNames?: HiBaseFieldNames,
-) => {
+export const transformTreeData = (data: MenuDataItem[], fieldNames?: HiBaseFieldNames) => {
   /**
    * 转换对象
    */
-  const getKeyFields = (node: any, key: any) => {
+  const getKeyFields = (node: MenuDataItem, key: HiBaseFieldNameKeys) => {
     if (fieldNames) {
-      return node[(fieldNames as any)[key] || key]
+      return node[(fieldNames[key] || key) as keyof MenuDataItem]
     }
     return node[key]
   }
@@ -74,18 +72,18 @@ export const transformTreeData = (
   /**
    * 递归处理树形数组
    */
-  const traverseNode = (node: MenuDataItem): MenuDataItem => {
+  const traverseTreeNode = (node: MenuDataItem): MenuDataItem => {
     const newNode: MenuDataItem = { ...node }
-    newNode.id = getKeyFields(newNode, 'id')
+    newNode.id = getKeyFields(newNode, 'id') as React.ReactText
     newNode.title = getKeyFields(newNode, 'title')
-    newNode.icon = getKeyFields(newNode, 'icon')
-    newNode.disabled = getKeyFields(newNode, 'disabled') ?? false
-    newNode.children = getKeyFields(newNode, 'children')
+    newNode.icon = getKeyFields(newNode, 'icon' as HiBaseFieldNameKeys)
+    newNode.disabled = (getKeyFields(newNode, 'disabled') ?? false) as boolean
+    newNode.children = getKeyFields(newNode, 'children') as MenuDataItem[]
     if (newNode.children) {
-      newNode.children = newNode.children.map(traverseNode)
+      newNode.children = newNode.children.map(traverseTreeNode)
     }
     return newNode
   }
 
-  return data.map(traverseNode)
+  return data.map(traverseTreeNode)
 }