Move file by drag and drop (#3168)

frontend/src/components/tree-view/tree-node-view.js

@@ -19,6 +19,8 @@ const propTypes = {
   onMenuItemClick: PropTypes.func,
   registerHandlers: PropTypes.func,
   unregisterHandlers: PropTypes.func,
+  onNodeDragMove: PropTypes.func,
+  onNodeDrop: PropTypes.func,
 };
 
 class TreeNodeView extends React.Component {
@@ -27,7 +29,8 @@ class TreeNodeView extends React.Component {
     super(props);
     this.state = {
       isHighlight: false,
-      isShowOperationMenu: false
+      isShowOperationMenu: false,
+      isNodeDropShow: false,
     };
   }
 
@@ -68,6 +71,27 @@ class TreeNodeView extends React.Component {
     this.props.onNodeDragStart(e, this.props.node);
   }
 
+  onNodeDragEnter = (e) => {
+    if (this.props.node.object.type === 'dir') {
+      this.setState({isNodeDropShow: true});
+    }
+    this.props.onNodeDragEnter(e, this.props.node);
+  }
+
+  onNodeDragMove = (e) => {
+    this.props.onNodeDragMove(e);
+  }
+
+  onNodeDragLeave = (e) => {
+    this.setState({isNodeDropShow: false});
+    this.props.onNodeDragLeave(e, this.props.node);
+  }
+
+  onNodeDrop = (e) => {
+    this.setState({isNodeDropShow: false});
+    this.props.onNodeDrop(e, this.props.node);
+  }
+
   onUnFreezedItem = () => {
     this.setState({isShowOperationMenu: false});
     this.props.onUnFreezedItem();
@@ -134,6 +158,11 @@ class TreeNodeView extends React.Component {
               onNodeChanged={this.props.onNodeChanged}
               registerHandlers={this.props.registerHandlers}
               unregisterHandlers={this.props.unregisterHandlers}
+              onNodeDragStart={this.props.onNodeDragStart}
+              onNodeDragMove={this.props.onNodeDragMove}
+              onNodeDrop={this.props.onNodeDrop}
+              onNodeDragEnter={this.props.onNodeDragEnter}
+              onNodeDragLeave={this.props.onNodeDragLeave}
             />
           );
         })}
@@ -152,8 +181,8 @@ class TreeNodeView extends React.Component {
       <div className="tree-node">
         <div type={type} title={node.object.name}
           onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}
-          className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''}`}>
-          <div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onClick={this.onNodeClick}>{node.object.name}</div>
+          className={`tree-node-inner text-nowrap ${hlClass} ${node.path === '/'? 'hide': ''} ${this.state.isNodeDropShow ? 'tree-node-drop' : ''}`}>
+          <div className="tree-node-text" draggable="true" onDragStart={this.onNodeDragStart} onClick={this.onNodeClick} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave} onDragOver={this.onNodeDragMove} onDrop={this.onNodeDrop}>{node.object.name}</div>
           <div className="left-icon">
             {type === 'dir' && (!node.isLoaded ||  (node.isLoaded && node.hasChildren())) && (
               <i 

frontend/src/components/tree-view/tree-view.js

@@ -13,6 +13,8 @@ const propTypes = {
   onNodeClick: PropTypes.func.isRequired,
   onNodeExpanded: PropTypes.func.isRequired,
   onNodeCollapse: PropTypes.func.isRequired,
+  onItemMove: PropTypes.func,
+  currentRepoInfo: PropTypes.object,
 };
 
 const PADDING_LEFT = 20;
@@ -38,8 +40,62 @@ class TreeView extends React.Component {
     this.unregisterHandlers();
   }
 
+  onItemMove = (repo, dirent, selectedPath, currentPath) => {
+    this.props.onItemMove(repo, dirent, selectedPath, currentPath);
+  }
+
   onNodeDragStart = (e, node) => {
-    // todo
+    let dragStartNodeData = {nodeDirent: node.object, nodeParentPath: node.parentNode.path, nodeRootPath: node.path};
+    dragStartNodeData = JSON.stringify(dragStartNodeData);
+    
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData('applicaiton/drag-item-info', dragStartNodeData);
+  }
+
+  onNodeDragEnter = (e, node) => {
+    //todo
+  }
+
+  onNodeDragMove = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  }
+
+  onNodeDragLeave = (e, node) => {
+    //todo
+  }
+
+  onNodeDrop = (e, node) => {
+    if (e.dataTransfer.files.length) { // uploaded files
+      return;
+    }
+    let dragStartNodeData = e.dataTransfer.getData('applicaiton/drag-item-info');
+    dragStartNodeData = JSON.parse(dragStartNodeData);
+
+    let {nodeDirent, nodeParentPath, nodeRootPath} = dragStartNodeData;
+    let dropNodeData = node;
+
+    if (dropNodeData.object.type !== 'dir') {
+      return;
+    }
+
+    // copy the dirent to itself. eg: A/B -> A/B
+    if (nodeParentPath === dropNodeData.parentNode.path) {
+      if (dropNodeData.object.name === nodeDirent.name) {
+        return;
+      }
+    }
+
+    // copy the dirent to it's child. eg: A/B -> A/B/C
+    if (dropNodeData.object.type === 'dir' && nodeDirent.type === 'dir') {
+      if (dropNodeData.parentNode.path !== nodeParentPath) {
+        if (dropNodeData.path.indexOf(nodeRootPath) !== -1) {
+          return;
+        }
+      }
+    }
+
+    this.onItemMove(this.props.currentRepoInfo, nodeDirent, dropNodeData.path, nodeParentPath);
   }
 
   onFreezedItem = () => {
@@ -110,6 +166,10 @@ class TreeView extends React.Component {
           onNodeChanged={this.onNodeChanged}
           registerHandlers={this.registerHandlers}
           unregisterHandlers={this.unregisterHandlers}
+          onNodeDragMove={this.onNodeDragMove}
+          onNodeDrop={this.onNodeDrop}
+          onNodeDragEnter={this.onNodeDragEnter}
+          onNodeDragLeave={this.onNodeDragLeave}
         />
        {this.state.isRightMenuShow && (
           <TreeViewContextMenu