feat: full screen image preview

packages/app/src/Element/Modal.tsx

@@ -1,32 +1,15 @@
 import "./Modal.css";
-import { useEffect, useRef } from "react";
-import * as React from "react";
+import { useEffect, MouseEventHandler, ReactNode } from "react";
 
 export interface ModalProps {
   className?: string;
-  onClose?: () => void;
-  children: React.ReactNode;
-}
-
-function useOnClickOutside(ref: React.MutableRefObject<Element | null>, onClickOutside: () => void) {
-  useEffect(() => {
-    function handleClickOutside(ev: MouseEvent) {
-      if (ref && ref.current && !ref.current.contains(ev.target as Node)) {
-        onClickOutside();
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [ref]);
+  onClose?: MouseEventHandler;
+  children: ReactNode;
 }
 
 export default function Modal(props: ModalProps) {
-  const ref = useRef(null);
   const onClose = props.onClose || (() => undefined);
   const className = props.className || "";
-  useOnClickOutside(ref, onClose);
 
   useEffect(() => {
     document.body.classList.add("scroll-lock");
@@ -34,10 +17,8 @@ export default function Modal(props: ModalProps) {
   }, []);
 
   return (
-    <div className={`modal ${className}`}>
-      <div ref={ref} className="modal-body">
-        {props.children}
-      </div>
+    <div className={`modal ${className}`} onClick={onClose}>
+      <div className="modal-body">{props.children}</div>
     </div>
   );
 }