PublicMirrors/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-01-23 21:44:55 +03:00
Code Issues Actions Packages Projects Releases 1 Wiki Activity

feat: useRef instead of getting element by id

Browse Source
This commit is contained in:
Fernando Zanutto 2024-04-23 15:48:00 -03:00
parent 1691e637c9
commit e4015e78cd
1 changed files with 6 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/renderer/components/modal/modal.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useId, useState } from "react"; import { useEffect, useId, useRef, useState } from "react";
import { createPortal } from "react-dom"; import { createPortal } from "react-dom";
import { XIcon } from "@primer/octicons-react"; import { XIcon } from "@primer/octicons-react";
@ -23,6 +23,7 @@ export function Modal({
}: ModalProps) { }: ModalProps) {
const [isClosing, setIsClosing] = useState(false); const [isClosing, setIsClosing] = useState(false);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const modalContentRef = useRef<HTMLDivElement | null>(null);
const componentId = useId(); const componentId = useId();
const handleCloseClick = () => { const handleCloseClick = () => {
@ -54,19 +55,15 @@ export function Modal({
} }
}; };
window.addEventListener("keydown", onKeyDown, false); window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown, false); return () => window.removeEventListener("keydown", onKeyDown);
}, []); }, []);
useEffect(() => { useEffect(() => {
const onMouseDown = (e: MouseEvent) => { const onMouseDown = (e: MouseEvent) => {
if (!isTopMostModal()) return; if (!isTopMostModal()) return;
const modalContent = document.getElementById( const clickedOutsideContent = !modalContentRef.current.contains(e.target as Node);
"modal-content-" + componentId
);
const clickedOutsideContent = !modalContent.contains(e.target as Node);
if (clickedOutsideContent) { if (clickedOutsideContent) {
handleCloseClick(); handleCloseClick();
@ -91,7 +88,7 @@ export function Modal({
> >
<div <div
className={styles.modal({ closing: isClosing })} className={styles.modal({ closing: isClosing })}
id={"modal-content-" + componentId} ref={modalContentRef}
> >
<div className={styles.modalHeader}> <div className={styles.modalHeader}>
<div style={{ display: "flex", gap: 4, flexDirection: "column" }}> <div style={{ display: "flex", gap: 4, flexDirection: "column" }}>