Closed adrien3d closed 5 months ago
Being able to select individual images (with the check on hover) and display an image with the gallery.
Just able to select all images or display image with the gallery.
"use client"; import "yet-another-react-lightbox/styles.css"; import { CustomImage, imagesData } from "./images"; import { Gallery } from "react-grid-gallery"; import Lightbox from "yet-another-react-lightbox"; import { useState } from "react"; export default function Page() { const [index, setIndex] = useState(-1); const [images, setImages] = useState(imagesData); const handleClick = (index: number, item: CustomImage) => setIndex(index); const hasSelected = images.some((image) => image.isSelected); const handleSelect = (index: number) => { const nextImages = images.map((image, i) => i === index ? { ...image, isSelected: !image.isSelected } : image ); setImages(nextImages); }; const handleSelectAllClick = () => { const nextImages = images.map((image) => ({ ...image, isSelected: !hasSelected, })); setImages(nextImages); }; const slides = images.map(({ original, width, height }) => ({ src: original, width, height, })); return ( <div> <div className="p-t-1 p-b-1"> <button onClick={handleSelectAllClick}> {hasSelected ? "Clear selection" : "Select all"} </button> </div> <Gallery images={images} onClick={handleClick} enableImageSelection={false} onSelect={handleSelect} /> <Lightbox slides={slides} open={index >= 0} index={index} close={() => setIndex(-1)} /> </div> ); }
The issue was pretty trivial, it was just removing enableImageSelection={false} that fixed the issue.
Expected behaviour
Being able to select individual images (with the check on hover) and display an image with the gallery.
Actual behaviour
Just able to select all images or display image with the gallery.
Steps to reproduce behaviour