From cd521b4fca89bebe036b70695f3b45b0cfcc035d Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Wed, 7 Jul 2021 01:19:47 +0800
Subject: feat: Add dialog animations.

---
 FrontEnd/src/views/common/dailog/Dialog.tsx | 51 ++++++++++++++++-------------
 1 file changed, 29 insertions(+), 22 deletions(-)

(limited to 'FrontEnd/src/views/common/dailog/Dialog.tsx')

diff --git a/FrontEnd/src/views/common/dailog/Dialog.tsx b/FrontEnd/src/views/common/dailog/Dialog.tsx
index ee58080f..ca733e3d 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dailog/Dialog.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import { CSSTransition } from "react-transition-group";
 
 import "./Dialog.css";
 
 export interface DialogProps {
   onClose: () => void;
-  open?: boolean;
+  open: boolean;
   children?: React.ReactNode;
   disableCloseOnClickOnOverlay?: boolean;
 }
@@ -13,27 +14,33 @@ export interface DialogProps {
 export default function Dialog(props: DialogProps): React.ReactElement | null {
   const { open, onClose, children, disableCloseOnClickOnOverlay } = props;
 
-  return open
-    ? ReactDOM.createPortal(
+  return ReactDOM.createPortal(
+    <CSSTransition
+      mountOnEnter
+      unmountOnExit
+      in={open}
+      timeout={300}
+      classNames="cru-dialog"
+    >
+      <div
+        className="cru-dialog-overlay"
+        onClick={
+          disableCloseOnClickOnOverlay
+            ? undefined
+            : () => {
+                onClose();
+              }
+        }
+      >
         <div
-          className="cru-dialog-overlay"
-          onClick={
-            disableCloseOnClickOnOverlay
-              ? undefined
-              : () => {
-                  onClose();
-                }
-          }
+          className="cru-dialog-container"
+          onClick={(e) => e.stopPropagation()}
         >
-          <div
-            className="cru-dialog-container"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {children}
-          </div>
-        </div>,
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        document.getElementById("portal")!
-      )
-    : null;
+          {children}
+        </div>
+      </div>
+    </CSSTransition>,
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    document.getElementById("portal")!
+  );
 }
-- 
cgit v1.2.3