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";
|
2021-02-03 12:42:47 +00:00
|
|
|
import PropTypes from "prop-types";
|
2020-11-17 08:36:49 +00:00
|
|
|
import MobileLayout from "./MobileLayout";
|
2021-02-24 17:11:23 +00:00
|
|
|
import utils from "@appserver/components/utils";
|
2021-01-18 19:54:52 +00:00
|
|
|
import {
|
|
|
|
isIOS,
|
|
|
|
isFirefox,
|
|
|
|
isSafari,
|
|
|
|
isMobile,
|
|
|
|
isMobileOnly,
|
|
|
|
isChrome,
|
2021-01-21 13:27:04 +00:00
|
|
|
isTablet,
|
2021-01-18 19:54:52 +00:00
|
|
|
} from "react-device-detect";
|
2021-02-03 12:42:47 +00:00
|
|
|
import { inject, observer } from "mobx-react";
|
2020-12-21 12:14:55 +00:00
|
|
|
|
2021-01-22 13:50:20 +00:00
|
|
|
const { size, isSmallTablet } = 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-21 13:27:04 +00:00
|
|
|
(props.isTabletView || isMobile) && !isFirefox
|
|
|
|
? `${props.contentHeight}px`
|
|
|
|
: "100vh"};
|
2021-01-19 18:16:09 +00:00
|
|
|
|
2021-01-20 18:56:32 +00:00
|
|
|
#articleScrollBar {
|
2021-01-20 18:04:00 +00:00
|
|
|
> .scroll-body {
|
2021-01-22 13:50:20 +00:00
|
|
|
position: ${(props) =>
|
|
|
|
isMobile && !isSmallTablet()
|
|
|
|
? props.isArticlePinned
|
|
|
|
? "static"
|
|
|
|
: "absolute"
|
|
|
|
: "absolute"} !important;
|
2021-01-21 08:38:53 +00:00
|
|
|
|
2021-01-20 18:04:00 +00:00
|
|
|
${(props) =>
|
2021-01-20 18:56:32 +00:00
|
|
|
isMobile &&
|
|
|
|
props.isArticlePinned &&
|
2021-01-22 13:50:20 +00:00
|
|
|
!isSmallTablet() &&
|
2021-01-20 18:56:32 +00:00
|
|
|
css`
|
|
|
|
overflow-y: hidden !important;
|
|
|
|
overflow-x: hidden !important;
|
2021-01-22 13:50:20 +00:00
|
|
|
width: 208px;
|
2021-01-20 18:56:32 +00:00
|
|
|
`}
|
2021-01-21 08:38:53 +00:00
|
|
|
}
|
2021-01-20 18:56:32 +00:00
|
|
|
|
2021-01-21 08:38:53 +00:00
|
|
|
.nav-thumb-horizontal {
|
|
|
|
${(props) =>
|
2021-01-20 18:56:32 +00:00
|
|
|
props.isTabletView &&
|
|
|
|
css`
|
2021-01-21 08:38:53 +00:00
|
|
|
height: 0 !important;
|
2021-01-20 18:56:32 +00:00
|
|
|
`}
|
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-12-21 12:14:55 +00:00
|
|
|
|
|
|
|
const Layout = (props) => {
|
2021-01-22 13:50:20 +00:00
|
|
|
const { children, isTabletView, setIsTabletView, isArticlePinned } = 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;
|
2020-12-21 12:14:55 +00:00
|
|
|
|
2021-01-18 19:54:52 +00:00
|
|
|
useEffect(() => {
|
|
|
|
setIsPortrait(window.innerHeight > window.innerWidth);
|
|
|
|
});
|
2020-12-21 12:14:55 +00:00
|
|
|
useEffect(() => {
|
|
|
|
const isTablet = window.innerWidth <= size.tablet;
|
|
|
|
setIsTabletView(isTablet);
|
|
|
|
|
|
|
|
let mediaQuery = window.matchMedia("(max-width: 1024px)");
|
2020-12-28 12:34:05 +00:00
|
|
|
mediaQuery.addEventListener("change", onWidthChange);
|
2020-12-21 12:14:55 +00:00
|
|
|
|
2020-12-28 12:34:05 +00:00
|
|
|
return () => {
|
|
|
|
mediaQuery.removeEventListener("change", onWidthChange);
|
|
|
|
if (intervalHandler) clearInterval(intervalHandler);
|
|
|
|
if (timeoutHandler) clearTimeout(timeoutHandler);
|
|
|
|
};
|
2020-12-21 12:14:55 +00:00
|
|
|
}, []);
|
|
|
|
|
2020-12-01 17:28:22 +00:00
|
|
|
useEffect(() => {
|
2021-01-21 13:27:04 +00:00
|
|
|
if (isTabletView || isMobile) {
|
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 () => {
|
2021-01-21 13:27:04 +00:00
|
|
|
if (isTabletView || isMobile) {
|
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-21 12:14:55 +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 = () => {
|
2021-01-26 13:28:45 +00:00
|
|
|
const correctorMobileChrome = 57; // ios
|
|
|
|
const correctorTabletSafari = 71; // ios
|
|
|
|
|
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) {
|
2021-01-26 13:28:45 +00:00
|
|
|
height = window.screen.availWidth - correctorMobileChrome;
|
2021-01-18 19:54:52 +00:00
|
|
|
}
|
|
|
|
}
|
2021-01-21 13:27:04 +00:00
|
|
|
if (isTablet && isIOS && isSafari) {
|
|
|
|
if (
|
|
|
|
window.innerHeight < window.innerWidth &&
|
|
|
|
window.innerWidth > 1024
|
|
|
|
) {
|
2021-01-26 17:20:21 +00:00
|
|
|
height = window.screen.availHeight - correctorTabletSafari;
|
2021-01-21 13:27:04 +00:00
|
|
|
}
|
|
|
|
}
|
2021-01-18 19:54:52 +00:00
|
|
|
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-12-21 12:14:55 +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-12-21 12:14:55 +00:00
|
|
|
</StyledContainer>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2021-01-26 15:21:50 +00:00
|
|
|
Layout.propTypes = {
|
|
|
|
isTabletView: PropTypes.bool,
|
2021-02-03 12:42:47 +00:00
|
|
|
children: PropTypes.any,
|
2021-01-26 15:21:50 +00:00
|
|
|
setIsTabletView: PropTypes.func,
|
2021-02-20 17:17:27 +00:00
|
|
|
isArticlePinned: PropTypes.bool,
|
2020-12-21 12:14:55 +00:00
|
|
|
};
|
|
|
|
|
2021-02-15 19:43:07 +00:00
|
|
|
export default inject(({ auth }) => {
|
2020-12-21 12:14:55 +00:00
|
|
|
return {
|
2021-02-15 19:43:07 +00:00
|
|
|
isTabletView: auth.settingsStore.isTabletView,
|
2021-02-20 14:31:58 +00:00
|
|
|
isArticlePinned: auth.settingsStore.isArticlePinned,
|
|
|
|
setIsTabletView: auth.settingsStore.setIsTabletView,
|
2020-12-21 12:14:55 +00:00
|
|
|
};
|
2021-02-03 12:42:47 +00:00
|
|
|
})(observer(Layout));
|