From 3603fc29fddf4fda11cd5cf8282c2e256ba3ba7e Mon Sep 17 00:00:00 2001 From: Fernando Zanutto Date: Tue, 23 Apr 2024 09:34:07 -0300 Subject: [PATCH 1/9] feat: close modal on Esc press --- src/renderer/components/modal/modal.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/renderer/components/modal/modal.tsx b/src/renderer/components/modal/modal.tsx index 35be1bf9..4586a741 100644 --- a/src/renderer/components/modal/modal.tsx +++ b/src/renderer/components/modal/modal.tsx @@ -38,6 +38,16 @@ export function Modal({ }); }; + useEffect(() => { + const close = (e: KeyboardEvent) => { + if (e.key === "Escape") { + handleCloseClick(); + } + }; + window.addEventListener("keydown", close); + return () => window.removeEventListener("keydown", close); + }, []); + useEffect(() => { dispatch(toggleDragging(visible)); }, [dispatch, visible]); From 3e5734343cea3acf0f2a106fb540886a0209e3aa Mon Sep 17 00:00:00 2001 From: Fernando Zanutto Date: Tue, 23 Apr 2024 15:01:02 -0300 Subject: [PATCH 2/9] feat: correctly check if modal is top most modal --- src/renderer/components/modal/modal.tsx | 46 +++++++++++++++++++++---- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/src/renderer/components/modal/modal.tsx b/src/renderer/components/modal/modal.tsx index 4586a741..38236fb6 100644 --- a/src/renderer/components/modal/modal.tsx +++ b/src/renderer/components/modal/modal.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect, useId, useState } from "react"; import { createPortal } from "react-dom"; import { XIcon } from "@primer/octicons-react"; @@ -23,6 +23,7 @@ export function Modal({ }: ModalProps) { const [isClosing, setIsClosing] = useState(false); const dispatch = useAppDispatch(); + const componentId = useId(); const handleCloseClick = () => { setIsClosing(true); @@ -38,14 +39,39 @@ export function Modal({ }); }; + const isTopMostModal = () => { + const openModals = document.getElementsByClassName("modal-container"); + return openModals.length && openModals[openModals.length - 1].id === componentId; + }; + useEffect(() => { - const close = (e: KeyboardEvent) => { - if (e.key === "Escape") { + const onKeyDown = (e: KeyboardEvent) => { + if (e.key === "Escape" && isTopMostModal()) { handleCloseClick(); } }; - window.addEventListener("keydown", close); - return () => window.removeEventListener("keydown", close); + + window.addEventListener("keydown", onKeyDown, false); + return () => window.removeEventListener("keydown", onKeyDown, false); + }, []); + + useEffect(() => { + const onMouseUp = (e: MouseEvent) => { + if (!isTopMostModal()) return; + + const modalContent = document.getElementById( + "modal-content-" + componentId + ); + + const clickInsideContent = modalContent.contains(e.target as Node); + + if (!clickInsideContent) { + handleCloseClick(); + } + }; + + window.addEventListener("mousedown", onMouseUp); + return () => window.removeEventListener("mousedown", onMouseUp); }, []); useEffect(() => { @@ -55,8 +81,14 @@ export function Modal({ if (!visible) return null; return createPortal( -
-
+
+

{title}

From 8743db64a62511deabd6487f91069a72b0ecc05f Mon Sep 17 00:00:00 2001 From: Fernando Zanutto Date: Tue, 23 Apr 2024 15:04:22 -0300 Subject: [PATCH 3/9] feat: apply prettier and rename variable --- src/renderer/components/modal/modal.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/renderer/components/modal/modal.tsx b/src/renderer/components/modal/modal.tsx index 38236fb6..e6ab2973 100644 --- a/src/renderer/components/modal/modal.tsx +++ b/src/renderer/components/modal/modal.tsx @@ -41,7 +41,9 @@ export function Modal({ const isTopMostModal = () => { const openModals = document.getElementsByClassName("modal-container"); - return openModals.length && openModals[openModals.length - 1].id === componentId; + return ( + openModals.length && openModals[openModals.length - 1].id === componentId + ); }; useEffect(() => { @@ -63,9 +65,9 @@ export function Modal({ "modal-content-" + componentId ); - const clickInsideContent = modalContent.contains(e.target as Node); + const clickedOutsideContent = !modalContent.contains(e.target as Node); - if (!clickInsideContent) { + if (clickedOutsideContent) { handleCloseClick(); } }; From 74075a014d11d2691b802af106c87413a43f1aed Mon Sep 17 00:00:00 2001 From: Fernando Zanutto Date: Tue, 23 Apr 2024 15:07:31 -0300 Subject: [PATCH 4/9] feat: rename modal container id --- src/renderer/components/modal/modal.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/modal/modal.tsx b/src/renderer/components/modal/modal.tsx index e6ab2973..0f15a0de 100644 --- a/src/renderer/components/modal/modal.tsx +++ b/src/renderer/components/modal/modal.tsx @@ -42,7 +42,8 @@ export function Modal({ const isTopMostModal = () => { const openModals = document.getElementsByClassName("modal-container"); return ( - openModals.length && openModals[openModals.length - 1].id === componentId + openModals.length && + openModals[openModals.length - 1].id === "modal-container-" + componentId ); }; @@ -85,7 +86,7 @@ export function Modal({ return createPortal(
Date: Tue, 23 Apr 2024 15:47:10 -0300 Subject: [PATCH 5/9] feat: use role attribute instead of using class with no style --- src/renderer/components/modal/modal.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/modal/modal.tsx b/src/renderer/components/modal/modal.tsx index 0f15a0de..6cd417dd 100644 --- a/src/renderer/components/modal/modal.tsx +++ b/src/renderer/components/modal/modal.tsx @@ -40,7 +40,7 @@ export function Modal({ }; const isTopMostModal = () => { - const openModals = document.getElementsByClassName("modal-container"); + const openModals = document.querySelectorAll("[role=modal-container]"); return ( openModals.length && openModals[openModals.length - 1].id === "modal-container-" + componentId @@ -85,7 +85,8 @@ export function Modal({ return createPortal(
Date: Tue, 23 Apr 2024 15:47:34 -0300 Subject: [PATCH 6/9] feat: rename function --- src/renderer/components/modal/modal.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/renderer/components/modal/modal.tsx b/src/renderer/components/modal/modal.tsx index 6cd417dd..eed46253 100644 --- a/src/renderer/components/modal/modal.tsx +++ b/src/renderer/components/modal/modal.tsx @@ -59,7 +59,7 @@ export function Modal({ }, []); useEffect(() => { - const onMouseUp = (e: MouseEvent) => { + const onMouseDown = (e: MouseEvent) => { if (!isTopMostModal()) return; const modalContent = document.getElementById( @@ -73,8 +73,8 @@ export function Modal({ } }; - window.addEventListener("mousedown", onMouseUp); - return () => window.removeEventListener("mousedown", onMouseUp); + window.addEventListener("mousedown", onMouseDown); + return () => window.removeEventListener("mousedown", onMouseDown); }, []); useEffect(() => { From bf85316800e94d9d347f4bef1bff062e260d072c Mon Sep 17 00:00:00 2001 From: Fernando Zanutto Date: Tue, 23 Apr 2024 15:48:00 -0300 Subject: [PATCH 7/9] feat: useRef instead of getting element by id --- src/renderer/components/modal/modal.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/renderer/components/modal/modal.tsx b/src/renderer/components/modal/modal.tsx index eed46253..2b31998b 100644 --- a/src/renderer/components/modal/modal.tsx +++ b/src/renderer/components/modal/modal.tsx @@ -1,4 +1,4 @@ -import { useEffect, useId, useState } from "react"; +import { useEffect, useId, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { XIcon } from "@primer/octicons-react"; @@ -23,6 +23,7 @@ export function Modal({ }: ModalProps) { const [isClosing, setIsClosing] = useState(false); const dispatch = useAppDispatch(); + const modalContentRef = useRef(null); const componentId = useId(); const handleCloseClick = () => { @@ -54,19 +55,15 @@ export function Modal({ } }; - window.addEventListener("keydown", onKeyDown, false); - return () => window.removeEventListener("keydown", onKeyDown, false); + window.addEventListener("keydown", onKeyDown); + return () => window.removeEventListener("keydown", onKeyDown); }, []); useEffect(() => { const onMouseDown = (e: MouseEvent) => { if (!isTopMostModal()) return; - const modalContent = document.getElementById( - "modal-content-" + componentId - ); - - const clickedOutsideContent = !modalContent.contains(e.target as Node); + const clickedOutsideContent = !modalContentRef.current.contains(e.target as Node); if (clickedOutsideContent) { handleCloseClick(); @@ -91,7 +88,7 @@ export function Modal({ >
From dae566ce76244c42721c77d82f9209e5e3dab0ac Mon Sep 17 00:00:00 2001 From: Fernando Zanutto Date: Tue, 23 Apr 2024 19:11:38 -0300 Subject: [PATCH 8/9] feat: removing necessity of id on outer div --- src/renderer/components/modal/modal.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/renderer/components/modal/modal.tsx b/src/renderer/components/modal/modal.tsx index 2b31998b..a1cfb087 100644 --- a/src/renderer/components/modal/modal.tsx +++ b/src/renderer/components/modal/modal.tsx @@ -41,10 +41,10 @@ export function Modal({ }; const isTopMostModal = () => { - const openModals = document.querySelectorAll("[role=modal-container]"); + const openModals = document.querySelectorAll("[role=modal-content]"); return ( openModals.length && - openModals[openModals.length - 1].id === "modal-container-" + componentId + openModals[openModals.length - 1] === modalContentRef.current ); }; @@ -63,7 +63,9 @@ export function Modal({ const onMouseDown = (e: MouseEvent) => { if (!isTopMostModal()) return; - const clickedOutsideContent = !modalContentRef.current.contains(e.target as Node); + const clickedOutsideContent = !modalContentRef.current.contains( + e.target as Node + ); if (clickedOutsideContent) { handleCloseClick(); @@ -81,13 +83,10 @@ export function Modal({ if (!visible) return null; return createPortal( -
+
From 3d9c289e3ffd7c79325fb37a124e7c94fbee97c5 Mon Sep 17 00:00:00 2001 From: Fernando Zanutto Date: Tue, 23 Apr 2024 19:15:26 -0300 Subject: [PATCH 9/9] feat: rename role --- src/renderer/components/modal/modal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/modal/modal.tsx b/src/renderer/components/modal/modal.tsx index a1cfb087..cc75db26 100644 --- a/src/renderer/components/modal/modal.tsx +++ b/src/renderer/components/modal/modal.tsx @@ -41,7 +41,7 @@ export function Modal({ }; const isTopMostModal = () => { - const openModals = document.querySelectorAll("[role=modal-content]"); + const openModals = document.querySelectorAll("[role=modal]"); return ( openModals.length && openModals[openModals.length - 1] === modalContentRef.current @@ -86,7 +86,7 @@ export function Modal({