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

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { useMergedRefs, Box, useLatestRef, useId } from '../../utils/index.js';
import { CarouselContext } from './CarouselContext.js';
import { CarouselSlider } from './CarouselSlider.js';
import { CarouselSlide } from './CarouselSlide.js';
import { CarouselDotsList } from './CarouselDotsList.js';
import { CarouselDot } from './CarouselDot.js';
import { CarouselNavigation } from './CarouselNavigation.js';
let CarouselComponent = React.forwardRef((props, ref) => {
  let idPrefix = useId();
  let {
    activeSlideIndex: userActiveIndex = 0,
    onSlideChange,
    className,
    children,
    id = idPrefix,
    ...rest
  } = props;
  let isManuallyUpdating = React.useRef(false);
  let carouselRef = React.useRef(null);
  let refs = useMergedRefs(carouselRef, ref);
  let [currentIndex, setCurrentIndex] = React.useState(userActiveIndex);
  let scrollToSlide = React.useRef(() => {});
  let justMounted = React.useRef(true);
  React.useEffect(() => {
    setCurrentIndex(userActiveIndex);
    scrollToSlide.current(userActiveIndex, {
      instant: justMounted.current,
    });
    justMounted.current = false;
  }, [userActiveIndex]);
  let [slideCount, setSlideCount] = React.useState(0);
  let userOnSlideChange = useLatestRef(onSlideChange);
  React.useEffect(() => {
    userOnSlideChange.current?.(currentIndex);
  }, [userOnSlideChange, currentIndex]);
  return React.createElement(
    Box,
    {
      as: 'section',
      'aria-roledescription': 'carousel',
      ref: refs,
      className: cx('iui-carousel', className),
      ...rest,
      id: id,
    },
    React.createElement(
      CarouselContext.Provider,
      {
        value: {
          currentIndex,
          setCurrentIndex,
          slideCount,
          setSlideCount,
          idPrefix: id,
          isManuallyUpdating,
          scrollToSlide,
        },
      },
      children,
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  CarouselComponent.displayName = 'Carousel';
export const Carousel = Object.assign(CarouselComponent, {
  Slider: CarouselSlider,
  Slide: CarouselSlide,
  Navigation: CarouselNavigation,
  DotsList: CarouselDotsList,
  Dot: CarouselDot,
});