2020-11-17 08:36:49 +00:00
|
|
|
import React, { useEffect, useState } from "react";
|
2020-10-22 17:09:44 +00:00
|
|
|
import styled from "styled-components";
|
2020-11-17 08:36:49 +00:00
|
|
|
import MobileLayout from "./MobileLayout";
|
2020-11-18 11:10:30 +00:00
|
|
|
import { utils } from "asc-web-components";
|
2020-12-01 20:39:38 +00:00
|
|
|
import { isIOS, isFirefox, isChrome, isMobile } from "react-device-detect";
|
2020-11-18 11:10:30 +00:00
|
|
|
|
2020-12-02 12:28:37 +00:00
|
|
|
const { size } = utils.device;
|
2020-10-28 13:34:56 +00:00
|
|
|
|
2020-10-22 17:09:44 +00:00
|
|
|
const StyledContainer = styled.div`
|
2020-11-17 08:36:49 +00:00
|
|
|
width: 100%;
|
2020-12-01 17:28:22 +00:00
|
|
|
height: ${isIOS && !isFirefox
|
2020-12-02 12:28:37 +00:00
|
|
|
? "calc(var(--vh, 1vh) * 100 + 57px)"
|
|
|
|
: "100vh"};
|
2020-11-17 08:36:49 +00:00
|
|
|
`;
|
2020-10-27 08:13:42 +00:00
|
|
|
|
2020-11-15 16:15:48 +00:00
|
|
|
const Layout = (props) => {
|
2020-11-17 08:36:49 +00:00
|
|
|
const { children } = props;
|
2020-11-18 15:30:46 +00:00
|
|
|
const isTablet = window.innerWidth <= size.tablet;
|
2020-10-22 17:09:44 +00:00
|
|
|
|
2020-11-16 09:29:12 +00:00
|
|
|
const [windowWidth, setWindowWidth] = useState({
|
2020-11-15 16:15:48 +00:00
|
|
|
matches: isTablet,
|
|
|
|
});
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
let mediaQuery = window.matchMedia("(max-width: 1024px)");
|
|
|
|
mediaQuery.addListener(setWindowWidth);
|
|
|
|
|
|
|
|
return () => mediaQuery.removeListener(setWindowWidth);
|
|
|
|
}, []);
|
|
|
|
|
2020-12-01 17:28:22 +00:00
|
|
|
useEffect(() => {
|
2020-12-02 12:28:37 +00:00
|
|
|
if (isMobile) {
|
|
|
|
window.addEventListener("resize", resizeHandler);
|
2020-12-01 17:28:22 +00:00
|
|
|
|
2020-12-02 12:28:37 +00:00
|
|
|
resizeHandler();
|
|
|
|
}
|
2020-12-01 17:28:22 +00:00
|
|
|
|
|
|
|
return () => {
|
2020-12-02 12:28:37 +00:00
|
|
|
if (isMobile) {
|
|
|
|
window.removeEventListener("resize", resizeHandler);
|
|
|
|
}
|
2020-12-01 17:28:22 +00:00
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const resizeHandler = () => {
|
2020-12-01 20:39:38 +00:00
|
|
|
const intervalTime = 100;
|
2020-12-02 12:28:37 +00:00
|
|
|
const endTimeout = 500;
|
2020-12-01 20:39:38 +00:00
|
|
|
|
|
|
|
let interval, timeout, lastInnerHeight, noChangeCount;
|
|
|
|
|
|
|
|
const updateHeight = () => {
|
|
|
|
clearInterval(interval);
|
|
|
|
clearTimeout(timeout);
|
|
|
|
|
|
|
|
interval = null;
|
|
|
|
timeout = null;
|
|
|
|
|
2020-12-02 12:28:37 +00:00
|
|
|
const vh = (window.innerHeight - 57) * 0.01;
|
|
|
|
|
2020-12-01 20:39:38 +00:00
|
|
|
document.documentElement.style.setProperty("--vh", `${vh}px`);
|
|
|
|
};
|
|
|
|
interval = setInterval(() => {
|
|
|
|
if (window.innerHeight === lastInnerHeight) {
|
|
|
|
noChangeCount++;
|
|
|
|
|
|
|
|
if (noChangeCount === intervalTime) {
|
|
|
|
updateHeight();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
lastInnerHeight = window.innerHeight;
|
|
|
|
noChangeCount = 0;
|
2020-12-01 17:28:22 +00:00
|
|
|
}
|
2020-12-01 20:39:38 +00:00
|
|
|
});
|
2020-12-01 17:28:22 +00:00
|
|
|
|
2020-12-01 20:39:38 +00:00
|
|
|
timeout = setTimeout(() => {
|
|
|
|
updateHeight();
|
|
|
|
}, endTimeout);
|
2020-12-01 17:28:22 +00:00
|
|
|
};
|
|
|
|
|
2020-11-17 08:36:49 +00:00
|
|
|
return (
|
2020-11-16 09:29:12 +00:00
|
|
|
<StyledContainer className="Layout">
|
2020-11-17 08:36:49 +00:00
|
|
|
{windowWidth && windowWidth.matches ? (
|
2020-12-02 12:28:37 +00:00
|
|
|
<MobileLayout {...props} />
|
2020-11-17 08:36:49 +00:00
|
|
|
) : (
|
|
|
|
children
|
|
|
|
)}
|
2020-11-16 09:29:12 +00:00
|
|
|
</StyledContainer>
|
|
|
|
);
|
2020-11-17 08:36:49 +00:00
|
|
|
};
|
|
|
|
export default Layout;
|