diff --git a/src/App.tsx b/src/App.tsx index 3c33b07..5665969 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,12 @@ import React, { useEffect, useState } from 'react'; import './App.css'; -import { ContextWindowHeight } from './components/contextWindowHeight'; +import { ContextWindowHeightOrientation } from './components/contextWindowHeight'; import { MainScreen } from './components/mainScreen/mainScreen'; function App() { // const [windowHeight, setWindowHeight] = useState(window.screen.availHeight); - не робит на iphone const [windowHeight, setWindowHeight] = useState(window.visualViewport.height); + const [isLandscape, setIsLandscape] = useState(window.orientation !== 0); const [currentOrientaton, setCurrentOrientaton] = useState(window.orientation); @@ -14,13 +15,18 @@ function App() { setWindowHeight(e.currentTarget.height); } - // !!! работает на свойстве помеченном как deprecate - на айфоне иначе хз как - window.onorientationchange = e => { - //@ts-ignore + // !!! работает на свойстве помеченном как deprecated - на айфоне иначе хз как + window.onorientationchange = e => { + //@ts-ignore let angle = e.target.orientation; if(currentOrientaton !== angle) { setCurrentOrientaton(angle); } + if(angle !== 0) { + setIsLandscape(true); + } else { + setIsLandscape(false); + } } useEffect(() => { @@ -36,9 +42,9 @@ function App() { return (
- + - +
); } diff --git a/src/components/contextWindowHeight.ts b/src/components/contextWindowHeight.ts index 8f4b0a0..2936abf 100644 --- a/src/components/contextWindowHeight.ts +++ b/src/components/contextWindowHeight.ts @@ -1,3 +1,6 @@ import React from "react"; -export const ContextWindowHeight = React.createContext(window.screen.availHeight); \ No newline at end of file +export const ContextWindowHeightOrientation = React.createContext({ + windowHeight: window.screen.availHeight, + isLandscape: window.orientation !== 0 +}); \ No newline at end of file diff --git a/src/components/mainScreen/mainScreen.tsx b/src/components/mainScreen/mainScreen.tsx index e952a19..988b557 100644 --- a/src/components/mainScreen/mainScreen.tsx +++ b/src/components/mainScreen/mainScreen.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect, useState } from "react"; import { CSSTransition } from "react-transition-group"; -import { ContextWindowHeight } from "../contextWindowHeight"; +import { ContextWindowHeightOrientation } from "../contextWindowHeight"; import './mainScreen.css'; import { MobileAddPart } from "./mobileAddPart/mobileAddPart"; import { PushMessage } from "./pushMessage/pushMessage"; @@ -21,7 +21,7 @@ export const MainScreen:React.FC = React.memo(() => { setShowMobileLangSelectorPart, setShowMobileSharePart ] - const windowHeight = useContext(ContextWindowHeight); + const {windowHeight, isLandscape} = useContext(ContextWindowHeightOrientation); function onClickToolbar() { setShowToolbar(!showToolbar); @@ -139,7 +139,7 @@ export const MainScreen:React.FC = React.memo(() => { /> { - windowHeight < 700? + windowHeight < 700 && isLandscape? <> = React.memo((props) => { - const windowHeight = useContext(ContextWindowHeight); + const {windowHeight, isLandscape} = useContext(ContextWindowHeightOrientation); // const [openedAddButtons, setOpenedAddButtons] = useState(''); const controlStates = ['default', 'questing', 'return', 'questing'];// temp const [currentControlState, setCurrentControlState] = useState(0); // temp diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx index 8b2c83f..7c92aa1 100644 --- a/src/components/mainScreen/toolbar/toolbar.tsx +++ b/src/components/mainScreen/toolbar/toolbar.tsx @@ -1,5 +1,5 @@ import React, { useContext, useState } from "react"; -import { ContextWindowHeight } from "../../contextWindowHeight"; +import { ContextWindowHeightOrientation } from "../../contextWindowHeight"; import { ButtonContainer } from "./buttonContainer"; import { ToolbarButton } from "./toolbarButton"; import { CaptionToolbarButtons } from "./typeCaptionButtons"; @@ -17,7 +17,7 @@ type TProps = { } export const Toolbar:React.FC = React.memo((props) => { - const windowHeight = useContext(ContextWindowHeight); + const {windowHeight, isLandscape} = useContext(ContextWindowHeightOrientation); const [showAddButtonsContOnDekstop, setShowAddButtonsContOnDekstop] = useState(false); const [openedAddButtons, setOpenedAddButtons] = useState(''); @@ -25,7 +25,7 @@ export const Toolbar:React.FC = React.memo((props) => { setShowAddButtonsContOnDekstop(!showAddButtonsContOnDekstop); } - if(windowHeight < 700) { + if(windowHeight < 700 && isLandscape) { return