Merge branch 'feature/files' of github.com:ONLYOFFICE/AppServer into feature/files

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

@@ -1,7 +1,8 @@
 import React from "react";
 import { TreeMenu, TreeNode, Icons, toastr, utils } from "asc-web-components";
-import { api } from "asc-web-common";
+import { api, constants } from "asc-web-common";
 const { files } = api;
+const { FolderType, ShareAccessRights } = constants;
 
 class TreeFolders extends React.Component {
   constructor(props) {
@@ -32,8 +33,33 @@ class TreeFolders extends React.Component {
     }
   };
 
+  showDragItems = (item) => {
+    if (item.id === this.props.currentId) {
+      return false;
+    }
+    if (
+      item.rootFolderType === FolderType.SHARE &&
+      item.access === ShareAccessRights.FullAccess
+    ) {
+      return true;
+    } else if (this.props.isMy || this.props.isCommon) {
+      if (
+        (item.pathParts &&
+          (item.pathParts[0] === this.props.myId ||
+            item.pathParts[0] === this.props.commonId)) ||
+        item.rootFolderType === FolderType.USER ||
+        item.rootFolderType === FolderType.COMMON
+      ) {
+        return true;
+      }
+    }
+    return false;
+  };
+
   getItems = data => {
     return data.map(item => {
+      const dragging = this.showDragItems(item);
+
       if (item.folders && item.folders.length > 0) {
         return (
           <TreeNode
@@ -41,6 +67,7 @@ class TreeFolders extends React.Component {
             key={item.id}
             title={item.title}
             icon={this.getFolderIcon(item.key)}
+            dragging={this.props.dragging && dragging}
           >
             {this.getItems(item.folders)}
           </TreeNode>
@@ -51,6 +78,7 @@ class TreeFolders extends React.Component {
           id={item.id}
           key={item.id}
           title={item.title}
+          dragging={this.props.dragging && dragging}
           isLeaf={item.foldersCount ? false : true}
           icon={this.getFolderIcon(item.key)}
         />
@@ -195,6 +223,20 @@ class TreeFolders extends React.Component {
     }
   }
 
+  onMouseEnter = (data) => {
+    if (this.props.dragging) {
+      if(data.node.props.dragging) {
+        this.props.setDragItem(data.node.props.id);
+      }
+    }
+  };
+
+  onMouseLeave = data => {
+    if (this.props.dragging && this.props.dragItem) {
+      this.props.setDragItem(null);
+    }
+  };
+
   render() {
     const {
       selectedKeys,
@@ -204,7 +246,6 @@ class TreeFolders extends React.Component {
       needUpdate
     } = this.props;
     const { treeData, expandedKeys, loaded } = this.state;
-
     const loadProp = loaded && needUpdate ? { loadData: this.onLoadData } : {};
 
     return (
@@ -223,6 +264,8 @@ class TreeFolders extends React.Component {
         {...loadProp}
         expandedKeys={expandedKeys}
         onExpand={this.onExpand}
+        onMouseEnter={this.onMouseEnter}
+        onMouseLeave={this.onMouseLeave}
       >
         {this.getItems(treeData)}
       </TreeMenu>

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

@@ -5,7 +5,8 @@ import TreeFolders from "./TreeFolders";
 import {
   setFilter,
   fetchFiles,
-  setTreeFolders
+  setTreeFolders,
+  setDragItem
 } from "../../../store/files/actions";
 import store from "../../../store/store";
 
@@ -45,7 +46,15 @@ class ArticleBodyContent extends React.Component {
       setFilter,
       setTreeFolders,
       onLoading,
-      isLoading
+      isLoading,
+      dragging,
+      setDragItem,
+      dragItem,
+      isMy,
+      myId,
+      isCommon,
+      commonId,
+      currentId
     } = this.props;
 
     //console.log("Article Body render", this.props, this.state.expandedKeys);
@@ -61,24 +70,46 @@ class ArticleBodyContent extends React.Component {
         expandedKeys={this.state.expandedKeys}
         onLoading={onLoading}
         isLoading={isLoading}
+        dragging={dragging}
+        setDragItem={setDragItem}
+        dragItem={dragItem}
+        isMy={isMy}
+        myId={myId}
+        isCommon={isCommon}
+        commonId={commonId}
+        currentId={currentId}
       />
     );
   }
 }
 
 function mapStateToProps(state) {
-  const { treeFolders, selectedFolder, filter } = state.files;
+  const { treeFolders, selectedFolder, filter, dragItem } = state.files;
   const currentFolderId = selectedFolder.id.toString();
   const fakeNewDocuments = 8;
+  const myFolderIndex = 0;
+  const commonFolderIndex = 2;
+
+  const myId = treeFolders[myFolderIndex].id;
+  const commonId = treeFolders[commonFolderIndex].id
+
+  const isMy = selectedFolder.pathParts[0] === myId;
+  const isCommon = selectedFolder.pathParts[0] === commonId;
 
   return {
     data: treeFolders,
     selectedKeys: selectedFolder ? [currentFolderId] : [""],
     fakeNewDocuments,
-    filter
+    filter,
+    isMy,
+    isCommon,
+    myId,
+    commonId,
+    dragItem,
+    currentId: selectedFolder.id
   };
 }
 
-export default connect(mapStateToProps, { setFilter, setTreeFolders })(
+export default connect(mapStateToProps, { setFilter, setTreeFolders, setDragItem })(
   ArticleBodyContent
 );

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

@@ -680,7 +680,7 @@ class SectionBodyContent extends React.Component {
   }
 
   onMouseUp = e => {
-    const { selection, dragging, setDragging } = this.props;
+    const { selection, dragging, setDragging, dragItem } = this.props;
     const mouseButton = e.which ? e.which !== 1 : e.button ? e.button !== 0 : false;
     if(mouseButton || !this.tooltipRef.current || !dragging) { return; }
     document.removeEventListener("mousemove", this.onMouseMove);
@@ -710,6 +710,10 @@ class SectionBodyContent extends React.Component {
       }
     } else {
       setDragging(false);
+      if(dragItem) {
+        this.onMoveTo(dragItem);
+        return;
+      }
       return;
     }
   }
@@ -936,7 +940,7 @@ SectionBodyContent.defaultProps = {
 };
 
 const mapStateToProps = state => {
-  const { selectedFolder, treeFolders, selection } = state.files;
+  const { selectedFolder, treeFolders, selection, dragItem } = state.files;
   const { id, title, foldersCount, filesCount } = selectedFolder;
   const currentFolderType = getFolderType(id, treeFolders);
 
@@ -959,7 +963,8 @@ const mapStateToProps = state => {
     title,
     myDocumentsId: treeFolders[myFolderIndex].id,
     currentFolderCount,
-    selectedFolderId: id
+    selectedFolderId: id,
+    dragItem
   };
 };
 

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

@@ -596,6 +596,7 @@ class PureHome extends React.Component {
             <ArticleBodyContent
               onLoading={this.onLoading}
               isLoading={isLoading}
+              dragging={dragging}
             />
           }
           sectionHeaderContent={

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

@@ -29,6 +29,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_DRAG_ITEM = "SET_DRAG_ITEM";
 
 export function setFile(file) {
   return {
@@ -93,6 +94,13 @@ export function setTreeFolders(treeFolders) {
   };
 }
 
+export function setDragItem(dragItem) {
+  return {
+    type: SET_DRAG_ITEM,
+    dragItem
+  }
+}
+
 export function setFilesFilter(filter) {
   setFilterUrl(filter);
   return {

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

@@ -11,7 +11,8 @@ import {
   SET_SELECTED,
   SET_SELECTION,
   SELECT_FILE,
-  DESELECT_FILE
+  DESELECT_FILE,
+  SET_DRAG_ITEM
 } from "./actions";
 import { api } from "asc-web-common";
 import { isFileSelected, skipFile, getFilesBySelected } from "./selectors";
@@ -27,7 +28,8 @@ const initialState = {
   treeFolders: [],
   selected: "none",
   selectedFolder: null,
-  selection: []
+  selection: [],
+  dragItem: null
 };
 
 const filesReducer = (state = initialState, action) => {
@@ -93,6 +95,10 @@ const filesReducer = (state = initialState, action) => {
       return Object.assign({}, state, {
         fileAction: action.fileAction
       })
+    case SET_DRAG_ITEM: 
+      return Object.assign({}, state, {
+        dragItem: action.dragItem
+      });
     default:
       return state;
   }

web/ASC.Web.Components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asc-web-components",
-  "version": "1.0.385",
+  "version": "1.0.386",
   "description": "Ascensio System SIA component library",
   "license": "AGPL-3.0",
   "main": "dist/asc-web-components.js",

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

@@ -48,13 +48,14 @@ const TreeNodeMenu = styled(TreeNode)`
 
     position: relative;
 
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+
     .draggable {
         color: #333;
-        -moz-user-select: none;
-        -khtml-user-select: none;
-        -webkit-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
         /* Required to make elements draggable in old WebKit */
         -khtml-user-drag: element;
         -webkit-user-drag: element;
@@ -91,7 +92,11 @@ const TreeNodeMenu = styled(TreeNode)`
 
         position: absolute;
         left: 0;
+        background: ${props => props.dragging ? "#F8F7BF" : "none"};
 
+        :hover {
+            background: ${props => props.dragging ? "#EFEFB2" : "none"};
+        }
     }
     span.rc-tree-switcher,
     span.rc-tree-iconEle {
@@ -221,6 +226,10 @@ const TreeNodeMenu = styled(TreeNode)`
         border-radius: 3px;
         z-index: 0;
         width: 108%;
+
+        :hover {
+            background: #DFE2E3;
+        }
     }
     
 `;