Move files into the root library (#3217)

* Move files into the root library

* Add border when file into the root library

* modify some style

* delete overflow:visible

* Add border-bottom

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

@@ -98,6 +98,7 @@ class TreeNodeView extends React.Component {
   }
 
   onNodeDrop = (e) => {
+    e.stopPropagation();
     this.setState({isNodeDropShow: false});
     this.props.onNodeDrop(e, this.props.node);
   }

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

@@ -31,6 +31,7 @@ class TreeView extends React.Component {
       nodeData: null,
       fileData: null,
       mousePosition: {clientX: '', clientY: ''},
+      isTreeViewDropTipShow: false,
     };
   }
 
@@ -59,7 +60,12 @@ class TreeView extends React.Component {
   }
 
   onNodeDragEnter = (e, node) => {
-    //todo
+    e.persist()
+    if (e.target.className === 'tree-view tree ') {
+      this.setState({
+        isTreeViewDropTipShow: true,
+      })
+    }
   }
 
   onNodeDragMove = (e) => {
@@ -68,7 +74,11 @@ class TreeView extends React.Component {
   }
 
   onNodeDragLeave = (e, node) => {
-    //todo
+    if (e.target.className === 'tree-view tree tree-view-drop') {
+      this.setState({
+        isTreeViewDropTipShow: false,
+      })
+    }
   }
 
   onNodeDrop = (e, node) => {
@@ -81,6 +91,12 @@ class TreeView extends React.Component {
     let {nodeDirent, nodeParentPath, nodeRootPath} = dragStartNodeData;
     let dropNodeData = node;
 
+    if (!dropNodeData) {
+      this.onItemMove(this.props.currentRepoInfo, nodeDirent, '/', nodeParentPath);
+      this.setState({isTreeViewDropTipShow: false})
+      return;
+    }
+
     if (dropNodeData.object.type !== 'dir') {
       return;
     }
@@ -158,7 +174,7 @@ class TreeView extends React.Component {
 
   render() {
     return (
-      <div className="tree-view tree">
+      <div className={`tree-view tree ${this.state.isTreeViewDropTipShow ? 'tree-view-drop' : ''}`} onDrop={this.onNodeDrop} onDragEnter={this.onNodeDragEnter} onDragLeave={this.onNodeDragLeave}>
         <TreeNodeView 
           repoPermission={this.props.repoPermission}
           node={this.props.treeData.root}