YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

chore: update sharing image preview

Browse Source
This commit is contained in:
boojack
2022-06-25 09:58:00 +08:00
parent cad4db128b
commit 8cb3994022
7 changed files with 27 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/components/PreviewImageDialog.tsx
View File

@ -1,5 +1,3 @@
import { useEffect, useRef, useState } from "react";
import * as utils from "../helpers/utils";
import { showDialog } from "./Dialog";
import "../less/preview-image-dialog.less";
@ -8,33 +6,10 @@ interface Props extends DialogProps {
}
const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
const imgRef = useRef<HTMLImageElement>(null);
const [imgWidth, setImgWidth] = useState<number>(-1);
useEffect(() => {
utils.getImageSize(imgUrl).then(({ width }) => {
if (width !== 0) {
setImgWidth(80);
} else {
setImgWidth(0);
}
});
}, []);
const handleCloseBtnClick = () => {
destroy();
};
const handleDecreaseImageSize = () => {
if (imgWidth > 30) {
setImgWidth(imgWidth - 10);
}
};
const handleIncreaseImageSize = () => {
setImgWidth(imgWidth + 10);
};
return (
<>
<button className="btn close-btn" onClick={handleCloseBtnClick}>
@ -42,21 +17,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
</button>
<div className="img-container">
<img className={imgWidth <= 0 ? "hidden" : ""} ref={imgRef} width={imgWidth + "%"} src={imgUrl} />
<span className={"loading-text " + (imgWidth === -1 ? "" : "hidden")}>Loading image...</span>
<span className={"loading-text " + (imgWidth === 0 ? "" : "hidden")}>😟 Failed to load image</span>
</div>
<div className="action-btns-container">
<button className="btn" onClick={handleDecreaseImageSize}>
➖
</button>
<button className="btn" onClick={handleIncreaseImageSize}>
➕
</button>
<button className="btn" onClick={() => setImgWidth(80)}>
⭕
</button>
<img src={imgUrl} crossOrigin="anonymous" />
</div>
</>
);