IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Common: Added window width in comparison condition

Browse Source
This commit is contained in:
TatianaLopaeva 2020-11-03 16:02:20 +03:00
parent e876d2939a
commit c36f79b526
2 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/ASC.Web.Common/src/components/Layout/index.js
View File

@ -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;

10
web/ASC.Web.Common/src/components/PageLayout/sub-components/section-body.js
View File

@ -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>