2885-05b138f520966e510c82.js.map

{"version":3,"file":"2885-05b138f520966e510c82.js","mappings":"uIAAA,isF","sources":["webpack://embla-carousel-docs/./src/components/Sandbox/React/SandboxFilesDist/AutoScroll/EmblaCarousel.jsx"],"sourcesContent":["export default \"import React, { useCallback, useEffect, useState } from 'react';\\nimport useEmblaCarousel from 'embla-carousel-react';\\nimport AutoScroll from 'embla-carousel-auto-scroll';\\nimport { NextButton, PrevButton, usePrevNextButtons } from '../EmblaCarouselArrowButtons';\\n\\nconst EmblaCarousel = (props) => {\\n    const { slides, options } = props;\\n    const [emblaRef, emblaApi] = useEmblaCarousel(options, [\\n        AutoScroll({ playOnInit: false })\\n    ]);\\n    const [isPlaying, setIsPlaying] = useState(false);\\n    \\n    const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi);\\n    \\n    const onButtonAutoplayClick = useCallback((callback) => {\\n        const autoScroll = emblaApi?.plugins()?.autoScroll;\\n        if (!autoScroll)\\n            return;\\n        \\n        const resetOrStop = autoScroll.options.stopOnInteraction === false\\n            ? autoScroll.reset\\n            : autoScroll.stop;\\n        \\n        resetOrStop();\\n        callback();\\n    }, [emblaApi]);\\n    \\n    const toggleAutoplay = useCallback(() => {\\n        const autoScroll = emblaApi?.plugins()?.autoScroll;\\n        if (!autoScroll)\\n            return;\\n        \\n        const playOrStop = autoScroll.isPlaying()\\n            ? autoScroll.stop\\n            : autoScroll.play;\\n        playOrStop();\\n    }, [emblaApi]);\\n    \\n    useEffect(() => {\\n        const autoScroll = emblaApi?.plugins()?.autoScroll;\\n        if (!autoScroll)\\n            return;\\n        \\n        setIsPlaying(autoScroll.isPlaying());\\n        emblaApi\\n            .on('autoScroll:play', () => setIsPlaying(true))\\n            .on('autoScroll:stop', () => setIsPlaying(false))\\n            .on('reInit', () => setIsPlaying(autoScroll.isPlaying()));\\n    }, [emblaApi]);\\n    \\n    return (<div className=\\\"embla\\\">\\n      <div className=\\\"embla__viewport\\\" ref={emblaRef}>\\n        <div className=\\\"embla__container\\\">\\n          {slides.map((index) => (<div className=\\\"embla__slide\\\" key={index}>\\n              <div className=\\\"embla__slide__number\\\">\\n                <span>{index + 1}</span>\\n              </div>\\n            </div>))}\\n        </div>\\n      </div>\\n \\n      <div className=\\\"embla__controls\\\">\\n        <div className=\\\"embla__buttons\\\">\\n          <PrevButton onClick={() => onButtonAutoplayClick(onPrevButtonClick)} disabled={prevBtnDisabled}/>\\n          <NextButton onClick={() => onButtonAutoplayClick(onNextButtonClick)} disabled={nextBtnDisabled}/>\\n        </div>\\n \\n        <button className=\\\"embla__play\\\" onClick={toggleAutoplay} type=\\\"button\\\">\\n          {isPlaying ? 'Stop' : 'Start'}\\n        </button>\\n      </div>\\n    </div>);\\n};\\n\\nexport default EmblaCarousel;\\n\";"],"names":[],"sourceRoot":""}