diff --git a/.changeset/gorgeous-jars-swim.md b/.changeset/gorgeous-jars-swim.md new file mode 100644 index 000000000..20ab1a891 --- /dev/null +++ b/.changeset/gorgeous-jars-swim.md @@ -0,0 +1,7 @@ +--- +"@hi-ui/tree": patch +"@hi-ui/hiui": patch +--- + +fix(tree): 修复编辑模式下保存无效问题 (#3017) +fix(tree): 修复拖拽和编辑模式下保存时异常问题 (#3022) diff --git a/packages/ui/tree/src/Tree.tsx b/packages/ui/tree/src/Tree.tsx index 6ca6d157a..f6900e483 100644 --- a/packages/ui/tree/src/Tree.tsx +++ b/packages/ui/tree/src/Tree.tsx @@ -188,6 +188,7 @@ export const Tree = forwardRef( iconRender, onContextMenu, expandOnSelect, + treeData, }), [ onNodeSelect, @@ -211,6 +212,7 @@ export const Tree = forwardRef( 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 表示允许更新拖拽后数据 */ diff --git a/packages/ui/tree/src/TreeNode.tsx b/packages/ui/tree/src/TreeNode.tsx index 8fccab564..31e6b19ad 100644 --- a/packages/ui/tree/src/TreeNode.tsx +++ b/packages/ui/tree/src/TreeNode.tsx @@ -60,6 +60,7 @@ export const TreeNode = forwardRef((props, expandedIcon: expandIconContext, leafIcon: leafIconContext, expandOnSelect, + treeData, } = useTreeContext() const collapsedIcon = collapseIconContext || collapseIconProp @@ -118,9 +119,9 @@ export const TreeNode = forwardRef((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) diff --git a/packages/ui/tree/src/context.ts b/packages/ui/tree/src/context.ts index 3c85557bc..05c168564 100644 --- a/packages/ui/tree/src/context.ts +++ b/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 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(null) diff --git a/packages/ui/tree/src/hooks/use-edit.ts b/packages/ui/tree/src/hooks/use-edit.ts index 75b5633df..451799ad5 100644 --- a/packages/ui/tree/src/hooks/use-edit.ts +++ b/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 diff --git a/packages/ui/tree/src/utils/tree.ts b/packages/ui/tree/src/utils/tree.ts index 9588a8bfb..da7864245 100644 --- a/packages/ui/tree/src/utils/tree.ts +++ b/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 } /**