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/ConfirmDialog.tsx |  2 +-
 FrontEnd/src/views/common/dailog/Dialog.css        | 20 +++++++++
 FrontEnd/src/views/common/dailog/Dialog.tsx        | 51 ++++++++++++----------
 .../src/views/common/dailog/FullPageDialog.css     |  4 --
 .../src/views/common/dailog/FullPageDialog.tsx     |  8 +++-
 5 files changed, 57 insertions(+), 28 deletions(-)

(limited to 'FrontEnd/src/views/common/dailog')

diff --git a/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
index c10b1cdb..3817ce1e 100644
--- a/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/ConfirmDialog.tsx
@@ -6,7 +6,7 @@ import Button from "../button/Button";
 import Dialog from "./Dialog";
 
 const ConfirmDialog: React.FC<{
-  open?: boolean;
+  open: boolean;
   onClose: () => void;
   onConfirm: () => void;
   title: I18nText;
diff --git a/FrontEnd/src/views/common/dailog/Dialog.css b/FrontEnd/src/views/common/dailog/Dialog.css
index 6dd1a32e..21ea52fc 100644
--- a/FrontEnd/src/views/common/dailog/Dialog.css
+++ b/FrontEnd/src/views/common/dailog/Dialog.css
@@ -33,3 +33,23 @@
 .cru-dialog-bottom-area > * {
   margin: 0 0.5em;
 }
+
+.cru-dialog-enter .cru-dialog-container {
+  transform: scale(0, 0);
+  opacity: 0;
+  transform-origin: center;
+}
+
+.cru-dialog-enter-active .cru-dialog-container {
+  transform: scale(1, 1);
+  opacity: 1;
+  transition: transform 0.3s, opacity 0.3s;
+  transform-origin: center;
+}
+
+.cru-dialog-exit-active .cru-dialog-container {
+  transition: transform 0.3s, opacity 0.3s;
+  transform: scale(0, 0);
+  opacity: 0;
+  transform-origin: center;
+}
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")!
+  );
 }
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.css b/FrontEnd/src/views/common/dailog/FullPageDialog.css
index fd125a5a..2f1fc636 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.css
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.css
@@ -42,7 +42,3 @@
   transition: transform 0.3s;
   transform: translate(100%, 0);
 }
-
-.cru-full-page-exit-done {
-  display: none;
-}
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
index 2aff9f2e..45454b7d 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -18,7 +18,13 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
   contentContainerClassName,
 }) => {
   return createPortal(
-    <CSSTransition in={show} timeout={300} classNames="cru-full-page">
+    <CSSTransition
+      mountOnEnter
+      unmountOnExit
+      in={show}
+      timeout={300}
+      classNames="cru-full-page"
+    >
       <div className="cru-full-page">
         <div className="cru-full-page-top-bar">
           <i
-- 
cgit v1.2.3