Image selection and gallery

[adrien3d]

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

"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>
    );
}

[adrien3d]

The issue was pretty trivial, it was just removing enableImageSelection={false} that fixed the issue.