Web: Common: Added listener for current window width and changed context, deleted Box and unnecessary classes

web/ASC.Web.Common/src/components/Layout/context.js

@@ -1,8 +1,7 @@
 import { createContext } from 'react'
 
-const RefContext = createContext({})
-const IsVisibleContext = createContext();
-export const RefContextProvider = RefContext.Provider
-export const IsVisibleContextProvider = IsVisibleContext.Provider
-export const RefContextConsumer = RefContext.Consumer
-export const IsVisibleContextConsumer = IsVisibleContext.Consumer
+const LayoutContext = createContext({})
+
+
+export const LayoutContextProvider = LayoutContext.Provider
+export const LayoutContextConsumer = LayoutContext.Consumer

web/ASC.Web.Common/src/components/Layout/index.js

@@ -1,43 +1,49 @@
 
-import React, { Component, createRef} from "react"
+import React, { Component, createRef, useRef, useEffect} from "react"
 import styled from "styled-components";
-import {  Scrollbar, utils} from "asc-web-components";
-import { isMobile } from "react-device-detect";
-import {RefContextProvider, IsVisibleContextProvider} from "./context"
+import {  Scrollbar} from "asc-web-components";
+
+import {LayoutContextProvider} from "./context"
+
 
 const StyledContainer = styled.div`
 width:100%;
 height:100vh;
 `
-class Layout extends Component{
+class ExpandLayout extends Component{
   constructor(props) {
     super(props);
-    this.state = {
 
-      prevScrollPosition:  window.pageYOffset ,
-      visibleContent: true
-    };
-    this.scrollRefPage = createRef();
     this.windowWidth = window.matchMedia( "(max-width: 1024px)" );
+
+    this.state = {
+      isTablet: window.innerWidth < 1024,
+      prevScrollPosition:  window.pageYOffset,
+      visibleContent: true,
+    };
+
+    this.scrollRefPage = createRef();
   }
 
-  componentDidMount() {
 
-    (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false);
+  componentDidMount() {
+  this.getElementById = document.getElementById("scroll");
+
+  this.getElementById.addEventListener("scroll", this.scrolledTheVerticalAxis);
   }
 
   componentWillUnmount() {
-    (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").removeEventListener("scroll", this.scrolledTheVerticalAxis,false);
-  }
 
+     this.getElementById.removeEventListener("scroll", this.scrolledTheVerticalAxis);
+  }
 
   scrolledTheVerticalAxis = () => {
 
     const { prevScrollPosition } = this.state;
-    const currentScrollPosition =  document.getElementById("scroll").scrollTop || window.pageYOffset ;
+    const currentScrollPosition = this.getElementById.scrollTop || window.pageYOffset ;
     let visibleContent = prevScrollPosition >= currentScrollPosition;
 
-    if (!visibleContent && (document.getElementById("scroll").scrollHeight - document.getElementById("scroll").clientHeight < 57)) {
+    if (!visibleContent && (this.getElementById.scrollHeight - this.getElementById.clientHeight < 57)) {
       visibleContent = true
     }
 
@@ -49,27 +55,42 @@ class Layout extends Component{
 
   render() {  
   const scrollProp =  { ref: this.scrollRefPage } ;
-  const { children } = this.props
-
+  const { children, windowWidth } = this.props
     return(
-        
-          <StyledContainer className="Layout" >
-  
-              {(isMobile || (!isMobile && this.windowWidth.matches) ) 
+            <StyledContainer className="Layout">
+              {windowWidth && windowWidth.matches 
                 ? <Scrollbar {...scrollProp} stype="mediumBlack">
-                    <RefContextProvider value={this.scrollRefPage}>
-                      <IsVisibleContextProvider value={this.state.visibleContent}>
-                        { children }
-                        </IsVisibleContextProvider>
-                    </RefContextProvider>
+                    <LayoutContextProvider value={{scrollRefLayout: this.scrollRefPage, isVisible:this.state.visibleContent}}>
+                          { children }
+                    </LayoutContextProvider>
                   </Scrollbar>
           
               :  children
                 }
-          </StyledContainer>
+              </StyledContainer>
+          
+         
     )
   }
 }
 
+const Layout = (props) => {
+  // const scrollRefPage = useRef(null)
+  // const scrollProp =  { ref: scrollRefPage } ;
 
+  const isTablet = window.innerWidth < 1024;
+
+  const [windowWidth, setWindowWidth] = React.useState({
+    matches: isTablet,
+  });
+
+  useEffect(() => {
+    let mediaQuery = window.matchMedia("(max-width: 1024px)");
+    mediaQuery.addListener(setWindowWidth);
+
+    return () => mediaQuery.removeListener(setWindowWidth);
+  }, []);
+
+  return <ExpandLayout windowWidth={windowWidth} {...props}/>;
+}
 export default Layout;

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

@@ -6,7 +6,7 @@ import NavItem from "./nav-item";
 import ProfileActions from "./profile-actions";
 import { useTranslation } from "react-i18next";
 import { utils } from "asc-web-components";
-import {IsVisibleContextConsumer} from "asc-web-common"
+import {LayoutContextConsumer} from "asc-web-common"
 const { tablet } = utils.device;
 import { logout } from "../../../store/auth/actions";
 
@@ -100,9 +100,9 @@ const HeaderNav = React.memo(
 
     //console.log("HeaderNav render");
     return (
-      <IsVisibleContextConsumer>
+      <LayoutContextConsumer>
       {value =>
-        <StyledNav valueTop={value}>
+        <StyledNav valueTop={value.isVisible}>
         {modules.map((module) => (
           
           <NavItem
@@ -120,7 +120,7 @@ const HeaderNav = React.memo(
         )}
       </StyledNav>
       }
-      </IsVisibleContextConsumer>
+      </LayoutContextConsumer>
     );
   }
 );

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

@@ -5,7 +5,7 @@ import NavItem from "./nav-item";
 import Headline from "../../Headline";
 import Nav from "./nav";
 import NavLogoItem from "./nav-logo-item";
-import {IsVisibleContextConsumer} from "asc-web-common"
+import {LayoutContextConsumer} from "asc-web-common"
 import { utils } from "asc-web-components";
 import { connect } from "react-redux";
 import {
@@ -116,9 +116,9 @@ const HeaderComponent = ({
 
   return (
     <>
-    <IsVisibleContextConsumer>
+    <LayoutContextConsumer>
       {value =>
-      <Header module={currentProductName} valueTop={value} >
+      <Header module={currentProductName} valueTop={value.isVisible} >
         <NavItem
           iconName="MenuIcon"
           badgeNumber={totalNotifications}
@@ -140,7 +140,7 @@ const HeaderComponent = ({
           {currentProductName}
         </Headline>
       </Header>}
-      </IsVisibleContextConsumer>
+      </LayoutContextConsumer>
       {isNavAvailable && (
         <Nav
           opened={isNavOpened}

web/ASC.Web.Common/src/components/PageLayout/sub-components/section-header.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { utils} from "asc-web-components";
 import isEqual from "lodash/isEqual";
 import classnames from "classnames";
-import {IsVisibleContextConsumer} from "asc-web-common"
+import {LayoutContextConsumer} from "asc-web-common"
 const { tablet } = utils.device;
 
 const StyledSectionHeader = styled.div`
@@ -106,13 +106,13 @@ class SectionHeader extends React.Component {
         isArticlePinned={isArticlePinned}
         borderBottom={borderBottom}
       >
-       <IsVisibleContextConsumer>
+       <LayoutContextConsumer>
             { value => 
               <div id="scroll"  className={classnames("section-header", {
-                "section-header--hidden": !value
+                "section-header--hidden": !value.isVisible
               })} {...rest}/>
               }
-        </IsVisibleContextConsumer>
+        </LayoutContextConsumer>
       </StyledSectionHeader>