react-multi-carousel/lib/Dots.js

Production-ready, lightweight fully customizable React carousel component that rocks supports multiple items and SSR(Server-side rendering) with typescript.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),utils_1=require("./utils"),Dots=function(_a){var props=_a.props,state=_a.state,goToSlide=_a.goToSlide,getState=_a.getState,showDots=props.showDots,customDot=props.customDot,dotListClass=props.dotListClass,infinite=props.infinite,children=props.children;if(!showDots)return null;var currentSlide=state.currentSlide,childrenArr=React.Children.toArray(children);return React.createElement("ul",{className:"react-multi-carousel-dot-list "+dotListClass},Array(childrenArr.length).fill(0).map(function(item,index){var isActive,slideIndex=infinite?utils_1.getOriginalCounterPart(index,state,childrenArr):index,cloneIndex=infinite?utils_1.getCloneCounterPart(index,state,childrenArr):null;return isActive=void 0!==cloneIndex&&currentSlide===cloneIndex||currentSlide===slideIndex,customDot?React.cloneElement(customDot,{index:index,active:isActive,key:index,onClick:function(){return goToSlide(slideIndex)},carouselState:getState()}):React.createElement("li",{"data-index":index,key:index,className:"react-multi-carousel-dot "+(isActive?"react-multi-carousel-dot--active":"")},React.createElement("button",{onClick:function(){return goToSlide(slideIndex)}}))}))};exports.default=Dots;