Web:Files:Catalog: fix section rerender when catalog opening on mobile

packages/asc-web-common/components/Navigation/Navigation.js

@@ -79,6 +79,8 @@ const Navigation = ({
     return () => window.removeEventListener("click", onMissClick);
   }, [isOpen, onMissClick]);
 
+  console.log("navigation render");
+
   const onBackToParentFolderAction = React.useCallback(() => {
     setIsOpen((val) => !val);
     onBackToParentFolder && onBackToParentFolder();
@@ -162,4 +164,4 @@ Navigation.propTypes = {
   onBackToParentFolder: PropTypes.func,
 };
 
-export default Navigation;
+export default React.memo(Navigation);

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

@@ -260,9 +260,11 @@ class PageLayout extends React.Component {
       isArticlePinned,
       isDesktop,
       showText,
+      catalogOpen,
       userShowText,
       setShowText,
       toggleShowText,
+      toggleCatalogOpen,
     } = this.props;
     let catalogHeaderContent = null;
     let catalogMainButtonContent = null;
@@ -348,13 +350,18 @@ class PageLayout extends React.Component {
         <>
           {isCatalogAvailable && (
             <>
-              {showText && (isMobileOnly || window.innerWidth <= 375) && (
+              {catalogOpen && (isMobileOnly || window.innerWidth <= 375) && (
                 <>
-                  <SubCatalogBackdrop onClick={toggleShowText} />
+                  <SubCatalogBackdrop onClick={toggleCatalogOpen} />
                   <Backdrop visible={true} zIndex={201} />
                 </>
               )}
-              <Catalog showText={showText} setShowText={setShowText}>
+              <Catalog
+                showText={showText}
+                catalogOpen={catalogOpen}
+                toggleCatalogOpen={toggleCatalogOpen}
+                setShowText={setShowText}
+              >
                 {isCatalogHeaderAvailable && (
                   <SubCatalogHeader
                     showText={showText}
@@ -441,7 +448,7 @@ class PageLayout extends React.Component {
                   }}
                 >
                   <Section
-                    showText={showText}
+                    catalogOpen={catalogOpen}
                     widthProp={width}
                     unpinArticle={this.unpinArticle}
                     pinned={isArticlePinned}
@@ -622,6 +629,8 @@ PageLayout.propTypes = {
   setShowText: PropTypes.func,
   toggleShowText: PropTypes.func,
   showCatalog: PropTypes.bool,
+  toggleCatalogOpen: PropTypes.func,
+  catalogOpen: PropTypes.bool,
 };
 
 PageLayout.defaultProps = {
@@ -657,6 +666,8 @@ export default inject(({ auth }) => {
     setShowText,
     toggleShowText,
     showCatalog,
+    toggleCatalogOpen,
+    catalogOpen,
   } = settingsStore;
 
   return {
@@ -676,5 +687,7 @@ export default inject(({ auth }) => {
     toggleShowText,
     showCatalog,
     userShowText,
+    toggleCatalogOpen,
+    catalogOpen,
   };
 })(observer(PageLayout));

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

@@ -16,14 +16,23 @@ import { Base } from "@appserver/components/themes";
 const StyledCatalog = styled.div`
   position: relative;
 
+  background: ${(props) => props.theme.catalog.background};
+
+  ${isMobile &&
+  css`
+    margin-top: 48px;
+  `}
+
   @media ${mobile} {
-    top: 64px;
+    position: fixed;
+    margin-top: 16px;
     height: calc(100vh - 64px) !important;
   }
 
   ${isMobileOnly &&
   css`
-    top: 64px;
+    position: fixed;
+    margin-top: 64px;
     height: calc(100vh - 64px) !important;
   `}
 
@@ -37,13 +46,13 @@ const StyledCatalog = styled.div`
     min-width: ${(props) => (props.showText ? "256px" : "52px")};
     width: ${(props) => (props.showText ? "256px" : "52px")};
 
-    height: 100% !important;
+    height: calc(100% - 44px) !important;
 
     background: ${(props) => props.theme.catalog.background};
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: none;
-    padding-bottom: 44px;
+    padding-bottom: 0px;
 
     &::-webkit-scrollbar {
       width: 0;
@@ -63,13 +72,13 @@ const StyledCatalog = styled.div`
     }
 
     @media ${mobile} {
-      display: ${(props) => (props.showText ? "flex" : "none")};
+      display: ${(props) => (props.catalogOpen ? "flex" : "none")};
       min-width: 100vw;
       width: 100vw;
       height: calc(100vh - 64px) !important;
       margin: 0;
       padding: 0;
-      padding-bottom: 44px;
+      padding-bottom: 0px;
     }
 
     ${isTablet &&
@@ -83,13 +92,13 @@ const StyledCatalog = styled.div`
 
     ${isMobileOnly &&
     css`
-      display: ${(props) => (props.showText ? "flex" : "none")};
+      display: ${(props) => (props.catalogOpen ? "flex" : "none")};
       min-width: 100vw !important;
       width: 100vw;
       height: calc(100vh - 64px) !important;
       margin: 0;
       padding: 0;
-      padding-bottom: 44px;
+      padding-bottom: 0px;
     `}
   }
 `;
@@ -97,7 +106,7 @@ const StyledCatalog = styled.div`
 StyledCatalog.defaultProps = { theme: Base };
 
 const Catalog = (props) => {
-  const { showText, setShowText, children, ...rest } = props;
+  const { showText, setShowText, catalogOpen, children, ...rest } = props;
   const refTimer = React.useRef(null);
   const enable = {
     top: false,
@@ -129,17 +138,15 @@ const Catalog = (props) => {
     clearTimeout(refTimer.current);
 
     refTimer.current = setTimeout(() => {
-      if (isMobile && props.showText) props.setShowText(false);
-      if (isMobileUtils() && !isMobile && props.showText)
-        props.setShowText(false);
-      if (isTabletUtils() && !isMobile && props.showText)
+      if (isMobileOnly || isMobileUtils()) props.setShowText(true);
+      if ((isTabletUtils() || isMobile) && !isMobileOnly)
         props.setShowText(false);
       if (isDesktopUtils() && !isMobile) props.setShowText(true);
     }, 100);
   };
 
   return (
-    <StyledCatalog showText={showText} {...rest}>
+    <StyledCatalog showText={showText} catalogOpen={catalogOpen} {...rest}>
       <Resizable
         defaultSize={{
           width: 256,

packages/asc-web-common/components/PageLayout/sub-components/section-body.js

@@ -13,14 +13,14 @@ import { tablet, mobile, desktop } from "@appserver/components/utils/device";
 const paddingStyles = css`
   padding: 17px 7px 16px 20px;
   @media ${tablet} {
-    padding: 16px 0 16px 24px;
+    padding: 6px 0 16px 24px;
   }
   @media ${mobile} {
     padding: 8px 0 16px 24px;
   }
   ${isMobile &&
   css`
-    padding: 16px 0 16px 24px !important;
+    padding: 6px 0 16px 24px !important;
   `};
   ${isMobileOnly &&
   css`

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

@@ -26,14 +26,7 @@ const StyledSection = styled.section`
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  @media ${mobile} {
-    display: ${(props) => (!props.showText ? "flex" : "none")};
-  }
 
-  ${isMobileOnly &&
-  css`
-    display: ${(props) => (!props.showText ? "flex" : "none")} !important;
-  `}
   //width: ${(props) => `${props.widthProp}px`};
   .layout-progress-bar {
     position: fixed;

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

@@ -76,7 +76,8 @@ class SettingsStore {
   isBackdropVisible = false;
   isArticleVisibleOnUnpin = false;
 
-  showText = true;
+  showText = false;
+  catalogOpen = false;
   userShowText = false;
   showCatalog = true;
 
@@ -352,6 +353,10 @@ class SettingsStore {
     this.showText = showText;
   };
 
+  setCatalogOpen = (catalogOpen) => {
+    this.catalogOpen = catalogOpen;
+  };
+
   setUserShowText = (userShowText) => {
     this.userShowText = userShowText;
   };
@@ -361,6 +366,10 @@ class SettingsStore {
     this.userShowText = !this.userShowText;
   };
 
+  toggleCatalogOpen = () => {
+    this.catalogOpen = !this.catalogOpen;
+  };
+
   get firebaseHelper() {
     window.firebaseHelper = new FirebaseHelper(this.firebase);
     return window.firebaseHelper;

products/ASC.Files/Client/src/components/Catalog/MainButton/index.js

@@ -30,8 +30,7 @@ class CatalogMainButtonContent extends React.Component {
   };
 
   onShowSelectFileDialog = () => {
-    const { setSelectFileDialogVisible, hideArticle } = this.props;
-    hideArticle();
+    const { setSelectFileDialogVisible } = this.props;
     setSelectFileDialogVisible(true);
   };
 
@@ -246,11 +245,11 @@ CatalogMainButtonContent.propTypes = {
 };
 
 export default inject(
-  ({ auth, filesStore, uploadDataStore, treeFoldersStore }) => {
+  ({ auth, filesStore, dialogsStore, uploadDataStore, treeFoldersStore }) => {
     const { firstLoad, fileActionStore, filter, canCreate } = filesStore;
     const { isPrivacyFolder } = treeFoldersStore;
     const { startUpload } = uploadDataStore;
-
+    const { setSelectFileDialogVisible } = dialogsStore;
     return {
       homepage: config.homepage,
       firstLoad,
@@ -261,6 +260,8 @@ export default inject(
       setAction: fileActionStore.setAction,
       startUpload,
 
+      setSelectFileDialogVisible,
+
       toggleShowText: auth.settingsStore.toggleShowText,
     };
   }

web/ASC.Web.Client/src/components/NavMenu/sub-components/header-nav.js

@@ -71,7 +71,7 @@ const HeaderNav = ({
   buildVersionInfo,
   debugInfo,
   currentProductId,
-  toggleShowText,
+  toggleCatalogOpen,
   showCatalog,
   changeTheme,
 }) => {
@@ -184,7 +184,7 @@ const HeaderNav = ({
           <HeaderCatalogBurger
             isProduct={currentProductId !== "home"}
             showCatalog={showCatalog}
-            onClick={toggleShowText}
+            onClick={toggleCatalogOpen}
           />
         </>
       ) : (
@@ -219,7 +219,7 @@ HeaderNav.propTypes = {
   isAuthenticated: PropTypes.bool,
   isLoaded: PropTypes.bool,
   currentProductId: PropTypes.string,
-  toggleShowText: PropTypes.func,
+  toggleCatalogOpen: PropTypes.func,
 };
 
 export default withRouter(
@@ -237,7 +237,7 @@ export default withRouter(
       personal: isPersonal,
       version: versionAppServer,
       currentProductId,
-      toggleShowText,
+      toggleCatalogOpen,
       showCatalog,
       buildVersionInfo,
       debugInfo,
@@ -260,7 +260,7 @@ export default withRouter(
       userIsUpdate,
       setUserIsUpdate,
       currentProductId,
-      toggleShowText,
+      toggleCatalogOpen,
       showCatalog,
       buildVersionInfo,
       debugInfo,