2020-11-17 08:36:49 +00:00
|
|
|
import React, { Component, createRef } from "react";
|
|
|
|
import { Scrollbar } from "asc-web-components";
|
|
|
|
import { LayoutContextProvider } from "./context";
|
2020-11-16 09:29:12 +00:00
|
|
|
|
2020-11-17 08:36:49 +00:00
|
|
|
class MobileLayout extends Component {
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-11-16 09:29:12 +00:00
|
|
|
|
2020-11-17 08:36:49 +00:00
|
|
|
this.state = {
|
|
|
|
prevScrollPosition: window.pageYOffset,
|
|
|
|
visibleContent: true,
|
|
|
|
};
|
2020-11-16 09:29:12 +00:00
|
|
|
|
2020-11-17 08:36:49 +00:00
|
|
|
this.scrollRefPage = createRef();
|
|
|
|
}
|
2020-11-16 09:29:12 +00:00
|
|
|
|
2020-11-17 08:36:49 +00:00
|
|
|
componentDidMount() {
|
|
|
|
this.documentElement = document.getElementById("scroll");
|
|
|
|
this.documentElement.addEventListener(
|
|
|
|
"scroll",
|
|
|
|
this.scrolledTheVerticalAxis
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
this.documentElement.removeEventListener(
|
|
|
|
"scroll",
|
|
|
|
this.scrolledTheVerticalAxis
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
scrolledTheVerticalAxis = () => {
|
|
|
|
const { prevScrollPosition } = this.state;
|
|
|
|
const currentScrollPosition =
|
2020-11-18 15:34:36 +00:00
|
|
|
this.documentElement.scrollTop > 0
|
|
|
|
? this.documentElement.scrollTop
|
|
|
|
: window.pageYOffset;
|
|
|
|
|
2020-11-17 08:36:49 +00:00
|
|
|
let visibleContent = prevScrollPosition >= currentScrollPosition;
|
|
|
|
|
2020-11-19 07:00:31 +00:00
|
|
|
if (
|
|
|
|
currentScrollPosition >=
|
|
|
|
this.documentElement.scrollHeight - this.documentElement.clientHeight
|
|
|
|
) {
|
|
|
|
visibleContent = false;
|
|
|
|
}
|
|
|
|
|
2020-11-17 08:36:49 +00:00
|
|
|
if (
|
|
|
|
!visibleContent &&
|
|
|
|
this.documentElement.scrollHeight - this.documentElement.clientHeight < 57
|
|
|
|
) {
|
|
|
|
visibleContent = true;
|
2020-11-16 09:29:12 +00:00
|
|
|
}
|
2020-11-17 08:36:49 +00:00
|
|
|
|
|
|
|
this.setState({
|
|
|
|
prevScrollPosition: currentScrollPosition,
|
|
|
|
visibleContent,
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
const scrollProp = { ref: this.scrollRefPage };
|
|
|
|
const { children } = this.props;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Scrollbar {...scrollProp} stype="mediumBlack">
|
|
|
|
<LayoutContextProvider
|
|
|
|
value={{
|
|
|
|
scrollRefLayout: this.scrollRefPage,
|
|
|
|
isVisible: this.state.visibleContent,
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</LayoutContextProvider>
|
|
|
|
</Scrollbar>
|
|
|
|
);
|
2020-11-16 09:29:12 +00:00
|
|
|
}
|
2020-11-17 08:36:49 +00:00
|
|
|
}
|
2020-11-16 09:29:12 +00:00
|
|
|
|
2020-11-17 08:36:49 +00:00
|
|
|
export default MobileLayout;
|