From d65dcebc3ed64c96c70f0ee7f228b4dfe79b28a1 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Tue, 29 Aug 2023 20:41:34 +0800
Subject: ...

---
 FrontEnd/src/components/dialog/Dialog.css |  4 ++--
 FrontEnd/src/components/dialog/Dialog.tsx | 39 ++++++++++++-------------------
 2 files changed, 17 insertions(+), 26 deletions(-)

(limited to 'FrontEnd/src/components/dialog')

diff --git a/FrontEnd/src/components/dialog/Dialog.css b/FrontEnd/src/components/dialog/Dialog.css
index e4c61440..f25309ae 100644
--- a/FrontEnd/src/components/dialog/Dialog.css
+++ b/FrontEnd/src/components/dialog/Dialog.css
@@ -17,7 +17,7 @@
   right: 0;
   top: 0;
   bottom: 0;
-  background-color: var(--cru-surface-dim-color);
+  background-color: var(--cru-dialog-overlay-color);
   opacity: 0.8;
 }
 
@@ -27,7 +27,7 @@
 
   margin: 2em auto;
 
-  border: var(--cru-key-container-color) 1px solid;
+  border: var(--cru-dialog-container-background-color) 1px solid;
   border-radius: 5px;
   padding: 1.5em;
   background-color: var(--cru-surface-color);
diff --git a/FrontEnd/src/components/dialog/Dialog.tsx b/FrontEnd/src/components/dialog/Dialog.tsx
index b1d66704..bdba9198 100644
--- a/FrontEnd/src/components/dialog/Dialog.tsx
+++ b/FrontEnd/src/components/dialog/Dialog.tsx
@@ -1,6 +1,5 @@
 import { ReactNode, useRef } from "react";
 import ReactDOM from "react-dom";
-import { CSSTransition } from "react-transition-group";
 import classNames from "classnames";
 
 import { ThemeColor } from "../common";
@@ -16,42 +15,34 @@ if (optionalPortalElement == null) {
 const portalElement = optionalPortalElement;
 
 interface DialogProps {
-  color?: ThemeColor;
   children?: ReactNode;
   disableCloseOnClickOnOverlay?: boolean;
 }
 
 export default function Dialog({
-  color,
   children,
   disableCloseOnClickOnOverlay,
 }: DialogProps) {
-  color = color ?? "primary";
-
   const closeDialog = useCloseDialog();
 
-  const nodeRef = useRef(null);
+  const lastPointerDownIdRef = useRef<number | null>(null);
 
   return ReactDOM.createPortal(
-    <CSSTransition
-      nodeRef={nodeRef}
-      mountOnEnter
-      unmountOnExit
-      in
-      timeout={300}
-      classNames="cru-dialog"
-    >
+    <div className={classNames("cru-dialog-overlay")}>
       <div
-        ref={nodeRef}
-        className={classNames("cru-dialog-overlay", `cru-${color}`)}
-      >
-        <div
-          className="cru-dialog-background"
-          onClick={disableCloseOnClickOnOverlay ? undefined : closeDialog}
-        />
-        <div className="cru-dialog-container">{children}</div>
-      </div>
-    </CSSTransition>,
+        className="cru-dialog-background"
+        onPointerDown={(e) => {
+          lastPointerDownIdRef.current = e.pointerId;
+        }}
+        onPointerUp={(e) => {
+          if (lastPointerDownIdRef.current === e.pointerId) {
+            if (!disableCloseOnClickOnOverlay) closeDialog();
+          }
+          lastPointerDownIdRef.current = null;
+        }}
+      />
+      <div className="cru-dialog-container">{children}</div>
+    </div>,
     portalElement,
   );
 }
-- 
cgit v1.2.3