stefan
/
simple-picture-gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace react-photo-album with mui image list

This commit is contained in:
Stefan Forstenlechner 2024-08-12 23:41:51 +02:00
parent a71a763532
commit 59d12418ff
3 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
picture-gallery-client/package.json
View File

@ -40,7 +40,6 @@
"eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-hooks": "^4.6.2",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-photo-album": "^3.0.1",
"react-router-dom": "^6.26.0", "react-router-dom": "^6.26.0",
"typescript": "^5.5.4", "typescript": "^5.5.4",
"web-vitals": "^4.2.3", "web-vitals": "^4.2.3",

30
picture-gallery-client/src/ImageGallery/ImageGallery.tsx
View File

@ -1,4 +1,3 @@
import PhotoAlbum from "react-photo-album";
import React, { useState } from "react"; import React, { useState } from "react";
import { ImageWithThumbnail } from "./models"; import { ImageWithThumbnail } from "./models";
import { Lightbox } from "yet-another-react-lightbox"; import { Lightbox } from "yet-another-react-lightbox";
@ -9,6 +8,7 @@ import Slideshow from "yet-another-react-lightbox/plugins/slideshow";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails"; import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";
import "yet-another-react-lightbox/plugins/thumbnails.css"; import "yet-another-react-lightbox/plugins/thumbnails.css";
import Zoom from "yet-another-react-lightbox/plugins/zoom"; import Zoom from "yet-another-react-lightbox/plugins/zoom";
import { ImageList, ImageListItem } from "@mui/material";
function ImageGallery({ images }: { images: ImageWithThumbnail[] }) { function ImageGallery({ images }: { images: ImageWithThumbnail[] }) {
const [index, setIndex] = useState(-1); const [index, setIndex] = useState(-1);
@ -21,25 +21,19 @@ function ImageGallery({ images }: { images: ImageWithThumbnail[] }) {
); );
} }
// For all kind of settings see:
// https://react-photo-album.com/examples/playground
// https://codesandbox.io/s/github/igordanchenko/react-photo-album/tree/main/examples/playground
return ( return (
<> <>
<PhotoAlbum <ImageList variant="masonry" cols={3} gap={8}>
layout="masonry" {images.map((item, index) => (
photos={images} <ImageListItem key={item.thumbnail}>
componentsProps={{ <img
image: { src={item.thumbnail}
loading: "lazy", loading="lazy"
}, onClick={() => setIndex(index)}
}} />
onClick={(props) => { </ImageListItem>
// TODO: what is eslint complaining? ))}
// eslint-disable-next-line react/prop-types </ImageList>
setIndex(props.index);
}}
/>
<Lightbox <Lightbox
slides={images} slides={images}
open={index >= 0} open={index >= 0}

4
picture-gallery-client/src/ImageGallery/models.ts
View File

@ -1,4 +1,4 @@
import { Photo } from "react-photo-album"; import { Slide } from "yet-another-react-lightbox";
export interface Folders { export interface Folders {
name: string; name: string;
@ -7,6 +7,6 @@ export interface Folders {
children: Folders[]; children: Folders[];
} }
export interface ImageWithThumbnail extends Photo { export interface ImageWithThumbnail extends Slide {
thumbnail: string; thumbnail: string;
} }