Web: Files: Fixed first scroll to deep folder.

products/ASC.Files/Client/src/components/FolderTreeBody/TreeFolders.js

@@ -2,7 +2,11 @@ import React from "react";
 import TreeMenu from "@appserver/components/tree-menu";
 import TreeNode from "@appserver/components/tree-menu/sub-components/tree-node";
 import styled from "styled-components";
-import { FolderType, ShareAccessRights } from "@appserver/common/constants";
+import {
+  ConflictResolveType,
+  FolderType,
+  ShareAccessRights,
+} from "@appserver/common/constants";
 import toastr from "studio/toastr";
 
 import { onConvertFiles } from "../../helpers/files-converter";
@@ -215,8 +219,8 @@ class TreeFolders extends React.Component {
   };
 
   getItems = (data) => {
-    const { withoutProvider, theme } = this.props;
-    return data.map((item) => {
+    const { withoutProvider, theme, parentId } = this.props;
+    return data.map((item, index) => {
       const dragging = this.props.dragging ? this.showDragItems(item) : false;
 
       const showBadge = item.newItems
@@ -232,6 +236,23 @@ class TreeFolders extends React.Component {
       let value = "";
       if (dragging) value = `${item.id} dragging ${provider}`;
 
+      if (this.needScroll) {
+        console.log("this.needScroll", this.needScroll);
+        if (item.parentId.toString() === parentId.toString()) {
+          if (index === this.child) {
+            this.props.setIsLoadingNodes(false);
+            const selectedNode = document.getElementsByClassName(
+              "rc-tree-node-selected"
+            )[0];
+            if (selectedNode) {
+              document
+                .querySelector("#folder-tree-scroll-bar > .scroll-body")
+                .scrollTo(0, selectedNode.offsetTop + index * 36);
+            }
+          }
+        }
+      }
+
       if ((item.folders && item.folders.length > 0) || serviceFolder) {
         return (
           <TreeNode
@@ -322,6 +343,12 @@ class TreeFolders extends React.Component {
   };
 
   getNewTreeData(treeData, curId, child, pos) {
+    this.child = null;
+    !this.expand && this.props.setIsLoadingNodes(true);
+    if (!this.expand && curId.toString() === this.props.parentId.toString()) {
+      this.needScroll = true;
+      this.child = child.length - 1;
+    }
     this.loop(treeData, child, pos);
     this.setLeaf(treeData, curId, 10);
   }
@@ -398,6 +425,8 @@ class TreeFolders extends React.Component {
   };
 
   onExpand = (expandedKeys, treeNode) => {
+    this.needScroll = false;
+    this.expand = true;
     if (treeNode.node && !treeNode.node.children) {
       if (treeNode.expanded) {
         this.onLoadData(treeNode.node, true);
@@ -461,6 +490,7 @@ class TreeFolders extends React.Component {
       disabled,
       theme,
       isPanel,
+      isLoadingNodes,
     } = this.props;
 
     return (
@@ -469,7 +499,7 @@ class TreeFolders extends React.Component {
         className="files-tree-menu"
         checkable={false}
         draggable={dragging}
-        disabled={isLoading || disabled}
+        disabled={isLoadingNodes || isLoading || disabled}
         multiple={false}
         showIcon
         switcherIcon={this.switcherIcon}
@@ -520,6 +550,8 @@ export default inject(
       setExpandedKeys,
       setExpandedPanelKeys,
       getSubfolders,
+      setIsLoadingNodes,
+      isLoadingNodes,
     } = treeFoldersStore;
     const { id /* rootFolderType */ } = selectedFolderStore;
 
@@ -545,6 +577,8 @@ export default inject(
       setExpandedKeys,
       setExpandedPanelKeys,
       getSubfolders,
+      setIsLoadingNodes,
+      isLoadingNodes,
     };
   }
 )(withTranslation(["Home", "Common"])(observer(TreeFolders)));

products/ASC.Files/Client/src/components/FolderTreeBody/index.js

@@ -16,6 +16,8 @@ const FolderTreeBody = ({
   selectedKeys,
   theme,
   isDisableTree,
+  parentId,
+  isLoadingNodes,
 }) => {
   const { t } = useTranslation(["SelectFolder", "Common"]);
 
@@ -33,7 +35,7 @@ const FolderTreeBody = ({
   return (
     <>
       {isAvailable ? (
-        <StyledTree theme={theme}>
+        <StyledTree theme={theme} isLoadingNodes={isLoadingNodes}>
           <div className="selection-panel_tree-folder">
             <Scrollbar id="folder-tree-scroll-bar" stype="mediumBlack">
               <TreeFolders
@@ -48,6 +50,7 @@ const FolderTreeBody = ({
                 disabled={isDisableTree}
                 needUpdate={false}
                 defaultExpandAll
+                parentId={parentId}
               />
             </Scrollbar>
           </div>
@@ -71,7 +74,7 @@ FolderTreeBody.defaultProps = {
 export default inject(
   ({ filesStore, treeFoldersStore, selectedFolderStore }) => {
     const { filter, isLoading } = filesStore;
-    const { expandedPanelKeys } = treeFoldersStore;
+    const { expandedPanelKeys, isLoadingNodes } = treeFoldersStore;
 
     const expandedKeysProp = expandedPanelKeys
       ? expandedPanelKeys
@@ -83,6 +86,7 @@ export default inject(
 
       filter,
       isLoading,
+      isLoadingNodes,
     };
   }
 )(observer(FolderTreeBody));

products/ASC.Files/Client/src/components/panels/SelectFileDialog/index.js

@@ -222,6 +222,7 @@ class SelectFileDialog extends React.Component {
       maxInputWidth,
       folderId,
       fileInfo,
+      storeParentId,
     } = this.props;
     const {
       isVisible,
@@ -285,6 +286,7 @@ class SelectFileDialog extends React.Component {
         filesListTitle={filesListTitle}
         fileId={fileInfo?.id}
         newFilter={this.newFilter}
+        parentId={storeParentId}
       />
     );
   }
@@ -332,7 +334,7 @@ export default inject(
 
     const { treeFolders, setExpandedPanelKeys } = treeFoldersStore;
     const { filter } = filesStore;
-    const { id: storeFolderId } = selectedFolderStore;
+    const { id: storeFolderId, parentId } = selectedFolderStore;
 
     const { settingsStore } = auth;
     const { theme } = settingsStore;
@@ -345,6 +347,7 @@ export default inject(
       filter,
       treeFolders,
       storeFolderId,
+      storeParentId: parentId,
       folderId,
       theme: theme,
       setExpandedPanelKeys,

products/ASC.Files/Client/src/components/panels/SelectFolderDialog/AsideView.js

@@ -35,6 +35,7 @@ const SelectFolderDialogAsideView = ({
   primaryButtonName,
   isDisableTree,
   isDisableButton,
+  parentId,
 }) => {
   return (
     <StyledModalDialog
@@ -73,6 +74,7 @@ const SelectFolderDialogAsideView = ({
             <div className="selection-panel_aside-tree">
               {folderId && resultingFolderTree ? (
                 <FolderTreeBody
+                  parentId={parentId}
                   theme={theme}
                   folderTree={resultingFolderTree}
                   onSelect={onSelectFolder}

products/ASC.Files/Client/src/components/panels/SelectFolderDialog/index.js

@@ -187,6 +187,7 @@ class SelectFolderDialog extends React.Component {
       folderTitle,
       expandedKeys,
       isDisableButton,
+      storeParentId,
     } = this.props;
     const {
       displayType,
@@ -226,6 +227,7 @@ class SelectFolderDialog extends React.Component {
         isAvailable={isAvailable}
         isDisableTree={isDisableTree}
         isDisableButton={isDisableButton}
+        parentId={storeParentId}
       />
     ) : (
       <SelectionPanel
@@ -250,6 +252,7 @@ class SelectFolderDialog extends React.Component {
         folderSelection
         newFilter={this.newFilter}
         isDisableButton={isDisableButton}
+        parentId={storeParentId}
       />
     );
   }
@@ -289,7 +292,7 @@ export default inject(
     const { treeFolders, setExpandedPanelKeys } = treeFoldersStore;
 
     const { filter } = filesStore;
-    const { id } = selectedFolderStore;
+    const { id, parentId } = selectedFolderStore;
     const {
       setFolderId,
       setFolderTitle,
@@ -305,6 +308,7 @@ export default inject(
     return {
       theme: theme,
       storeFolderId: id,
+      storeParentId: parentId,
       providerKey,
       folderTitle,
       folderId,

products/ASC.Files/Client/src/components/panels/SelectionPanel/SelectionPanelBody.js

@@ -45,6 +45,7 @@ const SelectionPanelBody = ({
   page,
   newFilter,
   isDisableButton,
+  parentId,
 }) => {
   const onMouseEvent = (event) => {
     event.stopPropagation();
@@ -87,6 +88,7 @@ const SelectionPanelBody = ({
                     certainFolders
                     isAvailable={isAvailable}
                     selectedKeys={[`${folderId}`]}
+                    parentId={parentId}
                     expandedKeys={expandedKeys}
                     isDisableTree={isDisableTree}
                     displayType="modal"

products/ASC.Files/Client/src/components/panels/SelectionPanel/StyledSelectionPanel.js

@@ -262,6 +262,7 @@ const StyledTree = styled.div`
       `}
 
     .scroll-body {
+      ${(props) => props.isLoadingNodes && "overflow-y: hidden !important"};
       overflow-x: hidden !important;
       padding-right: 0px !important;
     }

products/ASC.Files/Client/src/store/TreeFoldersStore.js

@@ -11,6 +11,7 @@ class TreeFoldersStore {
   expandedKeys = [];
   expandedPanelKeys = null;
   rootFoldersTitles = {};
+  isLoadingNodes = false;
 
   constructor(selectedFolderStore) {
     makeAutoObservable(this);
@@ -36,6 +37,9 @@ class TreeFoldersStore {
     this.treeFolders = treeFolders;
   };
 
+  setIsLoadingNodes = (isLoadingNodes) => {
+    this.isLoadingNodes = isLoadingNodes;
+  };
   setSelectedNode = (node) => {
     if (node[0]) {
       this.selectedTreeNode = node;