add TreeTabs

render-process/TreeTabs.tsx

@@ -0,0 +1,90 @@
+
+import * as ReactDOM from "react-dom";
+import Editor from "./Editor";
+import React, { Component } from "react";
+import { Layout, Tabs } from 'antd';
+import { ipcRenderer, remote } from 'electron';
+import * as path from 'path';
+import * as fs from 'fs';
+import * as Utils from '../common/Utils';
+import MainEventType from "../common/MainEventType";
+import Properties from "./Properties";
+import Settings from "../main-process/Settings";
+import G6 from '@antv/g6';
+
+import 'antd/dist/antd.dark.css';
+
+const { Header, Sider, Content, Footer } = Layout;
+const { TabPane } = Tabs;
+
+interface TreeTabsProps {
+}
+
+interface TreeTabsState {
+  filepaths: string[];
+  curPath?: string;
+}
+
+export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
+  state: TreeTabsState = {
+    filepaths: [],
+  }
+
+  componentWillMount() {
+  }
+
+  componentDidMount() {
+  }
+
+  openFile(path: string) {
+    console.log("on open file", path);
+    if (this.state.filepaths.indexOf(path) < 0) {
+      const filepaths = this.state.filepaths;
+      filepaths.push(path);
+      this.setState({ filepaths, curPath: path });
+    } else {
+      this.setState({ curPath: path });
+    }
+  }
+
+  render() {
+    console.log("render tabs");
+    const { filepaths, curPath } = this.state;
+    if (!curPath) {
+      return (<div />);
+    }
+    return (
+      <Tabs
+        hideAdd
+        className="tabs"
+        type="editable-card"
+        defaultActiveKey={curPath}
+        activeKey={curPath}
+        onChange={activeKey => {
+          this.setState({ curPath: activeKey })
+        }}
+        onEdit={(targetKey, action) => {
+          if (action == 'remove') {
+            const idx = filepaths.indexOf(targetKey as string);
+            if (idx < 0) {
+              return;
+            }
+            filepaths.splice(idx, 1);
+            const nextPath = filepaths[idx - 1];
+            this.setState({ filepaths, curPath: nextPath });
+          }
+        }}
+      >
+        {
+          filepaths.map(filepath => {
+            return (
+              <TabPane tab={path.basename(filepath)} key={filepath}>
+                <Editor filepath={filepath} />
+              </TabPane>
+            );
+          })
+        }
+      </Tabs>
+    )
+  }
+};