50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
|
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)");
|
||
|
|
mediaQuery.addEventListener("change", isViewChangeHandler);
|
||
|
|
|
||
|
|
return () => mediaQuery.removeEventListener("change", isViewChangeHandler);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
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);
|