2020-12-21 12:14:55 +00:00
|
|
|
import React, { useEffect } from "react";
|
2021-02-03 12:42:47 +00:00
|
|
|
import PropTypes from "prop-types";
|
2020-12-21 12:14:55 +00:00
|
|
|
import styled from "styled-components";
|
|
|
|
import { utils } from "asc-web-components";
|
2021-02-03 12:42:47 +00:00
|
|
|
import { inject, observer } from "mobx-react";
|
2020-12-21 12:14:55 +00:00
|
|
|
|
|
|
|
const { size } = utils.device;
|
|
|
|
const StyledContainer = styled.div``;
|
|
|
|
|
|
|
|
const Layout = (props) => {
|
|
|
|
const { children, isTabletView, setIsTabletView } = props;
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const isTablet = window.innerWidth <= size.tablet;
|
|
|
|
setIsTabletView(isTablet);
|
|
|
|
|
|
|
|
let mediaQuery = window.matchMedia("(max-width: 1024px)");
|
2020-12-30 08:35:24 +00:00
|
|
|
mediaQuery.addListener(isViewChangeHandler);
|
2020-12-21 12:14:55 +00:00
|
|
|
|
2020-12-30 08:35:24 +00:00
|
|
|
return () => mediaQuery.removeListener(isViewChangeHandler);
|
2020-12-21 12:14:55 +00:00
|
|
|
}, []);
|
|
|
|
|
|
|
|
const isViewChangeHandler = (e) => {
|
|
|
|
const { matches } = e;
|
|
|
|
setIsTabletView(matches);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledContainer className="Layout" isTabletView={isTabletView}>
|
|
|
|
{children}
|
|
|
|
</StyledContainer>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-02-03 12:42:47 +00:00
|
|
|
Layout.propTypes = {
|
|
|
|
isTabletView: PropTypes.bool,
|
|
|
|
children: PropTypes.any,
|
|
|
|
setIsTabletView: PropTypes.func,
|
2020-12-21 12:14:55 +00:00
|
|
|
};
|
|
|
|
|
2021-02-03 12:42:47 +00:00
|
|
|
export default inject(({ store }) => {
|
2020-12-21 12:14:55 +00:00
|
|
|
return {
|
2021-02-03 12:42:47 +00:00
|
|
|
isTabletView: store.settingsStore.isTabletView,
|
|
|
|
setIsTabletView: (isTablet) => {
|
|
|
|
store.settingsStore.isTabletView = isTablet;
|
|
|
|
},
|
2020-12-21 12:14:55 +00:00
|
|
|
};
|
2021-02-03 12:42:47 +00:00
|
|
|
})(observer(Layout));
|