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.

---
 .../src/views/timeline-common/MarkdownPostEdit.tsx | 16 +++----
 .../timeline-common/PostPropertyChangeDialog.tsx   |  5 +-
 .../src/views/timeline-common/TimelineMember.tsx   |  2 +-
 .../timeline-common/TimelinePageCardTemplate.tsx   | 33 +++++--------
 .../src/views/timeline-common/TimelinePostView.tsx | 56 +++++++++++-----------
 5 files changed, 50 insertions(+), 62 deletions(-)

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

diff --git a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
index 300b3d9d..42ba37de 100644
--- a/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
+++ b/FrontEnd/src/views/timeline-common/MarkdownPostEdit.tsx
@@ -190,15 +190,13 @@ const MarkdownPostEdit: React.FC<MarkdownPostEditProps> = ({
           },
         ]}
       />
-      {showLeaveConfirmDialog && (
-        <ConfirmDialog
-          onClose={() => setShowLeaveConfirmDialog(false)}
-          onConfirm={onClose}
-          open
-          title="timeline.dropDraft"
-          body="timeline.confirmLeave"
-        />
-      )}
+      <ConfirmDialog
+        onClose={() => setShowLeaveConfirmDialog(false)}
+        onConfirm={onClose}
+        open={showLeaveConfirmDialog}
+        title="timeline.dropDraft"
+        body="timeline.confirmLeave"
+      />
     </>
   );
 };
diff --git a/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx b/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx
index 988124b6..c1dd416c 100644
--- a/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx
+++ b/FrontEnd/src/views/timeline-common/PostPropertyChangeDialog.tsx
@@ -5,17 +5,18 @@ import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 import OperationDialog from "../common/dailog/OperationDialog";
 
 function PostPropertyChangeDialog(props: {
+  open: boolean;
   onClose: () => void;
   post: HttpTimelinePostInfo;
   onSuccess: (post: HttpTimelinePostInfo) => void;
 }): React.ReactElement | null {
-  const { onClose, post, onSuccess } = props;
+  const { open, onClose, post, onSuccess } = props;
 
   return (
     <OperationDialog
       title="timeline.changePostPropertyDialog.title"
       onClose={onClose}
-      open
+      open={open}
       inputScheme={[
         {
           label: "timeline.changePostPropertyDialog.time",
diff --git a/FrontEnd/src/views/timeline-common/TimelineMember.tsx b/FrontEnd/src/views/timeline-common/TimelineMember.tsx
index 0ebecbb9..59d4c371 100644
--- a/FrontEnd/src/views/timeline-common/TimelineMember.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelineMember.tsx
@@ -186,7 +186,7 @@ export const TimelineMemberDialog: React.FC<TimelineMemberDialogProps> = (
   props
 ) => {
   return (
-    <Dialog open onClose={props.onClose}>
+    <Dialog open={props.open} onClose={props.onClose}>
       <TimelineMember {...props} />
     </Dialog>
   );
diff --git a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
index 844bece3..eb17a9d0 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePageCardTemplate.tsx
@@ -134,27 +134,18 @@ const TimelinePageCardTemplate: React.FC<TimelineCardTemplateProps> = ({
           <div style={{ display: collapse ? "none" : "inline" }}>{content}</div>
         )}
       </Card>
-      {(() => {
-        if (dialog === "member") {
-          return (
-            <TimelineMemberDialog
-              timeline={timeline}
-              onClose={() => setDialog(null)}
-              open
-              onChange={onReload}
-            />
-          );
-        } else if (dialog === "property") {
-          return (
-            <TimelinePropertyChangeDialog
-              timeline={timeline}
-              close={() => setDialog(null)}
-              open
-              onChange={onReload}
-            />
-          );
-        }
-      })()}
+      <TimelineMemberDialog
+        timeline={timeline}
+        onClose={() => setDialog(null)}
+        open={dialog === "member"}
+        onChange={onReload}
+      />
+      <TimelinePropertyChangeDialog
+        timeline={timeline}
+        close={() => setDialog(null)}
+        open={dialog === "property"}
+        onChange={onReload}
+      />
     </>
   );
 };
diff --git a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
index de6c3e7c..086176f8 100644
--- a/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/views/timeline-common/TimelinePostView.tsx
@@ -124,36 +124,34 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
           </div>
         ) : null}
       </Card>
-      {dialog === "delete" ? (
-        <ConfirmDialog
-          title="timeline.post.deleteDialog.title"
-          body="timeline.post.deleteDialog.prompt"
-          open
-          onClose={() => {
-            setDialog(null);
-            setOperationMaskVisible(false);
-          }}
-          onConfirm={() => {
-            void getHttpTimelineClient()
-              .deletePost(post.timelineName, post.id)
-              .then(onDeleted, () => {
-                pushAlert({
-                  type: "danger",
-                  message: "timeline.deletePostFailed",
-                });
+      <ConfirmDialog
+        title="timeline.post.deleteDialog.title"
+        body="timeline.post.deleteDialog.prompt"
+        open={dialog === "delete"}
+        onClose={() => {
+          setDialog(null);
+          setOperationMaskVisible(false);
+        }}
+        onConfirm={() => {
+          void getHttpTimelineClient()
+            .deletePost(post.timelineName, post.id)
+            .then(onDeleted, () => {
+              pushAlert({
+                type: "danger",
+                message: "timeline.deletePostFailed",
               });
-          }}
-        />
-      ) : dialog === "changeproperty" ? (
-        <PostPropertyChangeDialog
-          onClose={() => {
-            setDialog(null);
-            setOperationMaskVisible(false);
-          }}
-          post={post}
-          onSuccess={onChanged}
-        />
-      ) : null}
+            });
+        }}
+      />
+      <PostPropertyChangeDialog
+        open={dialog === "changeproperty"}
+        onClose={() => {
+          setDialog(null);
+          setOperationMaskVisible(false);
+        }}
+        post={post}
+        onSuccess={onChanged}
+      />
     </div>
   );
 };
-- 
cgit v1.2.3