fix: generate sharing memo image (#663)

web/src/components/Memo.tsx

@@ -8,7 +8,7 @@ import Icon from "./Icon";
 import toastHelper from "./Toast";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
-import showShareMemoImageDialog from "./ShareMemoImageDialog";
+import showShareMemo from "./ShareMemoDialog";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import showChangeMemoCreatedTsDialog from "./ChangeMemoCreatedTsDialog";
 import "../less/memo.less";
@@ -89,7 +89,7 @@ const Memo: React.FC<Props> = (props: Props) => {
   };
 
   const handleGenMemoImageBtnClick = () => {
-    showShareMemoImageDialog(memo);
+    showShareMemo(memo);
   };
 
   const handleMemoContentClick = async (e: React.MouseEvent) => {

web/src/components/ShareMemoImageDialog.tsx → web/src/components/ShareMemoDialog.tsx

+import { Select, Option } from "@mui/joy";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import copy from "copy-to-clipboard";
 import { toLower } from "lodash";
 import toImage from "../labs/html2image";
-import { ANIMATION_DURATION, VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts";
+import { VISIBILITY_SELECTOR_ITEMS } from "../helpers/consts";
 import * as utils from "../helpers/utils";
 import { getMemoStats } from "../helpers/api";
 import { memoService, userService } from "../services";
@@ -13,8 +14,7 @@ import { generateDialog } from "./Dialog";
 import toastHelper from "./Toast";
 import MemoContent from "./MemoContent";
 import MemoResources from "./MemoResources";
-import Selector from "./common/Selector";
-import "../less/share-memo-image-dialog.less";
+import "../less/share-memo-dialog.less";
 
 interface Props extends DialogProps {
   memo: Memo;
@@ -22,18 +22,18 @@ interface Props extends DialogProps {
 
 interface State {
   memoAmount: number;
-  shortcutImgUrl: string;
   memoVisibility: string;
+  generatedImgUrl: string;
 }
 
-const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
+const ShareMemoDialog: React.FC<Props> = (props: Props) => {
   const { memo: propsMemo, destroy } = props;
   const { t } = useTranslation();
   const user = userService.getState().user as User;
   const [state, setState] = useState<State>({
     memoAmount: 0,
-    shortcutImgUrl: "",
     memoVisibility: propsMemo.visibility,
+    generatedImgUrl: "",
   });
   const loadingState = useLoading();
   const memoElRef = useRef<HTMLDivElement>(null);
@@ -64,26 +64,24 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
       return;
     }
 
-    setTimeout(() => {
-      if (!memoElRef.current) {
-        return;
-      }
+    if (!memoElRef.current) {
+      return;
+    }
 
-      toImage(memoElRef.current, {
-        pixelRatio: window.devicePixelRatio * 2,
-      })
-        .then((url) => {
-          setState((state) => {
-            return {
-              ...state,
-              shortcutImgUrl: url,
-            };
-          });
-        })
-        .catch((err) => {
-          console.error(err);
+    toImage(memoElRef.current, {
+      pixelRatio: window.devicePixelRatio * 2,
+    })
+      .then((url) => {
+        setState((state) => {
+          return {
+            ...state,
+            generatedImgUrl: url,
+          };
         });
-    }, ANIMATION_DURATION);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
   }, [loadingState.isLoading]);
 
   const handleCloseBtnClick = () => {
@@ -92,7 +90,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
 
   const handleDownloadBtnClick = () => {
     const a = document.createElement("a");
-    a.href = state.shortcutImgUrl;
+    a.href = state.generatedImgUrl;
     a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
     a.click();
   };
@@ -134,7 +132,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
       </div>
       <div className="dialog-content-container">
         <div className="memo-container" ref={memoElRef}>
-          {state.shortcutImgUrl !== "" && <img className="memo-shortcut-img" src={state.shortcutImgUrl} />}
+          {state.generatedImgUrl !== "" && <img className="memo-shortcut-img" src={state.generatedImgUrl} />}
           <span className="time-text">{memo.createdAtStr}</span>
           <div className="memo-content-wrapper">
             <MemoContent content={memo.content} displayConfig={{ enableExpand: false }} />
@@ -150,28 +148,35 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
             <img className="logo-img" src="/logo.webp" alt="" />
           </div>
         </div>
-        <div className="share-actions-container">
-          <div className="visibility-selector">
-            <Selector
-              className="visibility-selector"
-              value={state.memoVisibility}
-              dataSource={memoVisibilityOptionSelectorItems}
-              handleValueChanged={handleMemoVisibilityOptionChanged}
-            />
-          </div>
-          <div className="share-btns-container">
-            <div className="buttons-wrapper">
-              <div className="share-btn share-image-btn" onClick={handleDownloadBtnClick}>
-                <Icon.Download className="icon-img" />
-                <span>{t("common.image")}</span>
-              </div>
-            </div>
-            <div className="buttons-wrapper">
-              <div className="share-btn share-link-btn" onClick={handleCopyLinkBtnClick}>
-                <Icon.Link className="icon-img" />
-                <span>{t("common.link")}</span>
-              </div>
-            </div>
+        <div className="px-4 py-3 w-full flex flex-row justify-between items-center">
+          <Select
+            className="!min-w-[10rem] w-auto text-sm"
+            value={state.memoVisibility}
+            onChange={(_, visibility) => {
+              if (visibility) {
+                handleMemoVisibilityOptionChanged(visibility);
+              }
+            }}
+          >
+            {memoVisibilityOptionSelectorItems.map((item) => (
+              <Option key={item.value} value={item.value} className="whitespace-nowrap">
+                {item.text}
+              </Option>
+            ))}
+          </Select>
+          <div className="flex flex-row justify-end items-center">
+            <button disabled={state.generatedImgUrl === ""} className="btn-normal mr-2" onClick={handleDownloadBtnClick}>
+              {state.generatedImgUrl === "" ? (
+                <Icon.Loader className="w-4 h-auto mr-1 animate-spin" />
+              ) : (
+                <Icon.Download className="w-4 h-auto mr-1" />
+              )}
+              <span>{t("common.image")}</span>
+            </button>
+            <button className="btn-normal" onClick={handleCopyLinkBtnClick}>
+              <Icon.Link className="w-4 h-auto mr-1" />
+              <span>{t("common.link")}</span>
+            </button>
           </div>
         </div>
       </div>
@@ -179,12 +184,12 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
   );
 };
 
-export default function showShareMemoImageDialog(memo: Memo): void {
+export default function showShareMemoDialog(memo: Memo): void {
   generateDialog(
     {
-      className: "share-memo-image-dialog",
+      className: "share-memo-dialog",
     },
-    ShareMemoImageDialog,
+    ShareMemoDialog,
     { memo }
   );
 }

web/src/css/tailwind.css

@@ -16,7 +16,7 @@
 
 @layer components {
   .btn-normal {
-    @apply select-none inline-flex border dark:border-zinc-700 cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow;
+    @apply select-none flex flex-row justify-center items-center border dark:border-zinc-700 cursor-pointer px-3 text-sm leading-8 rounded-md hover:opacity-80 hover:shadow disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:shadow-none;
   }
 
   .btn-primary {

web/src/less/share-memo-image-dialog.less → web/src/less/share-memo-dialog.less

-.share-memo-image-dialog {
+.share-memo-dialog {
   > .dialog-container {
     @apply w-96 p-0 bg-white dark:bg-zinc-800;
 
@@ -77,38 +77,6 @@
           }
         }
       }
-
-      .share-actions-container {
-        @apply flex justify-between px-4 py-3 mb-0 w-full border-t dark:border-t-zinc-700;
-
-        > .visibility-selector {
-          @apply w-36;
-
-          > .selector-wrapper {
-            @apply h-10;
-          }
-        }
-
-        > .share-btns-container {
-          @apply flex justify-end;
-
-          > .buttons-wrapper {
-            @apply flex flex-row justify-start items-center;
-
-            > .share-btn {
-              @apply text-sm cursor-pointer px-3 py-2 rounded flex flex-row justify-center items-center border dark:border-zinc-700 hover:opacity-80;
-
-              > .icon-img {
-                @apply w-4 h-auto mr-1;
-              }
-            }
-
-            > .share-image-btn {
-              @apply mr-3;
-            }
-          }
-        }
-      }
     }
   }
 }