@navinc/base-react-components/dist/carousel.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState, useCallback, useEffect } from 'react';
import styled from 'styled-components';
import { Icon } from './icon.js';
const CarouselContainer = styled.div.withConfig({ displayName: "brc-sc-CarouselContainer", componentId: "brc-sc-4dh4b8" }) `
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  padding: 0 62px 36px;
`;
const CarouselWrapper = styled.div.withConfig({ displayName: "brc-sc-CarouselWrapper", componentId: "brc-sc-17khwms" }) `
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  flex-shrink: 0;
`;
const CarouselSlides = styled.div.withConfig({ displayName: "brc-sc-CarouselSlides", componentId: "brc-sc-bv7v5f" }) `
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.5s ease;
  transform: ${(props) => props.transform};
`;
const CarouselSlide = styled.div.withConfig({ displayName: "brc-sc-CarouselSlide", componentId: "brc-sc-16fo9ty" }) `
  flex-shrink: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  visibility: ${(props) => (props.isActive ? 'visible' : 'hidden')};

  img {
    max-width: 100%;
    max-height: 100%;
  }
`;
const Arrow = styled.button.withConfig({ displayName: "brc-sc-Arrow", componentId: "brc-sc-dnltkr" }) `
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  background-color: ${({ theme }) => theme.navNeutral100};
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  cursor: pointer;
  z-index: 2;
`;
const ArrowIcon = styled(Icon).withConfig({ displayName: "brc-sc-ArrowIcon", componentId: "brc-sc-f7vqrx" }) `
  fill: ${({ theme }) => theme.navNeutralDark};
`;
const LeftArrow = styled(Arrow).withConfig({ displayName: "brc-sc-LeftArrow", componentId: "brc-sc-19qnory" }) `
  left: 0;

  & > div {
    transform: translate(-2px, 2px); /* fixes an issue with extra padding on the svg causing icon to be uncentered */
  }
`;
const RightArrow = styled(Arrow).withConfig({ displayName: "brc-sc-RightArrow", componentId: "brc-sc-yxxu84" }) `
  right: 0;

  & > div {
    transform: translate(2px, 2px); /* fixes an issue with extra padding on the svg causing icon to be uncentered */
  }
`;
const Dot = styled.button.withConfig({ displayName: "brc-sc-Dot", componentId: "brc-sc-rgkkqx" }) `
  background-color: ${({ theme, active }) => (active ? theme.navPrimary400 : theme.navNeutral200)};
  border: none;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  padding: 0;
  margin: 0;
`;
const DotWrapper = styled.div.withConfig({ displayName: "brc-sc-DotWrapper", componentId: "brc-sc-1gu1n1d" }) `
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
  z-index: 2;
`;
/** Hook to provide carousel functionality to any component */
export function useCarousel({ infinite, slides }) {
    const [activeIndex, setActiveIndex] = useState(0);
    const slideCount = slides.length;
    const nextSlide = useCallback(() => {
        setActiveIndex((prev) => (infinite || prev < slideCount - 1 ? (prev + 1) % slideCount : prev));
    }, [infinite, slideCount]);
    const prevSlide = useCallback(() => {
        setActiveIndex((prev) => (infinite || prev > 0 ? (prev - 1 + slideCount) % slideCount : prev));
    }, [infinite, slideCount]);
    const goToSlide = useCallback((index) => {
        setActiveIndex(index);
    }, []);
    const changeNavItem = useCallback((e) => {
        if (e.key === 'ArrowLeft') {
            prevSlide();
        }
        else if (e.key === 'ArrowRight') {
            nextSlide();
        }
    }, [nextSlide, prevSlide]);
    return {
        goToSlide,
        changeNavItem,
        prevSlide,
        nextSlide,
        activeIndex,
        slideCount,
    };
}
/** Base Carousel component that can be composed into more specific carousels via prop configurations */
export const CarouselBase = ({ children, infinite, minSlideHeight = 'none', maxSlideHeight = 'none', onSlideChange, }) => {
    const slides = React.Children.toArray(children);
    const { activeIndex, nextSlide, prevSlide, changeNavItem, goToSlide, slideCount } = useCarousel({ infinite, slides });
    useEffect(() => {
        if (onSlideChange) {
            onSlideChange({ activeIndex });
        }
    }, [onSlideChange, activeIndex]);
    return (_jsxs(CarouselContainer, { tabIndex: 0, "aria-label": "Carousel", "data-testid": "carousel", children: [_jsx(CarouselWrapper, { style: { minHeight: minSlideHeight, maxHeight: maxSlideHeight }, children: _jsx(CarouselSlides, { transform: `translateX(-${activeIndex * 100}%)`, children: slides.map((child, i) => (_jsx(CarouselSlide, { isActive: i === activeIndex, "data-testid": `carousel-slide-${i}`, children: child }, i))) }) }), _jsxs("div", { "data-testid": "carouselNav", onKeyDown: changeNavItem, role: "presentation", "aria-label": "Carousel navigation", children: [activeIndex === 0 && !infinite ? null : (_jsx(LeftArrow, { "data-testid": "carousel:leftArrow", onClick: prevSlide, "aria-label": "Previous button", children: _jsx("div", { children: _jsx(ArrowIcon, { name: "actions/carrot-left" }) }) })), activeIndex === slides.length - 1 && !infinite ? null : (_jsx(RightArrow, { "data-testid": "carousel:rightArrow", onClick: nextSlide, "aria-label": "Next button", children: _jsx("div", { children: _jsx(ArrowIcon, { name: "actions/carrot-right" }) }) }))] }), _jsx(DotWrapper, { children: Array.from({ length: slideCount }).map((_, i) => (_jsx(Dot, { "data-testid": `carousel-dot-${i}`, active: i === activeIndex, onClick: () => goToSlide(i) }, i))) })] }));
};
CarouselBase.displayName = 'Carousel';
const StyledCarouselExp = styled(CarouselBase).withConfig({ displayName: "brc-sc-StyledCarouselExp", componentId: "brc-sc-psg7mg" }) ``;
export { StyledCarouselExp as Carousel };
//# sourceMappingURL=carousel.js.map