Accept Merge Request #12 修复文件拖动上传:(yangzhen/filetree -> ot)

Merge Request: 修复文件拖动上传
Created By: @杨臻

Author: hackape

app/components/Collaboration/index.jsx

@@ -70,6 +70,7 @@ class Collaboration extends Component {
           icon='fa fa-users'
           size='40'
           id='d1'
+          key='d1'
           actions={action}
         >
           <Collaborators />
@@ -79,6 +80,7 @@ class Collaboration extends Component {
           icon='fa fa-comments'
           size='40'
           id='d2'
+          key='d2'
           actions={chatSetting}
         >
           <Chat />

app/components/DragAndDrop.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import debounce from 'lodash/debounce'
 import { dispatch } from '../store'
 import mobxStore from '../mobxStore'
 import { observer } from 'mobx-react'
@@ -8,6 +9,7 @@ import * as PaneActions from './Pane/actions'
 import PaneState from './Pane/state'
 import * as TabActions from 'components/Tab/actions'
 import * as FileTreeActions from './FileTree/actions'
+import FileTreeState from './FileTree/state'
 
 // Corner case: file dragging doesn't trigger 'dragend' natively
 // so need to patch for this behavior
@@ -20,6 +22,12 @@ class DragAndDrop extends Component {
 
   constructor (props) {
     super(props)
+    this.state = {
+      dragPos: {
+        x: 0,
+        y: 0,
+      }
+    }
   }
 
   render () {
@@ -51,19 +59,41 @@ class DragAndDrop extends Component {
   }
 
   onDragLeave = (e) => {
+    this.resetDragPos()
     e.preventDefault()
     if (isFileDragEnd(e)) dnd.dragEnd()
   }
 
   onDragOver = (e) => {
     e.preventDefault()
-    const { source, droppables = [], meta } = dnd
-    if (!source) {
-      dnd.dragStart({
-        type: 'EXTERNAL_FILE',
-        id: Date.now(),
-      })
+    const dx = this.state.dragPos.x - e.x
+    const dy = this.state.dragPos.y - e.y
+    if ((dx < -5 || dx > 5) || (dy < -5 || dy > 5)) {
+      const { source } = dnd
+      this.state.dragPos = {
+        x: e.x,
+        y: e.y,
+      }
+      if (!source || !source.id) {
+        dnd.dragStart({
+          type: 'EXTERNAL_FILE',
+          id: Date.now(),
+        })
+      }
+      this.handleDropOver(e)
     }
+  }
+
+  resetDragPos = () => {
+    this.state.dragPos = {
+      x: 0,
+      y: 0,
+    }
+  }
+
+  handleDropOver = debounce((e) => {
+    dnd.updateDroppables()
+    const { source, droppables = [], meta } = dnd
     const [oX, oY] = [e.pageX, e.pageY]
     const target = droppables.reduce((result, droppable) => {
       const {top, left, right, bottom} = droppable.rect
@@ -89,9 +119,10 @@ class DragAndDrop extends Component {
 
       default:
     }
-  }
+  }, 1000)
 
   onDrop = (e) => {
+    this.resetDragPos()
     e.preventDefault()
     const { source, target, meta } = dnd
     if (!source || !target) return
@@ -121,6 +152,7 @@ class DragAndDrop extends Component {
   }
 
   onDragEnd = (e) => {
+    this.resetDragPos()
     e.preventDefault()
     dnd.dragEnd()
   }
@@ -135,12 +167,13 @@ class DragAndDrop extends Component {
   }
 
   dragTabOverFileTree (e, target) {
-    const id = target.id
-    if (id.split('_')[0] === 'folder') {
-      const DOMNode = document.getElementById(target.id)
-      DOMNode.firstChild.click()
+    const { id, DOMNode } = target
+    const node = FileTreeState.entities.get(id)
+    if (node.isDir && node.isFolded) {
+      FileTreeActions.openNode(node)
     }
   }
+
   dragTabOverPane (e, target) {
     if (target.type !== 'PANE') return
     const { source, meta } = dnd

app/components/FileTree/contextMenuItems.js

@@ -5,23 +5,28 @@ const items = [
   {
     name: i18n`fileTree.contextMenu.newFile`,
     icon: '',
-    command: 'file:new_file'
+    command: 'file:new_file',
+    id: 'filetree_menu_new_file',
   }, {
     name: i18n`fileTree.contextMenu.newFolder`,
     icon: '',
-    command: 'file:new_folder'
+    command: 'file:new_folder',
+    id: 'filetree_menu_new_folder',
   }, {
     name: i18n`fileTree.contextMenu.delete`,
     icon: '',
-    command: 'file:delete'
+    command: 'file:delete',
+    id: 'filetree_menu_delete',
   }, {
     name: i18n`fileTree.contextMenu.rename`,
     icon: '',
-    command: 'file:rename'
+    command: 'file:rename',
+    id: 'filetree_menu_rename',
   }, {
     name: i18n`fileTree.contextMenu.delete`,
     icon: '',
-    command: 'file:download'
+    command: 'file:download',
+    id: 'filetree_menu_download',
   }, {
     name: i18n`fileTree.contextMenu.upload`,
     icon: '',
@@ -31,13 +36,15 @@ const items = [
       const input = document.getElementById('filetree-hidden-input')
       input.dispatchEvent(new MouseEvent('click'))
     },
-    getIsHidden: ctx => !ctx.isDir
+    getIsHidden: ctx => !ctx.isDir,
+    id: 'filetree_menu_upload',
   }, {
     name: i18n`fileTree.contextMenu.gitBlame`,
     icon: '',
     command: (c) => {
       gitBlameNode(c)
     },
+    id: 'filetree_menu_gitBlame',
   }
 ]
 

app/components/Menu/MenuItem.jsx

@@ -98,6 +98,7 @@ class MenuItem extends Component {
           })}
           onMouseEnter={this.onMouseEnter}
           onClick={this.execCommand}
+          id={item.id}
         >
           {(item.icon || item.iconElement) && (
             <div className={cx('menu-item-icon', item.icon)}>

app/components/ResizeBar2.jsx

@@ -88,7 +88,7 @@ const ResizeBar = ({ parentFlexDirection, confirmResize }) => {
 
 ResizeBar.propTypes = {
   parentFlexDirection: PropTypes.string.isRequired,
-  confirmResize: PropTypes.func.isRequired,
+  confirmResize: PropTypes.func,
 }
 
 export default ResizeBar

app/styles/core-ui/Bar.styl

@@ -13,6 +13,11 @@ $bar-size= 25px
       text-align right;
     }
   }
+  &.right {
+    .side-bar-label {
+      padding: 5px 1px;
+    }
+  }
   &.top, &.bottom {
     height: $bar-size;
     flex-direction: row;

app/styles/core-ui/FileTree.styl

@@ -11,7 +11,7 @@ $filetree-indent = 1em;
   .filetree-node-container {
     float: left;             // <- ✝
     min-width: 100%;         // <- ✝
-
+    min-height: 100%;
     > .filetree-node {
       margin-left: -0.6em;
     }

app/utils/dnd.js

@@ -6,6 +6,7 @@ export const DND_DRAG_START = 'DND_DRAG_START'
 export const DND_DRAG_OVER = 'DND_DRAG_OVER'
 export const DND_UPDATE_DRAG_OVER_META = 'DND_UPDATE_DRAG_OVER_META'
 export const DND_DRAG_END = 'DND_DRAG_END'
+export const DND_UPDATE_DROPPABLES = 'DND_UPDATE_DROPPABLES'
 
 function getDroppables () {
   const droppables = map(document.querySelectorAll('[data-droppable]'), DOMNode => ({
@@ -29,7 +30,7 @@ dnd.dragStart = source => emitter.emit(DND_DRAG_START, source)
 dnd.dragOver = target => emitter.emit(DND_DRAG_OVER, target)
 dnd.updateDragOverMeta = meta => emitter.emit(DND_UPDATE_DRAG_OVER_META, meta)
 dnd.dragEnd = () => emitter.emit(DND_DRAG_END)
-
+dnd.updateDroppables = () => emitter.emit(DND_UPDATE_DROPPABLES)
 
 emitter.on(DND_DRAG_START, (source = {}) => {
   dnd.isDragging = true
@@ -50,4 +51,8 @@ emitter.on(DND_DRAG_END, () => {
   dnd.source = dnd.target = {}
 })
 
+emitter.on(DND_UPDATE_DROPPABLES, () => {
+  dnd.droppables = observable.shallowArray(getDroppables())
+})
+
 export default dnd