how to get the full path of antd tree

21 Views Asked by At

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?

0

There are 0 best solutions below