1897-55f211c3b5a62078e735.js.map

{"version":3,"file":"1897-55f211c3b5a62078e735.js","mappings":"uIAAA,o6E","sources":["webpack://embla-carousel-docs/./src/components/Sandbox/React/SandboxFilesDist/LazyLoad/EmblaCarousel.jsx"],"sourcesContent":["export default \"import React, { useCallback, useEffect, useState } from 'react';\\nimport useEmblaCarousel from 'embla-carousel-react';\\nimport { LazyLoadImage } from './EmblaCarouselLazyLoadImage';\\nimport { NextButton, PrevButton, usePrevNextButtons } from '../EmblaCarouselArrowButtons';\\nimport { DotButton, useDotButton } from '../EmblaCarouselDotButton';\\n\\nconst EmblaCarousel = (props) => {\\n    const { slides, options } = props;\\n    const [emblaRed, emblaApi] = useEmblaCarousel(options);\\n    const [slidesInView, setSlidesInView] = useState([]);\\n    \\n    const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi);\\n    \\n    const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi);\\n    \\n    const updateSlidesInView = useCallback((emblaApi) => {\\n        setSlidesInView((slidesInView) => {\\n            if (slidesInView.length === emblaApi.slideNodes().length) {\\n                emblaApi.off('slidesInView', updateSlidesInView);\\n            }\\n            const inView = emblaApi\\n                .slidesInView()\\n                .filter((index) => !slidesInView.includes(index));\\n            return slidesInView.concat(inView);\\n        });\\n    }, []);\\n    \\n    useEffect(() => {\\n        if (!emblaApi)\\n            return;\\n        \\n        updateSlidesInView(emblaApi);\\n        emblaApi.on('slidesInView', updateSlidesInView);\\n        emblaApi.on('reInit', updateSlidesInView);\\n    }, [emblaApi, updateSlidesInView]);\\n    \\n    return (<div className=\\\"embla\\\">\\n      <div className=\\\"embla__viewport\\\" ref={emblaRed}>\\n        <div className=\\\"embla__container\\\">\\n          {slides.map((index) => (<LazyLoadImage key={index} index={index} imgSrc={`https://picsum.photos/600/350?v=${index}`} inView={slidesInView.indexOf(index) > -1}/>))}\\n        </div>\\n      </div>\\n \\n      <div className=\\\"embla__controls\\\">\\n        <div className=\\\"embla__buttons\\\">\\n          <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled}/>\\n          <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled}/>\\n        </div>\\n \\n        <div className=\\\"embla__dots\\\">\\n          {scrollSnaps.map((_, index) => (<DotButton key={index} onClick={() => onDotButtonClick(index)} className={'embla__dot'.concat(index === selectedIndex ? ' embla__dot--selected' : '')}/>))}\\n        </div>\\n      </div>\\n    </div>);\\n};\\n\\nexport default EmblaCarousel;\\n\";"],"names":[],"sourceRoot":""}