2020-12-21 12:14:55 +00:00
|
|
|
import React, { useEffect } from "react";
|
|
|
|
import styled from "styled-components";
|
|
|
|
import { utils } from "asc-web-components";
|
|
|
|
import { connect } from "react-redux";
|
|
|
|
import store from "../../store";
|
|
|
|
|
|
|
|
const { setIsTabletView } = store.auth.actions;
|
|
|
|
const { getIsTabletView } = store.auth.selectors;
|
|
|
|
|
|
|
|
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>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
const mapStateToProps = (state) => {
|
|
|
|
return {
|
|
|
|
isTabletView: getIsTabletView(state),
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
|
|
return {
|
|
|
|
setIsTabletView: (isTabletView) => dispatch(setIsTabletView(isTabletView)),
|
|
|
|
};
|
|
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Layout);
|