stepus53/photos
1
0
Fork 0
mirror of https://github.com/usatiuk/photos.git synced 2025-10-28 15:27:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

click on blank space closes image

Browse Source
This commit is contained in:
Stepan Usatiuk
2022-04-19 19:06:13 +00:00
committed by Stepan Usatiuk
parent e020261a4b
commit 6e716d7b01
2 changed files with 25 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/Photos/Overview.tsx
View File

@@ -85,13 +85,11 @@ export const OverviewComponent: React.FunctionComponent<
); );
const photosEls = photos.map((photo) => { const photosEls = photos.map((photo) => {
return ( return (
<> <PhotoCard
<PhotoCard key={photo.id}
key={photo.id} photo={photo}
photo={photo} onClick={() => onCardClick(photo.id)}
onClick={() => onCardClick(photo.id)} />
/>
</>
); );
}); });
return [ return [
@@ -144,7 +142,12 @@ export const OverviewComponent: React.FunctionComponent<
> >
<div id="photoOverlayContainer"> <div id="photoOverlayContainer">
<div id="photo"> <div id="photo">
<Photo id={selectedPhoto} /> <Photo
id={selectedPhoto}
close={() => {
setOverlayOpen(false);
}}
/>
</div> </div>
<div id="photoOverlayDrawer"> <div id="photoOverlayDrawer">
<Button <Button

26
frontend/src/Photos/Photo.tsx
View File

@@ -20,22 +20,18 @@ export interface IPhotoComponentProps {
photoState: IPhotoState | undefined; photoState: IPhotoState | undefined;
fetchPhoto: (id: number) => void; fetchPhoto: (id: number) => void;
close: () => void;
} }
export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = ( export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
props, props,
) => { ) => {
const [ const [smallPreviewFetching, setSmallPreviewFetching] =
smallPreviewFetching, React.useState<boolean>(false);
setSmallPreviewFetching, const [largePreviewFetching, setLargePreviewFetching] =
] = React.useState<boolean>(false); React.useState<boolean>(false);
const [ const [originalFetching, setOriginalFetching] =
largePreviewFetching, React.useState<boolean>(false);
setLargePreviewFetching,
] = React.useState<boolean>(false);
const [originalFetching, setOriginalFetching] = React.useState<boolean>(
false,
);
const [smallPreview, setSmallPreview] = React.useState<string | null>(null); const [smallPreview, setSmallPreview] = React.useState<string | null>(null);
const [largePreview, setLargePreview] = React.useState<string | null>(null); const [largePreview, setLargePreview] = React.useState<string | null>(null);
@@ -97,7 +93,13 @@ export const PhotoComponent: React.FunctionComponent<IPhotoComponentProps> = (
return ( return (
<> <>
{fileExists ? ( {fileExists ? (
<div id="photoView"> <div
id="photoView"
onClick={(e: React.MouseEvent) => {
if ((e.target as HTMLElement).tagName !== "IMG")
props.close();
}}
>
<img <img
ref={imgRef} ref={imgRef}
id="photoImg" id="photoImg"