From a0b0a558c0422ccba4ae35333ccbae3bd38a7183 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Sun, 12 Mar 2023 21:35:49 -0500
Subject: [PATCH] [FEAT]: Add onKeyPress listener in FullScreen component
---
.../previews/FullScreen/FullScreen.tsx | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
diff --git a/src/files-ui/components/previews/FullScreen/FullScreen.tsx b/src/files-ui/components/previews/FullScreen/FullScreen.tsx
index 4cc9b0f..7574195 100644
--- a/src/files-ui/components/previews/FullScreen/FullScreen.tsx
+++ b/src/files-ui/components/previews/FullScreen/FullScreen.tsx
@@ -12,6 +12,19 @@ const FullScreen: React.FC<FullScreenProps> = (props: FullScreenProps) => {
e.stopPropagation();
onClose?.();
}
+ React.useEffect(() => {
+ const handleCloseEsc = (evt: KeyboardEvent) => {
+ if (evt.key === "Escape") onClose?.();
+ };
+ console.log("adding listener");
+
+ document.addEventListener("keydown", handleCloseEsc);
+
+ return () => {
+ console.log("removing listener");
+ document.removeEventListener("keydown", handleCloseEsc);
+ };
+ }, []);
return (
<div
@@ -19,6 +32,9 @@ const FullScreen: React.FC<FullScreenProps> = (props: FullScreenProps) => {
open ? "fui-fullscreen-container show-fs" : "fui-fullscreen-container"
}
onClick={handleClose}
+ onKeyPress={(evt) => {
+ if (evt.key === "Escape") onClose?.();
+ }}
>
{open && (
<div
--
GitLab