73 lines
1.9 KiB
TypeScript
73 lines
1.9 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
||
import utils from "../helpers/utils";
|
||
import { showDialog } from "./Dialog";
|
||
import "../less/preview-image-dialog.less";
|
||
|
||
interface Props extends DialogProps {
|
||
imgUrl: string;
|
||
}
|
||
|
||
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}>
|
||
<img className="icon-img" src="/icons/close.svg" />
|
||
</button>
|
||
|
||
<div className="img-container">
|
||
<img className={imgWidth <= 0 ? "hidden" : ""} ref={imgRef} width={imgWidth + "%"} src={imgUrl} />
|
||
<span className={"loading-text " + (imgWidth === -1 ? "" : "hidden")}>图片加载中...</span>
|
||
<span className={"loading-text " + (imgWidth === 0 ? "" : "hidden")}>😟 图片加载失败，可能是无效的链接</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>
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default function showPreviewImageDialog(imgUrl: string): void {
|
||
showDialog(
|
||
{
|
||
className: "preview-image-dialog",
|
||
},
|
||
PreviewImageDialog,
|
||
{ imgUrl }
|
||
);
|
||
}
|