1897-55f211c3b5a62078e735.js

"use strict";(self.webpackChunkembla_carousel_docs=self.webpackChunkembla_carousel_docs||[]).push([[1897],{1897:function(e,n,t){t.r(n),n.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"}}]);
//# sourceMappingURL=1897-55f211c3b5a62078e735.js.map