Web: Files: moved dragging prop to redux, added onDrop function to TreeFolders

products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js

@@ -1,9 +1,19 @@
 import React from "react";
 import { TreeMenu, TreeNode, Icons, toastr, utils, Badge } from "asc-web-components";
+import styled from "styled-components";
 import { api, constants } from "asc-web-common";
 const { files } = api;
 const { FolderType, ShareAccessRights } = constants;
 
+const backgroundDragColor = "#EFEFB2";
+const backgroundDragEnterColor = "#F8F7BF";
+
+const StyledTreeMenu = styled(TreeMenu)`
+  .rc-tree-node-content-wrapper{
+    background: ${props => !props.dragging && "none !important"};
+  }  
+`;
+
 class TreeFolders extends React.Component {
   constructor(props) {
     super(props);
@@ -267,22 +277,53 @@ class TreeFolders extends React.Component {
     }
   };
 
-  onMouseLeave = data => {
+  onMouseLeave = () => {
     if (this.props.dragging) {
       this.props.setDragItem(null);
     }
   };
 
+  onDragOver = data => {
+    const parentElement = data.event.target.parentElement;
+    const existElement = parentElement.classList.contains("rc-tree-node-content-wrapper");
+
+    if(existElement) {
+      if(data.node.props.dragging) {
+        parentElement.style.background = backgroundDragColor;
+      }
+    }
+  }
+
+  onDragLeave = data => {
+    const parentElement = data.event.target.parentElement;
+    const existElement = parentElement.classList.contains("rc-tree-node-content-wrapper");
+
+    if(existElement) {
+      if(data.node.props.dragging) {
+        parentElement.style.background = backgroundDragEnterColor;
+      }
+    }
+  }
+
+  onDrop = data => {
+    const { setDragging, onTreeDrop } = this.props;
+    const { dragging, id } = data.node.props;
+    setDragging(false);
+    if(dragging) {
+      onTreeDrop(data.event, id);
+    }
+  }
+
   render() {
-    const { selectedKeys, isLoading, onSelect, needUpdate } = this.props;
+    const { selectedKeys, isLoading, onSelect, needUpdate, dragging } = this.props;
     const { treeData, expandedKeys } = this.state;
     const loadProp = needUpdate ? { loadData: this.onLoadData } : {};
 
     return (
-      <TreeMenu
+      <StyledTreeMenu
         className="files-tree-menu"
         checkable={false}
-        draggable={false}
+        draggable
         disabled={isLoading}
         multiple={false}
         showIcon
@@ -294,9 +335,14 @@ class TreeFolders extends React.Component {
         onExpand={this.onExpand}
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
+
+        onDragOver={this.onDragOver}
+        onDragLeave={this.onDragLeave}
+        onDrop={this.onDrop}
+        dragging={dragging}
       >
         {this.getItems(treeData)}
-      </TreeMenu>
+      </StyledTreeMenu>
     );
   }
 }

products/ASC.Files/Client/src/components/Article/Body/index.js

@@ -6,7 +6,8 @@ import {
   setFilter,
   fetchFiles,
   setTreeFolders,
-  setDragItem
+  setDragItem,
+  setDragging
 } from "../../../store/files/actions";
 import store from "../../../store/store";
 import isEqual from "lodash/isEqual";
@@ -37,13 +38,13 @@ class ArticleBodyContent extends React.Component {
     }
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  /*shouldComponentUpdate(nextProps, nextState) {
     if (!isEqual(this.state, nextState) || !isEqual(this.props, nextProps)) {
       return true;
     }
 
-    return true;
-  }
+    return false;
+  }*/
 
   onSelect = data => {
     const { selectedKeys, filter, onLoading } = this.props;
@@ -88,7 +89,9 @@ class ArticleBodyContent extends React.Component {
       commonId,
       currentId,
       isAdmin,
-      isShare
+      isShare,
+      setDragging,
+      onTreeDrop
     } = this.props;
 
     const { showNewFilesPanel, expandedKeys, newFolderId } = this.state;
@@ -120,6 +123,7 @@ class ArticleBodyContent extends React.Component {
           onLoading={onLoading}
           isLoading={isLoading}
           dragging={dragging}
+          setDragging={setDragging}
           setDragItem={setDragItem}
           isMy={isMy}
           myId={myId}
@@ -129,6 +133,7 @@ class ArticleBodyContent extends React.Component {
           isAdmin={isAdmin}
           isShare={isShare}
           onBadgeClick={this.onShowNewFilesPanel}
+          onTreeDrop={onTreeDrop}
         />
       </>
     );
@@ -136,7 +141,7 @@ class ArticleBodyContent extends React.Component {
 }
 
 function mapStateToProps(state) {
-  const { treeFolders, selectedFolder, filter, selection } = state.files;
+  const { treeFolders, selectedFolder, filter, selection, dragging } = state.files;
   const currentFolderId = selectedFolder.id.toString();
   const myFolderIndex = 0;
   const shareFolderIndex = 1;
@@ -169,10 +174,11 @@ function mapStateToProps(state) {
     commonId,
     currentId: selectedFolder.id,
     isAdmin: state.auth.user.isAdmin,
-    selection
+    selection,
+    dragging
   };
 }
 
-export default connect(mapStateToProps, { setFilter, setTreeFolders, setDragItem })(
+export default connect(mapStateToProps, { setFilter, setTreeFolders, setDragItem, setDragging })(
   ArticleBodyContent
 );

products/ASC.Files/Client/src/components/pages/Home/Section/Body/index.js

@@ -28,6 +28,7 @@ import {
   moveToFolder,
   copyToFolder,
   getProgress,
+  setDragging,
   setDragItem,
   setMediaViewerData
 } from '../../../../../store/files/actions';
@@ -1057,7 +1058,7 @@ SectionBodyContent.defaultProps = {
 };
 
 const mapStateToProps = state => {
-  const { selectedFolder, treeFolders, selection, dragItem, mediaViewerData } = state.files;
+  const { selectedFolder, treeFolders, selection, dragItem, mediaViewerData, dragging } = state.files;
   const { id, title, foldersCount, filesCount, pathParts } = selectedFolder;
   const currentFolderType = getFolderType(id, treeFolders);
 
@@ -1091,7 +1092,8 @@ const mapStateToProps = state => {
     isCommon: pathParts[0] === commonFolderId,
     isAdmin: state.auth.user.isAdmin,
     mediaViewerVisible: mediaViewerData.visible,
-    currentMediaFileId: mediaViewerData.id
+    currentMediaFileId: mediaViewerData.id,
+    dragging
   };
 };
 
@@ -1109,6 +1111,7 @@ export default connect(
     moveToFolder,
     copyToFolder,
     getProgress,
+    setDragging,
     setDragItem,
     setMediaViewerData
   }

products/ASC.Files/Client/src/components/pages/Home/index.js

@@ -18,7 +18,7 @@ import {
   SectionFilterContent,
   SectionPagingContent
 } from "./Section";
-import { setSelected, fetchFiles, setTreeFolders, getProgress, getFolder, setFilter, selectFile, deselectFile } from "../../../store/files/actions";
+import { setSelected, fetchFiles, setTreeFolders, getProgress, getFolder, setFilter, selectFile, deselectFile, setDragging } from "../../../store/files/actions";
 import { loopTreeFolders, checkFolderType } from "../../../store/files/selectors";
 import store from "../../../store/store";
 const { changeLanguage } = utils;
@@ -43,8 +43,7 @@ class PureHome extends React.Component {
       files: [],
       uploadedFiles: 0,
       totalSize: 0,
-      percent: 0,
-      dragging: false
+      percent: 0
     };
   }
 
@@ -322,9 +321,10 @@ class PureHome extends React.Component {
       }
     };
     
-    this.setState({ isLoading: true, dragging: false }, () =>
+    this.setState({ isLoading: true }, () => {
+      this.props.setDragging(false);
       readItems(items, () => this.startUpload(files, folderId))
-    );
+    });
   };
 
   startUpload = (files, folderId) => {
@@ -515,8 +515,6 @@ class PureHome extends React.Component {
     }
   }
 
-  setDragging = dragging => this.setState({dragging});
-
   componentDidUpdate(prevProps) {
     if (this.props.selection !== prevProps.selection) {
       this.renderGroupButtonMenu();
@@ -535,8 +533,7 @@ class PureHome extends React.Component {
       progressBarLabel,
       overwriteSetting,
       uploadOriginalFormatSetting,
-      hideWindowSetting,
-      dragging
+      hideWindowSetting
     } = this.state;
     const { t } = this.props;
 
@@ -596,7 +593,7 @@ class PureHome extends React.Component {
             <ArticleBodyContent
               onLoading={this.onLoading}
               isLoading={isLoading}
-              dragging={dragging}
+              onTreeDrop={this.onDrop}
             />
           }
           sectionHeaderContent={
@@ -629,8 +626,6 @@ class PureHome extends React.Component {
               finishFilesOperations={this.finishFilesOperations}
               loopFilesOperations={this.loopFilesOperations}
               onDropZoneUpload={this.onDrop}
-              setDragging={this.setDragging}
-              dragging={dragging}
             />
           }
           sectionPagingContent={
@@ -676,5 +671,5 @@ function mapStateToProps(state) {
 
 export default connect(
   mapStateToProps,
-  { setSelected, setTreeFolders, getProgress, getFolder, setFilter, selectFile, deselectFile }
+  { setSelected, setTreeFolders, getProgress, getFolder, setFilter, selectFile, deselectFile, setDragging }
 )(withRouter(Home));

products/ASC.Files/Client/src/store/files/actions.js

@@ -31,6 +31,7 @@ export const SET_FILTER = "SET_FILTER";
 export const SELECT_FILE = "SELECT_FILE";
 export const DESELECT_FILE = "DESELECT_FILE";
 export const SET_ACTION = "SET_ACTION";
+export const SET_DRAGGING = "SET_DRAGGING";
 export const SET_DRAG_ITEM = "SET_DRAG_ITEM";
 export const SET_MEDIA_VIEWER_VISIBLE = "SET_MEDIA_VIEWER_VISIBLE";
 
@@ -97,6 +98,13 @@ export function setTreeFolders(treeFolders) {
   };
 }
 
+export function setDragging(dragging) {
+  return {
+    type: SET_DRAGGING,
+    dragging
+  }
+}
+
 export function setDragItem(dragItem) {
   return {
     type: SET_DRAG_ITEM,

products/ASC.Files/Client/src/store/files/reducers.js

@@ -12,6 +12,7 @@ import {
   SET_SELECTION,
   SELECT_FILE,
   DESELECT_FILE,
+  SET_DRAGGING,
   SET_DRAG_ITEM,
   SET_MEDIA_VIEWER_VISIBLE
 } from "./actions";
@@ -30,6 +31,7 @@ const initialState = {
   selected: "none",
   selectedFolder: null,
   selection: [],
+  dragging: false,
   dragItem: null,
   mediaViewerData: {visible: false, id: null}
 };
@@ -97,6 +99,10 @@ const filesReducer = (state = initialState, action) => {
       return Object.assign({}, state, {
         fileAction: action.fileAction
       })
+    case SET_DRAGGING: 
+      return Object.assign({}, state, {
+        dragging: action.dragging
+      });
     case SET_DRAG_ITEM: 
       return Object.assign({}, state, {
         dragItem: action.dragItem

web/ASC.Web.Components/src/components/tree-menu/sub-components/tree-node.js

@@ -57,8 +57,8 @@ const TreeNodeMenu = styled(TreeNode)`
     .draggable {
         color: #333;
         /* Required to make elements draggable in old WebKit */
-        -khtml-user-drag: element;
-        -webkit-user-drag: element;
+        -khtml-user-drag: none;
+        -webkit-user-drag: none;
     }
     &.drag-over > .draggable {
         background-color: #316ac5;