Web: Client: add smart banner store, fix layout height
This commit is contained in:
parent
aef79ffbe7
commit
c9292331b8
@ -31,7 +31,7 @@ const StyledContainer = styled.div`
|
||||
`;
|
||||
|
||||
const Layout = (props) => {
|
||||
const { children, isTabletView, setIsTabletView } = props;
|
||||
const { children, isTabletView, setIsTabletView, isBannerVisible } = props;
|
||||
|
||||
const [contentHeight, setContentHeight] = useState();
|
||||
const [isPortrait, setIsPortrait] = useState();
|
||||
@ -74,6 +74,10 @@ const Layout = (props) => {
|
||||
};
|
||||
}, [isTabletView]);
|
||||
|
||||
useEffect(() => {
|
||||
changeRootHeight();
|
||||
}, [isBannerVisible]);
|
||||
|
||||
const onWidthChange = (e) => {
|
||||
const { matches } = e;
|
||||
setIsTabletView(matches);
|
||||
@ -116,11 +120,8 @@ const Layout = (props) => {
|
||||
// height = window.screen.availHeight - correctorTabletSafari;
|
||||
// }
|
||||
// }
|
||||
const isSmartBanner =
|
||||
document.getElementsByClassName("smartbanner-container")[0].nodeName ===
|
||||
"DIV";
|
||||
const bannerHeight = isSmartBanner ? 80 : 0;
|
||||
|
||||
const bannerHeight = isBannerVisible ? 80 : 0;
|
||||
let vh = (height - 48 - bannerHeight) * 0.01;
|
||||
document.documentElement.style.setProperty("--vh", `${vh}px`);
|
||||
|
||||
@ -162,10 +163,11 @@ Layout.propTypes = {
|
||||
setIsTabletView: PropTypes.func,
|
||||
};
|
||||
|
||||
export default inject(({ auth }) => {
|
||||
export default inject(({ auth, bannerStore }) => {
|
||||
return {
|
||||
isTabletView: auth.settingsStore.isTabletView,
|
||||
|
||||
setIsTabletView: auth.settingsStore.setIsTabletView,
|
||||
isBannerVisible: bannerStore.isBannerVisible,
|
||||
};
|
||||
})(observer(Layout));
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import styled from "styled-components";
|
||||
import { isMobile, isIOS } from "react-device-detect";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import SmartBanner from "react-smartbanner";
|
||||
import "./main.css";
|
||||
|
||||
@ -9,8 +10,7 @@ const Wrapper = styled.div`
|
||||
`;
|
||||
|
||||
const ReactSmartBanner = (props) => {
|
||||
const { t, ready } = props;
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
const { t, ready, isBannerVisible, setIsBannerVisible } = props;
|
||||
const force = isIOS ? "ios" : "android";
|
||||
|
||||
const getCookie = (name) => {
|
||||
@ -25,7 +25,7 @@ const ReactSmartBanner = (props) => {
|
||||
};
|
||||
|
||||
const hideBanner = () => {
|
||||
setIsVisible(false);
|
||||
setIsBannerVisible(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -55,7 +55,7 @@ const ReactSmartBanner = (props) => {
|
||||
kindle: "kindle-fire-app",
|
||||
};
|
||||
|
||||
return isMobile && isVisible && ready ? (
|
||||
return isMobile && isBannerVisible && ready ? (
|
||||
<Wrapper>
|
||||
<SmartBanner
|
||||
title={t("SmartBanner:AppName")}
|
||||
@ -74,4 +74,9 @@ const ReactSmartBanner = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ReactSmartBanner;
|
||||
export default inject(({ bannerStore }) => {
|
||||
return {
|
||||
isBannerVisible: bannerStore.isBannerVisible,
|
||||
setIsBannerVisible: bannerStore.setIsBannerVisible,
|
||||
};
|
||||
})(observer(ReactSmartBanner));
|
||||
|
15
web/ASC.Web.Client/src/store/BannerStore.js
Normal file
15
web/ASC.Web.Client/src/store/BannerStore.js
Normal file
@ -0,0 +1,15 @@
|
||||
import { makeAutoObservable } from "mobx";
|
||||
|
||||
class BannerStore {
|
||||
isBannerVisible = true;
|
||||
|
||||
constructor() {
|
||||
makeAutoObservable(this);
|
||||
}
|
||||
|
||||
setIsBannerVisible = (visible) => {
|
||||
this.isBannerVisible = visible;
|
||||
};
|
||||
}
|
||||
|
||||
export default BannerStore;
|
@ -5,6 +5,7 @@ import SettingsSetupStore from "./SettingsSetupStore";
|
||||
import ConfirmStore from "./ConfirmStore";
|
||||
import BackupStore from "./BackupStore";
|
||||
import CommonStore from "./CommonStore";
|
||||
import BannerStore from "./BannerStore";
|
||||
|
||||
const paymentStore = new PaymentStore();
|
||||
const wizardStore = new WizardStore();
|
||||
@ -12,6 +13,7 @@ const setupStore = new SettingsSetupStore();
|
||||
const confirmStore = new ConfirmStore();
|
||||
const backupStore = new BackupStore();
|
||||
const commonStore = new CommonStore();
|
||||
const bannerStore = new BannerStore();
|
||||
|
||||
const store = {
|
||||
auth: authStore,
|
||||
@ -21,6 +23,7 @@ const store = {
|
||||
confirm: confirmStore,
|
||||
backup: backupStore,
|
||||
common: commonStore,
|
||||
bannerStore: bannerStore,
|
||||
};
|
||||
|
||||
export default store;
|
||||
|
Loading…
Reference in New Issue
Block a user