Web: Common: Layout: refactoring
This commit is contained in:
parent
be710bf469
commit
96bfc3f8f9
@ -1,7 +1,7 @@
|
|||||||
import React, { Component, createRef } from "react";
|
import React, { Component, createRef } from "react";
|
||||||
import { Scrollbar, utils } from "asc-web-components";
|
import { Scrollbar, utils } from "asc-web-components";
|
||||||
import { LayoutContextProvider } from "./context";
|
import { LayoutContextProvider } from "./context";
|
||||||
import { isMobile, isSafari, isIOS, isChrome } from "react-device-detect";
|
import { isMobile, isSafari, isIOS } from "react-device-detect";
|
||||||
|
|
||||||
const { isTouchDevice } = utils.device;
|
const { isTouchDevice } = utils.device;
|
||||||
class MobileLayout extends Component {
|
class MobileLayout extends Component {
|
||||||
@ -44,12 +44,10 @@ class MobileLayout extends Component {
|
|||||||
? this.documentElement.scrollTop
|
? this.documentElement.scrollTop
|
||||||
: window.pageYOffset;
|
: window.pageYOffset;
|
||||||
|
|
||||||
let isVisible;
|
|
||||||
|
|
||||||
if (visibleContent && isMobile && !isTouchDevice) {
|
if (visibleContent && isMobile && !isTouchDevice) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (window.pageYOffset !== 0) {
|
if (!isIOS && window.pageYOffset !== 0) {
|
||||||
window.scroll(0, 0);
|
window.scroll(0, 0);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -65,7 +63,7 @@ class MobileLayout extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
isVisible = prevScrollPosition >= currentScrollPosition;
|
let isVisible = prevScrollPosition >= currentScrollPosition;
|
||||||
|
|
||||||
if (
|
if (
|
||||||
(isSafari || isIOS) &&
|
(isSafari || isIOS) &&
|
||||||
|
@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
|
|||||||
import styled from "styled-components";
|
import styled from "styled-components";
|
||||||
import MobileLayout from "./MobileLayout";
|
import MobileLayout from "./MobileLayout";
|
||||||
import { utils } from "asc-web-components";
|
import { utils } from "asc-web-components";
|
||||||
import { isIOS, isFirefox, isChrome, isMobile } from "react-device-detect";
|
import { isIOS, isFirefox } from "react-device-detect";
|
||||||
|
|
||||||
const { size } = utils.device;
|
const { size } = utils.device;
|
||||||
|
|
||||||
@ -29,14 +29,13 @@ const Layout = (props) => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isMobile) {
|
if (isIOS && !isFirefox) {
|
||||||
window.addEventListener("resize", resizeHandler);
|
window.addEventListener("resize", resizeHandler);
|
||||||
|
|
||||||
resizeHandler();
|
resizeHandler();
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (isMobile) {
|
if (isIOS && !isFirefox) {
|
||||||
window.removeEventListener("resize", resizeHandler);
|
window.removeEventListener("resize", resizeHandler);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -44,7 +43,7 @@ const Layout = (props) => {
|
|||||||
|
|
||||||
const resizeHandler = () => {
|
const resizeHandler = () => {
|
||||||
const intervalTime = 100;
|
const intervalTime = 100;
|
||||||
const endTimeout = 500;
|
const endTimeout = 300;
|
||||||
|
|
||||||
let interval, timeout, lastInnerHeight, noChangeCount;
|
let interval, timeout, lastInnerHeight, noChangeCount;
|
||||||
|
|
||||||
@ -56,7 +55,6 @@ const Layout = (props) => {
|
|||||||
timeout = null;
|
timeout = null;
|
||||||
|
|
||||||
const vh = (window.innerHeight - 57) * 0.01;
|
const vh = (window.innerHeight - 57) * 0.01;
|
||||||
|
|
||||||
document.documentElement.style.setProperty("--vh", `${vh}px`);
|
document.documentElement.style.setProperty("--vh", `${vh}px`);
|
||||||
};
|
};
|
||||||
interval = setInterval(() => {
|
interval = setInterval(() => {
|
||||||
|
Loading…
Reference in New Issue
Block a user