@itwin/itwinui-react/esm/core/Carousel/CarouselNavigation.js

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { CarouselContext } from './CarouselContext.js';
import { IconButton } from '../Buttons/IconButton.js';
import { CarouselDotsList } from './CarouselDotsList.js';
import { Box, SvgChevronLeft, SvgChevronRight } from '../../utils/index.js';
let CarouselNavigationComponent = React.forwardRef((props, ref) => {
  let { className, children, ...rest } = props;
  return React.createElement(
    Box,
    {
      className: cx('iui-carousel-navigation', className),
      ref: ref,
      ...rest,
    },
    children ??
      React.createElement(
        React.Fragment,
        null,
        React.createElement(
          Box,
          {
            className: 'iui-carousel-navigation-left',
          },
          React.createElement(PreviousButton, null),
        ),
        React.createElement(CarouselDotsList, null),
        React.createElement(
          Box,
          {
            className: 'iui-carousel-navigation-right',
          },
          React.createElement(NextButton, null),
        ),
      ),
  );
});
if ('development' === process.env.NODE_ENV)
  CarouselNavigationComponent.displayName = 'Carousel.Navigation';
let PreviousButton = React.forwardRef((props, ref) => {
  let context = React.useContext(CarouselContext);
  if (!context)
    throw new Error('CarouselNavigation should be used inside Carousel');
  let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
  return React.createElement(
    IconButton,
    {
      styleType: 'borderless',
      size: 'small',
      tabIndex: -1,
      'aria-label': 'Previous',
      ref: ref,
      ...props,
      onClick: (e) => {
        let prevIndex = (slideCount + currentIndex - 1) % slideCount;
        setCurrentIndex(prevIndex);
        scrollToSlide.current(prevIndex, {
          instant: e.detail > 3,
        });
        props?.onClick?.(e);
      },
    },
    React.createElement(SvgChevronLeft, null),
  );
});
if ('development' === process.env.NODE_ENV)
  PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
let NextButton = React.forwardRef((props, ref) => {
  let context = React.useContext(CarouselContext);
  if (!context)
    throw new Error('CarouselNavigation should be used inside Carousel');
  let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
  return React.createElement(
    IconButton,
    {
      styleType: 'borderless',
      size: 'small',
      tabIndex: -1,
      'aria-label': 'Next',
      ref: ref,
      ...props,
      onClick: (e) => {
        let nextIndex = (slideCount + currentIndex + 1) % slideCount;
        setCurrentIndex(nextIndex);
        scrollToSlide.current(nextIndex, {
          instant: e.detail > 3,
        });
        props?.onClick?.(e);
      },
    },
    React.createElement(SvgChevronRight, null),
  );
});
if ('development' === process.env.NODE_ENV)
  NextButton.displayName = 'Carousel.Navigation.NextButton';
export const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
  PreviousButton,
  NextButton,
});