react-multi-carousel-18/lib/Carousel.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"),types_1=require("./types"),Dots_1=require("./Dots"),Arrows_1=require("./Arrows"),CarouselItems_1=require("./CarouselItems"),common_1=require("./utils/common"),defaultTransitionDuration=400,defaultTransition="transform 400ms ease-in-out";class Carousel extends React.Component{constructor(props){super(props),this.containerRef=React.createRef(),this.listRef=React.createRef(),this.state={itemWidth:0,slidesToShow:0,currentSlide:0,totalItems:React.Children.count(props.children),deviceType:"",domLoaded:!1,transform:0,containerWidth:0},this.onResize=this.onResize.bind(this),this.handleDown=this.handleDown.bind(this),this.handleMove=this.handleMove.bind(this),this.handleOut=this.handleOut.bind(this),this.onKeyUp=this.onKeyUp.bind(this),this.handleEnter=this.handleEnter.bind(this),this.setIsInThrottle=this.setIsInThrottle.bind(this),this.next=(0,utils_1.throttle)(this.next.bind(this),props.transitionDuration||defaultTransitionDuration,this.setIsInThrottle),this.previous=(0,utils_1.throttle)(this.previous.bind(this),props.transitionDuration||defaultTransitionDuration,this.setIsInThrottle),this.goToSlide=(0,utils_1.throttle)(this.goToSlide.bind(this),props.transitionDuration||defaultTransitionDuration,this.setIsInThrottle),this.onMove=!1,this.initialX=0,this.lastX=0,this.isAnimationAllowed=!1,this.direction="",this.initialY=0,this.isInThrottle=!1,this.transformPlaceHolder=0}resetTotalItems(){var totalItems=React.Children.count(this.props.children),currentSlide=(0,utils_1.notEnoughChildren)(this.state)?0:Math.max(0,Math.min(this.state.currentSlide,totalItems));this.setState({totalItems:totalItems,currentSlide:currentSlide},()=>{this.setContainerAndItemWidth(this.state.slidesToShow,!0)})}setIsInThrottle(isInThrottle=!1){this.isInThrottle=isInThrottle}setTransformDirectly(position,withAnimation){var additionalTransfrom=this.props["additionalTransfrom"],position=(this.transformPlaceHolder=position,(0,common_1.getTransform)(this.state,this.props,this.transformPlaceHolder));this.listRef&&this.listRef.current&&(this.setAnimationDirectly(withAnimation),this.listRef.current.style.transform=`translate3d(${position+additionalTransfrom}px,0,0)`)}setAnimationDirectly(animationAllowed){this.listRef&&this.listRef.current&&(this.listRef.current.style.transition=animationAllowed?this.props.customTransition||defaultTransition:"none")}componentDidMount(){this.setState({domLoaded:!0}),this.setItemsToShow(),window.addEventListener("resize",this.onResize),this.onResize(!0),this.props.keyBoardControl&&window.addEventListener("keyup",this.onKeyUp),this.props.autoPlay&&(this.autoPlay=setInterval(this.next,this.props.autoPlaySpeed))}setClones(slidesToShow,itemWidth,forResizing,resetCurrentSlide=!1){this.isAnimationAllowed=!1;var childrenArr=React.Children.toArray(this.props.children),slidesToShow=(0,utils_1.getInitialSlideInInfiniteMode)(slidesToShow||this.state.slidesToShow,childrenArr),clones=(0,utils_1.getClones)(this.state.slidesToShow,childrenArr),childrenArr=childrenArr.length<this.state.slidesToShow?0:this.state.currentSlide;this.setState({totalItems:clones.length,currentSlide:forResizing&&!resetCurrentSlide?childrenArr:slidesToShow},()=>{this.correctItemsPosition(itemWidth||this.state.itemWidth)})}setItemsToShow(shouldCorrectItemPosition,resetCurrentSlide){const responsive=this.props["responsive"];Object.keys(responsive).forEach(item=>{var{breakpoint,items}=responsive[item],{max:breakpoint,min}=breakpoint;window.innerWidth>=min&&window.innerWidth<=breakpoint&&(this.setState({slidesToShow:items,deviceType:item}),this.setContainerAndItemWidth(items,shouldCorrectItemPosition,resetCurrentSlide))})}setContainerAndItemWidth(slidesToShow,shouldCorrectItemPosition,resetCurrentSlide){if(this.containerRef&&this.containerRef.current){var containerWidth=this.containerRef.current.offsetWidth;const itemWidth=(0,utils_1.getItemClientSideWidth)(this.props,slidesToShow,containerWidth);this.setState({containerWidth:containerWidth,itemWidth:itemWidth},()=>{this.props.infinite&&this.setClones(slidesToShow,itemWidth,shouldCorrectItemPosition,resetCurrentSlide)}),shouldCorrectItemPosition&&this.correctItemsPosition(itemWidth)}}correctItemsPosition(itemWidth,isAnimationAllowed,setToDomDirectly){isAnimationAllowed&&(this.isAnimationAllowed=!0),!isAnimationAllowed&&this.isAnimationAllowed&&(this.isAnimationAllowed=!1);isAnimationAllowed=this.state.totalItems<this.state.slidesToShow?0:-(itemWidth*this.state.currentSlide);setToDomDirectly&&this.setTransformDirectly(isAnimationAllowed,!0),this.setState({transform:isAnimationAllowed})}onResize(value){var infinite=this.props["infinite"];let shouldCorrectItemPosition;shouldCorrectItemPosition=!!infinite&&("boolean"!=typeof value||!value),this.setItemsToShow(shouldCorrectItemPosition)}componentDidUpdate({keyBoardControl,autoPlay,children},{containerWidth,domLoaded,currentSlide}){this.containerRef&&this.containerRef.current&&this.containerRef.current.offsetWidth!==containerWidth&&(this.itemsToShowTimeout&&clearTimeout(this.itemsToShowTimeout),this.itemsToShowTimeout=setTimeout(()=>{this.setItemsToShow(!0)},this.props.transitionDuration||defaultTransitionDuration)),keyBoardControl&&!this.props.keyBoardControl&&window.removeEventListener("keyup",this.onKeyUp),!keyBoardControl&&this.props.keyBoardControl&&window.addEventListener("keyup",this.onKeyUp),autoPlay&&!this.props.autoPlay&&this.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=void 0),autoPlay||!this.props.autoPlay||this.autoPlay||(this.autoPlay=setInterval(this.next,this.props.autoPlaySpeed)),children.length!==this.props.children.length?setTimeout(()=>{this.props.infinite?this.setClones(this.state.slidesToShow,this.state.itemWidth,!0,!0):this.resetTotalItems()},this.props.transitionDuration||defaultTransitionDuration):this.props.infinite&&this.state.currentSlide!==currentSlide&&this.correctClonesPosition({domLoaded:domLoaded}),this.transformPlaceHolder!==this.state.transform&&(this.transformPlaceHolder=this.state.transform),this.props.autoPlay&&this.props.rewind&&!this.props.infinite&&(0,utils_1.isInRightEnd)(this.state)&&(containerWidth=this.props.transitionDuration||defaultTransitionDuration,setTimeout(()=>{this.setIsInThrottle(!1),this.resetAutoplayInterval(),this.goToSlide(0,void 0,!!this.props.rewindWithAnimation)},containerWidth+this.props.autoPlaySpeed))}correctClonesPosition({domLoaded}){var childrenArr=React.Children.toArray(this.props.children);const{isReachingTheEnd,isReachingTheStart,nextSlide,nextPosition}=(0,utils_1.checkClonesPosition)(this.state,childrenArr,this.props);this.state.domLoaded&&domLoaded&&(isReachingTheEnd||isReachingTheStart)&&(this.isAnimationAllowed=!1,setTimeout(()=>{this.setState({transform:nextPosition,currentSlide:nextSlide})},this.props.transitionDuration||defaultTransitionDuration))}next(slidesHavePassed=0){const{afterChange,beforeChange}=this.props;if(!(0,utils_1.notEnoughChildren)(this.state)){var{nextSlides:slidesHavePassed,nextPosition}=(0,utils_1.populateNextSlides)(this.state,this.props,slidesHavePassed);const previousSlide=this.state.currentSlide;void 0!==slidesHavePassed&&void 0!==nextPosition&&("function"==typeof beforeChange&&beforeChange(slidesHavePassed,this.getState()),this.isAnimationAllowed=!0,this.props.shouldResetAutoplay&&this.resetAutoplayInterval(),this.setState({transform:nextPosition,currentSlide:slidesHavePassed},()=>{"function"==typeof afterChange&&setTimeout(()=>{afterChange(previousSlide,this.getState())},this.props.transitionDuration||defaultTransitionDuration)}))}}previous(slidesHavePassed=0){const{afterChange,beforeChange}=this.props;if(!(0,utils_1.notEnoughChildren)(this.state)){var{nextSlides:slidesHavePassed,nextPosition}=(0,utils_1.populatePreviousSlides)(this.state,this.props,slidesHavePassed);if(void 0!==slidesHavePassed&&void 0!==nextPosition){const previousSlide=this.state.currentSlide;"function"==typeof beforeChange&&beforeChange(slidesHavePassed,this.getState()),this.isAnimationAllowed=!0,this.props.shouldResetAutoplay&&this.resetAutoplayInterval(),this.setState({transform:nextPosition,currentSlide:slidesHavePassed},()=>{"function"==typeof afterChange&&setTimeout(()=>{afterChange(previousSlide,this.getState())},this.props.transitionDuration||defaultTransitionDuration)})}}}resetAutoplayInterval(){this.props.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=setInterval(this.next,this.props.autoPlaySpeed))}componentWillUnmount(){window.removeEventListener("resize",this.onResize),this.props.keyBoardControl&&window.removeEventListener("keyup",this.onKeyUp),this.props.autoPlay&&this.autoPlay&&(clearInterval(this.autoPlay),this.autoPlay=void 0),this.itemsToShowTimeout&&clearTimeout(this.itemsToShowTimeout)}resetMoveStatus(){this.onMove=!1,this.initialX=0,this.lastX=0,this.direction="",this.initialY=0}getCords({clientX,clientY}){return{clientX:(0,common_1.parsePosition)(this.props,clientX),clientY:(0,common_1.parsePosition)(this.props,clientY)}}handleDown(e){var clientY;!(0,types_1.isMouseMoveEvent)(e)&&!this.props.swipeable||(0,types_1.isMouseMoveEvent)(e)&&!this.props.draggable||this.isInThrottle||({clientX:e,clientY}=this.getCords((0,types_1.isMouseMoveEvent)(e)?e:e.touches[0]),this.onMove=!0,this.initialX=e,this.initialY=clientY,this.lastX=e,this.isAnimationAllowed=!1)}handleMove(e){var diffX,clientY,canContinue;!(0,types_1.isMouseMoveEvent)(e)&&!this.props.swipeable||(0,types_1.isMouseMoveEvent)(e)&&!this.props.draggable||(0,utils_1.notEnoughChildren)(this.state)||({clientX:e,clientY}=this.getCords((0,types_1.isMouseMoveEvent)(e)?e:e.touches[0]),diffX=this.initialX-e,clientY=this.initialY-clientY,this.onMove&&Math.abs(diffX)>Math.abs(clientY)&&({direction:diffX,nextPosition:clientY,canContinue}=(0,utils_1.populateSlidesOnMouseTouchMove)(this.state,this.props,this.initialX,this.lastX,e,this.transformPlaceHolder),diffX&&(this.direction=diffX,canContinue&&void 0!==clientY&&this.setTransformDirectly(clientY),console.log("canGoNext",canContinue)),this.lastX=e))}handleOut(e){this.props.autoPlay&&!this.autoPlay&&(this.autoPlay=setInterval(this.next,this.props.autoPlaySpeed));var shouldDisableOnMobile="touchend"===e.type&&!this.props.swipeable,e=("mouseleave"===e.type||"mouseup"===e.type)&&!this.props.draggable;if(!shouldDisableOnMobile&&!e&&this.onMove){if(this.setAnimationDirectly(!0),"right"===this.direction&&(this.initialX-this.lastX>=this.props.minimumTouchDrag?(shouldDisableOnMobile=Math.round((this.initialX-this.lastX)/this.state.itemWidth),this.next(shouldDisableOnMobile)):this.correctItemsPosition(this.state.itemWidth,!0,!0)),"left"===this.direction){const canGoNext=this.lastX-this.initialX>this.props.minimumTouchDrag;if(canGoNext){const slidesHavePassed=Math.round((this.lastX-this.initialX)/this.state.itemWidth);this.previous(slidesHavePassed)}else this.correctItemsPosition(this.state.itemWidth,!0,!0)}this.resetMoveStatus()}}isInViewport(el){var{top:el=0,left=0,bottom=0,right=0}=el.getBoundingClientRect();return 0<=el&&0<=left&&bottom<=(window.innerHeight||document.documentElement.clientHeight)&&right<=(window.innerWidth||document.documentElement.clientWidth)}isChildOfCarousel(el){return!!(el instanceof Element&&this.listRef&&this.listRef.current)&&this.listRef.current.contains(el)}onKeyUp(e){var{target,keyCode:e}=e;switch(e){case 37:if(this.isChildOfCarousel(target))return this.previous();break;case 39:if(this.isChildOfCarousel(target))return this.next();break;case 9:if(this.isChildOfCarousel(target)&&target instanceof HTMLInputElement&&!this.isInViewport(target))return this.next()}}handleEnter(e){(0,types_1.isMouseMoveEvent)(e)&&this.autoPlay&&this.props.autoPlay&&this.props.pauseOnHover&&(clearInterval(this.autoPlay),this.autoPlay=void 0)}goToSlide(slide,skipCallbacks,animationAllowed=!0){if(!this.isInThrottle){var itemWidth=this.state["itemWidth"];const{afterChange,beforeChange}=this.props,previousSlide=this.state.currentSlide;"function"!=typeof beforeChange||skipCallbacks&&("object"!=typeof skipCallbacks||skipCallbacks.skipBeforeChange)||beforeChange(slide,this.getState()),this.isAnimationAllowed=animationAllowed,this.props.shouldResetAutoplay&&this.resetAutoplayInterval(),this.setState({currentSlide:slide,transform:-itemWidth*slide},()=>{this.props.infinite&&this.correctClonesPosition({domLoaded:!0}),"function"!=typeof afterChange||skipCallbacks&&("object"!=typeof skipCallbacks||skipCallbacks.skipAfterChange)||setTimeout(()=>{afterChange(previousSlide,this.getState())},this.props.transitionDuration||defaultTransitionDuration)})}}getState(){return this.state}renderLeftArrow(disbaled){var{customLeftArrow,rtl}=this.props;return React.createElement(Arrows_1.LeftArrow,{customLeftArrow:customLeftArrow,getState:()=>this.getState(),previous:this.previous,disabled:disbaled,rtl:rtl})}renderRightArrow(disbaled){var{customRightArrow,rtl}=this.props;return React.createElement(Arrows_1.RightArrow,{customRightArrow:customRightArrow,getState:()=>this.getState(),next:this.next,disabled:disbaled,rtl:rtl})}renderButtonGroups(){var customButtonGroup=this.props["customButtonGroup"];return customButtonGroup?React.cloneElement(customButtonGroup,{previous:()=>this.previous(),next:()=>this.next(),goToSlide:(slideIndex,skipCallbacks)=>this.goToSlide(slideIndex,skipCallbacks),carouselState:this.getState()}):null}renderDotsList(){return React.createElement(Dots_1.default,{state:this.state,props:this.props,goToSlide:this.goToSlide,getState:()=>this.getState()})}renderCarouselItems(){let clones=[];var childrenArr;return this.props.infinite&&(childrenArr=React.Children.toArray(this.props.children),clones=(0,utils_1.getClones)(this.state.slidesToShow,childrenArr)),React.createElement(CarouselItems_1.default,{clones:clones,goToSlide:this.goToSlide,state:this.state,notEnoughChildren:(0,utils_1.notEnoughChildren)(this.state),props:this.props})}render(){const{deviceType,arrows,renderArrowsWhenDisabled,removeArrowOnDeviceType,infinite,containerClass,sliderClass,customTransition,additionalTransfrom,renderDotsOutside,renderButtonGroupOutside,className,rtl}=this.props;"production"!==process.env.NODE_ENV&&(0,utils_1.throwError)(this.state,this.props);var{shouldRenderOnSSR,shouldRenderAtAll}=(0,utils_1.getInitialState)(this.state,this.props),isLeftEndReach=(0,utils_1.isInLeftEnd)(this.state),isRightEndReach=(0,utils_1.isInRightEnd)(this.state),shouldShowArrows=arrows&&!(removeArrowOnDeviceType&&(deviceType&&-1<removeArrowOnDeviceType.indexOf(deviceType)||this.state.deviceType&&-1<removeArrowOnDeviceType.indexOf(this.state.deviceType)))&&!(0,utils_1.notEnoughChildren)(this.state)&&shouldRenderAtAll,isLeftEndReach=!infinite&&isLeftEndReach,isRightEndReach=!infinite&&isRightEndReach,currentTransform=(0,common_1.getTransform)(this.state,this.props);return React.createElement(React.Fragment,null,React.createElement("div",{className:`react-multi-carousel-list ${containerClass} `+className,dir:rtl?"rtl":"ltr",ref:this.containerRef},React.createElement("ul",{ref:this.listRef,className:"react-multi-carousel-track "+sliderClass,style:{transition:this.isAnimationAllowed?customTransition||defaultTransition:"none",overflow:shouldRenderOnSSR?"hidden":"unset",transform:`translate3d(${currentTransform+additionalTransfrom}px,0,0)`},onMouseMove:this.handleMove,onMouseDown:this.handleDown,onMouseUp:this.handleOut,onMouseEnter:this.handleEnter,onMouseLeave:this.handleOut,onTouchStart:this.handleDown,onTouchMove:this.handleMove,onTouchEnd:this.handleOut},this.renderCarouselItems()),shouldShowArrows&&(!isLeftEndReach||renderArrowsWhenDisabled)&&this.renderLeftArrow(isLeftEndReach),shouldShowArrows&&(!isRightEndReach||renderArrowsWhenDisabled)&&this.renderRightArrow(isRightEndReach),shouldRenderAtAll&&!renderButtonGroupOutside&&this.renderButtonGroups(),shouldRenderAtAll&&!renderDotsOutside&&this.renderDotsList()),shouldRenderAtAll&&renderDotsOutside&&this.renderDotsList(),shouldRenderAtAll&&renderButtonGroupOutside&&this.renderButtonGroups())}}Carousel.defaultProps={slidesToSlide:1,infinite:!1,draggable:!0,swipeable:!0,arrows:!0,renderArrowsWhenDisabled:!1,containerClass:"",sliderClass:"",itemClass:"",keyBoardControl:!0,autoPlaySpeed:3e3,showDots:!1,renderDotsOutside:!1,renderButtonGroupOutside:!1,minimumTouchDrag:80,className:"",dotListClass:"",focusOnSelect:!1,centerMode:!1,additionalTransfrom:0,pauseOnHover:!0,shouldResetAutoplay:!0,rewind:!1,rtl:!1,rewindWithAnimation:!1},exports.default=Carousel;