Merge pull request #3609 from haiwen/ie-bug-repair

Ie bug repair

frontend/src/components/context-menu/context-menu.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import listener from './globalEventListener';
 import { hideMenu } from './actions';
 import { callIfExists } from './helpers';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
@@ -192,7 +193,7 @@ class ContextMenu extends React.Component {
 
   onMenuItemClick = (event) => {
     event.stopPropagation();
-    let operation = event.target.dataset.operation;
+    let operation = Utils.getEventData(event, 'operation');
     let currentObject = this.state.currentObject;
     this.props.onMenuItemClick(operation, currentObject, event);
   }

frontend/src/components/cur-dir-path/dir-path.js

@@ -4,6 +4,7 @@ import { Link } from '@reach/router';
 import { UncontrolledTooltip } from 'reactstrap';
 import { siteRoot, gettext } from '../../utils/constants';
 import InternalLinkDialog from '../dialog/internal-link-dialog';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   repoName: PropTypes.string.isRequired,
@@ -19,7 +20,7 @@ const propTypes = {
 class DirPath extends React.Component {
 
   onPathClick = (e) => {
-    let path = e.target.dataset.path;
+    let path = Utils.getEventData(e, 'path');
     this.props.onPathClick(path);
   }
 

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

@@ -346,32 +346,49 @@ class DirentListItem extends React.Component {
   }
 
   onItemDragStart = (e) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     let nodeRootPath = '';
     nodeRootPath = this.props.path === '/' ? `${this.props.path}${this.props.dirent.name}` : `${this.props.path}/${this.props.dirent.name}`;
     let dragStartItemData = {nodeDirent: this.props.dirent, nodeParentPath: this.props.path, nodeRootPath: nodeRootPath};
     dragStartItemData = JSON.stringify(dragStartItemData);
 
     e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setDragImage(this.refs.drag_icon, 15, 15);
+    if (e.dataTransfer && e.dataTransfer.setDragImage) {
+      e.dataTransfer.setDragImage(this.refs.drag_icon, 15, 15);
+    }
     e.dataTransfer.setData('applicaiton/drag-item-info', dragStartItemData);
   }
 
   onItemDragEnter = () => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     if (this.props.dirent.type === 'dir') {
       this.setState({isDropTipshow: true});
     }
   }
   
   onItemDragOver = (e) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
   }
 
   onItemDragLeave = () => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     this.setState({isDropTipshow: false});
   }
 
   onItemDragDrop = (e) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     this.setState({isDropTipshow: false});
     if (e.dataTransfer.files.length) { // uploaded files
       return;

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

@@ -537,23 +537,35 @@ class DirentListView extends React.Component {
   }
 
   onTableDragEnter = (e) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     if (e.target.className === 'table-container ') {
       this.setState({isListDropTipShow: true});
     }
   }
 
   onTableDragOver = (e) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
   }
 
   onTableDragLeave = (e) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     if (e.target.className === 'table-container table-drop-active') {
       this.setState({isListDropTipShow: false});
     }
   }
 
   tableDrop = (e) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     e.persist();
     this.setState({isListDropTipShow: false});
     if (e.dataTransfer.files.length) { // uploaded files

frontend/src/components/dropdown-menu/item-dropdown-menu.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import listener from '../context-menu/globalEventListener';
 import { Dropdown, ButtonDropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   tagName: PropTypes.string,
@@ -87,7 +88,7 @@ class ItemDropdownMenu extends React.Component {
   }
 
   onMenuItemClick = (event) => {
-    let operation = event.target.dataset.toggle;
+    let operation = Utils.getEventData(event, 'toggle');
     let item = this.props.item;
     this.props.onMenuItemClick(operation, event, item);
   }

frontend/src/components/file-uploader/file-uploader.js

@@ -414,19 +414,19 @@ class FileUploader extends React.Component {
 
   onFileUpload = () => {
     this.uploadInput.current.removeAttribute('webkitdirectory');
-    this.uploadInput.current.click();
     let repoID = this.props.repoID;
     seafileAPI.getUploadLink(repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data;
+      this.uploadInput.current.click();
     });
   }
 
   onFolderUpload = () => {
     this.uploadInput.current.setAttribute('webkitdirectory', 'webkitdirectory');
-    this.uploadInput.current.click();
     let repoID = this.props.repoID;
     seafileAPI.getUploadLink(repoID, this.props.path).then(res => {
       this.resumable.opts.target = res.data;
+      this.uploadInput.current.click();
     });
   }
 

frontend/src/components/file-uploader/upload-list-item.js

@@ -39,7 +39,7 @@ class UploadListItem extends React.Component {
       <tr className="file-upload-item">
         <td className="upload-name">
           <div className="ellipsis">{item.resumableFile.relativePath}</div>
-          <div className="message err-message ml-0">{error}</div>
+          <div className="message err-message ml-0" dangerouslySetInnerHTML={{__html: error}}></div>
         </td>
         <td className="upload-progress">
           <span className="file-size">{this.formatFileSize(item.resumableFile.size)}</span>

frontend/src/components/toolbar/dir-operation-toolbar.js

@@ -55,9 +55,9 @@ class DirOperationToolbar extends React.Component {
 
   toggleOperationMenu = (e) => {
     e.nativeEvent.stopImmediatePropagation();
-    let targetRect = e.target.getClientRects()[0];
-    let left = targetRect.x;
-    let top  = targetRect.y + targetRect.height;
+    let targetRect = e.target.getBoundingClientRect();
+    let left = targetRect.left;
+    let top  = targetRect.bottom;
     let style = {position: 'fixed', display: 'block', left: left, top: top};
     this.setState({operationMenuStyle: style});
   }

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

@@ -4,6 +4,7 @@ import TextTranslation from '../../utils/text-translation';
 import TreeNodeView from './tree-node-view';
 import ContextMenu from '../context-menu/context-menu';
 import { hideMenu, showMenu } from '../context-menu/actions';
+import { Utils } from '../../utils/utils';
 
 const propTypes = {
   repoPermission: PropTypes.bool,
@@ -36,6 +37,9 @@ class TreeView extends React.Component {
   }
 
   onNodeDragStart = (e, node) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     let dragStartNodeData = {nodeDirent: node.object, nodeParentPath: node.parentNode.path, nodeRootPath: node.path};
     dragStartNodeData = JSON.stringify(dragStartNodeData);
     
@@ -44,6 +48,9 @@ class TreeView extends React.Component {
   }
 
   onNodeDragEnter = (e, node) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     e.persist();
     if (e.target.className === 'tree-view tree ') {
       this.setState({
@@ -53,11 +60,17 @@ class TreeView extends React.Component {
   }
 
   onNodeDragMove = (e) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     e.preventDefault();
     e.dataTransfer.dropEffect = 'move';
   }
 
   onNodeDragLeave = (e, node) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     if (e.target.className === 'tree-view tree tree-view-drop') {
       this.setState({
         isTreeViewDropTipShow: false,
@@ -66,6 +79,9 @@ class TreeView extends React.Component {
   }
 
   onNodeDrop = (e, node) => {
+    if (Utils.isIEBrower()) {
+      return false;
+    }
     if (e.dataTransfer.files.length) { // uploaded files
       return;
     }