flowbite-react/dist/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, ReactElement, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport ScrollContainer from \"../../helpers/drag-scroll\";\nimport { get } from \"../../helpers/get\";\nimport { isClient } from \"../../helpers/is-client\";\nimport { resolveProps } from \"../../helpers/resolve-props\";\nimport { useResolveTheme } from \"../../helpers/resolve-theme\";\nimport { twMerge } from \"../../helpers/tailwind-merge\";\nimport { ChevronLeftIcon } from \"../../icons/chevron-left-icon\";\nimport { ChevronRightIcon } from \"../../icons/chevron-right-icon\";\nimport { useThemeProvider } from \"../../theme/provider\";\nimport type { FlowbiteBoolean, ThemingProps } from \"../../types\";\nimport { carouselTheme } from \"./theme\";\n\nexport interface CarouselTheme {\n  root: CarouselRootTheme;\n  indicators: CarouselIndicatorsTheme;\n  item: CarouselItemTheme;\n  control: CarouselControlTheme;\n  scrollContainer: CarouselScrollContainer;\n}\n\nexport interface CarouselRootTheme {\n  base: string;\n  leftControl: string;\n  rightControl: string;\n}\n\nexport interface CarouselIndicatorsTheme {\n  active: FlowbiteBoolean;\n  base: string;\n  wrapper: string;\n}\n\nexport interface CarouselItemTheme {\n  base: string;\n  wrapper: FlowbiteBoolean;\n}\n\nexport interface CarouselControlTheme {\n  base: string;\n  icon: string;\n}\n\nexport interface CarouselScrollContainer {\n  base: string;\n  snap: string;\n}\n\nexport interface CarouselProps extends ComponentProps<\"div\">, ThemingProps<CarouselTheme> {\n  indicators?: boolean;\n  leftControl?: ReactNode;\n  rightControl?: ReactNode;\n  draggable?: boolean;\n  slide?: boolean;\n  slideInterval?: number;\n  onSlideChange?: (slide: number) => void;\n  pauseOnHover?: boolean;\n}\n\nexport interface DefaultLeftRightControlProps extends ComponentProps<\"div\">, ThemingProps<CarouselTheme> {}\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>((props, ref) => {\n  const provider = useThemeProvider();\n  const theme = useResolveTheme(\n    [carouselTheme, provider.theme?.carousel, props.theme],\n    [get(provider.clearTheme, \"carousel\"), props.clearTheme],\n    [get(provider.applyTheme, \"carousel\"), props.applyTheme],\n  );\n\n  const {\n    children,\n    indicators = true,\n    leftControl,\n    rightControl,\n    slide = true,\n    draggable = true,\n    slideInterval,\n    className,\n    onSlideChange,\n    pauseOnHover = false,\n    ...restProps\n  } = resolveProps(props, provider.props?.carousel);\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?.(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), []);\n  const setHoveringFalse = useCallback(() => setIsHovering(false), []);\n\n  return (\n    <div\n      ref={ref}\n      className={twMerge(theme.root.base, className)}\n      data-testid=\"carousel\"\n      onMouseEnter={setHoveringTrue}\n      onMouseLeave={setHoveringFalse}\n      onTouchStart={setHoveringTrue}\n      onTouchEnd={setHoveringFalse}\n      {...restProps}\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={theme.control} />}\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={theme.control} />}\n            </button>\n          </div>\n        </>\n      )}\n    </div>\n  );\n});\n\nCarousel.displayName = \"Carousel\";\n\nfunction DefaultLeftControl({ theme }: { theme: CarouselControlTheme }) {\n  return (\n    <span className={theme.base}>\n      <ChevronLeftIcon className={theme.icon} />\n    </span>\n  );\n}\n\nfunction DefaultRightControl({ theme }: { theme: CarouselControlTheme }) {\n  return (\n    <span className={theme.base}>\n      <ChevronRightIcon className={theme.icon} />\n    </span>\n  );\n}\n"],"names":["forwardRef","provider","useThemeProvider","theme","useResolveTheme","carouselTheme","get","resolveProps","isClient","useRef","useState","useMemo","Children","cloneElement","twMerge","useCallback","useEffect","jsxs","jsx","ScrollContainer","Fragment","ChevronLeftIcon","ChevronRightIcon"],"mappings":"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"}