mirror of
https://github.com/usememos/memos.git
synced 2024-09-22 09:17:36 +03:00
fix: generate sharing memo image (#663)
This commit is contained in:
boojack
GitHub
parent
e3d76193b9
commit
a7374cf998
@ -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) => {
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
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 }
|
||||
);
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user