From e2c6cd83c9ca770bbd1b16029987d97f88facf14 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Mon, 5 Jul 2021 22:27:30 +0800
Subject: refactor: Extract out useClickOutside.

---
 FrontEnd/src/utilities/useClickOutside.ts | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 FrontEnd/src/utilities/useClickOutside.ts

(limited to 'FrontEnd/src/utilities/useClickOutside.ts')

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]);
+}
-- 
cgit v1.2.3