feat: virtual file list

package.json

@@ -16,11 +16,13 @@
   "dependencies": {
     "@primer/octicons": "^9.1.1",
     "@sentry/browser": "^5.5.0",
+    "@types/react-window": "^1.8.1",
     "ini": "^1.3.5",
     "js-base64": "^2.5.1",
     "nprogress": "^0.2.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-window": "^1.8.5",
     "safe-touch": "^0.2.2"
   },
   "devDependencies": {

src/components/FileExplorer.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { FixedSizeList as List, ListChildComponentProps } from 'react-window'
 import connect from 'driver/connect'
 import { FileExplorer as FileExplorerCore } from 'driver/core'
 import SearchBar from 'components/SearchBar'
@@ -9,6 +10,7 @@ import { ConnectorState } from 'driver/core/FileExplorer'
 import { TreeData, MetaData } from 'utils/GitHubHelper'
 import { VisibleNodes, TreeNode } from 'utils/VisibleNodesGenerator'
 import Icon from './Icon'
+import SizeObserver from './SizeObserver'
 
 export type Props = {
   treeData?: TreeData
@@ -50,27 +52,53 @@ class FileExplorer extends React.Component<Props & ConnectorState> {
     execAfterRender()
   }
 
-  renderFiles(visibleNodes: VisibleNodes, onNodeClick: Node['props']['onClick']) {
+  VirtualNode = React.memo<ListChildComponentProps>(({ index, style }) => {
+    const { visibleNodes, onNodeClick } = this.props
+    if (!visibleNodes) return null
     const { nodes, depths, focusedNode, expandedNodes } = visibleNodes
-    const { searchKey, searched } = this.props
+    const node = nodes[index]
+    return (
+      <Node
+        style={style}
+        key={node.path}
+        node={node}
+        depth={depths.get(node) || 0}
+        focused={focusedNode === node}
+        expanded={expandedNodes.has(node)}
+        onClick={onNodeClick}
+        renderActions={this.renderActions}
+      />
+    )
+  })
+
+  renderFiles(visibleNodes: VisibleNodes) {
+    const { nodes } = visibleNodes
+    const { searchKey } = this.props
     const inSearch = searchKey !== ''
     if (inSearch && nodes.length === 0) {
       return <label className={'no-results'}>No results found.</label>
     }
     return (
-      <div className={'files'}>
-        {nodes.map(node => (
-          <Node
-            key={node.path}
-            node={node}
-            depth={depths.get(node) || 0}
-            focused={focusedNode === node}
-            expanded={expandedNodes.has(node)}
-            onClick={onNodeClick}
-            renderActions={this.renderActions}
-          />
-        ))}
-      </div>
+      <SizeObserver className={'files'}>
+        {({ width, height }) =>
+          height &&
+          width && (
+            <List
+              itemKey={(index, { nodes }) => {
+                const node = nodes[index]
+                return node && node.path
+              }}
+              itemData={{ nodes }}
+              height={height}
+              itemCount={nodes.length}
+              itemSize={35}
+              width={width}
+            >
+              {this.VirtualNode}
+            </List>
+          )
+        }
+      </SizeObserver>
     )
   }
 
@@ -129,7 +157,7 @@ class FileExplorer extends React.Component<Props & ConnectorState> {
                 onSearchKeyChange={handleSearchKeyChange}
                 onFocus={onFocusSearchBar}
               />
-              {this.renderFiles(visibleNodes, onNodeClick)}
+              {this.renderFiles(visibleNodes)}
             </React.Fragment>
           )
         )}

src/components/Node.tsx

@@ -23,6 +23,7 @@ type Props = {
   expanded: boolean
   focused: boolean
   renderActions?(node: TreeNode): React.ReactNode
+  style?: React.CSSProperties
 }
 export default class Node extends React.PureComponent<Props> {
   onClick: React.MouseEventHandler = event => {
@@ -39,13 +40,13 @@ export default class Node extends React.PureComponent<Props> {
   }
 
   render() {
-    const { node, depth, expanded, focused, renderActions } = this.props
+    const { node, depth, expanded, focused, renderActions, style } = this.props
     const { name, path, virtual } = node
     if (virtual) {
       // this is not a real node
       // for now, all virtual nodes are indicators for pending state
       return (
-        <div className={cx(`node-item-row`, { focused })}>
+        <div className={cx(`node-item-row`, { focused })} style={style}>
           <div className={'node-item'}>
             <LoadingIndicator text={name} />
           </div>
@@ -53,7 +54,11 @@ export default class Node extends React.PureComponent<Props> {
       )
     }
     return (
-      <div className={cx(`node-item-row`, { focused, disabled: node.accessDenied })} title={path}>
+      <div
+        className={cx(`node-item-row`, { focused, disabled: node.accessDenied })}
+        style={style}
+        title={path}
+      >
         <a href={node.url} onClick={this.onClick}>
           <div
             className={cx('node-item', { expanded })}

src/content.less

@@ -332,8 +332,6 @@
           .node-item {
             display: flex;
             justify-content: space-between;
-            word-wrap: normal;
-            word-break: break-all;
             margin: 0;
             color: #0366d6;
             line-height: 20px;
@@ -341,6 +339,7 @@
             cursor: pointer;
             border-top: 1px solid #eaecef;
             transition: all 0.5s ease;
+            white-space: nowrap;
 
             // folder icon rotate when expand
             &.expanded .octicon.octicon-triangle-right {

yarn.lock

@@ -732,6 +732,13 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-transform-typescript" "^7.3.2"
 
+"@babel/runtime@^7.0.0":
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
+  integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
@@ -995,6 +1002,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-window@^1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.1.tgz#6e1ceab2e6f2f78dbf1f774ee0e00f1bb0364bb3"
+  integrity sha512-V3k1O5cbfZIRa0VVbQ81Ekq/7w42CK1SuiB9U1oPMTxv270D9qUn7rHb3sZoqMkIJFfB1NZxaH7NRDlk+ToDsg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.8.24":
   version "16.8.24"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.24.tgz#8d1ea1fcbfa214220da3d3c04e506f1077b0deac"
@@ -3672,6 +3686,11 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+"memoize-one@>=3.1.1 <6":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.5.tgz#8cd3809555723a07684afafcd6f756072ac75d7e"
+  integrity sha512-ey6EpYv0tEaIbM/nTDOpHciXUvd+ackQrJgEzBwemhZZIWZjcyodqEcrmqDy2BKRTM3a65kKBV4WtLXJDt26SQ==
+
 memory-fs@^0.4.0, memory-fs@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@@ -4557,6 +4576,14 @@ react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
+react-window@^1.8.5:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
+  integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
@@ -4601,6 +4628,11 @@ regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
+regenerator-runtime@^0.13.2:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
+  integrity sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==
+
 regenerator-transform@^0.14.0:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"