Bugfix/render optimization

packages/asc-web-common/components/PageLayout/index.js

@@ -75,14 +75,6 @@ class PageLayout extends React.Component {
   constructor(props) {
     super(props);
 
-    const isArticleVisibleAndPinned = !!this.props.isArticlePinned;
-
-    this.state = {
-      isBackdropVisible: false,
-      isArticleVisible: isArticleVisibleAndPinned,
-      isArticlePinned: isArticleVisibleAndPinned,
-    };
-
     this.timeoutHandler = null;
     this.intervalHandler = null;
 
@@ -95,13 +87,9 @@ class PageLayout extends React.Component {
     }
 
     if (
-      (this.props.hideAside &&
-        !this.state.isArticlePinned &&
-        this.props.hideAside !== prevProps.hideAside) ||
-      (this.props.isLoading !== prevProps.isLoading &&
-        this.props.isLoaded &&
-        this.state.isArticleVisible &&
-        !this.state.isArticlePinned)
+      this.props.hideAside &&
+      !this.props.isArticlePinned &&
+      this.props.hideAside !== prevProps.hideAside
     ) {
       this.backdropClick();
     }
@@ -136,42 +124,30 @@ class PageLayout extends React.Component {
   };
 
   backdropClick = () => {
-    this.setState({
-      isBackdropVisible: false,
-      isArticleVisible: false,
-      isArticlePinned: false,
-    });
+    this.props.setArticlePinned(false);
+    this.props.setIsBackdropVisible(false);
+    this.props.setIsArticleVisible(false);
     isMobile && this.props.setArticleVisibleOnUnpin(false);
   };
 
   pinArticle = () => {
-    this.setState({
-      isBackdropVisible: false,
-      isArticlePinned: true,
-      isArticleVisible: true,
-    });
-
+    this.props.setIsBackdropVisible(false);
+    this.props.setIsArticleVisible(true);
     this.props.setArticlePinned(true);
     isMobile && this.props.setArticleVisibleOnUnpin(false);
   };
 
   unpinArticle = () => {
-    this.setState({
-      isBackdropVisible: true,
-      isArticlePinned: false,
-      isArticleVisible: true,
-    });
-
+    this.props.setIsBackdropVisible(true);
+    this.props.setIsArticleVisible(true);
     this.props.setArticlePinned(false);
     isMobile && this.props.setArticleVisibleOnUnpin(true);
   };
 
   showArticle = () => {
-    this.setState({
-      isBackdropVisible: true,
-      isArticleVisible: true,
-      isArticlePinned: false,
-    });
+    this.props.setArticlePinned(false);
+    this.props.setIsBackdropVisible(true);
+    this.props.setIsArticleVisible(true);
     isMobile && this.props.setArticleVisibleOnUnpin(true);
   };
 
@@ -221,8 +197,10 @@ class PageLayout extends React.Component {
       onOpenUploadPanel,
       isTabletView,
       firstLoad,
-      isLoading,
       dragging,
+      isArticleVisible,
+      isBackdropVisible,
+      isArticlePinned,
     } = this.props;
     let articleHeaderContent = null;
     let articleMainButtonContent = null;
@@ -291,17 +269,16 @@ class PageLayout extends React.Component {
           {isBackdropAvailable && (
             <Backdrop
               zIndex={400}
-              visible={this.state.isBackdropVisible}
+              visible={isBackdropVisible}
               onClick={this.backdropClick}
             />
           )}
           {isArticleAvailable && (
             <Article
-              visible={this.state.isArticleVisible}
-              pinned={this.state.isArticlePinned}
+              visible={isArticleVisible}
+              pinned={isArticlePinned}
               isLoaded={isLoaded}
               firstLoad={firstLoad}
-              isLoading={!isLoading}
             >
               {isArticleHeaderAvailable && (
                 <SubArticleHeader>
@@ -318,15 +295,15 @@ class PageLayout extends React.Component {
                 </SubArticleMainButton>
               )}
               {isArticleBodyAvailable && (
-                <SubArticleBody pinned={this.state.isArticlePinned}>
+                <SubArticleBody pinned={isArticlePinned}>
                   {articleBodyContent
                     ? articleBodyContent.props.children
                     : null}
                 </SubArticleBody>
               )}
               {isArticleBodyAvailable && (
                 <ArticlePinPanel
-                  pinned={this.state.isArticlePinned}
+                  pinned={isArticlePinned}
                   onPin={this.pinArticle}
                   onUnpin={this.unpinArticle}
                 />
@@ -349,12 +326,12 @@ class PageLayout extends React.Component {
                   <Section
                     widthProp={width}
                     unpinArticle={this.unpinArticle}
-                    pinned={this.state.isArticlePinned}
+                    pinned={isArticlePinned}
                   >
                     {isSectionHeaderAvailable && (
                       <SubSectionHeader
                         isHeaderVisible={isHeaderVisible}
-                        isArticlePinned={this.state.isArticlePinned}
+                        isArticlePinned={isArticlePinned}
                       >
                         {sectionHeaderContent
                           ? sectionHeaderContent.props.children
@@ -386,7 +363,7 @@ class PageLayout extends React.Component {
                           uploadFiles={uploadFiles}
                           withScroll={withBodyScroll}
                           autoFocus={isMobile || isTabletView ? false : true}
-                          pinned={this.state.isArticlePinned}
+                          pinned={isArticlePinned}
                           viewAs={viewAs}
                         >
                           {isSectionFilterAvailable && (
@@ -449,7 +426,7 @@ class PageLayout extends React.Component {
 
                     {isArticleAvailable && (
                       <SectionToggler
-                        visible={!this.state.isArticleVisible}
+                        visible={!isArticleVisible}
                         onClick={this.showArticle}
                       />
                     )}
@@ -519,7 +496,6 @@ PageLayout.propTypes = {
   isTabletView: PropTypes.bool,
   isHeaderVisible: PropTypes.bool,
   firstLoad: PropTypes.bool,
-  isLoading: PropTypes.bool,
 };
 
 PageLayout.defaultProps = {
@@ -541,15 +517,24 @@ export default inject(({ auth }) => {
     isHeaderVisible,
     isTabletView,
     isArticlePinned,
+    isArticleVisible,
+    isBackdropVisible,
     setArticlePinned,
     setArticleVisibleOnUnpin,
+    setIsArticleVisible,
+    setIsBackdropVisible,
   } = settingsStore;
+
   return {
     isLoaded,
     isTabletView,
     isHeaderVisible,
     isArticlePinned,
+    isArticleVisible,
     setArticlePinned,
     setArticleVisibleOnUnpin,
+    setIsArticleVisible,
+    isBackdropVisible,
+    setIsBackdropVisible,
   };
 })(observer(PageLayout));

packages/asc-web-common/components/PageLayout/sub-components/article.js

@@ -47,7 +47,7 @@ const StyledArticle = styled.article`
           ? props.pinned
             ? `
             min-width: 240px;
-            max-width: ${props.isLoading ? "calc(100vw - 368px)" : "240px"};
+            max-width: 240px;
 
 
 			      .increaseHeight {

packages/asc-web-common/store/SettingsStore.js

@@ -60,6 +60,8 @@ class SettingsStore {
   isTabletView = false;
   isArticlePinned =
     localStorage.getItem(ARTICLE_PINNED_KEY) === "true" || false;
+  isArticleVisible = false;
+  isBackdropVisible = false;
 
   isArticleVisibleOnUnpin = false;
 
@@ -105,6 +107,19 @@ class SettingsStore {
     return `https://helpcenter.onlyoffice.com/${lang}/administration/configuration.aspx#CustomizingPortal_block`;
   }
 
+  setIsArticleVisible = (visible) => {
+    this.isArticleVisible = this.isArticlePinned ? true : visible;
+  };
+
+  setIsBackdropVisible = (visible) => {
+    this.isBackdropVisible = visible;
+  };
+
+  hideArticle = () => {
+    this.setIsArticleVisible(false);
+    this.setIsBackdropVisible(false);
+  };
+
   setValue = (key, value) => {
     this[key] = value;
   };

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

@@ -158,7 +158,8 @@ class TreeFolders extends React.Component {
       return false;
     }
 
-    if (draggableItems.find((x) => x.id === item.id)) return false;
+    if (!draggableItems || draggableItems.find((x) => x.id === item.id))
+      return false;
 
     // const isMy = rootFolderType === FolderType.USER;
     // const isCommon = rootFolderType === FolderType.COMMON;
@@ -472,7 +473,10 @@ TreeFolders.defaultProps = {
 };
 
 export default inject(
-  ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
+  (
+    { auth, filesStore, treeFoldersStore, selectedFolderStore },
+    { useDefaultSelectedKeys, selectedKeys }
+  ) => {
     const {
       filter,
       selection,
@@ -504,9 +508,12 @@ export default inject(
       commonId: commonFolderId,
       isPrivacy: isPrivacyFolder,
       filter,
-      draggableItems: dragging ? selection : [],
+      draggableItems: dragging ? selection : null,
       expandedKeys,
       treeFolders,
+      selectedKeys: useDefaultSelectedKeys
+        ? treeFoldersStore.selectedKeys
+        : selectedKeys,
 
       setDragging,
       setIsLoading,