react-multi-carousel-18/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});const React=require("react"),clones_1=require("./utils/clones"),dots_1=require("./utils/dots"),common_1=require("./utils/common"),Dots=({props,state,goToSlide,getState})=>{const{showDots,customDot,dotListClass,infinite,children}=props;if(!showDots||(0,common_1.notEnoughChildren)(state))return null;const{currentSlide,slidesToShow}=state,slidesToSlide=(0,common_1.getSlidesToSlide)(state,props),childrenArr=React.Children.toArray(children);let numberOfDotsToShow;numberOfDotsToShow=infinite?Math.ceil(childrenArr.length/slidesToSlide):Math.ceil((childrenArr.length-slidesToShow)/slidesToSlide)+1;const nextSlidesTable=(0,dots_1.getLookupTableForNextSlides)(numberOfDotsToShow,state,props,childrenArr),lookupTable=(0,clones_1.getOriginalIndexLookupTableByClones)(slidesToShow,childrenArr),currentSlides=lookupTable[currentSlide];return React.createElement("ul",{className:"react-multi-carousel-dot-list "+dotListClass},Array(numberOfDotsToShow).fill(0).map((_,index)=>{let isActive,nextSlide;var cloneIndex,possibileNextSlides;return isActive=infinite?(nextSlide=nextSlidesTable[index],cloneIndex=lookupTable[nextSlide],currentSlides===cloneIndex||currentSlides>=cloneIndex&&currentSlides<cloneIndex+slidesToSlide):(cloneIndex=childrenArr.length-slidesToShow,possibileNextSlides=index*slidesToSlide,(nextSlide=cloneIndex<possibileNextSlides?cloneIndex:possibileNextSlides)===currentSlide||currentSlide>nextSlide&&currentSlide<nextSlide+slidesToSlide&&currentSlide<childrenArr.length-slidesToShow),customDot?React.cloneElement(customDot,{index:index,active:isActive,key:index,onClick:()=>goToSlide(nextSlide),carouselState:getState()}):React.createElement("li",{"data-index":index,key:index,className:"react-multi-carousel-dot "+(isActive?"react-multi-carousel-dot--active":"")},React.createElement("button",{"aria-label":"Go to slide "+(index+1),onClick:()=>goToSlide(nextSlide)}))}))};exports.default=Dots;