react-multi-carousel
Version:
Production-ready, lightweight fully customizable React carousel component that rocks supports multiple items and SSR(Server-side rendering) with typescript.
1 lines • 1.78 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var React=require("react"),utils_1=require("./utils"),CarouselItems=function(_a){var props=_a.props,state=_a.state,goToSlide=_a.goToSlide,itemWidth=state.itemWidth,clones=state.clones,children=props.children,infinite=props.infinite,itemClass=props.itemClass,partialVisbile=props.partialVisbile,_b=utils_1.getInitialState(state,props),flexBisis=_b.flexBisis,shouldRenderOnSSR=_b.shouldRenderOnSSR,domFullyLoaded=_b.domFullyLoaded,paritialVisibilityGutter=_b.paritialVisibilityGutter;return _b.shouldRenderAtAll?infinite?clones.map(function(child,index){return React.createElement("li",{key:index,onClick:function(){props.focusOnSelect&&goToSlide(index)},"aria-hidden":utils_1.getIfSlideIsVisbile(index,state)?"false":"true","data-index":index,style:{flex:shouldRenderOnSSR?"1 0 "+flexBisis+"%":"auto",position:"relative",width:domFullyLoaded?(partialVisbile&&paritialVisibilityGutter?itemWidth-paritialVisibilityGutter:itemWidth)+"px":"auto"},className:"react-multi-carousel-item "+(utils_1.getIfSlideIsVisbile(index,state)?"react-multi-carousel-item--active":"")+" "+itemClass},child)}):React.Children.toArray(children).map(function(child,index){return React.createElement("li",{key:index,"data-index":index,onClick:function(){props.focusOnSelect&&goToSlide(index)},"aria-hidden":utils_1.getIfSlideIsVisbile(index,state)?"false":"true",style:{flex:shouldRenderOnSSR?"1 0 "+flexBisis+"%":"auto",position:"relative",width:domFullyLoaded?(partialVisbile&&paritialVisibilityGutter?itemWidth-paritialVisibilityGutter:itemWidth)+"px":"auto"},className:"react-multi-carousel-item "+(utils_1.getIfSlideIsVisbile(index,state)?"react-multi-carousel-item--active":"")+" "+itemClass},child)}):null};exports.default=CarouselItems;