@razorpay/blade
Version:
The Design System that powers Razorpay
11 lines (8 loc) • 1.26 kB
JavaScript
import { useCarouselContext } from '../CarouselContext.js';
import { IndicatorButton } from './IndicatorButton.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.native.js';
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.native.js';
import { jsx } from 'react/jsx-runtime';
var Indicators=function Indicators(props){var _useCarouselContext=useCarouselContext(),carouselId=_useCarouselContext.carouselId,isResponsive=_useCarouselContext.isResponsive,visibleItems=_useCarouselContext.visibleItems;return jsx(BaseBox,Object.assign({display:"flex",flexDirection:"row",gap:"spacing.2"},makeAccessible({role:'tablist',label:'Slides'}),{children:new Array(props.totalItems).fill(0).map(function(_,idx){var _visibleItems=visibleItems;if(isResponsive){_visibleItems=1;}return jsx(IndicatorButton,Object.assign({},makeAccessible({role:'tab',label:`Slide ${idx*_visibleItems+1}`,selected:idx===props.activeIndex,controls:`${carouselId}-carousel-item-${idx*_visibleItems}`}),{slideIndex:idx*_visibleItems,isActive:idx===props.activeIndex,onClick:function onClick(){return props==null?void 0:props.onClick==null?void 0:props.onClick(idx);},variant:props.variant}),idx);})}));};
export { Indicators };
//# sourceMappingURL=Indicators.js.map