3734-ebf7d8d603eecc4c6bf3.js

"use strict";(self.webpackChunkembla_carousel_docs=self.webpackChunkembla_carousel_docs||[]).push([[3734],{3734:function(e,n,t){t.r(n),n.default="import React, { useCallback, useEffect, useRef } from 'react';\nimport useEmblaCarousel from 'embla-carousel-react';\nimport { NextButton, PrevButton, usePrevNextButtons } from '../EmblaCarouselArrowButtons';\nimport { DotButton, useDotButton } from '../EmblaCarouselDotButton';\n\nconst TWEEN_FACTOR_BASE = 0.52;\n\nconst numberWithinRange = (number, min, max) => Math.min(Math.max(number, min), max);\n\nconst EmblaCarousel = (props) => {\n    const { slides, options } = props;\n    const [emblaRef, emblaApi] = useEmblaCarousel(options);\n    const tweenFactor = useRef(0);\n    const tweenNodes = useRef([]);\n    \n    const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi);\n    \n    const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi);\n    \n    const setTweenNodes = useCallback((emblaApi) => {\n        tweenNodes.current = emblaApi.slideNodes().map((slideNode) => {\n            return slideNode.querySelector('.embla__slide__number');\n        });\n    }, []);\n    \n    const setTweenFactor = useCallback((emblaApi) => {\n        tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length;\n    }, []);\n    \n    const tweenScale = useCallback((emblaApi, eventName) => {\n        const engine = emblaApi.internalEngine();\n        const scrollProgress = emblaApi.scrollProgress();\n        const slidesInView = emblaApi.slidesInView();\n        const isScrollEvent = eventName === 'scroll';\n        \n        emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => {\n            let diffToTarget = scrollSnap - scrollProgress;\n            const slidesInSnap = engine.slideRegistry[snapIndex];\n            \n            slidesInSnap.forEach((slideIndex) => {\n                if (isScrollEvent && !slidesInView.includes(slideIndex))\n                    return;\n                \n                if (engine.options.loop) {\n                    engine.slideLooper.loopPoints.forEach((loopItem) => {\n                        const target = loopItem.target();\n                        \n                        if (slideIndex === loopItem.index && target !== 0) {\n                            const sign = Math.sign(target);\n                            \n                            if (sign === -1) {\n                                diffToTarget = scrollSnap - (1 + scrollProgress);\n                            }\n                            if (sign === 1) {\n                                diffToTarget = scrollSnap + (1 - scrollProgress);\n                            }\n                        }\n                    });\n                }\n                \n                const tweenValue = 1 - Math.abs(diffToTarget * tweenFactor.current);\n                const scale = numberWithinRange(tweenValue, 0, 1).toString();\n                const tweenNode = tweenNodes.current[slideIndex];\n                tweenNode.style.transform = `scale(${scale})`;\n            });\n        });\n    }, []);\n    \n    useEffect(() => {\n        if (!emblaApi)\n            return;\n        \n        setTweenNodes(emblaApi);\n        setTweenFactor(emblaApi);\n        tweenScale(emblaApi);\n        \n        emblaApi\n            .on('reInit', setTweenNodes)\n            .on('reInit', setTweenFactor)\n            .on('reInit', tweenScale)\n            .on('scroll', tweenScale)\n            .on('slideFocus', tweenScale);\n    }, [emblaApi, tweenScale]);\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\">{index + 1}</div>\n            </div>))}\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=3734-ebf7d8d603eecc4c6bf3.js.map