@razorpay/blade/build/lib/native/components/Carousel/Carousel.native.js

The Design System that powers Razorpay

import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React__default from 'react';
import { ScrollView } from 'react-native';
import { Indicators } from './Indicators/Indicators.js';
import { NavigationButton } from './NavigationButton/NavigationButton.js';
import { CarouselContext } from './CarouselContext.js';
import { CAROUSEL_AUTOPLAY_INTERVAL } from './constants.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.native.js';
import { useInterval } from '../../utils/useInterval.js';
import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.native.js';
import { announce } from '../LiveAnnouncer/LiveAnnouncer.native.js';
import { logger } from '../../utils/logger/logger.js';
import { castNativeType } from '../../utils/platform/castUtils.js';
import '../BladeProvider/useTheme.js';
import { useId } from '../../utils/useId.js';
import '../../tokens/global/typography.js';
import '../../tokens/global/motion.js';
import { size } from '../../tokens/global/size.js';
import { useDidUpdate } from '../../utils/useDidUpdate.js';
import { getResponsiveValue } from '../Box/BaseBox/getResponsiveValue.native.js';
import { jsx, jsxs } from 'react/jsx-runtime';

var percentageStringToNumber=function percentageStringToNumber(percentage){if(!percentage.endsWith('%')){logger({message:'Only percentage values are allowed',type:'error',moduleName:'Carousel'});}return Number(percentage.substring(0,percentage.length-1))/100;};var Controls=function Controls(_ref){var showIndicators=_ref.showIndicators,activeIndicator=_ref.activeIndicator,totalSlides=_ref.totalSlides,onIndicatorButtonClick=_ref.onIndicatorButtonClick,onNextButtonClick=_ref.onNextButtonClick,onPreviousButtonClick=_ref.onPreviousButtonClick,indicatorVariant=_ref.indicatorVariant,navigationButtonVariant=_ref.navigationButtonVariant;return jsxs(BaseBox,{marginTop:"spacing.7",display:"flex",flexDirection:"row",alignItems:"center",gap:"spacing.4",children:[jsx(BaseBox,{children:jsx(NavigationButton,{type:"previous",variant:navigationButtonVariant,onClick:onPreviousButtonClick})}),showIndicators?jsx(Indicators,{onClick:onIndicatorButtonClick,activeIndex:activeIndicator,totalItems:totalSlides,variant:indicatorVariant}):null,jsx(BaseBox,{children:jsx(NavigationButton,{onClick:onNextButtonClick,type:"next",variant:navigationButtonVariant})})]});};var _Carousel=function _Carousel(_ref2,ref){var autoPlay=_ref2.autoPlay,_ref2$showIndicators=_ref2.showIndicators,showIndicators=_ref2$showIndicators===void 0?true:_ref2$showIndicators,children=_ref2.children,_ref2$carouselItemWid=_ref2.carouselItemWidth,carouselItemWidth=_ref2$carouselItemWid===void 0?'100%':_ref2$carouselItemWid,accessibilityLabel=_ref2.accessibilityLabel,onChange=_ref2.onChange,_ref2$indicatorVarian=_ref2.indicatorVariant,indicatorVariant=_ref2$indicatorVarian===void 0?'gray':_ref2$indicatorVarian,_ref2$navigationButto=_ref2.navigationButtonVariant,navigationButtonVariant=_ref2$navigationButto===void 0?'filled':_ref2$navigationButto;var containerRef=React__default.useRef(null);var _React$useState=React__default.useState(0),_React$useState2=_slicedToArray(_React$useState,2),activeSlide=_React$useState2[0],setActiveSlide=_React$useState2[1];var _React$useState3=React__default.useState(0),_React$useState4=_slicedToArray(_React$useState3,2),scrollViewWidth=_React$useState4[0],setScrollViewWidth=_React$useState4[1];var _React$useState5=React__default.useState(false),_React$useState6=_slicedToArray(_React$useState5,2),shouldPauseAutoplay=_React$useState6[0],setShouldPauseAutoplay=_React$useState6[1];var id=useId();var _visibleItems=1;var slideWidth=scrollViewWidth*percentageStringToNumber(castNativeType(getResponsiveValue(carouselItemWidth)));var totalNumberOfSlides=React__default.Children.count(children);var goToSlideIndex=function goToSlideIndex(slideIndex){if(!containerRef.current)return;containerRef.current.scrollTo({x:slideIndex*slideWidth,y:0,animated:true});setActiveSlide(slideIndex);};var goToNextSlide=function goToNextSlide(){var slideIndex=activeSlide+1;if(slideIndex>=totalNumberOfSlides){slideIndex=0;}goToSlideIndex(slideIndex);};var goToPreviousSlide=function goToPreviousSlide(){var slideIndex=activeSlide-1;if(activeSlide<=0){slideIndex=totalNumberOfSlides-1;}goToSlideIndex(slideIndex);};var carouselContext=React__default.useMemo(function(){return {isResponsive:false,visibleItems:_visibleItems,carouselItemWidth:carouselItemWidth,carouselId:id,totalNumberOfSlides:totalNumberOfSlides,slideWidth:slideWidth,activeSlide:activeSlide,carouselContainerRef:containerRef,setActiveIndicator:setActiveSlide,carouselItemAlignment:undefined,shouldAddStartEndSpacing:false};},[carouselItemWidth,id,totalNumberOfSlides,slideWidth,activeSlide]);useInterval(function(){goToNextSlide();},{delay:CAROUSEL_AUTOPLAY_INTERVAL,enable:autoPlay&&!shouldPauseAutoplay});useDidUpdate(function(){onChange==null?void 0:onChange(activeSlide);},[activeSlide,onChange]);React__default.useEffect(function(){announce(`Slide ${activeSlide+1} of ${totalNumberOfSlides}`);},[activeSlide,totalNumberOfSlides]);return jsx(CarouselContext.Provider,{value:carouselContext,children:jsxs(BaseBox,{ref:ref,display:"flex",alignItems:"center",flexDirection:"column",children:[jsx(BaseBox,{width:"100%",position:"relative",display:"flex",alignItems:"center",gap:"spacing.4",flexDirection:"row",children:jsx(ScrollView,Object.assign({onScrollBeginDrag:function onScrollBeginDrag(){setShouldPauseAutoplay(true);},onScrollEndDrag:function onScrollEndDrag(){setShouldPauseAutoplay(false);}},makeAccessible({label:accessibilityLabel}),{ref:containerRef,onLayout:function onLayout(e){setScrollViewWidth(e.nativeEvent.layout.width);},onMomentumScrollEnd:function onMomentumScrollEnd(e){var slideIndex=Math.round(e.nativeEvent.contentOffset.x/slideWidth);setActiveSlide(slideIndex);},horizontal:true,snapToAlignment:"start",decelerationRate:"fast",overScrollMode:"never",contentInsetAdjustmentBehavior:"never",automaticallyAdjustContentInsets:false,showsHorizontalScrollIndicator:false,showsVerticalScrollIndicator:false,snapToInterval:slideWidth,contentInset:{left:0,right:0},contentOffset:{x:0,y:0},contentContainerStyle:{paddingVertical:size[10]},children:React__default.Children.map(children,function(child,index){return React__default.cloneElement(child,{index:index,shouldHaveStartSpacing:index===0,shouldHaveEndSpacing:index===totalNumberOfSlides-1});})}))}),jsx(Controls,{totalSlides:totalNumberOfSlides,activeIndicator:activeSlide,showIndicators:showIndicators,onIndicatorButtonClick:goToSlideIndex,onNextButtonClick:goToNextSlide,onPreviousButtonClick:goToPreviousSlide,indicatorVariant:indicatorVariant,navigationButtonVariant:navigationButtonVariant})]})});};var Carousel=React__default.forwardRef(_Carousel);

export { Carousel };
//# sourceMappingURL=Carousel.native.js.map