fix(tree): 修复编辑模式下保存无效问题 (#3017)

.changeset/gorgeous-jars-swim.md

@@ -0,0 +1,7 @@
+---
+"@hi-ui/tree": patch
+"@hi-ui/hiui": patch
+---
+
+fix(tree): 修复编辑模式下保存无效问题 (#3017)
+fix(tree): 修复拖拽和编辑模式下保存时异常问题 (#3022)

packages/ui/tree/src/Tree.tsx

@@ -188,6 +188,7 @@ export const Tree = forwardRef<HTMLUListElement | null, TreeProps>(
         iconRender,
         onContextMenu,
         expandOnSelect,
+        treeData,
       }),
       [
         onNodeSelect,
@@ -211,6 +212,7 @@ export const Tree = forwardRef<HTMLUListElement | null, TreeProps>(
         iconRender,
         onContextMenu,
         expandOnSelect,
+        treeData,
       ]
     )
 
@@ -342,7 +344,11 @@ export interface TreeProps {
   /**
    * 节点结束拖拽时触发
    */
-  onDragEnd?: (evt: React.DragEvent, options: { dragNode: TreeNodeEventData }) => void
+  onDragEnd?: (
+    evt: React.DragEvent,
+    options: { dragNode: TreeNodeEventData },
+    treeData: TreeDataItem[]
+  ) => void
   /**
    * 节点放开时触发，返回 true 表示允许更新拖拽后数据
    */

packages/ui/tree/src/TreeNode.tsx

@@ -60,6 +60,7 @@ export const TreeNode = forwardRef<HTMLLIElement | null, TreeNodeProps>((props,
     expandedIcon: expandIconContext,
     leafIcon: leafIconContext,
     expandOnSelect,
+    treeData,
   } = useTreeContext()
 
   const collapsedIcon = collapseIconContext || collapseIconProp
@@ -118,9 +119,9 @@ export const TreeNode = forwardRef<HTMLLIElement | null, TreeNodeProps>((props,
       setDirection(null)
       setIsDragging(false)
 
-      onDragEndContextLatest(evt, { dragNode: eventNodeRef.current })
+      onDragEndContextLatest(evt, { dragNode: eventNodeRef.current }, treeData)
     },
-    [onDragEndContextLatest, eventNodeRef, dragNodeRef]
+    [dragNodeRef, onDragEndContextLatest, eventNodeRef, treeData]
   )
 
   const onDragLeaveContextLatest = useLatestCallback(onDragLeaveContext)

packages/ui/tree/src/context.ts

@@ -1,5 +1,5 @@
 import React, { createContext, useContext } from 'react'
-import { TreeNodeEventData, TreeNodeDragDirection } from './types'
+import { TreeNodeEventData, TreeNodeDragDirection, TreeDataItem } from './types'
 
 interface TreeContext {
   selectable?: boolean
@@ -8,7 +8,11 @@ interface TreeContext {
   draggable?: boolean
   dragNodeRef: React.MutableRefObject<TreeNodeEventData | null>
   onDragStart?: (evt: React.DragEvent, options: { dragNode: TreeNodeEventData }) => void
-  onDragEnd?: (evt: React.DragEvent, options: { dragNode: TreeNodeEventData }) => void
+  onDragEnd?: (
+    evt: React.DragEvent,
+    options: { dragNode: TreeNodeEventData },
+    data: TreeDataItem[]
+  ) => void
   onDrop?: (
     evt: React.DragEvent,
     dragId: React.ReactText,
@@ -42,6 +46,7 @@ interface TreeContext {
   onContextMenu?: (event: React.MouseEvent, node: TreeNodeEventData) => void
   checkOnSelect: boolean
   expandOnSelect?: boolean
+  treeData: TreeDataItem[]
 }
 
 const treeContext = createContext<TreeContext | null>(null)

packages/ui/tree/src/hooks/use-edit.ts

@@ -89,7 +89,7 @@ export const useEdit = (
         onDeleteRef.current?.(node, nextTreeData)
       }
     },
-    [treeData, setTreeData]
+    [treeData, onBeforeDeleteRef, setTreeData, onDeleteRef]
   )
 
   const onBeforeSaveRef = useLatestRef(onBeforeSave)
@@ -127,7 +127,7 @@ export const useEdit = (
         onSaveRef.current?.(targetNode, nextTreeData)
       }
     },
-    [treeData, setTreeData]
+    [treeData, fieldNames, onBeforeSaveRef, setTreeData, onSaveRef]
   )
 
   return [saveEdit, cancelAddNode, deleteNode, addChildNode, addSiblingNode] as const

packages/ui/tree/src/utils/tree.ts

@@ -5,7 +5,7 @@ import { TreeDataItem, FlattedTreeNodeData } from '../types'
 const EMPTY_FIELD_NAMES = {} as any
 
 export const getKey = (fieldNames: any, key: string): string => {
-  return fieldNames[key] || key
+  return fieldNames?.[key] || key
 }
 
 /**