@itwin/itwinui-react/DEV-cjs/core/Carousel/CarouselNavigation.js

A react component library for iTwinUI

'use strict';
Object.defineProperty(exports, '__esModule', {
  value: true,
});
Object.defineProperty(exports, 'CarouselNavigation', {
  enumerable: true,
  get: function () {
    return CarouselNavigation;
  },
});
const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
const _classnames = /*#__PURE__*/ _interop_require_default._(
  require('classnames'),
);
const _CarouselContext = require('./CarouselContext.js');
const _IconButton = require('../Buttons/IconButton.js');
const _CarouselDotsList = require('./CarouselDotsList.js');
const _index = require('../../utils/index.js');
const CarouselNavigationComponent = _react.forwardRef((props, ref) => {
  let { className, children, ...rest } = props;
  return _react.createElement(
    _index.Box,
    {
      className: (0, _classnames.default)('iui-carousel-navigation', className),
      ref: ref,
      ...rest,
    },
    children ??
      _react.createElement(
        _react.Fragment,
        null,
        _react.createElement(
          _index.Box,
          {
            className: 'iui-carousel-navigation-left',
          },
          _react.createElement(PreviousButton, null),
        ),
        _react.createElement(_CarouselDotsList.CarouselDotsList, null),
        _react.createElement(
          _index.Box,
          {
            className: 'iui-carousel-navigation-right',
          },
          _react.createElement(NextButton, null),
        ),
      ),
  );
});
if ('development' === process.env.NODE_ENV)
  CarouselNavigationComponent.displayName = 'Carousel.Navigation';
const PreviousButton = _react.forwardRef((props, ref) => {
  let context = _react.useContext(_CarouselContext.CarouselContext);
  if (!context)
    throw new Error('CarouselNavigation should be used inside Carousel');
  let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
  return _react.createElement(
    _IconButton.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(_index.SvgChevronLeft, null),
  );
});
if ('development' === process.env.NODE_ENV)
  PreviousButton.displayName = 'Carousel.Navigation.PreviousButton';
const NextButton = _react.forwardRef((props, ref) => {
  let context = _react.useContext(_CarouselContext.CarouselContext);
  if (!context)
    throw new Error('CarouselNavigation should be used inside Carousel');
  let { slideCount, currentIndex, setCurrentIndex, scrollToSlide } = context;
  return _react.createElement(
    _IconButton.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(_index.SvgChevronRight, null),
  );
});
if ('development' === process.env.NODE_ENV)
  NextButton.displayName = 'Carousel.Navigation.NextButton';
const CarouselNavigation = Object.assign(CarouselNavigationComponent, {
  PreviousButton,
  NextButton,
});