2021-01-18 19:54:52 +00:00
|
|
|
import React, { useEffect, useState } from "react";
|
2021-01-13 12:21:06 +00:00
|
|
|
import styled, { css } 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";
|
2021-01-18 19:54:52 +00:00
|
|
|
import {
|
|
|
|
isIOS,
|
|
|
|
isFirefox,
|
|
|
|
isSafari,
|
|
|
|
isMobile,
|
|
|
|
isMobileOnly,
|
|
|
|
isChrome,
|
|
|
|
} from "react-device-detect";
|
2020-11-18 11:10:30 +00:00
|
|
|
|
2020-12-14 15:16:21 +00:00
|
|
|
import { connect } from "react-redux";
|
|
|
|
import store from "../../store";
|
|
|
|
|
|
|
|
const { setIsTabletView } = store.auth.actions;
|
2021-01-20 18:56:32 +00:00
|
|
|
const { getIsTabletView, isArticlePinned } = store.auth.selectors;
|
2020-12-14 15:16:21 +00:00
|
|
|
|
2020-12-02 12:28:37 +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-15 10:26:56 +00:00
|
|
|
height: ${(props) =>
|
2021-01-20 18:04:00 +00:00
|
|
|
isMobile && !isFirefox ? `${props.contentHeight}px` : "100vh"};
|
2020-12-28 12:34:05 +00:00
|
|
|
|
2021-01-20 18:56:32 +00:00
|
|
|
/* .scroll-body {
|
2021-01-19 18:16:09 +00:00
|
|
|
z-index: 1;
|
2021-01-20 18:56:32 +00:00
|
|
|
} */
|
2021-01-19 18:16:09 +00:00
|
|
|
|
2021-01-20 18:56:32 +00:00
|
|
|
/*#desktopScroll {
|
2020-12-28 12:34:05 +00:00
|
|
|
> .scroll-body {
|
|
|
|
position: ${(props) =>
|
2021-01-20 18:04:00 +00:00
|
|
|
props.isTabletView ? "static" : "absolute"} !important;
|
2021-01-13 12:21:06 +00:00
|
|
|
|
2020-12-28 12:42:51 +00:00
|
|
|
padding-right: ${(props) =>
|
2021-01-20 18:04:00 +00:00
|
|
|
props.isTabletView ? "1px" : "16px"} !important;
|
2021-01-13 12:21:06 +00:00
|
|
|
|
2021-01-15 13:05:54 +00:00
|
|
|
height: ${isMobile ? "100%" : "calc(100% + 20px)"};
|
2021-01-13 12:21:06 +00:00
|
|
|
}
|
|
|
|
.nav-thumb-horizontal {
|
|
|
|
${(props) =>
|
2021-01-20 18:04:00 +00:00
|
|
|
props.isTabletView &&
|
|
|
|
css`
|
|
|
|
position: fixed !important;
|
|
|
|
bottom: 4px;
|
|
|
|
`}
|
2020-12-28 12:34:05 +00:00
|
|
|
}
|
2021-01-20 18:04:00 +00:00
|
|
|
} */
|
|
|
|
|
2021-01-20 18:56:32 +00:00
|
|
|
#articleScrollBar {
|
2021-01-20 18:04:00 +00:00
|
|
|
> .scroll-body {
|
2021-01-20 18:56:32 +00:00
|
|
|
position: ${isMobile ? "static" : "absolute"} !important;
|
2021-01-20 18:04:00 +00:00
|
|
|
${(props) =>
|
2021-01-20 18:56:32 +00:00
|
|
|
isMobile &&
|
|
|
|
props.isArticlePinned &&
|
|
|
|
css`
|
|
|
|
overflow-y: hidden !important;
|
|
|
|
overflow-x: hidden !important;
|
|
|
|
/* max-width: calc(100vw - 576px);
|
|
|
|
min-width: 208px; */
|
|
|
|
`}/* > div:first-child {
|
2021-01-20 18:04:00 +00:00
|
|
|
${(props) =>
|
2021-01-20 18:56:32 +00:00
|
|
|
props.isTabletView &&
|
|
|
|
css`
|
|
|
|
max-width: calc(100vw - 488px);
|
|
|
|
min-width: 208px !important;
|
|
|
|
`}
|
|
|
|
} */
|
|
|
|
|
|
|
|
/* .nav-thumb-vertical {
|
2021-01-20 18:04:00 +00:00
|
|
|
${(props) =>
|
2021-01-20 18:56:32 +00:00
|
|
|
props.isTabletView &&
|
|
|
|
css`
|
|
|
|
width: 0 !important;
|
|
|
|
`}
|
|
|
|
} */
|
2021-01-20 18:04:00 +00:00
|
|
|
}
|
2021-01-20 18:56:32 +00:00
|
|
|
}
|
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-12-14 15:16:21 +00:00
|
|
|
const { children, isTabletView, setIsTabletView } = props;
|
2020-12-16 11:38:20 +00:00
|
|
|
|
2021-01-18 19:54:52 +00:00
|
|
|
const [contentHeight, setContentHeight] = useState();
|
|
|
|
const [isPortrait, setIsPortrait] = useState();
|
|
|
|
|
2020-12-28 12:34:05 +00:00
|
|
|
const intervalTime = 100;
|
|
|
|
const endTimeout = 300;
|
|
|
|
let intervalHandler;
|
|
|
|
let timeoutHandler;
|
|
|
|
|
2021-01-18 19:54:52 +00:00
|
|
|
useEffect(() => {
|
|
|
|
setIsPortrait(window.innerHeight > window.innerWidth);
|
|
|
|
});
|
2020-11-15 16:15:48 +00:00
|
|
|
useEffect(() => {
|
2020-12-14 15:16:21 +00:00
|
|
|
const isTablet = window.innerWidth <= size.tablet;
|
|
|
|
setIsTabletView(isTablet);
|
|
|
|
|
2020-11-15 16:15:48 +00:00
|
|
|
let mediaQuery = window.matchMedia("(max-width: 1024px)");
|
2020-12-28 12:34:05 +00:00
|
|
|
mediaQuery.addEventListener("change", onWidthChange);
|
2020-11-15 16:15:48 +00:00
|
|
|
|
2020-12-28 12:34:05 +00:00
|
|
|
return () => {
|
|
|
|
mediaQuery.removeEventListener("change", onWidthChange);
|
|
|
|
if (intervalHandler) clearInterval(intervalHandler);
|
|
|
|
if (timeoutHandler) clearTimeout(timeoutHandler);
|
|
|
|
};
|
2020-11-15 16:15:48 +00:00
|
|
|
}, []);
|
|
|
|
|
2020-12-01 17:28:22 +00:00
|
|
|
useEffect(() => {
|
2020-12-14 15:16:21 +00:00
|
|
|
if (isTabletView) {
|
2020-12-28 12:34:05 +00:00
|
|
|
if (isIOS && isSafari) window.addEventListener("resize", onResize);
|
|
|
|
else window.addEventListener("orientationchange", onOrientationChange);
|
|
|
|
changeRootHeight();
|
2020-12-02 12:28:37 +00:00
|
|
|
}
|
2020-12-01 17:28:22 +00:00
|
|
|
|
|
|
|
return () => {
|
2020-12-14 15:16:21 +00:00
|
|
|
if (isTabletView) {
|
2020-12-28 12:34:05 +00:00
|
|
|
if (isIOS && isSafari) window.removeEventListener("resize", onResize);
|
2020-12-15 10:26:56 +00:00
|
|
|
else
|
2020-12-28 12:34:05 +00:00
|
|
|
window.removeEventListener("orientationchange", onOrientationChange);
|
2020-12-02 12:28:37 +00:00
|
|
|
}
|
2020-12-01 17:28:22 +00:00
|
|
|
};
|
2020-12-15 10:26:56 +00:00
|
|
|
}, [isTabletView]);
|
2020-12-01 17:28:22 +00:00
|
|
|
|
2020-12-28 12:34:05 +00:00
|
|
|
const onWidthChange = (e) => {
|
2020-12-14 15:16:21 +00:00
|
|
|
const { matches } = e;
|
|
|
|
setIsTabletView(matches);
|
|
|
|
};
|
2020-12-28 12:34:05 +00:00
|
|
|
const onResize = () => {
|
|
|
|
changeRootHeight();
|
|
|
|
};
|
|
|
|
const onOrientationChange = () => {
|
|
|
|
changeRootHeight();
|
|
|
|
};
|
|
|
|
const changeRootHeight = () => {
|
|
|
|
intervalHandler && clearInterval(intervalHandler);
|
|
|
|
timeoutHandler && clearTimeout(timeoutHandler);
|
2020-12-14 15:16:21 +00:00
|
|
|
|
2020-12-28 12:34:05 +00:00
|
|
|
let lastInnerHeight, noChangeCount;
|
2020-12-01 20:39:38 +00:00
|
|
|
|
|
|
|
const updateHeight = () => {
|
2020-12-28 12:34:05 +00:00
|
|
|
clearInterval(intervalHandler);
|
|
|
|
clearTimeout(timeoutHandler);
|
2020-12-01 20:39:38 +00:00
|
|
|
|
2020-12-28 12:34:05 +00:00
|
|
|
intervalHandler = null;
|
|
|
|
timeoutHandler = null;
|
2020-12-01 20:39:38 +00:00
|
|
|
|
2021-01-18 19:54:52 +00:00
|
|
|
let height = window.innerHeight;
|
2020-12-03 08:25:08 +00:00
|
|
|
|
2021-01-18 19:54:52 +00:00
|
|
|
if (isMobileOnly && isIOS && isChrome) {
|
|
|
|
if (window.innerHeight < window.innerWidth && isPortrait) {
|
|
|
|
height = window.screen.availWidth - 57;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
setContentHeight(height);
|
2020-12-01 20:39:38 +00:00
|
|
|
};
|
2020-12-28 12:34:05 +00:00
|
|
|
intervalHandler = setInterval(() => {
|
|
|
|
//console.log("changeRootHeight setInterval"); TODO: need to refactoring
|
2020-12-01 20:39:38 +00:00
|
|
|
if (window.innerHeight === lastInnerHeight) {
|
|
|
|
noChangeCount++;
|
|
|
|
|
|
|
|
if (noChangeCount === intervalTime) {
|
|
|
|
updateHeight();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
lastInnerHeight = window.innerHeight;
|
|
|
|
noChangeCount = 0;
|
2020-12-01 17:28:22 +00:00
|
|
|
}
|
2020-12-01 20:39:38 +00:00
|
|
|
});
|
2020-12-01 17:28:22 +00:00
|
|
|
|
2020-12-28 12:34:05 +00:00
|
|
|
timeoutHandler = setTimeout(() => {
|
2020-12-01 20:39:38 +00:00
|
|
|
updateHeight();
|
|
|
|
}, endTimeout);
|
2020-12-01 17:28:22 +00:00
|
|
|
};
|
|
|
|
|
2020-11-17 08:36:49 +00:00
|
|
|
return (
|
2021-01-18 19:54:52 +00:00
|
|
|
<StyledContainer
|
|
|
|
className="Layout"
|
|
|
|
isTabletView={isTabletView}
|
|
|
|
contentHeight={contentHeight}
|
2021-01-20 18:56:32 +00:00
|
|
|
isArticlePinned={isArticlePinned}
|
2021-01-18 19:54:52 +00:00
|
|
|
>
|
2021-01-20 18:04:00 +00:00
|
|
|
{isMobile ? <MobileLayout {...props} /> : children}
|
2020-11-16 09:29:12 +00:00
|
|
|
</StyledContainer>
|
|
|
|
);
|
2020-11-17 08:36:49 +00:00
|
|
|
};
|
2020-12-14 15:16:21 +00:00
|
|
|
|
|
|
|
const mapStateToProps = (state) => {
|
|
|
|
return {
|
|
|
|
isTabletView: getIsTabletView(state),
|
2021-01-20 18:56:32 +00:00
|
|
|
isArticlePinned: isArticlePinned(state),
|
2020-12-14 15:16:21 +00:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
const mapDispatchToProps = (dispatch) => {
|
|
|
|
return {
|
|
|
|
setIsTabletView: (isTabletView) => dispatch(setIsTabletView(isTabletView)),
|
|
|
|
};
|
|
|
|
};
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(Layout);
|