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

A react component library for iTwinUI

import * as React from 'react';
import cx from 'classnames';
import { CarouselContext } from './CarouselContext.js';
import {
  getBoundedValue,
  useMediaQuery,
  useMergedRefs,
  useResizeObserver,
  Box,
} from '../../utils/index.js';
import { CarouselDot } from './CarouselDot.js';
export const CarouselDotsList = React.forwardRef((props, ref) => {
  let {
    currentIndex: userCurrentIndex,
    length,
    className,
    onSlideChange,
    children,
    ...rest
  } = props;
  let context = React.useContext(CarouselContext);
  let slideCount =
    length ?? context?.slideCount ?? React.Children.count(children);
  let currentIndex = userCurrentIndex ?? context?.currentIndex ?? 0;
  let idPrefix = props.id ?? context?.idPrefix;
  let handleSlideChange = React.useCallback(
    (index) => {
      if (context) {
        context.setCurrentIndex(index);
        context.scrollToSlide.current(index);
      }
      listRef.current?.children[index]?.focus();
      onSlideChange?.(index);
    },
    [context, onSlideChange],
  );
  let justMounted = React.useRef(true);
  let [visibleCount, setVisibleCount] = React.useState(slideCount);
  let listRef = React.useRef(null);
  let [width, setWidth] = React.useState();
  let [resizeRef, resizeObserver] = useResizeObserver(({ width }) => {
    if (!listRef.current) return;
    setWidth(width);
    let dotWidth = listRef.current.children[0].offsetWidth;
    setVisibleCount(Math.floor(width / dotWidth));
  });
  React.useEffect(() => resizeObserver?.disconnect(), [resizeObserver]);
  let refs = useMergedRefs(ref, resizeRef, listRef);
  let firstVisibleDotIndex = React.useMemo(
    () =>
      getBoundedValue(
        currentIndex - Math.ceil(visibleCount / 2) + 1,
        0,
        slideCount - visibleCount,
      ),
    [currentIndex, slideCount, visibleCount],
  );
  let lastVisibleDotIndex = React.useMemo(
    () =>
      getBoundedValue(
        currentIndex + Math.floor(visibleCount / 2),
        visibleCount - 1,
        slideCount - 1,
      ),
    [currentIndex, slideCount, visibleCount],
  );
  let dots = React.useMemo(
    () =>
      Array(slideCount)
        .fill(null)
        .map((_, index) => {
          let isFirstSmallDot =
            (index === firstVisibleDotIndex && 0 !== index) ||
            (index === lastVisibleDotIndex && index !== slideCount - 1);
          let isSecondSmallDot =
            (index === firstVisibleDotIndex + 1 && 1 !== index) ||
            (index === lastVisibleDotIndex - 1 && index !== slideCount - 2);
          let isClipped =
            index < firstVisibleDotIndex || index > lastVisibleDotIndex;
          return React.createElement(CarouselDot, {
            key: index,
            'aria-label': `Slide ${index + 1}`,
            isActive: index === currentIndex,
            onClick: () => handleSlideChange(index),
            isSmall: isSecondSmallDot,
            isSmaller: isFirstSmallDot || isClipped,
            id: idPrefix && `${idPrefix}--dot-${index}`,
          });
        }),
    [
      slideCount,
      firstVisibleDotIndex,
      lastVisibleDotIndex,
      currentIndex,
      idPrefix,
      handleSlideChange,
    ],
  );
  let motionOk = useMediaQuery('(prefers-reduced-motion: no-preference)');
  React.useEffect(() => {
    let firstDot = listRef.current?.children[firstVisibleDotIndex];
    if (!listRef.current || !firstDot) return;
    listRef.current.scrollTo({
      left: firstDot.offsetLeft - listRef.current.offsetLeft,
      behavior: motionOk && !justMounted.current ? 'smooth' : 'auto',
    });
    if (justMounted.current) justMounted.current = false;
  }, [
    currentIndex,
    firstVisibleDotIndex,
    motionOk,
    slideCount,
    visibleCount,
    width,
  ]);
  let handleKeyDown = (event) => {
    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
      return;
    let key = event.key;
    if ('ArrowLeft' === key || 'ArrowRight' === key) event.preventDefault();
  };
  let handleKeyUp = (event) => {
    switch (event.key) {
      case 'ArrowLeft':
        handleSlideChange((slideCount + currentIndex - 1) % slideCount);
        break;
      case 'ArrowRight':
        handleSlideChange((slideCount + currentIndex + 1) % slideCount);
        break;
    }
  };
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(
      Box,
      {
        className: cx('iui-carousel-navigation-dots', className),
        role: 'tablist',
        'aria-label': 'Slides',
        ref: refs,
        onKeyDown: handleKeyDown,
        onKeyUp: handleKeyUp,
        tabIndex: -1,
        ...rest,
      },
      children ?? dots,
    ),
  );
});
if ('development' === process.env.NODE_ENV)
  CarouselDotsList.displayName = 'Carousel.DotsList';