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 17:28:22 +00:00
|
|
|
import {
|
|
|
|
isIOS,
|
|
|
|
isMobileSafari,
|
|
|
|
isFirefox,
|
|
|
|
isChrome,
|
|
|
|
} from "react-device-detect";
|
2020-11-18 11:10:30 +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
|
|
|
|
? !isChrome
|
|
|
|
? "calc(var(--vh, 1vh) * 100 + 57px)"
|
|
|
|
: "var(--vh, 100vh)"
|
|
|
|
: "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(() => {
|
|
|
|
window.addEventListener("resize", resizeHandler);
|
|
|
|
|
|
|
|
resizeHandler();
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
window.removeEventListener("resize", resizeHandler);
|
|
|
|
};
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const resizeHandler = () => {
|
|
|
|
let vh;
|
|
|
|
if (isIOS) {
|
|
|
|
if (isMobileSafari) {
|
|
|
|
vh = (window.innerHeight - 57) * 0.01;
|
|
|
|
}
|
|
|
|
if (isChrome) {
|
|
|
|
vh = window.innerHeight;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
vh = (window.innerHeight - 57) * 0.01;
|
|
|
|
}
|
|
|
|
|
|
|
|
document.documentElement.style.setProperty("--vh", `${vh}px`);
|
|
|
|
};
|
|
|
|
|
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-01 17:28:22 +00:00
|
|
|
<MobileLayout {...props} className="mobile-layout" />
|
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;
|