2020-10-23 09:31:58 +00:00
|
|
|
|
2020-11-15 16:15:48 +00:00
|
|
|
import React, { Component, createRef, useRef, useEffect} from "react"
|
2020-10-22 17:09:44 +00:00
|
|
|
import styled from "styled-components";
|
2020-11-15 16:15:48 +00:00
|
|
|
import { Scrollbar} from "asc-web-components";
|
|
|
|
|
|
|
|
import {LayoutContextProvider} 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-15 16:15:48 +00:00
|
|
|
class ExpandLayout extends Component{
|
2020-10-28 13:34:56 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-10-22 17:09:44 +00:00
|
|
|
|
2020-11-15 16:15:48 +00:00
|
|
|
this.windowWidth = window.matchMedia( "(max-width: 1024px)" );
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
isTablet: window.innerWidth < 1024,
|
|
|
|
prevScrollPosition: window.pageYOffset,
|
|
|
|
visibleContent: true,
|
2020-11-02 08:55:59 +00:00
|
|
|
};
|
2020-11-15 16:15:48 +00:00
|
|
|
|
2020-10-28 13:34:56 +00:00
|
|
|
this.scrollRefPage = createRef();
|
|
|
|
}
|
2020-11-03 13:02:20 +00:00
|
|
|
|
2020-11-15 16:15:48 +00:00
|
|
|
|
2020-11-02 08:55:59 +00:00
|
|
|
componentDidMount() {
|
2020-11-15 16:15:48 +00:00
|
|
|
this.getElementById = document.getElementById("scroll");
|
2020-11-11 17:29:57 +00:00
|
|
|
|
2020-11-15 16:15:48 +00:00
|
|
|
this.getElementById.addEventListener("scroll", this.scrolledTheVerticalAxis);
|
2020-11-02 08:55:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
|
2020-11-15 16:15:48 +00:00
|
|
|
this.getElementById.removeEventListener("scroll", this.scrolledTheVerticalAxis);
|
|
|
|
}
|
2020-11-11 17:29:57 +00:00
|
|
|
|
2020-11-02 08:55:59 +00:00
|
|
|
scrolledTheVerticalAxis = () => {
|
2020-11-11 17:29:57 +00:00
|
|
|
|
2020-11-02 08:55:59 +00:00
|
|
|
const { prevScrollPosition } = this.state;
|
2020-11-15 16:15:48 +00:00
|
|
|
const currentScrollPosition = this.getElementById.scrollTop || window.pageYOffset ;
|
2020-11-11 17:29:57 +00:00
|
|
|
let visibleContent = prevScrollPosition >= currentScrollPosition;
|
2020-11-03 13:02:20 +00:00
|
|
|
|
2020-11-15 16:15:48 +00:00
|
|
|
if (!visibleContent && (this.getElementById.scrollHeight - this.getElementById.clientHeight < 57)) {
|
2020-11-11 17:29:57 +00:00
|
|
|
visibleContent = true
|
|
|
|
}
|
|
|
|
|
|
|
|
this.setState({
|
2020-11-02 08:55:59 +00:00
|
|
|
prevScrollPosition: currentScrollPosition,
|
|
|
|
visibleContent
|
|
|
|
});
|
|
|
|
};
|
2020-11-11 17:29:57 +00:00
|
|
|
|
2020-10-28 13:34:56 +00:00
|
|
|
render() {
|
|
|
|
const scrollProp = { ref: this.scrollRefPage } ;
|
2020-11-15 16:15:48 +00:00
|
|
|
const { children, windowWidth } = this.props
|
2020-10-28 13:34:56 +00:00
|
|
|
return(
|
2020-11-15 16:15:48 +00:00
|
|
|
<StyledContainer className="Layout">
|
|
|
|
{windowWidth && windowWidth.matches
|
2020-11-11 17:29:57 +00:00
|
|
|
? <Scrollbar {...scrollProp} stype="mediumBlack">
|
2020-11-15 16:15:48 +00:00
|
|
|
<LayoutContextProvider value={{scrollRefLayout: this.scrollRefPage, isVisible:this.state.visibleContent}}>
|
|
|
|
{ children }
|
|
|
|
</LayoutContextProvider>
|
2020-11-11 17:29:57 +00:00
|
|
|
</Scrollbar>
|
|
|
|
|
|
|
|
: children
|
|
|
|
}
|
2020-11-15 16:15:48 +00:00
|
|
|
</StyledContainer>
|
|
|
|
|
|
|
|
|
2020-10-28 13:34:56 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
2020-10-27 08:13:42 +00:00
|
|
|
|
2020-11-15 16:15:48 +00:00
|
|
|
const Layout = (props) => {
|
|
|
|
// const scrollRefPage = useRef(null)
|
|
|
|
// const scrollProp = { ref: scrollRefPage } ;
|
|
|
|
|
|
|
|
const isTablet = window.innerWidth < 1024;
|
2020-10-22 17:09:44 +00:00
|
|
|
|
2020-11-15 16:15:48 +00:00
|
|
|
const [windowWidth, setWindowWidth] = React.useState({
|
|
|
|
matches: isTablet,
|
|
|
|
});
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
let mediaQuery = window.matchMedia("(max-width: 1024px)");
|
|
|
|
mediaQuery.addListener(setWindowWidth);
|
|
|
|
|
|
|
|
return () => mediaQuery.removeListener(setWindowWidth);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return <ExpandLayout windowWidth={windowWidth} {...props}/>;
|
|
|
|
}
|
2020-10-22 17:09:44 +00:00
|
|
|
export default Layout;
|