256 lines
9.4 KiB
JavaScript
256 lines
9.4 KiB
JavaScript
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; |