flowbite-react/dist/cjs/components/Carousel/Carousel.cjs.map

Official React components built for Flowbite and Tailwind CSS

{"version":3,"file":"Carousel.cjs","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps, FC, ReactElement, ReactNode } from \"react\";\nimport { Children, cloneElement, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { HiOutlineChevronLeft, HiOutlineChevronRight } from \"react-icons/hi\";\nimport { twMerge } from \"tailwind-merge\";\nimport ScrollContainer from \"../../helpers/drag-scroll\";\nimport { isClient } from \"../../helpers/is-client\";\nimport { mergeDeep } from \"../../helpers/merge-deep\";\nimport { getTheme } from \"../../theme-store\";\nimport type { DeepPartial } from \"../../types\";\nimport type { FlowbiteBoolean } from \"../Flowbite\";\n\nexport interface FlowbiteCarouselTheme {\n  root: FlowbiteCarouselRootTheme;\n  indicators: FlowbiteCarouselIndicatorsTheme;\n  item: FlowbiteCarouselItemTheme;\n  control: FlowbiteCarouselControlTheme;\n  scrollContainer: FlowbiteCarouselScrollContainer;\n}\n\nexport interface FlowbiteCarouselRootTheme {\n  base: string;\n  leftControl: string;\n  rightControl: string;\n}\n\nexport interface FlowbiteCarouselIndicatorsTheme {\n  active: FlowbiteBoolean;\n  base: string;\n  wrapper: string;\n}\n\nexport interface FlowbiteCarouselItemTheme {\n  base: string;\n  wrapper: FlowbiteBoolean;\n}\n\nexport interface FlowbiteCarouselControlTheme {\n  base: string;\n  icon: string;\n}\n\nexport interface FlowbiteCarouselScrollContainer {\n  base: string;\n  snap: string;\n}\n\nexport interface CarouselProps extends ComponentProps<\"div\"> {\n  indicators?: boolean;\n  leftControl?: ReactNode;\n  rightControl?: ReactNode;\n  draggable?: boolean;\n  slide?: boolean;\n  slideInterval?: number;\n  theme?: DeepPartial<FlowbiteCarouselTheme>;\n  onSlideChange?: (slide: number) => void;\n  pauseOnHover?: boolean;\n}\n\nexport interface DefaultLeftRightControlProps extends ComponentProps<\"div\"> {\n  theme?: DeepPartial<FlowbiteCarouselTheme>;\n}\n\nexport const Carousel: FC<CarouselProps> = ({\n  children,\n  indicators = true,\n  leftControl,\n  rightControl,\n  slide = true,\n  draggable = true,\n  slideInterval,\n  className,\n  theme: customTheme = {},\n  onSlideChange = null,\n  pauseOnHover = false,\n  ...props\n}) => {\n  const theme = mergeDeep(getTheme().carousel, customTheme);\n\n  const isDeviceMobile = isClient() && navigator.userAgent.indexOf(\"IEMobile\") !== -1;\n  const carouselContainer = useRef<HTMLDivElement>(null);\n  const [activeItem, setActiveItem] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const [isHovering, setIsHovering] = useState(false);\n\n  const didMountRef = useRef(false);\n\n  const items = useMemo(\n    () =>\n      Children.map(children as ReactElement[], (child: ReactElement) =>\n        cloneElement(child, {\n          className: twMerge(theme.item.base, child.props.className),\n        }),\n      ),\n    [children, theme.item.base],\n  );\n\n  const navigateTo = useCallback(\n    (item: number) => () => {\n      if (!items) return;\n      item = (item + items.length) % items.length;\n      if (carouselContainer.current) {\n        carouselContainer.current.scrollLeft = carouselContainer.current.clientWidth * item;\n      }\n      setActiveItem(item);\n    },\n    [items],\n  );\n\n  useEffect(() => {\n    if (carouselContainer.current && !isDragging && carouselContainer.current.scrollLeft !== 0) {\n      setActiveItem(Math.round(carouselContainer.current.scrollLeft / carouselContainer.current.clientWidth));\n    }\n  }, [isDragging]);\n\n  useEffect(() => {\n    if (slide && !(pauseOnHover && isHovering)) {\n      const intervalId = setInterval(() => !isDragging && navigateTo(activeItem + 1)(), slideInterval ?? 3000);\n\n      return () => clearInterval(intervalId);\n    }\n  }, [activeItem, isDragging, navigateTo, slide, slideInterval, pauseOnHover, isHovering]);\n\n  useEffect(() => {\n    if (didMountRef.current) {\n      onSlideChange && onSlideChange(activeItem);\n    } else {\n      didMountRef.current = true;\n    }\n  }, [onSlideChange, activeItem]);\n\n  const handleDragging = (dragging: boolean) => () => setIsDragging(dragging);\n\n  const setHoveringTrue = useCallback(() => setIsHovering(true), [setIsHovering]);\n  const setHoveringFalse = useCallback(() => setIsHovering(false), [setIsHovering]);\n\n  return (\n    <div\n      className={twMerge(theme.root.base, className)}\n      data-testid=\"carousel\"\n      onMouseEnter={setHoveringTrue}\n      onMouseLeave={setHoveringFalse}\n      onTouchStart={setHoveringTrue}\n      onTouchEnd={setHoveringFalse}\n      {...props}\n    >\n      <ScrollContainer\n        className={twMerge(theme.scrollContainer.base, (isDeviceMobile || !isDragging) && theme.scrollContainer.snap)}\n        draggingClassName=\"cursor-grab\"\n        innerRef={carouselContainer}\n        onEndScroll={handleDragging(false)}\n        onStartScroll={handleDragging(draggable)}\n        vertical={false}\n        horizontal={draggable}\n      >\n        {items?.map((item, index) => (\n          <div\n            key={index}\n            className={theme.item.wrapper[draggable ? \"on\" : \"off\"]}\n            data-active={activeItem === index}\n            data-testid=\"carousel-item\"\n          >\n            {item}\n          </div>\n        ))}\n      </ScrollContainer>\n      {indicators && (\n        <div className={theme.indicators.wrapper}>\n          {items?.map((_, index) => (\n            <button\n              key={index}\n              className={twMerge(theme.indicators.base, theme.indicators.active[index === activeItem ? \"on\" : \"off\"])}\n              onClick={navigateTo(index)}\n              data-testid=\"carousel-indicator\"\n              aria-label={`Slide ${index + 1}`}\n            />\n          ))}\n        </div>\n      )}\n\n      {items && (\n        <>\n          <div className={theme.root.leftControl}>\n            <button\n              className=\"group\"\n              data-testid=\"carousel-left-control\"\n              onClick={navigateTo(activeItem - 1)}\n              type=\"button\"\n              aria-label=\"Previous slide\"\n            >\n              {leftControl ? leftControl : <DefaultLeftControl theme={customTheme} />}\n            </button>\n          </div>\n          <div className={theme.root.rightControl}>\n            <button\n              className=\"group\"\n              data-testid=\"carousel-right-control\"\n              onClick={navigateTo(activeItem + 1)}\n              type=\"button\"\n              aria-label=\"Next slide\"\n            >\n              {rightControl ? rightControl : <DefaultRightControl theme={customTheme} />}\n            </button>\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\nconst DefaultLeftControl: FC<DefaultLeftRightControlProps> = ({ theme: customTheme = {} }) => {\n  const theme = mergeDeep(getTheme().carousel, customTheme);\n  return (\n    <span className={theme.control.base}>\n      <HiOutlineChevronLeft className={theme.control.icon} />\n    </span>\n  );\n};\n\nconst DefaultRightControl: FC<DefaultLeftRightControlProps> = ({ theme: customTheme = {} }) => {\n  const theme = mergeDeep(getTheme().carousel, customTheme);\n  return (\n    <span className={theme.control.base}>\n      <HiOutlineChevronRight className={theme.control.icon} />\n    </span>\n  );\n};\n\nCarousel.displayName = \"Carousel\";\n"],"names":["mergeDeep","getTheme","isClient","useRef","useState","useMemo","Children","cloneElement","twMerge","useCallback","useEffect","jsxs","jsx","ScrollContainer","Fragment","HiOutlineChevronLeft","HiOutlineChevronRight"],"mappings":"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"}