113 lines
2.7 KiB
TypeScript
113 lines
2.7 KiB
TypeScript
import styles from "./SideTree.module.scss";
|
|
import { Flex } from "antd";
|
|
import { Tree } from "antd";
|
|
import { DownOutlined } from "@ant-design/icons";
|
|
import type { TreeProps } from "antd";
|
|
import { useEffect, useState } from "react";
|
|
|
|
// const treeData: TreeDataNode[] = [
|
|
// {
|
|
// title: "文件: Test.exe",
|
|
// key: "0-0",
|
|
// children: [
|
|
// {
|
|
// title: "Dos 头部",
|
|
// key: "0-0-0",
|
|
// },
|
|
// {
|
|
// title: "Nt 头部",
|
|
// key: "0-0-1",
|
|
// children: [
|
|
// {
|
|
// title: "文件头部",
|
|
// key: "0-0-1-0",
|
|
// },
|
|
// {
|
|
// title: "可选头部",
|
|
// key: "0-0-2-0",
|
|
// children: [
|
|
// {
|
|
// title: "数据目录",
|
|
// key: "0-0-1-1",
|
|
// },
|
|
// ],
|
|
// },
|
|
// ],
|
|
// },
|
|
// {
|
|
// title: "节 头部",
|
|
// key: "0-0-2",
|
|
// },
|
|
// {
|
|
// title: "导入目录",
|
|
// key: "0-0-3",
|
|
// },
|
|
// {
|
|
// title: "资源目录",
|
|
// key: "0-0-4",
|
|
// },
|
|
// {
|
|
// title: "地址转换",
|
|
// key: "0-0-5",
|
|
// },
|
|
// {
|
|
// title: "依赖性分析",
|
|
// key: "0-0-6",
|
|
// },
|
|
// ],
|
|
// },
|
|
// ];
|
|
|
|
export default function SiderTree({ treeData, defaultSelectedKey }) {
|
|
// 展开的节点
|
|
const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
|
|
|
|
// 受控 选择的节点
|
|
const [selectedKey, setSelectedKey] = useState<string>(defaultSelectedKey);
|
|
|
|
const onSelect: TreeProps["onSelect"] = (selectedKeys, info) => {
|
|
console.log("selected", selectedKeys, info);
|
|
setSelectedKey(selectedKeys[0] as any);
|
|
};
|
|
|
|
const onExpand: TreeProps["onExpand"] = (_expandedKeys) => {
|
|
setExpandedKeys(_expandedKeys as any);
|
|
};
|
|
|
|
// 每次 treeData 变化时，更新 expandedKeys
|
|
useEffect(() => {
|
|
// 递归获取所有的 key
|
|
const getKeys = (nodes) => {
|
|
const keys = nodes.map((node) => node.key);
|
|
nodes.forEach((node) => {
|
|
if (node.children) {
|
|
keys.push(...getKeys(node.children));
|
|
}
|
|
});
|
|
return keys;
|
|
};
|
|
setExpandedKeys(getKeys(treeData));
|
|
// 设置默认选中的节点
|
|
setSelectedKey(defaultSelectedKey);
|
|
}, [treeData]);
|
|
console.log("selectedKey", selectedKey);
|
|
|
|
return (
|
|
<Flex className={styles.root}>
|
|
<Tree
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
}}
|
|
showLine
|
|
treeData={treeData}
|
|
selectedKeys={[selectedKey]}
|
|
switcherIcon={<DownOutlined />}
|
|
onSelect={onSelect}
|
|
onExpand={onExpand}
|
|
expandedKeys={expandedKeys}
|
|
/>
|
|
</Flex>
|
|
);
|
|
}
|