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

feat: view all images of a memo (#393)

Browse Source 
* feat: view all images of a memo

* fix: function arguments

* refactor: unified image preview

* refactor: image preview for resource dialog

Co-authored-by: XQ <qiaobingxue1998@163.com>
This commit is contained in:
Zhou Yunliang
2022-11-02 20:00:28 +08:00
committed by GitHub
parent bebcabc292
commit 91a61e058a
6 changed files with 47 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,42 @@
import { useState } from "react";
import * as utils from "../helpers/utils";
import Icon from "./Icon";
import { generateDialog } from "./Dialog";
import "../less/preview-image-dialog.less";
interface Props extends DialogProps {
imgUrl: string;
imgUrls: string[];
initialIndex: number;
}
const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrls, initialIndex }: Props) => {
const [currentIndex, setCurrentIndex] = useState(initialIndex);
const handleCloseBtnClick = () => {
destroy();
};
const handleDownloadBtnClick = () => {
const a = document.createElement("a");
a.href = imgUrl;
a.href = imgUrls[currentIndex];
a.download = `memos-${utils.getDateTimeString(Date.now())}.png`;
a.click();
};
const handleImgContainerClick = () => {
destroy();
const handleImgContainerClick = (event: React.MouseEvent) => {
if (event.clientX < window.innerWidth / 2) {
if (currentIndex > 0) {
setCurrentIndex(currentIndex - 1);
} else {
destroy();
}
} else {
if (currentIndex < imgUrls.length - 1) {
setCurrentIndex(currentIndex + 1);
} else {
destroy();
}
}
};
return (
@ -34,18 +50,21 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
</button>
</div>
<div className="img-container" onClick={handleImgContainerClick}>
<img onClick={(e) => e.stopPropagation()} src={imgUrl} />
<img onClick={(e) => e.stopPropagation()} src={imgUrls[currentIndex]} />
</div>
</>
);
};
export default function showPreviewImageDialog(imgUrl: string): void {
export default function showPreviewImageDialog(imgUrls: string[] | string, initialIndex?: number): void {
generateDialog(
{
className: "preview-image-dialog",
},
PreviewImageDialog,
{ imgUrl }
{
imgUrls: Array.isArray(imgUrls) ? imgUrls : [imgUrls],
initialIndex: initialIndex || 0,
}
);
}