@amsterdam/design-system-react/dist/ImageSlider/ImageSliderThumbnails.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx } from "react/jsx-runtime";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import clsx from 'clsx';
import { forwardRef, useCallback, useContext, useMemo } from 'react';
import { ImageSliderContext } from './ImageSliderContext';
import { generateAspectRatioClass } from '../Image/generateAspectRatioClass';
export const ImageSliderThumbnails = forwardRef(({ className, imageLabel, thumbnails, ...restProps }, ref) => {
    const { currentSlideId, goToNextSlide, goToPreviousSlide, goToSlideId } = useContext(ImageSliderContext);
    const handleKeyDown = useCallback((event) => {
        const element = event.currentTarget.children[currentSlideId];
        if (event.key === 'ArrowRight') {
            const nextElement = element?.nextElementSibling;
            if (nextElement) {
                nextElement.focus();
                goToNextSlide();
            }
        }
        if (event.key === 'ArrowLeft') {
            const previousElement = element?.previousElementSibling;
            if (previousElement) {
                previousElement.focus();
                goToPreviousSlide();
            }
        }
    }, [currentSlideId, goToNextSlide, goToPreviousSlide]);
    const renderThumbnails = useMemo(() => thumbnails.map(({ alt, aspectRatio, src }, index) => (_jsx("button", { "aria-label": `${imageLabel} ${index + 1}: ${alt}`, "aria-posinset": index + 1, "aria-selected": currentSlideId === index ? 'true' : 'false', "aria-setsize": thumbnails.length, className: clsx('ams-image-slider__thumbnail', currentSlideId === index && 'ams-image-slider__thumbnail--in-view', generateAspectRatioClass(aspectRatio)), onClick: () => goToSlideId(index), role: "tab", style: { backgroundImage: `url(${src})` }, tabIndex: currentSlideId === index ? 0 : -1, type: "button" }, index))), [currentSlideId, goToSlideId, imageLabel, thumbnails]);
    return (_jsx("nav", { ...restProps, className: clsx('ams-image-slider__thumbnails', className), onKeyDown: handleKeyDown, ref: ref, role: "tablist", children: renderThumbnails }));
});
ImageSliderThumbnails.displayName = 'ImageSlider.Thumbnails';