feat: fs tree component

render-process/Properties.tsx

@@ -4,6 +4,7 @@ import * as fs from "fs";
 import * as path from "path";
 import { ipcRenderer } from "electron";
 import MainEventType from "../common/MainEventType";
+import Tree from "../fs-tree-view";
 
 const { Search } = Input;
 
@@ -15,6 +16,7 @@ export interface TreeFile {
 export interface PropertiesProps {
     workdir: string;
     onOpenTree: (path: string) => void;
+    onDeleteTree: (path: string) => void;
 }
 
 interface PropertiesState {
@@ -71,19 +73,32 @@ export default class Properties extends Component<PropertiesProps> {
 
     render() {
         console.log("render Properties");
-        const { onOpenTree, workdir } = this.props;
-        const treeList = this.getTreeList(workdir);
-        return (
-            <div>
-                <Search placeholder="Search" onChange={() => {}} />
-                <Menu mode="inline">
-                    {treeList.map((tree) => (
-                        <Menu.Item key={tree.name} onClick={() => onOpenTree(tree.path)}>
-                            {tree.name}
-                        </Menu.Item>
-                    ))}
-                </Menu>
-            </div>
-        );
+        const { onOpenTree, onDeleteTree, workdir } = this.props;
+        //const treeList = this.getTreeList(workdir);
+
+        if (!fs.existsSync(workdir)) {
+            return <div></div>;
+        } else {
+            return (
+                <Tree
+                    className={""}
+                    basePath={workdir || "/"}
+                    disableContextMenu={false}
+                    filter={(path) => {
+                        return path.endsWith(".json");
+                    }}
+                    onItemSelected={(item) => {
+                        if (item.type == "file") {
+                            onOpenTree(item.path);
+                        }
+                    }}
+                    onItemDeleted={(item) => {
+                        if (item.type == "file") {
+                            onDeleteTree(item.path);
+                        }
+                    }}
+                ></Tree>
+            );
+        }
     }
 }

render-process/TreeTabs.tsx

@@ -23,8 +23,6 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
 
     editors: { [path: string]: Editor } = {};
 
-    componentWillMount() {}
-
     componentDidMount() {
         ipcRenderer.on(MainEventType.CREATE_NODE, (event: any, name: any) => {
             const editor = this.getCurEditor();
@@ -74,7 +72,6 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
     }
 
     openFile(path: string) {
-        console.log("on open file", path);
         if (this.state.filepaths.indexOf(path) < 0) {
             const filepaths = this.state.filepaths;
             filepaths.push(path);
@@ -84,6 +81,16 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
         }
     }
 
+    closeFile(path: string) {
+        const index = this.state.filepaths.indexOf(path);
+        if (index >= 0) {
+            const filepaths = this.state.filepaths;
+            filepaths.splice(index,1);
+            const length = filepaths.length;
+            this.setState({ filepaths, curPath: length>0?filepaths[length-1]:null });
+        } 
+    }
+
     render() {
         console.log("render tabs");
         const { filepaths, curPath } = this.state;

render-process/index.tsx

@@ -34,12 +34,10 @@ export default class Main extends Component {
     settings: Settings;
     tabs: TreeTabs;
 
-    componentWillMount() {
+    componentDidMount() {
         this.updateSettings();
         RegisterNode(this.settings);
-    }
 
-    componentDidMount() {
         ipcRenderer.on(MainEventType.OPEN_FILE, (event: any, path: any) => {
             this.setState({ curPath: path });
         });
@@ -73,6 +71,9 @@ export default class Main extends Component {
                         onOpenTree={(path) => {
                             this.tabs.openFile(path);
                         }}
+                        onDeleteTree={(path) => {
+                            this.tabs.closeFile(path);
+                        }}
                     />
                 </Sider>
                 <Content className="content">