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

21
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 styled from "styled-components";
import { Scrollbar } from "asc-web-components"; import { Scrollbar } from "asc-web-components";
import { isMobile } from "react-device-detect"; import { isMobile } from "react-device-detect";
@ -9,7 +9,7 @@ const StyledContainer = styled.div`
width:100%; width:100%;
height:100vh; height:100vh;
` `
class Layout extends Component{ class LayoutBody extends Component{
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -18,22 +18,23 @@ class Layout extends Component{
visibleContent: true visibleContent: true
}; };
this.scrollRefPage = createRef(); this.scrollRefPage = createRef();
this.windowWidth = window.matchMedia( "(max-width: 1024px)" );
} }
componentDidMount() { componentDidMount() {
isMobile && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false); (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false);
} }
componentWillUnmount() { componentWillUnmount() {
isMobile && document.getElementById("scroll").removeEventListener("scroll", this.scrolledTheVerticalAxis,false); (isMobile || this.windowWidth.matches ) && document.getElementById("scroll").removeEventListener("scroll", this.scrolledTheVerticalAxis,false);
} }
scrolledTheVerticalAxis = () => { scrolledTheVerticalAxis = () => {
const { prevScrollPosition } = this.state; const { prevScrollPosition } = this.state;
const currentScrollPosition = document.getElementById("scroll").scrollTop || window.pageYOffset ; const currentScrollPosition = document.getElementById("scroll").scrollTop || window.pageYOffset ;
const visibleContent = prevScrollPosition > currentScrollPosition; const visibleContent = prevScrollPosition > currentScrollPosition;
this.setState({ this.setState({
prevScrollPosition: currentScrollPosition, prevScrollPosition: currentScrollPosition,
visibleContent visibleContent
@ -44,11 +45,12 @@ class Layout extends Component{
const { children } = this.props const { children } = this.props
return( return(
<StyledContainer className="Layout"> <StyledContainer className="Layout" >
{ isMobile { (isMobile || this.windowWidth.matches )
? <Scrollbar {...scrollProp} stype="mediumBlack"> ? <Scrollbar {...scrollProp} stype="mediumBlack">
<RefContextProvider value={this.scrollRefPage}> <RefContextProvider value={this.scrollRefPage}>
<IsVisibleContextProvider value={this.state.visibleContent}> <IsVisibleContextProvider value={this.state.visibleContent}>
{ children } { children }
</IsVisibleContextProvider> </IsVisibleContextProvider>
</RefContextProvider> </RefContextProvider>
@ -62,6 +64,11 @@ class Layout extends Component{
} }
} }
const Layout = (props) => {
return <LayoutBody {...props} />;
};
export default Layout; export default Layout;

8
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.focusRef = React.createRef();
this.scrollRef = React.createRef(); this.scrollRef = React.createRef();
this.windowWidth = window.matchMedia( "(max-width: 1024px)" );
} }
shouldComponentUpdate(nextProps) { shouldComponentUpdate(nextProps) {
@ -96,6 +97,7 @@ class SectionBody extends React.Component {
uploadFiles, uploadFiles,
viewAs, viewAs,
withScroll, withScroll,
widthProp
} = this.props; } = this.props;
const focusProps = autoFocus const focusProps = autoFocus
@ -115,11 +117,11 @@ class SectionBody extends React.Component {
withScroll={withScroll} withScroll={withScroll}
viewAs={viewAs} viewAs={viewAs}
> >
{withScroll ? ( {withScroll ? (
!isMobile ? ( (!isMobile && !this.windowWidth.matches ) ? (
<Scrollbar {...scrollProp} stype="mediumBlack" > <Scrollbar {...scrollProp} stype="mediumBlack" >
{console.log("Scroll ref in section", this.scrollRef)}
<SelectedFrame <SelectedFrame
viewAs={viewAs} viewAs={viewAs}
scrollRef={this.scrollRef} scrollRef={this.scrollRef}
@ -141,8 +143,10 @@ class SectionBody extends React.Component {
scrollRef={value} scrollRef={value}
setSelections={setSelections} setSelections={setSelections}
> >
<div className="section-wrapper"> <div className="section-wrapper">
<div className="section-wrapper-content" {...focusProps}> <div className="section-wrapper-content" {...focusProps}>
{children} {children}
<StyledSpacer pinned={pinned} /> <StyledSpacer pinned={pinned} />
</div> </div>