feat: update sharing memo image (#473)

pull/474/head
boojack 3 years ago committed by GitHub
parent 9fe9245727
commit 61abc6dd11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -4,28 +4,60 @@ import { userService } from "../services";
import toImage from "../labs/html2image"; import toImage from "../labs/html2image";
import { ANIMATION_DURATION } from "../helpers/consts"; import { ANIMATION_DURATION } from "../helpers/consts";
import * as utils from "../helpers/utils"; import * as utils from "../helpers/utils";
import { getMemoStats } from "../helpers/api";
import useLoading from "../hooks/useLoading";
import Icon from "./Icon"; import Icon from "./Icon";
import { generateDialog } from "./Dialog"; import { generateDialog } from "./Dialog";
import MemoContent from "./MemoContent"; import MemoContent from "./MemoContent";
import "../less/share-memo-image-dialog.less";
import MemoResources from "./MemoResources"; import MemoResources from "./MemoResources";
import "../less/share-memo-image-dialog.less";
interface Props extends DialogProps { interface Props extends DialogProps {
memo: Memo; memo: Memo;
} }
interface State {
memoAmount: number;
shortcutImgUrl: string;
}
const ShareMemoImageDialog: React.FC<Props> = (props: Props) => { const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
const { memo: propsMemo, destroy } = props; const { memo: propsMemo, destroy } = props;
const { t } = useTranslation(); const { t } = useTranslation();
const { user: userinfo } = userService.getState(); const user = userService.getState().user as User;
const [shortcutImgUrl, setShortcutImgUrl] = useState(""); const [state, setState] = useState<State>({
memoAmount: 0,
shortcutImgUrl: "",
});
const loadingState = useLoading();
const memoElRef = useRef<HTMLDivElement>(null);
const memo = { const memo = {
...propsMemo, ...propsMemo,
createdAtStr: utils.getDateTimeString(propsMemo.displayTs), createdAtStr: utils.getDateTimeString(propsMemo.displayTs),
}; };
const memoElRef = useRef<HTMLDivElement>(null); const createdDays = Math.ceil((Date.now() - utils.getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24);
useEffect(() => { useEffect(() => {
getMemoStats(user.id)
.then(({ data: { data } }) => {
setState((state) => {
return {
...state,
memoAmount: data.length,
};
});
loadingState.setFinish();
})
.catch((error) => {
console.error(error);
});
}, []);
useEffect(() => {
if (loadingState.isLoading) {
return;
}
setTimeout(() => { setTimeout(() => {
if (!memoElRef.current) { if (!memoElRef.current) {
return; return;
@ -36,13 +68,18 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
pixelRatio: window.devicePixelRatio * 2, pixelRatio: window.devicePixelRatio * 2,
}) })
.then((url) => { .then((url) => {
setShortcutImgUrl(url); setState((state) => {
return {
...state,
shortcutImgUrl: url,
};
});
}) })
.catch((err) => { .catch((err) => {
console.error(err); console.error(err);
}); });
}, ANIMATION_DURATION); }, ANIMATION_DURATION);
}, []); }, [loadingState.isLoading]);
const handleCloseBtnClick = () => { const handleCloseBtnClick = () => {
destroy(); destroy();
@ -50,7 +87,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
const handleDownloadBtnClick = () => { const handleDownloadBtnClick = () => {
const a = document.createElement("a"); const a = document.createElement("a");
a.href = shortcutImgUrl; a.href = state.shortcutImgUrl;
a.download = `memos-${utils.getDateTimeString(Date.now())}.png`; a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
a.click(); a.click();
}; };
@ -67,20 +104,24 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
</button> </button>
</div> </div>
<div className="dialog-content-container"> <div className="dialog-content-container">
<div className={`tip-words-container ${shortcutImgUrl ? "finish" : "loading"}`}> <div className={`tip-words-container ${state.shortcutImgUrl ? "finish" : "loading"}`}>
<p className="tip-text">{shortcutImgUrl ? "Click to save the image 👇" : "Generating the screenshot..."}</p> <p className="tip-text">{state.shortcutImgUrl ? "Click to save the image 👇" : "Generating the screenshot..."}</p>
</div> </div>
<div className="memo-container" ref={memoElRef}> <div className="memo-container" ref={memoElRef}>
{shortcutImgUrl !== "" && <img className="memo-shortcut-img" onClick={handleDownloadBtnClick} src={shortcutImgUrl} />} {state.shortcutImgUrl !== "" && <img className="memo-shortcut-img" onClick={handleDownloadBtnClick} src={state.shortcutImgUrl} />}
<span className="time-text">{memo.createdAtStr}</span> <span className="time-text">{memo.createdAtStr}</span>
<div className="memo-content-wrapper"> <div className="memo-content-wrapper">
<MemoContent content={memo.content} displayConfig={{ enableExpand: false }} /> <MemoContent content={memo.content} displayConfig={{ enableExpand: false }} />
<MemoResources resourceList={memo.resourceList} /> <MemoResources resourceList={memo.resourceList} />
</div> </div>
<div className="watermark-container"> <div className="watermark-container">
<span className="normal-text"> <div className="userinfo-container">
<span className="icon-text"></span> by <span className="name-text">{userinfo?.name}</span> <span className="name-text">{user.name}</span>
</span> <span className="usage-text">
{createdDays} DAYS / {state.memoAmount} MEMOS
</span>
</div>
<img className="logo-img" src="/logo.webp" alt="" />
</div> </div>
</div> </div>
</div> </div>

@ -48,7 +48,7 @@
} }
> .memo-content-wrapper { > .memo-content-wrapper {
@apply w-full px-6 text-base bg-white pb-2; @apply w-full px-6 text-base bg-white pb-4;
} }
> .images-container { > .images-container {
@ -60,18 +60,30 @@
} }
> .watermark-container { > .watermark-container {
@apply flex flex-row justify-start items-center w-full py-3 px-6; @apply flex flex-row justify-between items-center w-full py-3 px-6;
> .normal-text { > .normal-text {
@apply w-full flex flex-row justify-start items-center text-sm leading-6 text-gray-500; @apply w-full flex flex-row justify-start items-center text-sm leading-6 text-gray-500;
> .icon-text { > .name-text {
@apply text-lg ml-1 mr-2 leading-6; @apply text-black;
} }
}
> .userinfo-container {
@apply w-64 flex flex-col justify-center items-start;
> .name-text { > .name-text {
@apply text-black ml-2 leading-6; @apply text-lg truncate font-bold text-gray-600;
} }
> .usage-text {
@apply -mt-1 text-sm text-gray-400 font-medium;
}
}
> .logo-img {
@apply h-12 w-auto;
} }
} }
} }

Loading…
Cancel
Save