FileTree 重新实现

app/components/Breadcrumbs/index.jsx

@@ -4,10 +4,10 @@ import { connect } from 'react-redux'
 import config from '../../config'
 import * as Tab from '../Tab'
 
-let Breadcrumbs = ({currentPath, fileNode}) => {
+let Breadcrumbs = ({ currentPath, fileNode }) => {
   const pathComps = currentPath.split('/')
   const rootCrumb = {path: '/', name: config.projectName, isDir: true}
-  const crumbs = pathComps.map((pathComp, idx, pathComps) => {
+  const crumbs = pathComps.map(( pathComp, idx, pathComps ) => {
     if (pathComp === '') return rootCrumb
     return {
       name: pathComp,
@@ -26,12 +26,10 @@ let Breadcrumbs = ({currentPath, fileNode}) => {
 Breadcrumbs = connect(state => {
   const activeTab = Tab.selectors.getActiveTab(state.TabState)
   let currentPath = ''
+  if (activeTab) currentPath = activeTab.path || ''
   let fileNode
-  if (activeTab) {
-    currentPath = activeTab.path || ''
-  }
   if (currentPath != '') {
-    fileNode = state.FileTreeState.findNodeByPath(currentPath)
+    fileNode = state.FileTreeState.nodes[currentPath]
   }
   return { currentPath, fileNode }
 })(Breadcrumbs)

app/components/FileTree/FileTree.js

@@ -0,0 +1,95 @@
+import React, { Component, PropTypes } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import cx from 'classnames'
+import * as FileTreeActions from './actions'
+import FileTreeNode from './FileTreeNode'
+import ContextMenu from '../ContextMenu'
+import FileTreeContextMenuItems from './contextMenuItems'
+import subscribeToFileChange from './subscribeToFileChange'
+
+const FileUploadInput = ({ node, handleUpload }) => {
+  return (
+    <form id='filetree-hidden-input-form' style={{position: 'fixed',top: '-10000px'}}>
+      <input
+        id='filetree-hidden-input'
+        type='file'
+        name='files'
+        multiple={true}
+        onChange={e=>handleUpload(e.target.files, node.path)}
+      />
+    </form>
+  )
+}
+
+class FileTree extends Component {
+  componentDidMount () {
+    subscribeToFileChange()
+  }
+
+  onKeyDown = (e) => {
+    const { focusedNode: curNode, selectNode, openNode } = this.props
+    if (e.keyCode === 13 || e.keyCode >= 37 && e.keyCode <= 40) e.preventDefault()
+    switch (e.key) {
+      case 'ArrowDown':
+        selectNode(1)
+        break
+      case 'ArrowUp':
+        selectNode(-1)
+        break
+      case 'ArrowRight':
+        if (!curNode.isDir) break
+        if (curNode.isFolded) {
+          openNode(curNode, false)
+        } else {
+          selectNode(1)
+        }
+        break
+      case 'ArrowLeft':
+        if (!curNode.isDir || curNode.isFolded) {
+          selectNode(curNode.parent)
+          break
+        }
+        if (curNode.isDir) openNode(curNode, true)
+        break
+      case 'Enter':
+        openNode(curNode)
+        break
+      default:
+    }
+  }
+  render () {
+    const { contextMenu, closeContextMenu, uploadFilesToPath } = this.props
+    return (
+      <div className="filetree-container"
+        tabIndex={1}
+        onKeyDown={this.onKeyDown}
+      >
+        <FileTreeNode path='' />
+        <ContextMenu
+          items={FileTreeContextMenuItems}
+          isActive={contextMenu.isActive}
+          pos={contextMenu.pos}
+          context={contextMenu.contextNode}
+          deactivate={closeContextMenu}
+        />
+        <FileUploadInput node={contextMenu.contextNode}
+          handleUpload={uploadFilesToPath}
+        />
+      </div>
+    )
+  }
+}
+
+FileTree = connect(
+  state => {
+    const focusedNodes = Object.values(state.FileTreeState.nodes).filter(node => node.isFocused)
+    return {
+      focusedNode: focusedNodes[0],
+      contextMenu: state.FileTreeState.contextMenuState
+    }
+  },
+  dispatch => bindActionCreators(FileTreeActions, dispatch)
+)(FileTree)
+
+export default FileTree

app/components/FileTree/FileTreeNode.js

@@ -0,0 +1,75 @@
+import React, { Component, PropTypes } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import cx from 'classnames'
+import * as FileTreeActions from './actions'
+
+class _FileTreeNode extends Component {
+  constructor (props) {
+    super(props)
+  }
+
+  render () {
+    const { node, openNode, selectNode, openContextMenu } = this.props
+    if (!node) return null
+    return (
+      <div id={node.path}
+        className={cx('filetree-node-container', {
+          highlight: node.isHighlighted
+        })}
+        data-droppable="FILE_TREE_NODE"
+        onContextMenu={e => { selectNode(node); openContextMenu(e, node) }}
+      >
+        <div className={cx('filetree-node', { focus: node.isFocused })}
+          ref={r => this.nodeDOM = r}
+          onDoubleClick={e => openNode(node)}
+          onClick={e => selectNode(node)}
+          style={{ paddingLeft: `${1 + node.depth}em` }}
+        >
+          <span className="filetree-node-arrow"
+            onClick={e => openNode(node, null, e.altKey)}>
+            {node.isDir && <i className={cx({
+              'fa fa-angle-right': node.isFolded,
+              'fa fa-angle-down': !node.isFolded,
+            })}></i>}
+          </span>
+          <span className="filetree-node-icon">
+            <i className={cx({
+              'fa fa-briefcase': node.isRoot,
+              'fa fa-folder-o': node.isDir && !node.isRoot,
+              'fa fa-file-o': !node.isDir
+            })}></i>
+          </span>
+          <span className={`filetree-node-label git-${node.gitStatus ? node.gitStatus.toLowerCase() : 'none'}`}>
+            {node.name || 'Project'}
+          </span>
+        </div>
+
+        {node.isDir &&
+        <div className={cx('filetree-node-children', {
+          isFolded: node.isFolded
+        })}>
+          {node.children.map(childNode =>
+            <FileTreeNode key={childNode.path} path={childNode.path} />
+          )}
+        </div>}
+      </div>
+    )
+  }
+
+  componentDidUpdate () {
+    if (this.props.node.isFocused) {
+      this.nodeDOM.scrollIntoViewIfNeeded && this.nodeDOM.scrollIntoViewIfNeeded()
+    }
+  }
+}
+
+const FileTreeNode = connect(
+  (state, props) => {
+    const node = state.FileTreeState.nodes[props.path]
+    return { node: node }
+  },
+  dispatch => bindActionCreators(FileTreeActions, dispatch)
+)(_FileTreeNode)
+
+export default FileTreeNode

app/components/FileTree/actions.js

@@ -1,31 +1,24 @@
-/* @flow weak */
 import _ from 'lodash'
 import { createAction } from 'redux-actions'
 import api from '../../backendAPI'
 import * as Tab from '../Tab'
 import { updateUploadProgress } from '../StatusBar/actions'
+export const ROOT_PATH = ''
+
 export const FILETREE_SELECT_NODE = 'FILETREE_SELECT_NODE'
-export const FILETREE_SELECT_NODE_KEY = 'FILETREE_SELECT_NODE_KEY'
-export function selectNode (node, multiSelect = false) {
-  if (typeof node === 'number') {
-    return {
-      type: FILETREE_SELECT_NODE_KEY,
-      payload: {offset: node}
-    }
-  }
-    return {
-      type: FILETREE_SELECT_NODE,
-      payload: {node, multiSelect}
-    }
+export const selectNode = createAction(FILETREE_SELECT_NODE,
+  (node, multiSelect = false) => ({ node, multiSelect })
+)
 
-}
+export const FILETREE_HIGHLIGHT_DIR_NODE = 'FILETREE_HIGHLIGHT_DIR_NODE'
+export const highlightDirNode = createAction(FILETREE_HIGHLIGHT_DIR_NODE)
 
 export function openNode (node, shouldBeFolded = null, deep = false) {
   return (dispatch, getState) => {
     if (node.isDir) {
-      if (node.shouldBeUpdated) {
+      if (!node.children.length) {
         api.fetchPath(node.path)
-          .then(data => dispatch(loadNodeData(data, node)))
+          .then(data => dispatch(loadNodeData(data)))
           .then(() => dispatch(toggleNodeFold(node, shouldBeFolded, deep)))
       } else {
         dispatch(toggleNodeFold(node, shouldBeFolded, deep))
@@ -55,29 +48,36 @@ export const toggleNodeFold = createAction(FILETREE_FOLD_NODE,
 )
 
 export const FILETREE_REMOVE_NODE = 'FILETREE_REMOVE_NODE'
-export const removeNode = createAction(FILETREE_REMOVE_NODE, node => node)
+export const removeNode = createAction(FILETREE_REMOVE_NODE)
 
 export const FILETREE_LOAD_DATA = 'FILETREE_LOAD_DATA'
-export const loadNodeData = createAction(FILETREE_LOAD_DATA, (data, node) => ({ data, node }))
+export const loadNodeData = createAction(FILETREE_LOAD_DATA)
 
 export function initializeFileTree () {
-  return (dispatch) => {
-    api.fetchPath('/').then(data => dispatch(loadNodeData(data)))
-  }
+  return dispatch => api.fetchPath('/').then(data => dispatch(loadNodeData(data)))
 }
 
-const pathToDir = (path) =>
-path.split('_')[1] ? path.split('_')[1].split('/').slice(0, -1).join('/') || '/' : path
+export const FILETREE_CONTEXT_MENU_OPEN = 'FILETREE_CONTEXT_MENU_OPEN'
+export const openContextMenu = createAction(FILETREE_CONTEXT_MENU_OPEN, (e, node) => {
+  e.stopPropagation()
+  e.preventDefault()
+  return {
+    isActive: true,
+    pos: { x: e.clientX, y: e.clientY },
+    contextNode: node,
+  }
+})
+
+export const FILETREE_CONTEXT_MENU_CLOSE = 'FILETREE_CONTEXT_MENU_CLOSE'
+export const closeContextMenu = createAction(FILETREE_CONTEXT_MENU_CLOSE)
 
 export const uploadFilesToPath = (files, path) => {
-  if (path.split('_')[0] === 'folder') {
-    path = path.split('_')[1]
-  }
-  path = pathToDir(path)
-  return (dispatch) => {
+  return (dispatch, getState) => {
     if (!files.length) return
+    const node = getState().FileTreeState.nodes[path]
+    const targetDirPath = node.isDir ? node.path : (node.parent.path || '/')
     _(files).forEach(file => {
-      api.uploadFile(path, file, {
+      api.uploadFile(targetDirPath, file, {
         onUploadProgress: (progressEvent) => {
           const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
           dispatch(updateUploadProgress(percentCompleted))

app/components/FileTree/index.js

@@ -0,0 +1 @@
+export default from './FileTree'