feat(FileExplorer): expand & scroll to directly opened file

src/components/FileExplorer.js

@@ -6,6 +6,7 @@ import Node from './Node'
 
 import DOMHelper from '../utils/DOMHelper'
 import treeParser from '../utils/treeParser'
+import URLHelper from '../utils/URLHelper'
 import VisibleNodesGenerator from '../utils/VisibleNodesGenerator'
 
 export default class List extends preact.Component {
@@ -26,6 +27,13 @@ export default class List extends preact.Component {
     const { treeData, metaData } = this.props
     const { root, nodes } = treeParser.parse(treeData, metaData)
     this.visibleNodesGenerator.plantTree(root, nodes)
+    const currentPath = URLHelper.getCurrentPath()
+    if (currentPath.length) {
+      const nodeExpandedTo = this.visibleNodesGenerator.expandTo(currentPath)
+      this.visibleNodesGenerator.focusNode(nodeExpandedTo)
+      const { nodes } = this.visibleNodesGenerator.visibleNodes
+      this.tasksAfterRender.push(() => DOMHelper.scrollToNodeElement(nodes.indexOf(nodeExpandedTo)))
+    }
     this.updateVisibleNodes()
     this.tasksAfterRender.push(DOMHelper.focusFileExplorer)
     this.tasksAfterRender.push(DOMHelper.focusSearchInput)

src/utils/URLHelper.js

@@ -6,17 +6,19 @@ function parseRaw() {
     repoName,
     type,
     branchName,
+    ...path
   ] = pathname.split('/')
   return {
     userName,
     repoName,
     type,
     branchName,
+    path,
   }
 }
 function parse() {
   const parsedData = parseRaw()
-  if (!isInCodePage(parsedData)) {
+  if (!isInCodePage()) {
     delete parsedData.type
     delete parsedData.branchName
   }
@@ -35,7 +37,13 @@ function isInCodePage(metaData = {}) {
   )
 }
 
+function getCurrentPath() {
+  const { path } = parseRaw()
+  return path
+}
+
 export default {
+  getCurrentPath,
   isInCodePage,
   parse,
 }

src/utils/visibleNodesGenerator.js

@@ -91,6 +91,17 @@ export default class VisibleNodesGenerator {
     this.generateVisibleNodes()
   }
 
+  expandTo(path) {
+    let rootNode = this.root
+    let targetPath
+    for (const step of path) {
+      targetPath = rootNode.path ? `${rootNode.path}/${step}` : step
+      rootNode = rootNode.contents.find(node => node.path === targetPath)
+      this.setExpand(rootNode, true)
+    }
+    return rootNode
+  }
+
   visibleNodes = null
   generateVisibleNodes() {
     this.focusedNode = null