From 956701cd286b343ab4c9ed17149e14c0ccdb9498 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Thu, 21 Feb 2019 16:33:30 +0800
Subject: [PATCH] feat: performance boost for file explorer

---
 src/components/FileExplorer.tsx | 29 +++++++++++++++++------------
 src/components/Node.tsx         |  4 ++--
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/FileExplorer.tsx b/src/components/FileExplorer.tsx
index 332b83c..b60afe7 100644
--- a/src/components/FileExplorer.tsx
+++ b/src/components/FileExplorer.tsx
@@ -51,7 +51,7 @@ class FileExplorer extends React.Component<Props & ConnectorState> {
 
   renderFiles(visibleNodes: VisibleNodes, onNodeClick: Node['props']['onClick']) {
     const { nodes, depths, focusedNode, expandedNodes } = visibleNodes
-    const { goTo, searchKey, searched } = this.props
+    const { searchKey, searched } = this.props
     const inSearch = searchKey !== ''
     if (inSearch && nodes.length === 0) {
       return <label className={'no-results'}>No results found.</label>
@@ -66,23 +66,28 @@ class FileExplorer extends React.Component<Props & ConnectorState> {
             focused={focusedNode === node}
             expanded={expandedNodes.has(node)}
             onClick={onNodeClick}
-            renderActions={() =>
-              inSearch &&
-              searched && (
-                <div className={'go-to-wrapper'}>
-                  <button className={'go-to-button'} onClick={this.revealNode(goTo, node)}>
-                    <Icon type="go-to" />
-                    &nbsp;Reveal in file tree
-                  </button>
-                </div>
-              )
-            }
+            renderActions={this.renderActions}
           />
         ))}
       </div>
     )
   }
 
+  private renderActions: Node['props']['renderActions'] = node => {
+    const { searchKey, searched, goTo } = this.props
+    return (
+      searchKey &&
+      searched && (
+        <div className={'go-to-wrapper'}>
+          <button className={'go-to-button'} onClick={this.revealNode(goTo, node)}>
+            <Icon type="go-to" />
+            &nbsp; Reveal in file tree
+          </button>
+        </div>
+      )
+    )
+  }
+
   revealNode(
     goTo: (path: string[]) => void,
     node: TreeNode,
diff --git a/src/components/Node.tsx b/src/components/Node.tsx
index 2f4ced4..c40b26b 100644
--- a/src/components/Node.tsx
+++ b/src/components/Node.tsx
@@ -21,7 +21,7 @@ type Props = {
   depth: number
   expanded: boolean
   focused: boolean
-  renderActions?(): React.ReactNode
+  renderActions?(node: TreeNode): React.ReactNode
 }
 export default class Node extends React.PureComponent<Props> {
   onClick: React.MouseEventHandler = event => {
@@ -56,7 +56,7 @@ export default class Node extends React.PureComponent<Props> {
               <Icon type={getIconType(node)} />
               <span className={'node-item-name'}>{name}</span>
             </div>
-            {renderActions && <div>{renderActions()}</div>}
+            {renderActions && <div>{renderActions(node)}</div>}
           </div>
         </a>
       </div>