From 4dc9e3495725c4c5c990ec96097fbb66945c1c10 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 1 Aug 2022 22:22:40 +0700 Subject: [PATCH] added check for layers --- src/components/auth/login/LoginScene/index.tsx | 17 ++++++++++++++--- tsconfig.tsbuildinfo | 2 +- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/src/components/auth/login/LoginScene/index.tsx b/src/components/auth/login/LoginScene/index.tsx index a4dbee40..bd66b220 100644 --- a/src/components/auth/login/LoginScene/index.tsx +++ b/src/components/auth/login/LoginScene/index.tsx @@ -8,6 +8,8 @@ import React, { useState, } from "react"; +import { useWindowSize } from "~/hooks/dom/useWindowSize"; + import styles from "./styles.module.scss"; interface LoginSceneProps {} @@ -55,6 +57,7 @@ const layers: Layer[] = [ const LoginScene: FC = memo(() => { const ref = useRef(null); const [loaded, setLoaded] = useState(false); + const { isMobile } = useWindowSize(); const onMouseMove = useCallback( (event: MouseEvent): any => { @@ -67,9 +70,13 @@ const LoginScene: FC = memo(() => { const shift = event.pageX / middle / 2 - 0.5; layers.map((it, index) => { - document.getElementById( - `LoginScene__${index}`, - )?.style.transform = `translate(${shift * it.velocity * 200}px, 0)`; + const target = document.getElementById(`LoginScene__${index}`); + + if (target) { + target.style.transform = `translate(${shift * + it.velocity * + 200}px, 0)`; + } }); }, [ref], @@ -80,6 +87,10 @@ const LoginScene: FC = memo(() => { return () => document.removeEventListener("mousemove", onMouseMove); }, []); + if (isMobile) { + return null; + } + return (