refactor: use shineout tree replace antd tree
This commit is contained in:
duanhongbo committed
1 parent
af3f00b3b2
commit
8c6991afb3
6 files changed
+420
-153
No files matched your search
@@ -0,0 +1,428 @@
|
||||
import React, { ChangeEvent, Component } from "react";
|
||||
import { Input } from "antd";
|
||||
import { Tree } from "shineout";
|
||||
import {FolderOutlined ,FileOutlined,FolderOpenOutlined} from "@ant-design/icons";
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
import { ipcRenderer } from "electron";
|
||||
import MainEventType from "../common/MainEventType";
|
||||
|
||||
const {Search} = Input;
|
||||
const DirectoryTree = Tree;
|
||||
|
||||
|
||||
class FileDataNode {
|
||||
name: string; //display name
|
||||
filepath: string; //file full path
|
||||
isFolder: boolean;
|
||||
|
||||
parent: FileDataNode;
|
||||
visible: boolean = true;
|
||||
children: FileDataNode[];
|
||||
|
||||
public constructor(init?: Partial<FileDataNode>) {
|
||||
Object.assign(this, init);
|
||||
}
|
||||
|
||||
get id() {
|
||||
return this.filepath;
|
||||
}
|
||||
|
||||
get text() {
|
||||
return this.name;
|
||||
}
|
||||
|
||||
get path() {
|
||||
return this.filepath;
|
||||
}
|
||||
|
||||
public getRenderData() {
|
||||
if (!this.visible) {
|
||||
return null;
|
||||
}
|
||||
let ret = new FileDataNode({
|
||||
name: this.name,
|
||||
filepath: this.filepath,
|
||||
isFolder: this.isFolder,
|
||||
children: new Array(),
|
||||
});
|
||||
|
||||
for (const child of this.children) {
|
||||
const data = child.getRenderData();
|
||||
if (data) {
|
||||
ret.children.push(data);
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
loadChilds(recursive?: boolean) {
|
||||
const folder = this.path;
|
||||
if (folder == "" || !fs.existsSync(folder)) {
|
||||
return [];
|
||||
}
|
||||
const files = fs.readdirSync(folder);
|
||||
const list: FileDataNode[] = [];
|
||||
files.forEach((filename) => {
|
||||
const fullPath = path.join(folder, filename);
|
||||
const stat = fs.statSync(fullPath);
|
||||
const isFolder = stat.isDirectory();
|
||||
const name = isFolder ? filename : filename.slice(0, -5);
|
||||
const node = new FileDataNode({
|
||||
name: name,
|
||||
filepath: fullPath,
|
||||
isFolder: isFolder,
|
||||
parent: this,
|
||||
});
|
||||
|
||||
(node.children =
|
||||
isFolder && recursive ? (node.loadChilds(recursive) as FileDataNode[]) : []),
|
||||
list.push(node);
|
||||
});
|
||||
list.sort((a, b) => {
|
||||
const av = a.isFolder ? 100 : 0;
|
||||
const bv = b.isFolder ? 100 : 0;
|
||||
return bv - av;
|
||||
});
|
||||
return list;
|
||||
}
|
||||
|
||||
|
||||
// async updateChilds(recursive?: boolean): Promise<FileDataNode[]> {
|
||||
// const folder = this.path;
|
||||
// if (folder == "" || !fs.existsSync(folder)) {
|
||||
// return [];
|
||||
// }
|
||||
// this.loading = true;
|
||||
// await fs.promises.readdir(folder).then((files) => {
|
||||
// this.loading = false;
|
||||
// let list = new Array<FileDataNode>();
|
||||
// files.forEach((filename) => {
|
||||
// const fullPath = path.join(folder, filename);
|
||||
// const stat = fs.statSync(fullPath);
|
||||
// const isFolder = stat.isDirectory();
|
||||
// const name = isFolder ? filename : filename.slice(0, -5);
|
||||
// const node = new FileDataNode({
|
||||
// name: name,
|
||||
// filepath: fullPath,
|
||||
// isFolder: isFolder,
|
||||
// parent: this,
|
||||
// children: [],
|
||||
// });
|
||||
|
||||
// if (isFolder && recursive) {
|
||||
// node.updateChilds(recursive).then((children)=>{
|
||||
// node.children = children;
|
||||
// });
|
||||
// }
|
||||
// list.push(node);
|
||||
// });
|
||||
// list.sort((a, b) => {
|
||||
// const av = a.isFolder ? 100 : 0;
|
||||
// const bv = b.isFolder ? 100 : 0;
|
||||
// return bv - av;
|
||||
// });
|
||||
// this.children = list;
|
||||
// });
|
||||
// return this.children;
|
||||
// }
|
||||
|
||||
addChild(filePath: string) {
|
||||
const isDir = fs.statSync(filePath).isDirectory();
|
||||
const newNode = new FileDataNode({
|
||||
name: path.basename(filePath),
|
||||
filepath: filePath,
|
||||
isFolder: isDir,
|
||||
parent: this,
|
||||
children: [],
|
||||
});
|
||||
this.children = [newNode, ...this.children];
|
||||
}
|
||||
|
||||
removeFromParent() {
|
||||
const parent = this.parent;
|
||||
if (parent) {
|
||||
const index = parent.children.indexOf(this);
|
||||
parent.children.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
expandSelf(recursive: boolean = true) {
|
||||
if (this.isFolder) {
|
||||
this.children = this.loadChilds(recursive);
|
||||
}
|
||||
}
|
||||
|
||||
findChild(id: string): FileDataNode {
|
||||
for (const child of this.children) {
|
||||
if (child.id == id) {
|
||||
return child;
|
||||
} else {
|
||||
const ret = child.findChild(id);
|
||||
if (ret) {
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getList(): FileDataNode[] {
|
||||
let ret = new Array<FileDataNode>(this);
|
||||
for (const child of this.children) {
|
||||
const childList = child.getList();
|
||||
ret.push(...childList);
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
setVisible(keyWord: string) {
|
||||
let ret = false;
|
||||
for (let i = this.children.length - 1; i >= 0; i--) {
|
||||
const child = this.children[i];
|
||||
if (!child.isFolder) {
|
||||
const keyStr = child.id;
|
||||
child.visible = keyStr.includes(keyWord);
|
||||
} else {
|
||||
child.visible = child.setVisible(keyWord);
|
||||
}
|
||||
ret = child.visible || ret;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
// name:string;
|
||||
// path: string;
|
||||
// isFolder : boolean;
|
||||
// isEditing?: boolean;
|
||||
// children?: NodeData[];
|
||||
}
|
||||
|
||||
export interface ExplorerProps {
|
||||
workdir: string;
|
||||
onOpenTree: (path: string) => void;
|
||||
onDeleteTree: (path: string) => void;
|
||||
}
|
||||
|
||||
|
||||
interface ExplorerState {
|
||||
root: FileDataNode;
|
||||
searchKey: string;
|
||||
selectedKey: string;
|
||||
defaultExpandedKeys: string[];
|
||||
expandedKeys: string[];
|
||||
autoExpandParent: boolean;
|
||||
rightClickNode: {
|
||||
pageX: number;
|
||||
pageY: number;
|
||||
key: string;
|
||||
};
|
||||
}
|
||||
|
||||
const NodeActions: { [x: string]: string } = {
|
||||
["create"]: "New Tree",
|
||||
["createFolder"]: "New Folder",
|
||||
["rename"]: "Rename",
|
||||
["delete"]: "Delete",
|
||||
["reveal_in_explorer"]: "Reveal In File Explorer",
|
||||
};
|
||||
|
||||
export default class Explorer extends Component<ExplorerProps> {
|
||||
state: ExplorerState = {
|
||||
root: this.getRootNode(this.props.workdir),
|
||||
searchKey: "",
|
||||
selectedKey: "",
|
||||
rightClickNode: null,
|
||||
expandedKeys: [],
|
||||
defaultExpandedKeys: [],
|
||||
autoExpandParent: true,
|
||||
};
|
||||
|
||||
curWorkdir: string = "";
|
||||
|
||||
shouldComponentUpdate(nextProps: ExplorerProps) {
|
||||
const shouldUpdate = this.curWorkdir != nextProps.workdir;
|
||||
this.curWorkdir = nextProps.workdir;
|
||||
return shouldUpdate;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
ipcRenderer.on(MainEventType.CREATE_TREE, (event: any, path: string) => {
|
||||
console.log("on Create tree", path);
|
||||
this.props.onOpenTree(path);
|
||||
this.state.root.expandSelf();
|
||||
this.forceUpdate();
|
||||
});
|
||||
|
||||
ipcRenderer.on(MainEventType.OPEN_DIR, (event: any, workdir: any, workspace: string) => {
|
||||
console.log("prop on open workspace", workspace);
|
||||
this.updateRoot();
|
||||
this.forceUpdate();
|
||||
});
|
||||
|
||||
this.updateRoot();
|
||||
}
|
||||
|
||||
updateRoot() {
|
||||
var workdir = this.props.workdir;
|
||||
if (!workdir || workdir === "") {
|
||||
return;
|
||||
}
|
||||
const root = this.getRootNode(workdir);
|
||||
root.expandSelf()
|
||||
this.setState({
|
||||
root: root,
|
||||
expandedKeys: [root.id],
|
||||
defaultExpandedKeys: [root.id],
|
||||
});
|
||||
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
getRootNode(workdir: string) {
|
||||
return new FileDataNode({
|
||||
name: path.basename(workdir),
|
||||
filepath: workdir,
|
||||
isFolder: true,
|
||||
parent: null,
|
||||
children: []
|
||||
});
|
||||
}
|
||||
|
||||
// renderContextMeun(selectedNode: FileDataNode) {
|
||||
// const actions = Object.keys(NodeActions);
|
||||
// return (
|
||||
// <Menu>
|
||||
// {actions.map((action) => {
|
||||
// const displayName: string = NodeActions[action];
|
||||
// return (
|
||||
// <Menu.Item
|
||||
// key={action}
|
||||
// onClick={(info) => {
|
||||
// //this.handleContextMenu({ node: selectedNode, action:{action} });
|
||||
// }}
|
||||
// >{displayName}
|
||||
// </Menu.Item>
|
||||
// );
|
||||
// })}
|
||||
// </Menu>
|
||||
// );
|
||||
// }
|
||||
|
||||
handleOnSearch(value: string) {
|
||||
const expandedKeys = this.state.root
|
||||
.getList()
|
||||
.map((item) => {
|
||||
if (item.isFolder) return null;
|
||||
const title = item.text;
|
||||
if (title.includes(value) && item.parent) {
|
||||
return item.parent.id;
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((item, i, self) => item && self.indexOf(item) === i);
|
||||
|
||||
const root = this.state.root;
|
||||
root.setVisible(value || "");
|
||||
if (value && value.length > 0) {
|
||||
this.setState({
|
||||
root: root,
|
||||
searchKey: value,
|
||||
expandedKeys: expandedKeys,
|
||||
autoExpandParent: true,
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
root: root,
|
||||
searchKey: "",
|
||||
expandedKeys: this.state.defaultExpandedKeys,
|
||||
autoExpandParent: false,
|
||||
});
|
||||
}
|
||||
|
||||
this.forceUpdate();
|
||||
}
|
||||
|
||||
renderItem(node: FileDataNode) {
|
||||
if(!node.visible){
|
||||
return null;
|
||||
}
|
||||
const titleStr = node.text;
|
||||
const searchKey = this.state.searchKey;
|
||||
const index = titleStr.indexOf(searchKey);
|
||||
const beforeStr = titleStr.substr(0, index);
|
||||
const afterStr = titleStr.substr(index + searchKey.length);
|
||||
const expended = this.state.expandedKeys.includes(node.id );
|
||||
|
||||
return (
|
||||
<div
|
||||
className="explorer-node"
|
||||
key={node.id}
|
||||
onMouseMove={() => {}}
|
||||
>
|
||||
{node.isFolder?(expended?<FolderOpenOutlined />:<FolderOutlined />):<FileOutlined />}
|
||||
{!node.isFolder && index > -1 ? (
|
||||
<span className="explorer-node-title">
|
||||
{beforeStr}
|
||||
<span className="explorer-node-search-value">{searchKey}</span>
|
||||
{afterStr}
|
||||
</span>
|
||||
) : (
|
||||
<span className="explorer-node-title">{titleStr}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log("render Explorer");
|
||||
const { onOpenTree, onDeleteTree, workdir } = this.props;
|
||||
|
||||
const root = this.state.root;
|
||||
if (!workdir || workdir === "") {
|
||||
return `请打开workspace.json文件`;
|
||||
}
|
||||
|
||||
const nodes = root ? [root.getRenderData()] : [];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Search
|
||||
allowClear
|
||||
placeholder="Search"
|
||||
// onChange={(e) => {
|
||||
// const value = e.target.value?.toLowerCase();
|
||||
// this.handleOnSearch(value);
|
||||
// }}
|
||||
onSearch={(value, event) => {
|
||||
this.handleOnSearch(value?.toLowerCase());
|
||||
}}
|
||||
/>
|
||||
|
||||
<DirectoryTree
|
||||
keygen="id"
|
||||
data={nodes}
|
||||
line={true}
|
||||
doubleClickExpand
|
||||
// expandIcons={[<DownOutlined />, <RightOutlined />]}
|
||||
//defaultValue={[root.id]}
|
||||
defaultExpanded={[root.id]}
|
||||
expanded={this.state.expandedKeys}
|
||||
value={[this.state.selectedKey]}
|
||||
onExpand={(expanded)=>{
|
||||
this.setState({ expandedKeys: expanded })
|
||||
}}
|
||||
renderItem={this.renderItem.bind(this)}
|
||||
onClick={(node: FileDataNode) => {
|
||||
if (!node.isFolder) {
|
||||
onOpenTree(node.path);
|
||||
this.setState({
|
||||
selectedKey:node.id
|
||||
})
|
||||
}
|
||||
}}
|
||||
></DirectoryTree>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user