feat(menu): 代码规范

XiaoMi · Jun 27, 2024 · 5f664df · 5f664df
1 parent 1aba738
commit 5f664df
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 24 deletions.
diff --git 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
@@ -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,35 +58,32 @@ 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]
   }
 
   /**
    * 递归处理树形数组
    */
-  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)
 }