42 lines
1.6 KiB
JavaScript
42 lines
1.6 KiB
JavaScript
// Rôle : affiche la collection d'un outil Images dans la galerie de la visionneuse.
|
|
import { useEffect, useRef } from "react";
|
|
|
|
export function ImageGallery({ images, activeIndex, focusIndex = -1, onSelect, textContent = {} }) {
|
|
const galleryRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (focusIndex < 0) return;
|
|
const frame = window.requestAnimationFrame(() => {
|
|
galleryRef.current?.querySelector(`[data-image-index="${focusIndex}"]`)?.focus();
|
|
});
|
|
return () => window.cancelAnimationFrame(frame);
|
|
}, [focusIndex]);
|
|
|
|
return (
|
|
<div ref={galleryRef} className="image-viewer-gallery themed-scrollbar">
|
|
{images.map((image, index) => {
|
|
const position = `${index + 1} / ${images.length}`;
|
|
const label = image.label || `${textContent.imageAlt || "Image"} ${index + 1}`;
|
|
return (
|
|
<button
|
|
className={`image-viewer-gallery-item nds-card ${index === activeIndex ? "is-active" : ""}`}
|
|
data-variant="interactive"
|
|
data-image-index={index}
|
|
type="button"
|
|
key={image.id || `${image.dataUrl}-${index}`}
|
|
onClick={() => onSelect(index)}
|
|
aria-label={`${textContent.galleryImageAriaLabel || "Afficher en grand"} : ${label}`}
|
|
>
|
|
<span className="image-viewer-gallery-frame">
|
|
<img src={image.dataUrl} alt="" loading="lazy" decoding="async" />
|
|
</span>
|
|
<span className="image-viewer-gallery-caption">
|
|
<strong>{label}</strong>
|
|
<small>{position}</small>
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|