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/views/timeline-common/TimelinePostView.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'FrontEnd/src/views/timeline-common/TimelinePostView.tsx')

diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
index 0954b912..de6c3e7c 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
@@ -6,6 +6,8 @@ import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 
 import { pushAlert } from "@/services/alert";
 
+import useClickOutside from "@/utilities/useClickOutside";
+
 import UserAvatar from "../common/user/UserAvatar";
 import Card from "../common/Card";
 import FlatButton from "../common/button/FlatButton";
@@ -32,6 +34,12 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
     "delete" | "changeproperty" | null
   >(null);
 
+  const [maskElement, setMaskElement] = React.useState<HTMLElement | null>(
+    null
+  );
+
+  useClickOutside(maskElement, () => setOperationMaskVisible(false));
+
   const cardRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
     const cardIntersectionObserver = new IntersectionObserver(([e]) => {
@@ -92,6 +100,7 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
         </div>
         {operationMaskVisible ? (
           <div
+            ref={setMaskElement}
             className="timeline-post-item-options-mask"
             onClick={() => {
               setOperationMaskVisible(false);
-- 
cgit v1.2.3