add files thumbnail (#3903)

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

@@ -50,6 +50,7 @@ const propTypes = {
   enableDirPrivateShare: PropTypes.bool.isRequired,
   showDirentDetail: PropTypes.func.isRequired,
   onItemsMove: PropTypes.func.isRequired,
+  onShowDirentsDraggablePreview: PropTypes.func,
 };
 
 class DirentListItem extends React.Component {
@@ -362,14 +363,11 @@ class DirentListItem extends React.Component {
     if (Utils.isIEBrower()) {
       return false;
     }
-
     e.dataTransfer.effectAllowed = 'move';
-    if (e.dataTransfer && e.dataTransfer.setDragImage) {
-      e.dataTransfer.setDragImage(this.refs.drag_icon, 15, 15);
-    }
-
     let { selectedDirentList } = this.props;
     if (selectedDirentList.length > 0 && selectedDirentList.includes(this.props.dirent)) { // drag items and selectedDirentList include item
+      this.props.onShowDirentsDraggablePreview();
+      e.dataTransfer.setDragImage(this.refs.empty_content, 0, 0); // Show an empty content
       let selectedList =  selectedDirentList.map(item => {
         let nodeRootPath = this.getDirentPath(item);
         let dragStartItemData = {nodeDirent: item, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath};
@@ -380,6 +378,10 @@ class DirentListItem extends React.Component {
       return ;
     }
 
+    if (e.dataTransfer && e.dataTransfer.setDragImage) {
+      e.dataTransfer.setDragImage(this.refs.drag_icon, 15, 15);
+    }
+
     let nodeRootPath = this.getDirentPath(this.props.dirent);
     let dragStartItemData = {nodeDirent: this.props.dirent, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath};
     dragStartItemData = JSON.stringify(dragStartItemData);
@@ -426,6 +428,8 @@ class DirentListItem extends React.Component {
     }
     if (this.props.dirent.type === 'dir') {
       e.stopPropagation();
+    } else {
+      return;
     }
     let dragStartItemData = e.dataTransfer.getData('applicaiton/drag-item-info');
     dragStartItemData = JSON.parse(dragStartItemData);
@@ -451,10 +455,6 @@ class DirentListItem extends React.Component {
       return;
     }
 
-    if (dropItemData.type !== 'dir') {
-      return;
-    } 
-
     //  copy the dirent to it's child. eg: A/B -> A/B/C
     if (dropItemData.type === 'dir' && nodeDirent.type === 'dir') {
       if (nodeParentPath !== this.props.path) {
@@ -617,6 +617,7 @@ class DirentListItem extends React.Component {
                 <img ref='drag_icon' src={iconUrl} width="24" alt='' />
               }
               {dirent.is_locked && <img className="locked" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={lockedInfo}/>}
+              <div ref="empty_content" style={{position: 'absolute', width: '1px', height: '1px'}}></div>
             </div>
           </td>
           <td className="name">

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -17,6 +17,7 @@ import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import DirentListItem from './dirent-list-item';
 import ContextMenu from '../context-menu/context-menu';
 import { hideMenu, showMenu } from '../context-menu/actions';
+import DirentsDraggedPreview from '../draggable/dirents-dragged-preview';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -69,6 +70,7 @@ class DirentListView extends React.Component {
       isMutipleOperation: true,
       activeDirent: null,
       isListDropTipShow: false,
+      isShowDirentsDraggablePreview: false,
     };
 
     this.enteredCounter = 0; // Determine whether to enter the child element to avoid dragging bubbling bugs。
@@ -567,6 +569,9 @@ class DirentListView extends React.Component {
     }
     this.enteredCounter++;
     if (this.enteredCounter !== 0) {
+      if (this.state.isListDropTipShow) {
+        return ;
+      }
       this.setState({isListDropTipShow: true});
     }
   }
@@ -619,6 +624,18 @@ class DirentListView extends React.Component {
     this.props.onItemMove(this.props.currentRepoInfo, nodeDirent, this.props.path, nodeParentPath);
   }
 
+  onShowDirentsDraggablePreview = () => {
+    this.setState({
+      isShowDirentsDraggablePreview: true,
+    });
+  }
+
+  onHideDirentsDraggablePreview = () => {
+    this.setState({
+      isShowDirentsDraggablePreview: false
+    });
+  }
+
   render() {
     const { direntList, sortBy, sortOrder } = this.props;
 
@@ -694,6 +711,7 @@ class DirentListView extends React.Component {
                   getDirentItemMenuList={this.getDirentItemMenuList}
                   showDirentDetail={this.props.showDirentDetail}
                   onItemsMove={this.props.onItemsMove}
+                  onShowDirentsDraggablePreview={this.onShowDirentsDraggablePreview}
                 />
               );
             })}
@@ -714,6 +732,15 @@ class DirentListView extends React.Component {
             id={'dirents-menu'}
             onMenuItemClick={this.onDirentsMenuItemClick}
           />
+          {this.state.isShowDirentsDraggablePreview && 
+            <ModalPortal>
+              <DirentsDraggedPreview 
+                selectedDirentList={this.props.selectedDirentList}
+                onHideDirentsDraggablePreview={this.onHideDirentsDraggablePreview}
+                dragStartPosition={this.state.dragStartPosition}
+              />
+            </ModalPortal>
+          }
           {this.state.isImagePopupOpen && (
             <ModalPortal>
               <ImageDialog

frontend/src/components/draggable/dirents-dragged-preview.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+
+const propTypes = {
+  selectedDirentList: PropTypes.array,
+  onHideDirentsDraggablePreview: PropTypes.func
+};
+
+class DirentsDraggedPreview extends React.Component {
+
+  componentDidMount() {
+    document.addEventListener('dragover', this.handleDragOver);
+    document.addEventListener('drop', this.handleDrop);
+    document.addEventListener('dragend', this.handleDragEnd);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('dragover', this.handleDragOver);
+    document.removeEventListener('drop', this.handleDrop);
+    document.removeEventListener('dragend', this.handleDragEnd);
+  }
+
+  handleDragEnd = () => {
+    this.element.style.opacity = 0;
+    this.props.onHideDirentsDraggablePreview();
+  }
+
+  handleDragOver = (event) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+
+    this.element.style.top = event.clientY + 'px';
+    this.element.style.left = event.clientX + 'px';
+  }
+
+  handleDrop = (event) => {
+    this.element.style.opacity = 0;
+    this.props.onHideDirentsDraggablePreview();
+  }
+
+  render() {
+    let{ selectedDirentList } = this.props;
+    const inlineStyle = { 
+      position: 'absolute', 
+      opacity: 1, 
+      pointerEvents: 'none', 
+      display: 'block', 
+      left: '-9999px',
+      top: '-9999px',
+      zIndex: 101,
+      maxHeight: document.documentElement.clientHeight,
+      overflow: 'hidden'
+    };
+    return (
+      <div style={inlineStyle} ref={element => this.element = element}>
+        {selectedDirentList.map((dirent, index) => {
+          let iconUrl = Utils.getDirentIcon(dirent);
+          return (
+            <div key={index}>
+              {dirent.encoded_thumbnail_src ?
+                <img src={`${siteRoot}${dirent.encoded_thumbnail_src}`} className="thumbnail cursor-pointer" alt="" /> :
+                <img src={iconUrl} width="24" alt='' />
+              }
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+DirentsDraggedPreview.propTypes = propTypes;
+
+export default DirentsDraggedPreview;