all

Securite/Linkwarden/components/ClickAwayHandler.tsx

@@ -0,0 +1,54 @@
+import React, { useRef, useEffect, ReactNode, RefObject } from "react";
+
+type Props = {
+  children: ReactNode;
+  onClickOutside: Function;
+  className?: string;
+  style?: React.CSSProperties;
+  onMount?: (rect: DOMRect) => void;
+};
+
+function useOutsideAlerter(
+  ref: RefObject<HTMLElement>,
+  onClickOutside: Function
+) {
+  useEffect(() => {
+    function handleClickOutside(event: Event) {
+      if (
+        ref.current &&
+        !ref.current.contains(event.target as HTMLInputElement)
+      ) {
+        onClickOutside(event);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, onClickOutside]);
+}
+
+export default function ClickAwayHandler({
+  children,
+  onClickOutside,
+  className,
+  style,
+  onMount,
+}: Props) {
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useOutsideAlerter(wrapperRef, onClickOutside);
+
+  useEffect(() => {
+    if (wrapperRef.current && onMount) {
+      const rect = wrapperRef.current.getBoundingClientRect();
+      onMount(rect); // Pass the bounding rectangle to the parent
+    }
+  }, []);
+
+  return (
+    <div ref={wrapperRef} className={className} style={style}>
+      {children}
+    </div>
+  );
+}