muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

using refs instead of IDs

Browse source
This commit is contained in:
Fedor Katurov 2022-08-01 22:27:33 +07:00
parent 4dc9e34957
commit d164d0d394
1 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/auth/login/LoginScene/index.tsx
View file

@ -1,7 +1,6 @@
import React, { import React, {
FC, FC,
memo, memo,
MouseEventHandler,
useCallback, useCallback,
useEffect, useEffect,
useRef, useRef,
@ -55,22 +54,23 @@ const layers: Layer[] = [
]; ];
const LoginScene: FC<LoginSceneProps> = memo(() => { const LoginScene: FC<LoginSceneProps> = memo(() => {
const ref = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const imageRefs = useRef<Array<SVGImageElement | null>>([]);
const { isMobile } = useWindowSize(); const { isMobile } = useWindowSize();
const onMouseMove = useCallback( const onMouseMove = useCallback(
(event: MouseEvent): any => { (event: MouseEvent): any => {
if (!ref.current) { if (!containerRef.current) {
return; return;
} }
const { x, width } = ref.current.getBoundingClientRect(); const { x, width } = containerRef.current.getBoundingClientRect();
const middle = (width - x) / 2; const middle = (width - x) / 2;
const shift = event.pageX / middle / 2 - 0.5; const shift = event.pageX / middle / 2 - 0.5;
layers.map((it, index) => { layers.forEach((it, index) => {
const target = document.getElementById(`LoginScene__${index}`); const target = imageRefs.current[index];
if (target) { if (target) {
target.style.transform = `translate(${shift * target.style.transform = `translate(${shift *
@ -79,7 +79,7 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
} }
}); });
}, },
[ref], [containerRef],
); );
useEffect(() => { useEffect(() => {
@ -92,7 +92,7 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
} }
return ( return (
<div className={styles.scene} ref={ref}> <div className={styles.scene} ref={containerRef}>
<svg <svg
width="100%" width="100%"
height="100%" height="100%"
@ -125,7 +125,7 @@ const LoginScene: FC<LoginSceneProps> = memo(() => {
{layers.map((it, index) => ( {layers.map((it, index) => (
<image <image
id={`LoginScene__${index}`} ref={it => imageRefs.current.push(it)}
key={it.src} key={it.src}
href={it.src} href={it.src}
width={it.width} width={it.width}