Add drag from dirent-grid-item

frontend/src/components/dirent-grid-view/dirent-grid-item.js

@@ -20,32 +20,37 @@ class DirentGridItem extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      isGridSelect: false,
+      isGridSelected: false,
+      isGridDropTipshow: false,
     }
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState({isGridSelect: false}, () => {
+    this.setState({isGridSelected: false}, () => {
       if (nextProps.activeDirent && nextProps.activeDirent.name === nextProps.dirent.name) {
-        this.setState({isGridSelect: true});
+        this.setState({isGridSelected: true});
       }
     })
   }
 
+  onItemMove = (destRepo, dirent, selectedPath, currentPath) => {
+    this.props.onItemMove(destRepo, dirent, selectedPath, currentPath);
+  }
+
   onItemClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
     
     const dirent = this.props.dirent;
     if (this.props.dirent === this.props.activeDirent) {
-      this.setState({isGridSelect:false})
+      this.setState({isGridSelected:false})
       if (Utils.imageCheck(dirent.name)) {
         this.props.showImagePopup(dirent);
       } else {
         this.props.onItemClick(dirent);
       }
     } else {
-      this.setState({isGridSelect: true})
+      this.setState({isGridSelected: true})
       this.props.onDirentClick(this.props.dirent)
     }
   }
@@ -60,6 +65,51 @@ class DirentGridItem extends React.Component {
     }
   }
 
+  onGridItemDragStart = (e) => {
+    let dragStartItemData = {nodeDirent: this.props.dirent, nodeParentPath: this.props.path};
+    dragStartItemData = JSON.stringify(dragStartItemData);
+
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('applicaiton/drag-item-info', dragStartItemData);
+  }
+
+  onGridItemDragEnter = (e) => {
+    if (this.props.dirent.type === 'dir') {
+      this.setState({isGridDropTipshow: true});
+    }
+  }
+
+  onGridItemDragOver = (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  }
+
+  onGridItemDragLeave = (e) => {
+    this.setState({isGridDropTipshow: false});
+  }
+
+  onGridItemDragDrop = (e) => {
+    this.setState({isDropTipshow: false});
+    if (e.dataTransfer.files.length) { // uploaded files
+      return;
+    }
+    let dragStartItemData = e.dataTransfer.getData('applicaiton/drag-item-info');
+    dragStartItemData = JSON.parse(dragStartItemData);
+    let {nodeDirent, nodeParentPath} = dragStartItemData;
+    let dropItemData = this.props.dirent;
+
+    if (nodeDirent.name === dropItemData.name) {
+      return;
+    }
+
+    if (dropItemData.type !== 'dir') {
+      return;
+    } 
+
+    let selectedPath = Utils.joinPath(this.props.path, this.props.dirent.name);
+    this.onItemMove(this.props.currentRepoInfo, nodeDirent, selectedPath, nodeParentPath);
+  }
+
   onGridItemMouseDown = (event) =>{
     this.props.onGridItemMouseDown(event);
   }
@@ -90,13 +140,22 @@ class DirentGridItem extends React.Component {
     }
     let fileHref = siteRoot + 'lib/' + this.props.repoID + '/file' + Utils.encodePath(direntPath);
     
+    let gridClass = 'grid-file-img-link cursor-pointer'
+    gridClass += this.state.isGridSelected ? " grid-selected-active" : " ";
+    gridClass += this.state.isGridDropTipshow ? " grid-drop-show" : " ";
 
     return(
       <Fragment>
         <li className="grid-item" onContextMenu={this.onGridItemContextmenu} onMouseDown={this.onGridItemMouseDown}>
           <div 
-            className={`grid-file-img-link cursor-pointer ${this.state.isGridSelect ? "grid-selected-active" : ""}`}
+            className={gridClass}
+            draggable="true" 
             onClick={this.onItemClick}
+            onDragStart={this.onGridItemDragStart} 
+            onDragEnter={this.onGridItemDragEnter} 
+            onDragOver={this.onGridItemDragOver} 
+            onDragLeave={this.onGridItemDragLeave} 
+            onDrop={this.onGridItemDragDrop}
           >
             {dirent.encoded_thumbnail_src ?
               <img src={`${siteRoot}${fileUrl}`} ref={this.gridIcon} className="thumbnail" onClick={this.onItemClick} alt=""/> :
@@ -104,8 +163,8 @@ class DirentGridItem extends React.Component {
             }
             {dirent.is_locked && <img className="grid-file-locked-icon" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={dirent.lock_owner_name}/>}
           </div>
-          <div className={`grid-file-name ${this.state.isGridSelect ? "grid-link-selected-active" : ""}`}>
-            <a className="grid-file-name-link" href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemLinkClick}>{dirent.name}</a>
+          <div className="grid-file-name" onDragStart={this.onGridItemDragStart} draggable="true" >
+            <a className={`grid-file-name-link ${this.state.isGridSelected ? "grid-link-selected-active" : ""}`} href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemLinkClick}>{dirent.name}</a>
           </div>
         </li>
       </Fragment>

frontend/src/css/grid-view.css

@@ -24,15 +24,14 @@
 }
 
 .grid-file-img-link {
-  width: 100px;
-  height: 100px;
+  width: 96px;
+  height: 96px;
   margin: 0 auto 6px;
   position: relative;
   border-radius: 3px;
   font-size: 0;
   text-align: center;
   line-height: 0;
-  padding: 2px;
 }
 
 .grid-file-img-link .thumbnail {
@@ -77,6 +76,10 @@
   background-color: #f8f8f8;
 }
 
-.grid-selected-link-active a{
+.grid-link-selected-active {
   color: #eb8205;
 }
+
+.grid-drop-show {
+  background: #f8f8f8;
+}