2413-a485ddfd8b45d52534c8.js.map

{"version":3,"file":"2413-a485ddfd8b45d52534c8.js","mappings":"uIAAA,g6F","sources":["webpack://embla-carousel-docs/./src/components/Sandbox/React/SandboxFilesDist/ArrowsDots/EmblaCarousel.tsx"],"sourcesContent":["export default \"import React, { useState, useEffect, useCallback } from 'react'\\nimport useEmblaCarousel, {\\n  EmblaCarouselType,\\n  EmblaOptionsType\\n} from 'embla-carousel-react'\\nimport {\\n  DotButton,\\n  PrevButton,\\n  NextButton\\n} from './EmblaCarouselArrowsDotsButtons'\\nimport imageByIndex from '../imageByIndex'\\n\\ntype PropType = {\\n  slides: number[]\\n  options?: EmblaOptionsType\\n}\\n\\nconst EmblaCarousel: React.FC<PropType> = (props) => {\\n  const { slides, options } = props\\n  const [emblaRef, emblaApi] = useEmblaCarousel(options)\\n  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true)\\n  const [nextBtnDisabled, setNextBtnDisabled] = useState(true)\\n  const [selectedIndex, setSelectedIndex] = useState(0)\\n  const [scrollSnaps, setScrollSnaps] = useState<number[]>([])\\n\\n  const scrollPrev = useCallback(\\n    () => emblaApi && emblaApi.scrollPrev(),\\n    [emblaApi]\\n  )\\n  const scrollNext = useCallback(\\n    () => emblaApi && emblaApi.scrollNext(),\\n    [emblaApi]\\n  )\\n  const scrollTo = useCallback(\\n    (index: number) => emblaApi && emblaApi.scrollTo(index),\\n    [emblaApi]\\n  )\\n\\n  const onInit = useCallback((emblaApi: EmblaCarouselType) => {\\n    setScrollSnaps(emblaApi.scrollSnapList())\\n  }, [])\\n\\n  const onSelect = useCallback((emblaApi: EmblaCarouselType) => {\\n    setSelectedIndex(emblaApi.selectedScrollSnap())\\n    setPrevBtnDisabled(!emblaApi.canScrollPrev())\\n    setNextBtnDisabled(!emblaApi.canScrollNext())\\n  }, [])\\n\\n  useEffect(() => {\\n    if (!emblaApi) return\\n\\n    onInit(emblaApi)\\n    onSelect(emblaApi)\\n    emblaApi.on('reInit', onInit)\\n    emblaApi.on('reInit', onSelect)\\n    emblaApi.on('select', onSelect)\\n  }, [emblaApi, onInit, onSelect])\\n\\n  return (\\n    <>\\n      <div className=\\\"embla\\\">\\n        <div className=\\\"embla__viewport\\\" ref={emblaRef}>\\n          <div className=\\\"embla__container\\\">\\n            {slides.map((index) => (\\n              <div className=\\\"embla__slide\\\" key={index}>\\n                <div className=\\\"embla__slide__number\\\">\\n                  <span>{index + 1}</span>\\n                </div>\\n                <img\\n                  className=\\\"embla__slide__img\\\"\\n                  src={imageByIndex(index)}\\n                  alt=\\\"Your alt text\\\"\\n                />\\n              </div>\\n            ))}\\n          </div>\\n        </div>\\n\\n        <div className=\\\"embla__buttons\\\">\\n          <PrevButton onClick={scrollPrev} disabled={prevBtnDisabled} />\\n          <NextButton onClick={scrollNext} disabled={nextBtnDisabled} />\\n        </div>\\n      </div>\\n\\n      <div className=\\\"embla__dots\\\">\\n        {scrollSnaps.map((_, index) => (\\n          <DotButton\\n            key={index}\\n            onClick={() => scrollTo(index)}\\n            className={'embla__dot'.concat(\\n              index === selectedIndex ? ' embla__dot--selected' : ''\\n            )}\\n          />\\n        ))}\\n      </div>\\n    </>\\n  )\\n}\\n\\nexport default EmblaCarousel\\n\";"],"names":[],"sourceRoot":""}