From 40b83c28762cf53ba14d925ab6f3644d82fdb198 Mon Sep 17 00:00:00 2001
From: duanhongbo <6860300@qq.com>
Date: Fri, 4 Dec 2020 11:58:10 +0800
Subject: [PATCH] feat: tree selectd support

---
 render-process/Explorer.tsx | 16 +++++++++-------
 render-process/TreeTabs.tsx | 16 ++++++++++++----
 render-process/index.css    | 11 +++++++++++
 render-process/index.tsx    |  8 ++++++++
 4 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/render-process/Explorer.tsx b/render-process/Explorer.tsx
index 42d9734..e4b5302 100644
--- a/render-process/Explorer.tsx
+++ b/render-process/Explorer.tsx
@@ -348,12 +348,19 @@ export default class Explorer extends Component<ExplorerProps> {
         this.forceUpdate();
     }
 
+    selectNode(id:string){
+        this.setState({
+            selectedKey:id
+        })
+    }
+
     renderItem(node: FileDataNode) {
         if(!node.visible){
             return null;
         }
         const titleStr = node.text;
         const searchKey = this.state.searchKey;
+        const isSelected = this.state.selectedKey==node.id;
         const index = titleStr.indexOf(searchKey);
         const beforeStr = titleStr.substr(0, index);
         const afterStr = titleStr.substr(index + searchKey.length);
@@ -361,7 +368,7 @@ export default class Explorer extends Component<ExplorerProps> {
 
         return (
             <div
-                className="explorer-node"
+                className={isSelected?"explorer-node-selected":"explorer-node"}
                 key={node.id}
                 onMouseMove={() => {}}
             >
@@ -407,10 +414,8 @@ export default class Explorer extends Component<ExplorerProps> {
                 <DirectoryTree
                     keygen="id"
                     data={nodes}
-                    line={true}
+                    line={false}
                     doubleClickExpand
-                    // expandIcons={[<DownOutlined />, <RightOutlined />]}
-                    //defaultValue={[root.id]}
                     defaultExpanded={[root.id]}
                     expanded={this.state.expandedKeys}
                     value={[this.state.selectedKey]}
@@ -422,9 +427,6 @@ export default class Explorer extends Component<ExplorerProps> {
                     onClick={(node: FileDataNode) => {
                         if (!node.isFolder) {
                             onOpenTree(node.path);
-                            // this.setState({
-                            //     selectedKey:node.id
-                            // })
                         }
                     }}
                 ></DirectoryTree>
diff --git a/render-process/TreeTabs.tsx b/render-process/TreeTabs.tsx
index d69dcd1..cff3d59 100644
--- a/render-process/TreeTabs.tsx
+++ b/render-process/TreeTabs.tsx
@@ -10,7 +10,9 @@ import { BehaviorTreeModel } from "../common/BehaviorTreeModel";
 
 const { TabPane } = Tabs;
 
-interface TreeTabsProps {}
+interface TreeTabsProps {
+    onTabSelected:(path:string)=>void;
+}
 
 interface TreeTabsState {
     filepaths: string[];
@@ -97,9 +99,13 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
         if (this.state.filepaths.indexOf(path) < 0) {
             const filepaths = this.state.filepaths;
             filepaths.push(path);
-            this.setState({ filepaths, curPath: path });
+            this.setState({ filepaths, curPath: path },()=>{
+                this.props.onTabSelected(path);
+            });
         } else {
-            this.setState({ curPath: path });
+            this.setState({ curPath: path },()=>{
+                this.props.onTabSelected(path);
+            });
         }
     }
 
@@ -128,7 +134,9 @@ export default class TreeTabs extends Component<TreeTabsProps, TreeTabsState> {
                 defaultActiveKey={curPath}
                 activeKey={curPath}
                 onChange={(activeKey) => {
-                    this.setState({ curPath: activeKey });
+                    this.setState({ curPath: activeKey },()=>{
+                        this.props.onTabSelected(activeKey);
+                    });
                 }}
                 onEdit={(targetKey, action) => {
                     if (action == "remove") {
diff --git a/render-process/index.css b/render-process/index.css
index e4161c4..d18597e 100644
--- a/render-process/index.css
+++ b/render-process/index.css
@@ -58,6 +58,17 @@ body {
     color: #ffffff;
 }
 
+.explorer-node-selected {
+    margin: 0;
+    padding: 0;
+    line-height: 20px;
+    white-space: nowrap;
+    list-style: none;
+    outline: 0;
+    color: #ffffff;
+    background-color: #818181;
+}
+
 .explorer-node-title {
     color: #ffffff;
 }
diff --git a/render-process/index.tsx b/render-process/index.tsx
index fc174ce..45712c7 100644
--- a/render-process/index.tsx
+++ b/render-process/index.tsx
@@ -29,6 +29,7 @@ export default class Main extends Component {
 
     settings: Settings;
     tabs: TreeTabs;
+    explorer: Explorer;
     session = 0;
 
     componentDidMount() {
@@ -88,6 +89,9 @@ export default class Main extends Component {
                 <Sider className="sider" width={250}>
                     {workdir !== "" ? (
                         <Explorer
+                            ref={(ref) => {
+                                this.explorer = ref;
+                            }}
                             workdir={workdir}
                             onOpenTree={(path) => {
                                 this.tabs.openFile(path);
@@ -105,6 +109,10 @@ export default class Main extends Component {
                         ref={(ref) => {
                             this.tabs = ref;
                         }}
+                        onTabSelected={(path)=>{
+                            this.explorer.selectNode(path);
+                        }   
+                        }
                     />
                 </Content>
             </Layout>