assistant-note/src/components/ItemTree/index.jsx

import React, {useEffect, useMemo, useState} from 'react';
import {Input, Tree} from 'antd';
import {FolderOutlined, FileMarkdownOutlined, FileOutlined, DeleteOutlined, RedoOutlined} from '@ant-design/icons';
import {message, Popconfirm} from 'antd';
import "./index.less"

const {Search} = Input;
import {useSelector, useDispatch} from "react-redux";
import {addExpandedKeys, addTableBarItem, setExpandedKeys} from "../../redux/tableBarItem_reducer";
import {readDir} from "../../utils/File";
import {nextDirAdd} from "../../redux/dirMessage_reducer";
// const defaultData = [];
// 将树平铺用于查找
const dataList = [];
const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const {key, title, icon} = node;
        dataList.push({
            key,
            title,
            icon
        });
        if (node.children) {
            generateList(node.children);
        }
    }
};
// generateList(defaultData);
const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
            if (node.children.some((item) => item.key === key)) {
                parentKey = node.key;
            } else if (getParentKey(key, node.children)) {
                parentKey = getParentKey(key, node.children);
            }
        }
    }
    return parentKey;
};

function generateChildList(fileList) {
    const result = []
    for (let i = 0; i < fileList.length; i++) {
        const {fileName, filePath, dirFlag, childList} = fileList[i];
        const childListM = []
        if (Array.isArray(childList) && childList.length > 0) {
            childListM.push(...generateChildList(childList));
        }
        result.push({
            "key": filePath,
            "title": titleExtended(fileName,dirFlag,filePath),
            "icon": dirFlag ? <FolderOutlined/> : fileName.endsWith(".md") ? <FileMarkdownOutlined/> : <FileOutlined/>,
            "dirFlag": dirFlag,
            "children": childListM
        });
    }
    return result;
}

const titleExtended = (fileName, dirFlag,filePath) => {

    const confirm = (e) => {
        console.log(e);
        message.success('Click on Yes');
    };
    const cancel = (e) => {
        console.log(e);
        message.error('Click on No');
    };
    return <span title = {filePath}>{fileName}
        {dirFlag && <span style={{float: "right"}}>
            <Popconfirm
                title="更新当前目录"
                description="更新当前目录内容"
                onConfirm={confirm}
                onCancel={cancel}
                okText="确认"
                cancelText="取消"
            >
                <RedoOutlined/>
            </Popconfirm>
            <Popconfirm
                title="关闭当前目录"
                description="从列表中移除目录并不会删除本地文件"
                onConfirm={confirm}
                onCancel={cancel}
                okText="确认"
                cancelText="取消"
            >
                <DeleteOutlined/>
            </Popconfirm>
        </span>}
    </span>
}
/**
 * 将文件信息改为树信息
 * @param fileDirDate
 * @returns {*[]}
 */
const flushTree = (fileDirDate) => {
    const defaultValueStateSet = [];
    if (Array.isArray(fileDirDate) && fileDirDate.length > 0) {
        for (let i = 0; i < fileDirDate.length; i++) {
            const node = fileDirDate[i];
            console.log("node:", node)
            const {fileName, filePath, childList, dirFlag} = node;
            const childListM = []
            if (Array.isArray(childList) && childList.length > 0) {
                childListM.push(...generateChildList(childList));
            }
            defaultValueStateSet.push({
                "key": filePath,
                // 修改属性后此处也需要修改
                "title": titleExtended(fileName.substring(fileName.lastIndexOf("/")+1), dirFlag,filePath),
                "icon": <FolderOutlined/>,
                "dirFlag": dirFlag,
                "children": childListM
            });

        }
    }
    return defaultValueStateSet;
}
const ItemTree = (prop) => {
    console.log("prop.filePath:", prop.filePath)
    const dispatch = useDispatch()
    // const [expandedKeys, setExpandedKeys] = useState([]);
    const expandedKeys = useSelector(state => state.tableBarItem.expandedKeyList)
    const [searchValue, setSearchValue] = useState('');
    const [autoExpandParent, setAutoExpandParent] = useState(true);
    // let filePath = useSelector(state => state.dirMessage.data);
    const [defaultValueState, setDefaultValueState] = useState(flushTree(prop.filePath));
    useEffect(() => {
        setDefaultValueState(flushTree(prop.filePath))
    }, [prop]);
    const onExpand = (newExpandedKeys) => {
        dispatch(setExpandedKeys(newExpandedKeys));
        setAutoExpandParent(false);
    };

    const addChildNode = (valueState, fileStateList) => {
        valueState.forEach(file => {
            if (fileStateList[0].key.startsWith(file.key)) {
                if (file.key === fileStateList[0].key) {
                    file.children = fileStateList[0].children
                } else if (Array.isArray(file.children) && file.children.length > 0) {
                    addChildNode(file.children, fileStateList)
                }
            }
        })
    }

    const onChange = (e) => {
        const {value} = e.target;
        const newExpandedKeys = dataList
            .map((item) => {
                if (item.title.indexOf(value) > -1) {
                    return getParentKey(item.key, defaultValueState);
                }
                return null;
            })
            .filter((item, i, self) => !!(item && self.indexOf(item) === i));
        dispatch(setExpandedKeys(newExpandedKeys));
        setSearchValue(value);
        setAutoExpandParent(true);
    };
    const onSelect = (selectedKeys, e) => {
        if (e.selected) {
            console.log('onSelect.selectedKeys', selectedKeys, e)
            if (e.node.dirFlag) {
                // 加载目录下一级文件信息
                if (!Array.isArray(e.node.children) || e.node.children.length === 0) {
                    readDir(e.node.key).then(fileStateList => {
                        if (Array.isArray(fileStateList[0].childList) && fileStateList[0].childList.length > 0) {
                            dispatch(nextDirAdd({selectDirKey: e.node.key, fileStateList}))
                            // 添加下级节点
                            addChildNode(defaultValueState, flushTree(fileStateList))
                            const result = [...defaultValueState]
                            console.log("[...defaultValueState]:", result)
                            setDefaultValueState(result)
                        }
                    })
                }
                // 打开当前目录
                dispatch(addExpandedKeys([e.node.key]));
                setAutoExpandParent(false);
            } else {
                // 打开文件
                dispatch(addTableBarItem({
                    label: e.node.title.props.children[0],
                    children: e.node.key,
                    key: e.node.key,
                    activeKey: e.node.key
                }))
            }
        }
    }
    // const treeData = useMemo(() => {
    //     const loop = (data) =>
    //         data.map((item) => {
    //             const strTitle = item.title;
    //             const index = strTitle.indexOf(searchValue);
    //             const beforeStr = strTitle.substring(0, index);
    //             const afterStr = strTitle.slice(index + searchValue.length);
    //             const title =
    //                 index > -1 ? (
    //                     <span>{beforeStr}
    //                         <span className="site-tree-search-value">{searchValue}</span>{afterStr}</span>
    //                 ) : (
    //                     <span>{strTitle}</span>
    //                 );
    //             if (item.children) {
    //                 return {
    //                     title,
    //                     key: item.key,
    //                     icon: item.icon,
    //                     children: loop(item.children),
    //                 };
    //             }
    //             return {
    //                 title,
    //                 icon: item.icon,
    //                 key: item.key,
    //             };
    //         });
    //     return loop(defaultData);
    // }, [searchValue]);
    return (
        <div style={{height: "100%"}}>
            <Search
                style={{marginBottom: 8,}}
                placeholder="Search"
                onChange={onChange}
            />
            <Tree
                // 展开/收起节点时触发
                onExpand={onExpand}
                //（受控）展开指定的树节点
                expandedKeys={expandedKeys}
                // 是否自动展开父节点
                autoExpandParent={autoExpandParent}
                showIcon={true}
                defaultSelectedKeys={[useSelector(state => state.tableBarItem.activeKey)]}
                defaultExpandedKeys={useSelector(state => state.tableBarItem.expandedKeyList)}
                // treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一）
                treeData={defaultValueState}
                onSelect={onSelect}
            />
        </div>
    );
};
export default ItemTree;