filetree arrow key navigation

app/components/FileTree/actions.js

@@ -4,23 +4,31 @@ import api from '../../api'
 import * as TabActions from '../Tab/actions'
 
 export const FILETREE_SELECT_NODE = 'FILETREE_SELECT_NODE'
+export const FILETREE_SELECT_NODE_KEY = 'FILETREE_SELECT_NODE_KEY'
 export function selectNode (node, multiSelect = false) {
-  return {
-    type: FILETREE_SELECT_NODE,
-    node,
-    multiSelect
+  if (typeof node === 'number') {
+    return {
+      type: FILETREE_SELECT_NODE_KEY,
+      offset: node
+    }
+  } else {
+    return {
+      type: FILETREE_SELECT_NODE,
+      node,
+      multiSelect
+    }
   }
 }
 
-export function openNode (node, shoudlBeFolded = null, deep = false) {
+export function openNode (node, shouldBeFolded = null, deep = false) {
   return (dispatch, getState) => {
     if (node.isDir) {
       if (node.shouldBeUpdated) {
         api.fetchPath(node.path)
           .then(data => dispatch(loadNodeData(data, node)))
-          .then(() => dispatch(toggleNodeFold(node, shoudlBeFolded, deep)))
+          .then(() => dispatch(toggleNodeFold(node, shouldBeFolded, deep)))
       } else {
-        dispatch(toggleNodeFold(node, shoudlBeFolded, deep))
+        dispatch(toggleNodeFold(node, shouldBeFolded, deep))
       }
     } else {
       api.readFile(node.path)
@@ -52,11 +60,11 @@ export function openNode (node, shoudlBeFolded = null, deep = false) {
 }
 
 export const FILETREE_FOLD_NODE = 'FILETREE_FOLD_NODE'
-export function toggleNodeFold (node, shoudlBeFolded = null, deep = false) {
+export function toggleNodeFold (node, shouldBeFolded = null, deep = false) {
   return {
     type: FILETREE_FOLD_NODE,
     node,
-    shoudlBeFolded,
+    shouldBeFolded,
     deep
   }
 }

app/components/FileTree/index.jsx

@@ -1,12 +1,12 @@
 /* @flow weak */
-import _ from 'lodash';
-import React, { Component, PropTypes } from 'react';
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
-import cx from 'classnames';
-import ContextMenu from '../ContextMenu';
-import * as FileTreeActions from './actions';
-import FileTreeContextMenuItems from './contextMenuItems';
+import _ from 'lodash'
+import React, { Component, PropTypes } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import cx from 'classnames'
+import ContextMenu from '../ContextMenu'
+import * as FileTreeActions from './actions'
+import FileTreeContextMenuItems from './contextMenuItems'
 import subscribeToFileChange from './subscribeToFileChange'
 
 
@@ -23,14 +23,14 @@ class FileTree extends Component {
 
   componentDidMount() {
     subscribeToFileChange()
-    this.props.initializeFileTree();
+    this.props.initializeFileTree()
   }
 
   render() {
-    const {FileTreeState, ...actionProps} = this.props;
-    const {isContextMenuActive, contextMenuPos} = this.state;
+    const {FileTreeState, ...actionProps} = this.props
+    const {isContextMenuActive, contextMenuPos} = this.state
     return (
-      <div className='filetree-container'>
+      <div className='filetree-container' tabIndex={1} onKeyDown={this.onKeyDown}>
         <FileTreeNode node={FileTreeState.rootNode}
           onContextMenu={this.onContextMenu} {...actionProps} />
         <ContextMenu items={FileTreeContextMenuItems}
@@ -39,7 +39,7 @@ class FileTree extends Component {
           context={this.state.contextNode}
           deactivate={this.setState.bind(this, {isContextMenuActive: false})} />
       </div>
-    );
+    )
   }
 
   onContextMenu = (e, node) => {
@@ -51,30 +51,62 @@ class FileTree extends Component {
       contextNode: node
     })
   }
+
+  onKeyDown = (e) => {
+    var curNode = this.props.FileTreeState.focusedNodes[0]
+    if (e.keyCode === 13 || 37 <= e.keyCode && e.keyCode <= 40) e.preventDefault()
+    switch (e.key) {
+      case 'ArrowDown':
+        this.props.selectNode(1)
+        break
+      case 'ArrowUp':
+        this.props.selectNode(-1)
+        break
+      case 'ArrowRight':
+        if (!curNode.isDir) break
+        if (curNode.isFolded) {
+          this.props.openNode(curNode, false)
+        } else {
+          this.props.selectNode(1)
+        }
+        break
+      case 'ArrowLeft':
+        if (!curNode.isDir || curNode.isFolded) {
+          this.props.selectNode(curNode.parent)
+          break
+        }
+        if (curNode.isDir) this.props.openNode(curNode, true)
+        break
+      case 'Enter':
+        this.props.openNode(curNode)
+        break
+      default:
+    }
+  }
 }
 
 FileTree = connect(
   state => {
     return {FileTreeState: state.FileTreeState}
   }, dispatch => {
-    return bindActionCreators(FileTreeActions, dispatch);
+    return bindActionCreators(FileTreeActions, dispatch)
   }
-)(FileTree);
+)(FileTree)
 
 
 class FileTreeNode extends Component {
   constructor(props) {
-    super(props);
+    super(props)
   }
 
   render() {
-    const {node, ...actionProps} = this.props;
-    const {openNode, selectNode, onContextMenu} = actionProps;
+    const {node, ...actionProps} = this.props
+    const {openNode, selectNode, onContextMenu} = actionProps
     return (
       <div className='filetree-node-container'
-        onContextMenu={e => {selectNode(node);onContextMenu(e, node)} }>
-        <div
-          className={cx('filetree-node', {'focus':node.isFocused})}
+        onContextMenu={e => {selectNode(node); onContextMenu(e, node)} }>
+        <div className={cx('filetree-node', {'focus':node.isFocused})}
+          ref={r => this.nodeDOM = r}
           onDoubleClick={e => openNode(node)}
           onClick={e => selectNode(node)} >
           <span className='filetree-node-arrow'
@@ -109,8 +141,14 @@ class FileTreeNode extends Component {
           : null }
 
       </div>
-    );
+    )
+  }
+
+  componentDidUpdate () {
+    if (this.props.node.isFocused) {
+      this.nodeDOM.scrollIntoViewIfNeeded && this.nodeDOM.scrollIntoViewIfNeeded()
+    }
   }
 }
 
-export default FileTree;
+export default FileTree

app/components/FileTree/reducer.js

@@ -6,9 +6,12 @@ import {
   FILETREE_LOAD_DATA,
   FILETREE_FOLD_NODE,
   FILETREE_SELECT_NODE,
+  FILETREE_SELECT_NODE_KEY,
   FILETREE_REMOVE_NODE
 } from './actions'
 
+
+let focusedNodes = []
 class Node {
   constructor (nodeInfo) {
     const {
@@ -51,12 +54,81 @@ class Node {
 
   set depth (v) { /* no-op */ }
 
-  findChildNodeByPathComponents (pathComponents) {
+  focus () {
+    this.isFocused = true
+    if (focusedNodes.indexOf(this) === -1) focusedNodes.push(this)
+  }
+
+  unfocus () {
+    this.isFocused = false
+    _.remove(focusedNodes, this)
+  }
+
+  getSiblings () {
+    if (this.isRoot) return [this]
+    return this.parent.children
+  }
+
+  prev (jump) {
+    if (this.isRoot) return this
+    var siblings = this.getSiblings()
+    var curIndex = siblings.indexOf(this)
+    var prevNode = siblings[curIndex - 1]
+
+    if (prevNode) {
+      if (!jump) return prevNode
+      if (!prevNode.isDir || prevNode.isFolded) return prevNode
+      if (prevNode.lastChild()) {
+        return prevNode.lastVisibleDescendant()
+      } else {
+        return prevNode
+      }
+    } else {
+      return this.parent
+    }
+  }
+
+  next (jump) {
+    if (jump && this.isDir && !this.isFolded) {
+      if (this.firstChild()) return this.firstChild()
+    } else if (this.isRoot) {
+      return this
+    }
+
+    var siblings = this.getSiblings()
+    var curIndex = siblings.indexOf(this)
+    var nextNode = siblings[curIndex + 1]
+
+    if (nextNode) {
+      return nextNode
+    } else {
+      if (this.parent.isRoot) return this
+      return this.parent.next()
+    }
+  }
+
+  firstChild () {
+    return this.children[0]
+  }
+
+  lastChild () {
+    return this.children[this.children.length - 1]
+  }
+
+  lastVisibleDescendant () {
+    var lastChild = this.children[this.children.length - 1]
+    if (!lastChild) return this
+    if (!lastChild.isDir) return lastChild
+    if (lastChild.isFolded) return lastChild
+    return lastChild.lastVisibleDescendant()
+  }
+
+  _findChildNodeByPathComponents (pathComponents) {
     var pathComponent = pathComponents[0]
     var childNode = _.filter(this.children, {name: pathComponent})[0]
     var nextPathComponents = pathComponents.slice(1)
     if (nextPathComponents.length === 0) { return childNode }
-    return childNode.findChildNodeByPathComponents(nextPathComponents)
+    return childNode._findChildNodeByPathComponents(nextPathComponents)
   }
 
   // apply to not only direct children but all descendants
@@ -117,15 +189,16 @@ var RootNode = new Node({
 const findNodeByPath = (path) => {
   if (path === '/') return Node.rootNode
   const pathComponents = path.split('/').slice(1)
-  return Node.rootNode.findChildNodeByPathComponents(pathComponents)
+  return Node.rootNode._findChildNodeByPathComponents(pathComponents)
 }
 
 var _state = {}
 _state.rootNode = RootNode
 
 const normalizeState = (_state) => {
   var state = {
-    findNodeByPath: findNodeByPath
+    findNodeByPath,
+    focusedNodes
   }
   state.rootNode = _state.rootNode
   state.rootNode.name = config.projectName
@@ -143,23 +216,40 @@ export default function FileTreeReducer (state = _state, action) {
       state.rootNode = RootNode
       return normalizeState(state)
 
+    case FILETREE_SELECT_NODE_KEY:
+      var node
+
+      if (action.offset === 1) {
+        node = focusedNodes[0].next(true)
+      } else if (action.offset === -1 ) {
+        node = focusedNodes[0].prev(true)
+      }
+
+      if (!multiSelect) {
+        RootNode.unfocus()
+        RootNode.forEachDescendant(childNode => childNode.unfocus())
+      }
+      node.focus()
+
+      return normalizeState(state)
+
     case FILETREE_SELECT_NODE:
       var {node, multiSelect} = action
+
       if (!multiSelect) {
-        RootNode.isFocused = false
-        RootNode.forEachDescendant(childNode => {
-          childNode.isFocused = false
-        })
+        RootNode.unfocus()
+        RootNode.forEachDescendant(childNode => childNode.unfocus())
       }
-      node.isFocused = true
+      node.focus()
+
       return normalizeState(state)
 
     case FILETREE_FOLD_NODE:
-      var {node, shoudBeFolded, deep} = action
+      var {node, shouldBeFolded, deep} = action
       if (!node.isDir) return state
 
-      if (typeof shoudBeFolded === 'boolean') {
-        var isFolded = shoudBeFolded
+      if (typeof shouldBeFolded === 'boolean') {
+        var isFolded = shouldBeFolded
       } else {
         var isFolded = !node.isFolded
       }

app/styles/main.styl

@@ -54,6 +54,10 @@ html, body, #root {
   background-color: transparent;
 }
 
+*[tabindex]:focus {
+  outline: 0 none
+}
+
 // ::-webkit-scrollbar-thumb {
 //   background-color: rgba(91, 91, 91, 0.50);
 // }