|
|
|
@ -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 }
|
|
|
|
|
);
|
|
|
|
|
}
|