web: Common: Added window width in comparison condition
This commit is contained in:
parent
e876d2939a
commit
c36f79b526
@ -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
|
||||||
@ -45,10 +46,11 @@ class Layout extends Component{
|
|||||||
|
|
||||||
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;
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user