Merge pull request #456 from ONLYOFFICE/bugfix/fixed-tree-menu-class-…

…list Web: Files: moved the tree id from classname to dataset
ONLYOFFICE · Nov 12, 2021 · 63aee3f · 63aee3f
2 parents 3c0b1a4 + b5b61c4
commit 63aee3f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 38 deletions.
diff --git a/packages/asc-web-common/api/files/index.js b/packages/asc-web-common/api/files/index.js
@@ -64,26 +64,28 @@ export function getFolder(folderId, filter) {
   return request(options);
 }
 
-// const getFolderNameByType = (folderType) => {
-//   switch (folderType) {
-//     case FolderType.USER:
-//       return "@my";
-//     case FolderType.SHARE:
-//       return "@share";
-//     case FolderType.COMMON:
-//       return "@common";
-//     case FolderType.Projects:
-//       return "@projects";
-//     case FolderType.Favorites:
-//       return "@favorites";
-//     case FolderType.Recent:
-//       return "@recent";
-//     case FolderType.TRASH:
-//       return "@trash";
-//     default:
-//       return "";
-//   }
-// }; //TODO: need get from settings
+const getFolderClassNameByType = (folderType) => {
+  switch (folderType) {
+    case FolderType.USER:
+      return "tree-node-my";
+    case FolderType.SHARE:
+      return "tree-node-share";
+    case FolderType.COMMON:
+      return "tree-node-common";
+    case FolderType.Projects:
+      return "tree-node-projects";
+    case FolderType.Favorites:
+      return "tree-node-favorites";
+    case FolderType.Recent:
+      return "tree-node-recent";
+    case FolderType.Privacy:
+      return "tree-node-privacy";
+    case FolderType.TRASH:
+      return "tree-node-trash";
+    default:
+      return "";
+  }
+};
 
 const sortInDisplayOrder = (folders) => {
   const sorted = [];
@@ -145,15 +147,15 @@ export function getFoldersTree() {
       const folders = sortInDisplayOrder(response);
       return folders.map((data, index) => {
         const type = +data.current.rootFolderType;
-        //const name = getFolderNameByType(type);
+        const name = getFolderClassNameByType(type);
         const isRecycleBinFolder = type === FolderType.TRASH;
         return {
           id: data.current.id,
           key: `0-${index}`,
           parentId: data.current.parentId,
           title: data.current.title,
           rootFolderType: type,
-          //rootFolderName: name,
+          folderClassName: name,
           // folders: !isRecycleBinFolder
           //   ? data.folders.map((folder) => {
           //       return {

diff --git a/products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js b/products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js
@@ -211,17 +211,19 @@ class TreeFolders extends React.Component {
       const provider = item.providerKey;
 
       const serviceFolder = !!item.providerKey;
-      let className = `tree-drag tree-id_${item.id}`;
 
       if (withoutProvider && provider) return;
 
-      if (dragging) className += " dragging";
+      let value = "";
+      if (dragging) value = `${item.id} dragging`;
+
       if ((item.folders && item.folders.length > 0) || serviceFolder) {
         return (
           <TreeNode
             id={item.id}
             key={item.id}
-            className={className}
+            className={`tree-drag ${item.folderClassName}`}
+            data-value={value}
             title={item.title}
             icon={this.getFolderIcon(item)}
             dragging={dragging}
@@ -251,7 +253,8 @@ class TreeFolders extends React.Component {
         <TreeNode
           id={item.id}
           key={item.id}
-          className={className}
+          className={`tree-drag ${item.folderClassName}`}
+          data-value={value}
           title={item.title}
           needTopMargin={item.rootFolderType === FolderType.TRASH}
           dragging={dragging}

diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/index.js
@@ -127,18 +127,10 @@ const SectionBodyContent = (props) => {
     document.body.classList.remove("drag-cursor");
 
     const treeElem = e.target.closest(".tree-drag");
-    const treeClassList = treeElem && treeElem.classList;
-    const isDragging = treeElem && treeClassList.contains("dragging");
-
-    let index = null;
-    for (let i in treeClassList) {
-      if (treeClassList[i] === "dragging") {
-        index = i - 1;
-        break;
-      }
-    }
-
-    const treeValue = isDragging ? treeClassList[index].split("_")[1] : null;
+    const treeDataValue = treeElem?.dataset?.value;
+    const splitValue = treeDataValue && treeDataValue.split(" ");
+    const isDragging = splitValue && splitValue.includes("dragging");
+    const treeValue = isDragging ? splitValue[0] : null;
 
     const elem = e.target.closest(".droppable");
     const title = elem && elem.dataset.title;