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