2020-10-23 09:31:58 +00:00
|
|
|
|
2020-11-03 13:02:20 +00:00
|
|
|
import React, { Component, createRef, useEffect} from "react"
|
2020-10-22 17:09:44 +00:00
|
|
|
import styled from "styled-components";
|
2020-10-23 09:31:58 +00:00
|
|
|
import { Scrollbar } from "asc-web-components";
|
|
|
|
import { isMobile } from "react-device-detect";
|
2020-11-02 08:55:59 +00:00
|
|
|
import {RefContextProvider, IsVisibleContextProvider} from "./context"
|
2020-10-28 13:34:56 +00:00
|
|
|
|
2020-10-22 17:09:44 +00:00
|
|
|
const StyledContainer = styled.div`
|
|
|
|
width:100%;
|
2020-10-23 09:31:58 +00:00
|
|
|
height:100vh;
|
2020-10-22 17:09:44 +00:00
|
|
|
`
|
2020-11-05 16:04:24 +00:00
|
|
|
class Layout extends Component{
|
2020-10-28 13:34:56 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-11-02 08:55:59 +00:00
|
|
|
this.state = {
|
2020-10-22 17:09:44 +00:00
|
|
|
|
2020-11-02 08:55:59 +00:00
|
|
|
prevScrollPosition: window.pageYOffset ,
|
|
|
|
visibleContent: true
|
|
|
|
};
|
2020-10-28 13:34:56 +00:00
|
|
|
this.scrollRefPage = createRef();
|
2020-11-03 13:02:20 +00:00
|
|
|
this.windowWidth = window.matchMedia( "(max-width: 1024px)" );
|
2020-10-28 13:34:56 +00:00
|
|
|
}
|
2020-11-03 13:02:20 +00:00
|
|
|
|
2020-11-02 08:55:59 +00:00
|
|
|
componentDidMount() {
|
2020-11-03 13:02:20 +00:00
|
|
|
(isMobile || this.windowWidth.matches ) && document.getElementById("scroll").addEventListener("scroll", this.scrolledTheVerticalAxis,false);
|
2020-11-02 08:55:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
2020-11-03 13:02:20 +00:00
|
|
|
(isMobile || this.windowWidth.matches ) && document.getElementById("scroll").removeEventListener("scroll", this.scrolledTheVerticalAxis,false);
|
2020-11-02 08:55:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
scrolledTheVerticalAxis = () => {
|
|
|
|
const { prevScrollPosition } = this.state;
|
|
|
|
const currentScrollPosition = document.getElementById("scroll").scrollTop || window.pageYOffset ;
|
2020-11-05 16:04:24 +00:00
|
|
|
const visibleContent = prevScrollPosition >= currentScrollPosition;
|
2020-11-03 13:02:20 +00:00
|
|
|
|
2020-11-02 08:55:59 +00:00
|
|
|
this.setState({
|
|
|
|
prevScrollPosition: currentScrollPosition,
|
|
|
|
visibleContent
|
|
|
|
});
|
|
|
|
};
|
2020-10-28 13:34:56 +00:00
|
|
|
render() {
|
|
|
|
const scrollProp = { ref: this.scrollRefPage } ;
|
|
|
|
const { children } = this.props
|
|
|
|
|
|
|
|
return(
|
2020-11-03 13:02:20 +00:00
|
|
|
<StyledContainer className="Layout" >
|
|
|
|
{ (isMobile || this.windowWidth.matches )
|
2020-10-28 13:34:56 +00:00
|
|
|
? <Scrollbar {...scrollProp} stype="mediumBlack">
|
2020-11-02 08:55:59 +00:00
|
|
|
<RefContextProvider value={this.scrollRefPage}>
|
|
|
|
<IsVisibleContextProvider value={this.state.visibleContent}>
|
2020-11-03 13:02:20 +00:00
|
|
|
|
2020-11-02 08:55:59 +00:00
|
|
|
{ children }
|
|
|
|
</IsVisibleContextProvider>
|
|
|
|
</RefContextProvider>
|
2020-10-28 13:34:56 +00:00
|
|
|
</Scrollbar>
|
|
|
|
|
2020-10-27 08:13:42 +00:00
|
|
|
: children
|
2020-10-28 13:34:56 +00:00
|
|
|
}
|
|
|
|
</StyledContainer>
|
2020-10-27 08:13:42 +00:00
|
|
|
|
2020-10-28 13:34:56 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
2020-10-27 08:13:42 +00:00
|
|
|
|
2020-10-22 17:09:44 +00:00
|
|
|
|
|
|
|
export default Layout;
|