add TreeTabs

render-process/index.tsx

@@ -16,6 +16,7 @@ import 'antd/dist/antd.dark.css';
 import './index.css';
 import { ModelConfig, Item } from "@antv/g6/lib/types";
 import RegisterNode from "./RegisterNode";
+import TreeTabs from "./TreeTabs";
 
 const { Header, Sider, Content, Footer } = Layout;
 const { TabPane } = Tabs;
@@ -23,17 +24,15 @@ const { TabPane } = Tabs;
 
 interface MainState {
   workspace: string;
-  filepaths: string[];
-  curPath?: string;
 }
 
 export default class Main extends Component {
   state: MainState = {
     workspace: '',
-    filepaths: [],
   }
 
   settings: Settings;
+  tabs: TreeTabs;
 
   componentWillMount() {
     this.updateSettings();
@@ -42,7 +41,7 @@ export default class Main extends Component {
 
   componentDidMount() {
     ipcRenderer.on(MainEventType.OPEN_FILE, (event: any, path: any) => {
-      this.openFile(path);
+      this.setState({ curPath: path });
     });
 
     ipcRenderer.on(MainEventType.OPEN_WORKSPACE, (event: any, workspace: any) => {
@@ -62,28 +61,9 @@ export default class Main extends Component {
     this.settings = Utils.getRemoteSettings();
   }
 
-  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 });
-    }
-  }
-
-  renderJson() {
-    const path = this.state.curPath;
-    if (path) {
-      const str = fs.readFileSync(path, 'utf8');
-      return (<div>{str}</div>)
-    }
-  }
-
   render() {
     console.log("render main");
-    const { workspace, filepaths, curPath } = this.state;
+    const { workspace } = this.state;
     document.title = `行为树编辑器 - ${workspace}`;
     return (
       <Layout className="body">
@@ -91,42 +71,16 @@ export default class Main extends Component {
           <Properties
             workspace={this.state.workspace}
             onOpenTree={(path) => {
-              this.openFile(path);
+              this.tabs.openFile(path);
             }}
           />
         </Sider>
         <Content className="content">
-          <Tabs
-            hideAdd
-            className="tabs"
-            type="editable-card"
-            defaultActiveKey={curPath}
-            activeKey={curPath}
-            onChange={activeKey => {
-              this.setState({ curPath: activeKey })
+          <TreeTabs
+            ref = {ref => {
+              this.tabs = ref;
             }}
-            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>
+          />
         </Content>
       </Layout>
     )