Drag and drop multiple files

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

@@ -18,6 +18,7 @@ const propTypes = {
   onItemMove: PropTypes.func,
   currentRepoInfo: PropTypes.object,
   selectedDirentList: PropTypes.array,
+  onItemsMove: PropTypes.func,
 };
 
 const PADDING_LEFT = 20;
@@ -91,6 +92,20 @@ class TreeView extends React.Component {
     let {nodeDirent, nodeParentPath, nodeRootPath} = dragStartNodeData;
     let dropNodeData = node;
 
+    if (Array.isArray(dragStartNodeData)) { //move items
+      if (!dropNodeData) { //move items to root
+        if (dragStartNodeData[0].nodeParentPath === '/') {
+          this.setState({isTreeViewDropTipShow: false});
+          return;
+        }
+        this.props.onItemsMove(this.props.currentRepoInfo, '/');
+        this.setState({isTreeViewDropTipShow: false});
+        return ;
+      }
+      this.onMoveItems(dragStartNodeData, dropNodeData, this.props.currentRepoInfo, node.path);
+      return ;
+    }
+
     if (!dropNodeData) {
       if (nodeParentPath === '/') {
         this.setState({isTreeViewDropTipShow: false});
@@ -128,6 +143,39 @@ class TreeView extends React.Component {
     this.onItemMove(this.props.currentRepoInfo, nodeDirent, dropNodeData.path, nodeParentPath);
   }
 
+  onMoveItems = (dragStartNodeData, dropNodeData, destRepo, destDirentPath) => {
+    let direntPaths = [];
+    dragStartNodeData.forEach(dirent => {
+      let path = dirent.nodeRootPath;
+      direntPaths.push(path);
+    });
+
+    if (dropNodeData.object.type !== 'dir') {
+      return;
+    }
+
+    // move dirents to one of them. eg: A/B, A/C -> A/B
+    if (direntPaths.some(direntPath => { return direntPath === destDirentPath;})) {
+      return;
+    }
+
+    // move dirents to one of their child. eg: A/B, A/D -> A/B/C
+    let isChildPath = direntPaths.some(direntPath => {
+      let flag = destDirentPath.length > direntPath.length && destDirentPath.indexOf(direntPath) > -1;
+      return flag;
+    });
+    if (isChildPath) {
+      return;
+    }
+
+    if (!dropNodeData) { //selectPath === '/'
+      this.setState({isTreeViewDropTipShow: false});
+      return;
+    }
+
+    this.props.onItemsMove(destRepo, destDirentPath);
+  }
+
   freezeItem = () => {
     this.setState({isItemFreezed: true});
   }