From b41cef9ef02a3e3791537fa750e48770c4d80d2e Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Sun, 7 Mar 2021 22:12:05 +0800
Subject: ...

---
 .../app/views/timeline-common/TimelinePostEdit.tsx | 44 +++++++++++++++-------
 1 file changed, 31 insertions(+), 13 deletions(-)

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

diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
index 9d742514..6c428b74 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostEdit.tsx
@@ -17,6 +17,7 @@ import { base64 } from "@/http/common";
 
 import BlobImage from "../common/BlobImage";
 import LoadingButton from "../common/LoadingButton";
+import { PopupMenu } from "../common/Menu";
 
 interface TimelinePostEditTextProps {
   text: string;
@@ -67,6 +68,12 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
     }
   };
 
+  React.useEffect(() => {
+    return () => {
+      onSelect(null);
+    };
+  }, [onSelect]);
+
   return (
     <>
       <Form.File
@@ -92,6 +99,14 @@ const TimelinePostEditImage: React.FC<TimelinePostEditImageProps> = (props) => {
   );
 };
 
+type PostKind = "text" | "markdown" | "image";
+
+const postKindIconClassNameMap: Record<PostKind, string> = {
+  text: "bi-fonts",
+  markdown: "bi-markdown",
+  image: "bi-image",
+};
+
 export interface TimelinePostEditProps {
   className?: string;
   timeline: HttpTimelineInfo;
@@ -106,8 +121,6 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
 
   const [process, setProcess] = React.useState<boolean>(false);
 
-  type PostKind = "text" | "markdown" | "image";
-
   const [kind, setKind] = React.useState<PostKind>("text");
 
   const [text, setText] = React.useState<string>("");
@@ -250,18 +263,23 @@ const TimelinePostEdit: React.FC<TimelinePostEditProps> = (props) => {
         </Col>
         <Col xs="auto" className="align-self-end m-1">
           <div className="d-block text-center mt-1 mb-2">
-            <Form.Control
-              as="select"
-              value={kind}
-              onChange={(event) => {
-                const { value } = event.currentTarget;
-                setKind(value as PostKind);
-              }}
+            <PopupMenu
+              items={(["text", "image", "markdown"] as const).map((kind) => ({
+                type: "button",
+                text: `timeline.post.type.${kind}`,
+                iconClassName: postKindIconClassNameMap[kind],
+                onClick: () => {
+                  setKind(kind);
+                },
+              }))}
             >
-              <option value="text">text</option>
-              <option value="image">image</option>
-              <option value="markdown">markdown</option>
-            </Form.Control>
+              <i
+                className={clsx(
+                  postKindIconClassNameMap[kind],
+                  "icon-button large"
+                )}
+              />
+            </PopupMenu>
           </div>
           <LoadingButton
             variant="primary"
-- 
cgit v1.2.3