react-multi-carousel-18/lib/CarouselItems.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"),utils_1=require("./utils"),CarouselItems=({props,state,goToSlide,clones,notEnoughChildren})=>{const itemWidth=state["itemWidth"],{children,infinite,itemClass,itemAriaLabel,partialVisbile,partialVisible}=props,{flexBisis,shouldRenderOnSSR,domFullyLoaded,partialVisibilityGutter,shouldRenderAtAll}=(0,utils_1.getInitialState)(state,props);return shouldRenderAtAll?(partialVisbile&&console.warn('WARNING: Please correct props name: "partialVisible" as old typo will be removed in future versions!'),React.createElement(React.Fragment,null,(infinite?clones:React.Children.toArray(children)).map((child,index)=>React.createElement("li",{key:index,"data-index":index,onClick:()=>{props.focusOnSelect&&goToSlide(index)},"aria-hidden":(0,utils_1.getIfSlideIsVisbile)(index,state)?"false":"true","aria-label":itemAriaLabel||child.props.ariaLabel||null,style:{flex:shouldRenderOnSSR?`1 0 ${flexBisis}%`:"auto",position:"relative",width:domFullyLoaded?`${(partialVisbile||partialVisible)&&partialVisibilityGutter&&!notEnoughChildren?itemWidth-partialVisibilityGutter:itemWidth}px`:"auto"},className:`react-multi-carousel-item ${(0,utils_1.getIfSlideIsVisbile)(index,state)?"react-multi-carousel-item--active":""} `+itemClass},child)))):null};exports.default=CarouselItems;