refactor: Extract out useClickOutside.

1 files changed, 31 insertions, 0 deletions

diff --git a/FrontEnd/src/utilities/useClickOutside.ts b/FrontEnd/src/utilities/useClickOutside.ts
new file mode 100644
index 00000000..d4c53aa8
--- /dev/null
+++ b/FrontEnd/src/utilities/useClickOutside.ts
@@ -0,0 +1,31 @@
+import React from "react";
+
+export default function useClickOutside(
+  element: HTMLElement | null | undefined,
+  onClickOutside: () => void
+): void {
+  const onClickOutsideRef = React.useRef<() => void>(onClickOutside);
+
+  React.useEffect(() => {
+    onClickOutsideRef.current = onClickOutside;
+  }, [onClickOutside]);
+
+  React.useEffect(() => {
+    if (element != null) {
+      const handler = (event: MouseEvent): void => {
+        let e: HTMLElement | null = event.target as HTMLElement;
+        while (e) {
+          if (e == element) {
+            return;
+          }
+          e = e.parentElement;
+        }
+        onClickOutsideRef.current();
+      };
+      document.addEventListener("click", handler);
+      return () => {
+        document.removeEventListener("click", handler);
+      };
+    }
+  }, [element]);
+}