From c36f79b52642dc98e66e6015a2e1c109ce07ca0a Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Tue, 3 Nov 2020 16:02:20 +0300
Subject: [PATCH] web: Common: Added window width in comparison condition

---
 .../src/components/Layout/index.js            | 23 ++++++++++++-------
 .../PageLayout/sub-components/section-body.js | 10 +++++---
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/web/ASC.Web.Common/src/components/Layout/index.js b/web/ASC.Web.Common/src/components/Layout/index.js
index eda23e56d9..768756ab7b 100644
--- a/web/ASC.Web.Common/src/components/Layout/index.js
+++ b/web/ASC.Web.Common/src/components/Layout/index.js
@@ -1,5 +1,5 @@
 
-import React, { Component, createRef} from "react"
+import React, { Component, createRef, useEffect} from "react"
 import styled from "styled-components";
 import {  Scrollbar } from "asc-web-components";
 import { isMobile } from "react-device-detect";
@@ -9,7 +9,7 @@ const StyledContainer = styled.div`
 width:100%;
 height:100vh;
 `
-class Layout extends Component{
+class LayoutBody extends Component{
   constructor(props) {
     super(props);
     this.state = {
@@ -18,22 +18,23 @@ class Layout extends Component{
       visibleContent: true
     };
     this.scrollRefPage = createRef();
-  
+    this.windowWidth = window.matchMedia( "(max-width: 1024px)" );
   }
-  
+
   componentDidMount() {
-    isMobile && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false);
+    (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false);
   }
 
 
   componentWillUnmount() {
-    isMobile && document.getElementById("scroll").removeEventListener("scroll", this.scrolledTheVerticalAxis,false);
+    (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").removeEventListener("scroll", this.scrolledTheVerticalAxis,false);
   }
 
   scrolledTheVerticalAxis = () => {
     const { prevScrollPosition } = this.state;
     const currentScrollPosition =  document.getElementById("scroll").scrollTop || window.pageYOffset ;
     const visibleContent = prevScrollPosition > currentScrollPosition;
+
     this.setState({
       prevScrollPosition: currentScrollPosition,
       visibleContent
@@ -44,11 +45,12 @@ class Layout extends Component{
   const { children } = this.props
 
     return(
-      <StyledContainer className="Layout">
-           { isMobile  
+      <StyledContainer className="Layout" >
+           {  (isMobile || this.windowWidth.matches )  
             ? <Scrollbar {...scrollProp} stype="mediumBlack">
                 <RefContextProvider value={this.scrollRefPage}>
                   <IsVisibleContextProvider value={this.state.visibleContent}>
+                 
                     { children }
                     </IsVisibleContextProvider>
                 </RefContextProvider>
@@ -62,6 +64,11 @@ class Layout extends Component{
   }
 }
 
+const Layout = (props) => {
+
+
+  return <LayoutBody  {...props} />;
+};
 
 
 export default Layout;
\ No newline at end of file
diff --git a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js
index ef213c1b77..714fbb9d47 100644
--- a/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js
+++ b/web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js
@@ -72,6 +72,7 @@ class SectionBody extends React.Component {
 
     this.focusRef = React.createRef();
     this.scrollRef = React.createRef();
+    this.windowWidth = window.matchMedia( "(max-width: 1024px)" );
   }
 
   shouldComponentUpdate(nextProps) {
@@ -96,6 +97,7 @@ class SectionBody extends React.Component {
       uploadFiles,
       viewAs,
       withScroll,
+      widthProp
     } = this.props;
 
     const focusProps = autoFocus
@@ -115,11 +117,11 @@ class SectionBody extends React.Component {
         withScroll={withScroll}
         viewAs={viewAs}
       >
+      
         {withScroll ? (
-
-          !isMobile ? (
+        
+          (!isMobile && !this.windowWidth.matches ) ? (
             <Scrollbar {...scrollProp} stype="mediumBlack" >
-              {console.log("Scroll ref in section", this.scrollRef)}
               <SelectedFrame
                 viewAs={viewAs}
                 scrollRef={this.scrollRef}
@@ -141,8 +143,10 @@ class SectionBody extends React.Component {
                     scrollRef={value}
                     setSelections={setSelections}
                   >
+                     
                     <div className="section-wrapper">
                       <div className="section-wrapper-content" {...focusProps}>
+                  
                         {children}
                         <StyledSpacer pinned={pinned} />
                       </div>