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";
|
|
|
|
|
|
|
|
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%;
|
|
|
|
height: 100vh;
|
|
|
|
`;
|
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-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 ? (
|
|
|
|
<MobileLayout {...props} />
|
|
|
|
) : (
|
|
|
|
children
|
|
|
|
)}
|
2020-11-16 09:29:12 +00:00
|
|
|
</StyledContainer>
|
|
|
|
);
|
2020-11-17 08:36:49 +00:00
|
|
|
};
|
|
|
|
export default Layout;
|