I am using antd "antd": "^5.15.4" tree to let user select the folder tree, when the user selected the folder tree, I want to get the full path from the tree root to select node. This is the current code look like:
import { TexFileModel } from "@/model/file/TexFileModel";
import { TreeFileType } from "@/model/file/TreeFileType";
import { MoveFileReq } from "@/model/request/file/edit/MoveFileReq";
import { mvFile } from "@/service/file/FileService";
import { useState } from "react";
import Tree from 'antd/lib/tree';
import type { GetProps, TreeDataNode } from 'antd';
import 'antd/lib/tree/style';
import React from "react";
type DirectoryTreeProps = GetProps<typeof Tree.DirectoryTree>;
const { DirectoryTree } = Tree;
export type TreeFileEditProps = {
projectId: string;
texFile: TexFileModel;
};
const TreeFileMove: React.FC<TreeFileEditProps> = (props: TreeFileEditProps) => {
const [texFileModel, setTexFileModel] = useState<TreeDataNode[]>();
const [distPath, setDistPath] = useState<string>();
React.useEffect(() => {
let projTree = localStorage.getItem('projTree:' + props.projectId);
if (projTree == null) {
return;
}
let treeNodes: TexFileModel[] = JSON.parse(projTree);
let projFolderTree = treeNodes.filter((node) => node.file_type == TreeFileType.Folder);
const treeData: TreeDataNode[] = convertToTreeDataNode(projFolderTree);
setTexFileModel(treeData);
}, []);
const handleOk = () => {
let req: MoveFileReq = {
project_id: props.projectId,
file_id: props.texFile.file_id,
file_name: props.texFile.name,
parent_id: props.texFile.parent,
file_type: 0,
src_path: props.texFile.file_path,
dist_path: ""
};
mvFile(req);
}
const onSelect: DirectoryTreeProps['onSelect'] = (keys: React.Key[], info) => {
const selectedKey = keys[0];
const selectedNode = info.node;
const fullPath = getFullPath(selectedNode);
console.log('Full path:', fullPath);
};
const getFullPath = (node:TreeDataNode) => {
let path = node.title;
// it seems no parent in node
let parent = node.;
while (parent) {
path = `${parent.title}/${path}`;
parent = parent.parentNode;
}
return path;
};
const onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {
console.log('Trigger Expand', keys, info);
};
const convertToTreeDataNode = (data: TexFileModel[]): TreeDataNode[] => {
return data.map(item => {
const node: TreeDataNode = {
key: String(item.id),
title: item.name,
children: item.children.length > 0 ? convertToTreeDataNode(item.children) : undefined
};
return node;
});
};
return (
<div className="modal fade" id="moveFileModal" aria-labelledby="moveModalLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="moveModalLabel">移动到文件夹</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<DirectoryTree
multiple
defaultExpandAll
onSelect={onSelect}
onExpand={onExpand}
treeData={texFileModel}
/>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" className="btn btn-primary" data-bs-dismiss="modal" onClick={() => { handleOk() }}>确定</button>
</div>
</div>
</div>
</div>
);
}
export default TreeFileMove;
is there any way to get the full path of the tree node?