react-alice-carousel - npm Package Compare versions

Comparing version 2.8.0 to 2.9.0

lib/react-alice-carousel.d.ts

 import React from 'react';
 import { EventData } from 'vanilla-swipe';
+import Link, { type LinkProps } from './views/Link';
 import { AnimationType, AutoplayDirection, EventObject, EventType, Props, SlideTo, State } from './types';
 export * from './types';
+export { Link, type LinkProps };
 export default class AliceCarousel extends React.PureComponent<Props, State> {
@@ -6,0 +8,0 @@ static defaultProps: {

lib/react-alice-carousel.js

@@ -1,1 +0,1 @@
-"use strict";var __extends=function(){var n=function(t,e){return(n=Object.setPrototypeOf||({__proto__:[]}instanceof Array?function(t,e){t.__proto__=e}:function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}))(t,e)};return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}}(),__assign=function(){return(__assign=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},__createBinding=Object.create?function(t,e,i,n){void 0===n&&(n=i);var o=Object.getOwnPropertyDescriptor(e,i);o&&("get"in o?e.__esModule:!o.writable&&!o.configurable)||(o={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(t,n,o)}:function(t,e,i,n){t[n=void 0===n?i:n]=e[i]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var i in t)"default"!==i&&Object.prototype.hasOwnProperty.call(t,i)&&__createBinding(e,t,i);return __setModuleDefault(e,t),e},__exportStar=function(t,e){for(var i in t)"default"===i||Object.prototype.hasOwnProperty.call(e,i)||__createBinding(e,t,i)},__awaiter=function(t,a,r,l){return new(r=r||Promise)(function(i,e){function n(t){try{s(l.next(t))}catch(t){e(t)}}function o(t){try{s(l.throw(t))}catch(t){e(t)}}function s(t){var e;t.done?i(t.value):((e=t.value)instanceof r?e:new r(function(t){t(e)})).then(n,o)}s((l=l.apply(t,a||[])).next())})},__generator=function(n,o){var s,a,r,l={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},t={next:e(0),throw:e(1),return:e(2)};return"function"==typeof Symbol&&(t[Symbol.iterator]=function(){return this}),t;function e(i){return function(t){var e=[i,t];if(s)throw new TypeError("Generator is already executing.");for(;l;)try{if(s=1,a&&(r=2&e[0]?a.return:e[0]?a.throw||((r=a.return)&&r.call(a),0):a.next)&&!(r=r.call(a,e[1])).done)return r;switch(a=0,(e=r?[2&e[0],r.value]:e)[0]){case 0:case 1:r=e;break;case 4:return l.label++,{value:e[1],done:!1};case 5:l.label++,a=e[1],e=[0];continue;case 7:e=l.ops.pop(),l.trys.pop();continue;default:if(!(r=0<(r=l.trys).length&&r[r.length-1])&&(6===e[0]||2===e[0])){l=0;continue}if(3===e[0]&&(!r||e[1]>r[0]&&e[1]<r[3]))l.label=e[1];else if(6===e[0]&&l.label<r[1])l.label=r[1],r=e;else{if(!(r&&l.label<r[2])){r[2]&&l.ops.pop(),l.trys.pop();continue}l.label=r[2],l.ops.push(e)}}e=o.call(n,l)}catch(t){e=[6,t],a=0}finally{s=r=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}}},__importDefault=function(t){return t&&t.__esModule?t:{default:t}},react_1=(Object.defineProperty(exports,"__esModule",{value:!0}),__importDefault(require("react"))),vanilla_swipe_1=__importDefault(require("vanilla-swipe")),defaultProps_1=require("./defaultProps"),Views=__importStar(require("./views")),Utils=__importStar(require("./utils")),types_1=require("./types"),AliceCarousel=(__exportStar(require("./types"),exports),function(e){function t(t){var s=e.call(this,t)||this;return s.swipeListener=null,s._handleKeyboardEvents=function(t){switch(t.code){case"Space":return s.props.autoPlay&&s._handlePlayPauseToggle();case"ArrowLeft":return s.slidePrev(t);case"ArrowRight":return s.slideNext(t)}},s._handleBeforeSlideEnd=function(o){return __awaiter(s,void 0,void 0,function(){var e,i,n;return __generator(this,function(t){switch(t.label){case 0:return(i=this.state,n=i.activeIndex,e=i.itemsCount,i=i.fadeoutAnimationProcessing,Utils.shouldRecalculateSlideIndex(n,e))?(n=Utils.getUpdateSlidePositionIndex(n,e),[4,this._handleUpdateSlidePosition(n)]):[3,2];case 1:return t.sent(),[3,4];case 2:return i?[4,this.setState({fadeoutAnimationIndex:null,fadeoutAnimationPosition:null,fadeoutAnimationProcessing:!1})]:[3,4];case 3:t.sent(),t.label=4;case 4:return this._handleSlideChanged(o),[2]}})})},s._handleMouseEnter=function(){var t=s.props.autoPlayStrategy;Utils.shouldCancelAutoPlayOnHover(t)&&s.state.isAutoPlaying&&(s.isHovered=!0,s._handlePause())},s._handleMouseLeave=function(){s.state.isAutoPlaying&&(s.isHovered=!1,s._handlePlay())},s._handlePause=function(){s._clearAutoPlayTimeout()},s._handlePlayPauseToggle=function(){return __awaiter(s,void 0,void 0,function(){var e;return __generator(this,function(t){switch(t.label){case 0:return e=this.state.isAutoPlaying,this.hasUserAction=!0,[4,this.setState({isAutoPlaying:!e,isAutoPlayCanceledOnAction:!0})];case 1:return t.sent(),e?this._handlePause():this._handlePlay(),[2]}})})},s._setRootComponentRef=function(t){return s.rootElement=t},s._setStageComponentRef=function(t){return s.stageComponent=t},s._renderStageItem=function(t,e){var i=Utils.getRenderStageItemStyles(e,s.state),n=Utils.getRenderStageItemClasses(e,s.state);return react_1.default.createElement(Views.StageItem,{styles:i,className:n,key:"stage-item-".concat(e),item:t})},s._renderSlideInfo=function(){var t=s.props.renderSlideInfo,e=s.state,i=e.activeIndex,e=e.itemsCount;return react_1.default.createElement(Views.SlideInfo,{itemsCount:e,activeIndex:i,renderSlideInfo:t})},s.state=Utils.calculateInitialState(t,null),s.isHovered=!1,s.isAnimationDisabled=!1,s.isTouchMoveProcessStarted=!1,s.cancelTouchAnimations=!1,s.hasUserAction=!1,s.rootElement=null,s.rootComponentDimensions={},s.stageComponent=null,s.startTouchmovePosition=void 0,s.slideTo=s.slideTo.bind(s),s.slidePrev=s.slidePrev.bind(s),s.slideNext=s.slideNext.bind(s),s._handleTouchmove=s._handleTouchmove.bind(s),s._handleTouchend=s._handleTouchend.bind(s),s._handleDotClick=s._handleDotClick.bind(s),s._handleResize=s._handleResize.bind(s),t=Utils.debounce(s._handleResize,100),s._handleResizeDebounced=t[0],s._cancelResizeDebounced=t[1],s}return __extends(t,e),t.prototype.componentDidMount=function(){return __awaiter(this,void 0,void 0,function(){return __generator(this,function(t){switch(t.label){case 0:return[4,this._setInitialState()];case 1:return t.sent(),this._addEventListeners(),this._setupSwipeHandlers(),this.props.autoPlay&&this._handlePlay(),[2]}})})},t.prototype.componentDidUpdate=function(t){var e=this.props,i=e.activeIndex,n=e.animationDuration,o=e.autoWidth,s=e.children,a=e.infinite,r=e.items,l=e.paddingLeft,u=e.paddingRight,d=e.responsive,c=e.swipeExtraPadding,h=e.mouseTracking,p=e.swipeDelta,_=e.touchTracking,e=e.touchMoveDefaultEvents;s&&t.children!==s||t.autoWidth!==o||t.infinite!==a||t.items!==r||t.paddingLeft!==l||t.paddingRight!==u||t.responsive!==d||t.swipeExtraPadding!==c?this._updateComponent():(t.animationDuration!==n&&this.setState({animationDuration:n}),t.activeIndex!==i&&this.slideTo(i,types_1.EventType.UPDATE)),t.swipeDelta===p&&t.mouseTracking===h&&t.touchTracking===_&&t.touchMoveDefaultEvents===e||this._updateSwipeProps(),this.props.keyboardNavigation!==t.keyboardNavigation&&this._updateEventListeners()},t.prototype.componentWillUnmount=function(){this._cancelResizeDebounced(),this._cancelTimeoutAnimations(),this._removeEventListeners()},Object.defineProperty(t.prototype,"eventObject",{get:function(){var t=this.state,e=t.itemsInSlide,t=t.activeIndex,i=Utils.getSlideItemInfo(this.state),n=i.isNextSlideDisabled,i=i.isPrevSlideDisabled;return{item:t,slide:Utils.getActiveSlideIndex(n,this.state),itemsInSlide:e,isNextSlideDisabled:n,isPrevSlideDisabled:i,type:types_1.EventType.ACTION}},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"isFadeoutAnimationAllowed",{get:function(){var t=this.state.itemsInSlide,e=this.props,i=e.animationType,n=e.paddingLeft,o=e.paddingRight,e=e.autoWidth;return 1===t&&i===types_1.AnimationType.FADEOUT&&!(n||o||e)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"touchmovePosition",{get:function(){return void 0!==this.startTouchmovePosition?this.startTouchmovePosition:this.state.translate3d},enumerable:!1,configurable:!0}),t.prototype.slideTo=function(t,e){var i,n,o;void 0===t&&(t=0),this._handlePause(),this.isFadeoutAnimationAllowed?(i=Utils.getUpdateSlidePositionIndex(t,this.state.itemsCount),n=Utils.getFadeoutAnimationPosition(i,this.state),o=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:i,fadeoutAnimationIndex:o,fadeoutAnimationPosition:n,eventType:e})):this._handleSlideTo({activeIndex:t,eventType:e})},t.prototype.slidePrev=function(t){this._handlePause(),t&&t.isTrusted&&(this.hasUserAction=!0);var e,i,t=this.state.activeIndex-1;this.isFadeoutAnimationAllowed?(e=-this.state.stageWidth,i=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:t,fadeoutAnimationIndex:i,fadeoutAnimationPosition:e})):this._handleSlideTo({activeIndex:t})},t.prototype.slideNext=function(t){this._handlePause(),t&&t.isTrusted&&(this.hasUserAction=!0);var e,i,t=this.state.activeIndex+1;this.isFadeoutAnimationAllowed?(e=this.state.stageWidth,i=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:t,fadeoutAnimationIndex:i,fadeoutAnimationPosition:e})):this._handleSlideTo({activeIndex:t})},t.prototype._addEventListeners=function(){window.addEventListener("resize",this._handleResizeDebounced),this.props.keyboardNavigation&&window.addEventListener("keyup",this._handleKeyboardEvents)},t.prototype._removeEventListeners=function(){this.swipeListener&&this.swipeListener.destroy(),window.removeEventListener("resize",this._handleResizeDebounced),window.removeEventListener("keyup",this._handleKeyboardEvents)},t.prototype._updateEventListeners=function(){this.props.keyboardNavigation?window.addEventListener("keyup",this._handleKeyboardEvents):window.removeEventListener("keyup",this._handleKeyboardEvents)},t.prototype._handleResize=function(o){return __awaiter(this,void 0,void 0,function(){var e,i,n;return __generator(this,function(t){switch(t.label){case 0:return(i=this.props.onResizeEvent,n=Utils.getElementDimensions(this.rootElement),(i||Utils.shouldHandleResizeEvent)(o,this.rootComponentDimensions,n))?(this._cancelTimeoutAnimations(),this.rootComponentDimensions=n,i=this.state,n=i.itemsCount,e=i.isAutoPlaying,i=Utils.getUpdateSlidePositionIndex(this.state.activeIndex,n),n=Utils.calculateInitialState(__assign(__assign({},this.props),{activeIndex:i}),this.stageComponent),i=Utils.getTranslate3dProperty(n.activeIndex,n),n=__assign(__assign({},n),{translate3d:i,isAutoPlaying:e}),Utils.animate(this.stageComponent,{position:-i}),[4,this.setState(n)]):[3,2];case 1:t.sent(),this._handleResized(),this.isAnimationDisabled=!1,e&&this._handlePlay(),t.label=2;case 2:return[2]}})})},t.prototype._handleTouchmove=function(t,e){var i=e.absY,n=e.absX,o=e.deltaX,e=this.props.swipeDelta,s=this.state,a=s.swipeShiftValue,r=s.swipeLimitMin,l=s.swipeLimitMax,u=s.infinite,s=s.fadeoutAnimationProcessing;if(this.hasUserAction=!0,!(s||!this.isTouchMoveProcessStarted&&Utils.isVerticalTouchmoveDetected(n,i,e))){this.isTouchMoveProcessStarted||(this._cancelTimeoutAnimations(),this._setTouchmovePosition(),this.isAnimationDisabled=!0,this.isTouchMoveProcessStarted=!0,this._handleSlideChange());var d=Utils.getTouchmoveTranslatePosition(o,this.touchmovePosition);if(!1===u)return r<d||d<-l?void 0:void Utils.animate(this.stageComponent,{position:d});if(Utils.shouldRecalculateSwipePosition(d,r,l))try{!function t(){Utils.getIsLeftDirection(o)?d+=a:d+=-a;Utils.shouldRecalculateSwipePosition(d,r,l)&&t()}()}catch(t){Utils.debug(t)}Utils.animate(this.stageComponent,{position:d})}},t.prototype._handleTouchend=function(t,e){var i,n,o,e=e.deltaX;this._clearTouchmovePosition(),this.isTouchMoveProcessStarted&&(this.isTouchMoveProcessStarted=!1,i=this.state.animationDuration,n=this.props.animationEasingFunction,o=Utils.getTranslateXProperty(this.stageComponent),e=Utils.getSwipeTouchendPosition(this.state,e,o),Utils.animate(this.stageComponent,{position:e,animationDuration:i,animationEasingFunction:n}),this._handleBeforeTouchEnd(e))},t.prototype._handleBeforeTouchEnd=function(s){var t=this,e=this.state.animationDuration;this.touchEndTimeoutId=window.setTimeout(function(){return __awaiter(t,void 0,void 0,function(){var e,i,n,o=this;return __generator(this,function(t){switch(t.label){case 0:return e=Utils.getSwipeTouchendIndex(s,this.state),i=Utils.getTranslate3dProperty(e,this.state),Utils.animate(this.stageComponent,{position:-i}),n=Utils.getTransitionProperty(),[4,this.setState({activeIndex:e,translate3d:i,transition:n})];case 1:return t.sent(),requestAnimationFrame(function(){return o._handleSlideChanged()}),[2]}})})},e)},t.prototype._handleSlideTo=function(t){var e=t.activeIndex,a=void 0===e?0:e,e=t.fadeoutAnimationIndex,r=void 0===e?null:e,e=t.fadeoutAnimationPosition,l=void 0===e?null:e,u=t.eventType;return __awaiter(this,void 0,void 0,function(){var e,i,n,o,s=this;return __generator(this,function(t){switch(t.label){case 0:return(i=this.props,n=i.infinite,i=i.animationEasingFunction,e=this.state,o=e.itemsCount,e=e.animationDuration,this.isAnimationDisabled||this.state.activeIndex===a||!n&&Utils.shouldCancelSlideAnimation(a,o))?[2]:(this.isAnimationDisabled=!0,this._cancelTimeoutAnimations(),this._handleSlideChange(u),n=!1,o=Utils.getTranslate3dProperty(a,this.state),i=null!==r&&null!==l?(n=!0,Utils.getTransitionProperty()):Utils.getTransitionProperty({animationDuration:e,animationEasingFunction:i}),[4,this.setState({activeIndex:a,transition:i,translate3d:o,animationDuration:e,fadeoutAnimationIndex:r,fadeoutAnimationPosition:l,fadeoutAnimationProcessing:n})]);case 1:return t.sent(),this.slideEndTimeoutId=window.setTimeout(function(){return s._handleBeforeSlideEnd(u)},e),[2]}})})},t.prototype._handleUpdateSlidePosition=function(o){return __awaiter(this,void 0,void 0,function(){var e,i,n;return __generator(this,function(t){switch(t.label){case 0:return e=this.state.animationDuration,i=Utils.getTranslate3dProperty(o,this.state),n=Utils.getTransitionProperty({animationDuration:0}),[4,this.setState({activeIndex:o,translate3d:i,transition:n,animationDuration:e,fadeoutAnimationIndex:null,fadeoutAnimationPosition:null,fadeoutAnimationProcessing:!1})];case 1:return t.sent(),[2]}})})},t.prototype._handleUpdated=function(){this.props.onUpdated&&this.props.onUpdated(__assign(__assign({},this.eventObject),{type:types_1.EventType.UPDATE}))},t.prototype._handleResized=function(){this.props.onResized&&this.props.onResized(__assign(__assign({},this.eventObject),{type:types_1.EventType.RESIZE}))},t.prototype._handleSlideChange=function(t){this.props.onSlideChange&&(t=t?__assign(__assign({},this.eventObject),{type:t}):this.eventObject,this.props.onSlideChange(t))},t.prototype._handleSlideChanged=function(s){return __awaiter(this,void 0,void 0,function(){var e,i,n,o;return __generator(this,function(t){switch(t.label){case 0:return(i=this.state,e=i.isAutoPlaying,i=i.isAutoPlayCanceledOnAction,n=this.props,o=n.autoPlayStrategy,n=n.onSlideChanged,Utils.shouldCancelAutoPlayOnAction(o)&&this.hasUserAction&&!i)?[4,this.setState({isAutoPlayCanceledOnAction:!0,isAutoPlaying:!1})]:[3,2];case 1:return t.sent(),[3,3];case 2:e&&this._handlePlay(),t.label=3;case 3:return this.isAnimationDisabled=!1,n&&(o=s?__assign(__assign({},this.eventObject),{type:s}):this.eventObject,n(o)),s===types_1.EventType.UPDATE&&this._handleUpdated(),[2]}})})},t.prototype._handleDotClick=function(t){this.hasUserAction=!0,this.slideTo(t)},t.prototype._handlePlay=function(){this._setAutoPlayInterval()},t.prototype._cancelTimeoutAnimations=function(){this._clearAutoPlayTimeout(),this._clearSlideEndTimeout(),this.clearTouchendTimeout()},t.prototype._clearAutoPlayTimeout=function(){window.clearTimeout(this.autoPlayTimeoutId),this.autoPlayTimeoutId=void 0},t.prototype._clearSlideEndTimeout=function(){clearTimeout(this.slideEndTimeoutId),this.slideEndTimeoutId=void 0},t.prototype.clearTouchendTimeout=function(){clearTimeout(this.touchEndTimeoutId),this.touchEndTimeoutId=void 0},t.prototype._clearTouchmovePosition=function(){this.startTouchmovePosition=void 0},t.prototype._setTouchmovePosition=function(){var t=Utils.getTranslateXProperty(this.stageComponent);this.startTouchmovePosition=-t},t.prototype._setInitialState=function(){return __awaiter(this,void 0,void 0,function(){var e;return __generator(this,function(t){switch(t.label){case 0:return e=Utils.calculateInitialState(this.props,this.stageComponent),this.rootComponentDimensions=Utils.getElementDimensions(this.rootElement),[4,this.setState(e)];case 1:return t.sent(),this.props.onInitialized&&this.props.onInitialized(__assign(__assign({},this.eventObject),{type:types_1.EventType.INIT})),[2]}})})},t.prototype._setAutoPlayInterval=function(){var t=this,e=this.props,i=e.autoPlayDirection,e=e.autoPlayInterval;this.autoPlayTimeoutId=window.setTimeout(function(){t.isHovered||(i===types_1.AutoplayDirection.RTL?t.slidePrev():t.slideNext())},e)},t.prototype._setupSwipeHandlers=function(){this.swipeListener=new vanilla_swipe_1.default({element:this.rootElement,delta:this.props.swipeDelta,onSwiping:this._handleTouchmove,onSwiped:this._handleTouchend,rotationAngle:5,mouseTrackingEnabled:this.props.mouseTracking,touchTrackingEnabled:this.props.touchTracking,preventDefaultTouchmoveEvent:!this.props.touchMoveDefaultEvents,preventTrackingOnMouseleave:!0}),this.swipeListener.init()},t.prototype._updateComponent=function(){var t=this,e=(this.props.syncStateOnPropsUpdate?this.state:this.props).activeIndex,i=__assign(__assign({},this.props),{activeIndex:e});this._cancelTimeoutAnimations(),this.isAnimationDisabled=!1,this.state.isAutoPlaying&&this._handlePlay(),this.setState({clones:Utils.createClones(i)}),requestAnimationFrame(function(){t.setState(Utils.calculateInitialState(i,t.stageComponent),function(){return t._handleUpdated()})})},t.prototype._updateSwipeProps=function(){this.swipeListener&&this.swipeListener.update({delta:this.props.swipeDelta,mouseTrackingEnabled:this.props.mouseTracking,touchTrackingEnabled:this.props.touchTracking,preventDefaultTouchmoveEvent:!this.props.touchMoveDefaultEvents})},t.prototype._renderDotsNavigation=function(){var t=this.props,e=t.renderDotsItem,t=t.controlsStrategy;return react_1.default.createElement(Views.DotsNavigation,{state:this.state,onClick:this._handleDotClick,renderDotsItem:e,controlsStrategy:t})},t.prototype._renderPrevButton=function(){var t=this.props.renderPrevButton,e=Utils.getSlideItemInfo(this.state).isPrevSlideDisabled;return react_1.default.createElement(Views.PrevNextButton,{name:"prev",onClick:this.slidePrev,isDisabled:e,renderPrevButton:t})},t.prototype._renderNextButton=function(){var t=this.props.renderNextButton,e=Utils.getSlideItemInfo(this.state).isNextSlideDisabled;return react_1.default.createElement(Views.PrevNextButton,{name:"next",onClick:this.slideNext,isDisabled:e,renderNextButton:t})},t.prototype._renderPlayPauseButton=function(){var t=this.props.renderPlayPauseButton,e=this.state.isAutoPlaying;return react_1.default.createElement(Views.PlayPauseButton,{isPlaying:e,onClick:this._handlePlayPauseToggle,renderPlayPauseButton:t})},t.prototype.render=function(){var t=this.state,e=t.translate3d,i=t.clones,n=t.transition,t=t.canUseDom,o=Utils.shouldDisableDots(this.props,this.state),s=Utils.shouldDisableButtons(this.props,this.state),a=Utils.getRenderWrapperStyles(this.props,this.state,this.stageComponent),e=Utils.getRenderStageStyles({translate3d:e},{transition:n}),n=this.props.ssrSilentMode||t?"":types_1.Modifiers.SSR,t=Utils.concatClassnames(types_1.Classnames.ROOT,n);return react_1.default.createElement("div",{className:t},react_1.default.createElement("div",{ref:this._setRootComponentRef},react_1.default.createElement("div",{style:a,className:types_1.Classnames.WRAPPER,onMouseEnter:this._handleMouseEnter,onMouseLeave:this._handleMouseLeave},react_1.default.createElement("ul",{style:e,className:types_1.Classnames.STAGE,ref:this._setStageComponentRef},i.map(this._renderStageItem)))),o?null:this._renderDotsNavigation(),s?null:this._renderPrevButton(),s?null:this._renderNextButton(),this.props.disableSlideInfo?null:this._renderSlideInfo(),this.props.autoPlayControls?this._renderPlayPauseButton():null)},t.defaultProps=defaultProps_1.defaultProps,t}(react_1.default.PureComponent));exports.default=AliceCarousel;
+"use strict";var __extends=function(){var n=function(t,e){return(n=Object.setPrototypeOf||({__proto__:[]}instanceof Array?function(t,e){t.__proto__=e}:function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}))(t,e)};return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}}(),__assign=function(){return(__assign=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)},__createBinding=Object.create?function(t,e,i,n){void 0===n&&(n=i);var o=Object.getOwnPropertyDescriptor(e,i);o&&("get"in o?e.__esModule:!o.writable&&!o.configurable)||(o={enumerable:!0,get:function(){return e[i]}}),Object.defineProperty(t,n,o)}:function(t,e,i,n){t[n=void 0===n?i:n]=e[i]},__setModuleDefault=Object.create?function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}:function(t,e){t.default=e},__importStar=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var i in t)"default"!==i&&Object.prototype.hasOwnProperty.call(t,i)&&__createBinding(e,t,i);return __setModuleDefault(e,t),e},__exportStar=function(t,e){for(var i in t)"default"===i||Object.prototype.hasOwnProperty.call(e,i)||__createBinding(e,t,i)},__awaiter=function(t,a,r,l){return new(r=r||Promise)(function(i,e){function n(t){try{s(l.next(t))}catch(t){e(t)}}function o(t){try{s(l.throw(t))}catch(t){e(t)}}function s(t){var e;t.done?i(t.value):((e=t.value)instanceof r?e:new r(function(t){t(e)})).then(n,o)}s((l=l.apply(t,a||[])).next())})},__generator=function(n,o){var s,a,r,l={label:0,sent:function(){if(1&r[0])throw r[1];return r[1]},trys:[],ops:[]},t={next:e(0),throw:e(1),return:e(2)};return"function"==typeof Symbol&&(t[Symbol.iterator]=function(){return this}),t;function e(i){return function(t){var e=[i,t];if(s)throw new TypeError("Generator is already executing.");for(;l;)try{if(s=1,a&&(r=2&e[0]?a.return:e[0]?a.throw||((r=a.return)&&r.call(a),0):a.next)&&!(r=r.call(a,e[1])).done)return r;switch(a=0,(e=r?[2&e[0],r.value]:e)[0]){case 0:case 1:r=e;break;case 4:return l.label++,{value:e[1],done:!1};case 5:l.label++,a=e[1],e=[0];continue;case 7:e=l.ops.pop(),l.trys.pop();continue;default:if(!(r=0<(r=l.trys).length&&r[r.length-1])&&(6===e[0]||2===e[0])){l=0;continue}if(3===e[0]&&(!r||e[1]>r[0]&&e[1]<r[3]))l.label=e[1];else if(6===e[0]&&l.label<r[1])l.label=r[1],r=e;else{if(!(r&&l.label<r[2])){r[2]&&l.ops.pop(),l.trys.pop();continue}l.label=r[2],l.ops.push(e)}}e=o.call(n,l)}catch(t){e=[6,t],a=0}finally{s=r=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}}},__importDefault=function(t){return t&&t.__esModule?t:{default:t}},react_1=(Object.defineProperty(exports,"__esModule",{value:!0}),exports.Link=void 0,__importDefault(require("react"))),vanilla_swipe_1=__importDefault(require("vanilla-swipe")),defaultProps_1=require("./defaultProps"),Link_1=__importDefault(require("./views/Link")),Views=(exports.Link=Link_1.default,__importStar(require("./views"))),Utils=__importStar(require("./utils")),types_1=require("./types"),AliceCarousel=(__exportStar(require("./types"),exports),function(e){function t(t){var s=e.call(this,t)||this;return s.swipeListener=null,s._handleKeyboardEvents=function(t){switch(t.code){case"Space":return s.props.autoPlay&&s._handlePlayPauseToggle();case"ArrowLeft":return s.slidePrev(t);case"ArrowRight":return s.slideNext(t)}},s._handleBeforeSlideEnd=function(o){return __awaiter(s,void 0,void 0,function(){var e,i,n;return __generator(this,function(t){switch(t.label){case 0:return(i=this.state,n=i.activeIndex,e=i.itemsCount,i=i.fadeoutAnimationProcessing,Utils.shouldRecalculateSlideIndex(n,e))?(n=Utils.getUpdateSlidePositionIndex(n,e),[4,this._handleUpdateSlidePosition(n)]):[3,2];case 1:return t.sent(),[3,4];case 2:return i?[4,this.setState({fadeoutAnimationIndex:null,fadeoutAnimationPosition:null,fadeoutAnimationProcessing:!1})]:[3,4];case 3:t.sent(),t.label=4;case 4:return this._handleSlideChanged(o),[2]}})})},s._handleMouseEnter=function(){var t=s.props.autoPlayStrategy;Utils.shouldCancelAutoPlayOnHover(t)&&s.state.isAutoPlaying&&(s.isHovered=!0,s._handlePause())},s._handleMouseLeave=function(){s.state.isAutoPlaying&&(s.isHovered=!1,s._handlePlay())},s._handlePause=function(){s._clearAutoPlayTimeout()},s._handlePlayPauseToggle=function(){return __awaiter(s,void 0,void 0,function(){var e;return __generator(this,function(t){switch(t.label){case 0:return e=this.state.isAutoPlaying,this.hasUserAction=!0,[4,this.setState({isAutoPlaying:!e,isAutoPlayCanceledOnAction:!0})];case 1:return t.sent(),e?this._handlePause():this._handlePlay(),[2]}})})},s._setRootComponentRef=function(t){return s.rootElement=t},s._setStageComponentRef=function(t){return s.stageComponent=t},s._renderStageItem=function(t,e){var i=Utils.getRenderStageItemStyles(e,s.state),n=Utils.getRenderStageItemClasses(e,s.state);return react_1.default.createElement(Views.StageItem,{styles:i,className:n,key:"stage-item-".concat(e),item:t})},s._renderSlideInfo=function(){var t=s.props.renderSlideInfo,e=s.state,i=e.activeIndex,e=e.itemsCount;return react_1.default.createElement(Views.SlideInfo,{itemsCount:e,activeIndex:i,renderSlideInfo:t})},s.state=Utils.calculateInitialState(t,null),s.isHovered=!1,s.isAnimationDisabled=!1,s.isTouchMoveProcessStarted=!1,s.cancelTouchAnimations=!1,s.hasUserAction=!1,s.rootElement=null,s.rootComponentDimensions={},s.stageComponent=null,s.startTouchmovePosition=void 0,s.slideTo=s.slideTo.bind(s),s.slidePrev=s.slidePrev.bind(s),s.slideNext=s.slideNext.bind(s),s._handleTouchmove=s._handleTouchmove.bind(s),s._handleTouchend=s._handleTouchend.bind(s),s._handleDotClick=s._handleDotClick.bind(s),s._handleResize=s._handleResize.bind(s),t=Utils.debounce(s._handleResize,100),s._handleResizeDebounced=t[0],s._cancelResizeDebounced=t[1],s}return __extends(t,e),t.prototype.componentDidMount=function(){return __awaiter(this,void 0,void 0,function(){return __generator(this,function(t){switch(t.label){case 0:return[4,this._setInitialState()];case 1:return t.sent(),this._addEventListeners(),this._setupSwipeHandlers(),this.props.autoPlay&&this._handlePlay(),[2]}})})},t.prototype.componentDidUpdate=function(t){var e=this.props,i=e.activeIndex,n=e.animationDuration,o=e.autoWidth,s=e.children,a=e.infinite,r=e.items,l=e.paddingLeft,u=e.paddingRight,d=e.responsive,c=e.swipeExtraPadding,h=e.mouseTracking,p=e.swipeDelta,_=e.touchTracking,e=e.touchMoveDefaultEvents;s&&t.children!==s||t.autoWidth!==o||t.infinite!==a||t.items!==r||t.paddingLeft!==l||t.paddingRight!==u||t.responsive!==d||t.swipeExtraPadding!==c?this._updateComponent():(t.animationDuration!==n&&this.setState({animationDuration:n}),t.activeIndex!==i&&this.slideTo(i,types_1.EventType.UPDATE)),t.swipeDelta===p&&t.mouseTracking===h&&t.touchTracking===_&&t.touchMoveDefaultEvents===e||this._updateSwipeProps(),this.props.keyboardNavigation!==t.keyboardNavigation&&this._updateEventListeners()},t.prototype.componentWillUnmount=function(){this._cancelResizeDebounced(),this._cancelTimeoutAnimations(),this._removeEventListeners()},Object.defineProperty(t.prototype,"eventObject",{get:function(){var t=this.state,e=t.itemsInSlide,t=t.activeIndex,i=Utils.getSlideItemInfo(this.state),n=i.isNextSlideDisabled,i=i.isPrevSlideDisabled;return{item:t,slide:Utils.getActiveSlideIndex(n,this.state),itemsInSlide:e,isNextSlideDisabled:n,isPrevSlideDisabled:i,type:types_1.EventType.ACTION}},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"isFadeoutAnimationAllowed",{get:function(){var t=this.state.itemsInSlide,e=this.props,i=e.animationType,n=e.paddingLeft,o=e.paddingRight,e=e.autoWidth;return 1===t&&i===types_1.AnimationType.FADEOUT&&!(n||o||e)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"touchmovePosition",{get:function(){return void 0!==this.startTouchmovePosition?this.startTouchmovePosition:this.state.translate3d},enumerable:!1,configurable:!0}),t.prototype.slideTo=function(t,e){var i,n,o;void 0===t&&(t=0),this._handlePause(),this.isFadeoutAnimationAllowed?(i=Utils.getUpdateSlidePositionIndex(t,this.state.itemsCount),n=Utils.getFadeoutAnimationPosition(i,this.state),o=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:i,fadeoutAnimationIndex:o,fadeoutAnimationPosition:n,eventType:e})):this._handleSlideTo({activeIndex:t,eventType:e})},t.prototype.slidePrev=function(t){this._handlePause(),t&&t.isTrusted&&(this.hasUserAction=!0);var e,i,t=this.state.activeIndex-1;this.isFadeoutAnimationAllowed?(e=-this.state.stageWidth,i=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:t,fadeoutAnimationIndex:i,fadeoutAnimationPosition:e})):this._handleSlideTo({activeIndex:t})},t.prototype.slideNext=function(t){this._handlePause(),t&&t.isTrusted&&(this.hasUserAction=!0);var e,i,t=this.state.activeIndex+1;this.isFadeoutAnimationAllowed?(e=this.state.stageWidth,i=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:t,fadeoutAnimationIndex:i,fadeoutAnimationPosition:e})):this._handleSlideTo({activeIndex:t})},t.prototype._addEventListeners=function(){window.addEventListener("resize",this._handleResizeDebounced),this.props.keyboardNavigation&&window.addEventListener("keyup",this._handleKeyboardEvents)},t.prototype._removeEventListeners=function(){this.swipeListener&&this.swipeListener.destroy(),window.removeEventListener("resize",this._handleResizeDebounced),window.removeEventListener("keyup",this._handleKeyboardEvents)},t.prototype._updateEventListeners=function(){this.props.keyboardNavigation?window.addEventListener("keyup",this._handleKeyboardEvents):window.removeEventListener("keyup",this._handleKeyboardEvents)},t.prototype._handleResize=function(o){return __awaiter(this,void 0,void 0,function(){var e,i,n;return __generator(this,function(t){switch(t.label){case 0:return(i=this.props.onResizeEvent,n=Utils.getElementDimensions(this.rootElement),(i||Utils.shouldHandleResizeEvent)(o,this.rootComponentDimensions,n))?(this._cancelTimeoutAnimations(),this.rootComponentDimensions=n,i=this.state,n=i.itemsCount,e=i.isAutoPlaying,i=Utils.getUpdateSlidePositionIndex(this.state.activeIndex,n),n=Utils.calculateInitialState(__assign(__assign({},this.props),{activeIndex:i}),this.stageComponent),i=Utils.getTranslate3dProperty(n.activeIndex,n),n=__assign(__assign({},n),{translate3d:i,isAutoPlaying:e}),Utils.animate(this.stageComponent,{position:-i}),[4,this.setState(n)]):[3,2];case 1:t.sent(),this._handleResized(),this.isAnimationDisabled=!1,e&&this._handlePlay(),t.label=2;case 2:return[2]}})})},t.prototype._handleTouchmove=function(t,e){var i=e.absY,n=e.absX,o=e.deltaX,e=this.props.swipeDelta,s=this.state,a=s.swipeShiftValue,r=s.swipeLimitMin,l=s.swipeLimitMax,u=s.infinite,s=s.fadeoutAnimationProcessing;if(this.hasUserAction=!0,!(s||!this.isTouchMoveProcessStarted&&Utils.isVerticalTouchmoveDetected(n,i,e))){this.isTouchMoveProcessStarted||(this._cancelTimeoutAnimations(),this._setTouchmovePosition(),this.isAnimationDisabled=!0,this.isTouchMoveProcessStarted=!0,this._handleSlideChange());var d=Utils.getTouchmoveTranslatePosition(o,this.touchmovePosition);if(!1===u)return r<d||d<-l?void 0:void Utils.animate(this.stageComponent,{position:d});if(Utils.shouldRecalculateSwipePosition(d,r,l))try{!function t(){Utils.getIsLeftDirection(o)?d+=a:d+=-a;Utils.shouldRecalculateSwipePosition(d,r,l)&&t()}()}catch(t){Utils.debug(t)}Utils.animate(this.stageComponent,{position:d})}},t.prototype._handleTouchend=function(t,e){var i,n,o,e=e.deltaX;this._clearTouchmovePosition(),this.isTouchMoveProcessStarted&&(this.isTouchMoveProcessStarted=!1,i=this.state.animationDuration,n=this.props.animationEasingFunction,o=Utils.getTranslateXProperty(this.stageComponent),e=Utils.getSwipeTouchendPosition(this.state,e,o),Utils.animate(this.stageComponent,{position:e,animationDuration:i,animationEasingFunction:n}),this._handleBeforeTouchEnd(e))},t.prototype._handleBeforeTouchEnd=function(s){var t=this,e=this.state.animationDuration;this.touchEndTimeoutId=window.setTimeout(function(){return __awaiter(t,void 0,void 0,function(){var e,i,n,o=this;return __generator(this,function(t){switch(t.label){case 0:return e=Utils.getSwipeTouchendIndex(s,this.state),i=Utils.getTranslate3dProperty(e,this.state),Utils.animate(this.stageComponent,{position:-i}),n=Utils.getTransitionProperty(),[4,this.setState({activeIndex:e,translate3d:i,transition:n})];case 1:return t.sent(),requestAnimationFrame(function(){return o._handleSlideChanged()}),[2]}})})},e)},t.prototype._handleSlideTo=function(t){var e=t.activeIndex,a=void 0===e?0:e,e=t.fadeoutAnimationIndex,r=void 0===e?null:e,e=t.fadeoutAnimationPosition,l=void 0===e?null:e,u=t.eventType;return __awaiter(this,void 0,void 0,function(){var e,i,n,o,s=this;return __generator(this,function(t){switch(t.label){case 0:return(i=this.props,n=i.infinite,i=i.animationEasingFunction,e=this.state,o=e.itemsCount,e=e.animationDuration,this.isAnimationDisabled||this.state.activeIndex===a||!n&&Utils.shouldCancelSlideAnimation(a,o))?[2]:(this.isAnimationDisabled=!0,this._cancelTimeoutAnimations(),this._handleSlideChange(u),n=!1,o=Utils.getTranslate3dProperty(a,this.state),i=null!==r&&null!==l?(n=!0,Utils.getTransitionProperty()):Utils.getTransitionProperty({animationDuration:e,animationEasingFunction:i}),[4,this.setState({activeIndex:a,transition:i,translate3d:o,animationDuration:e,fadeoutAnimationIndex:r,fadeoutAnimationPosition:l,fadeoutAnimationProcessing:n})]);case 1:return t.sent(),this.slideEndTimeoutId=window.setTimeout(function(){return s._handleBeforeSlideEnd(u)},e),[2]}})})},t.prototype._handleUpdateSlidePosition=function(o){return __awaiter(this,void 0,void 0,function(){var e,i,n;return __generator(this,function(t){switch(t.label){case 0:return e=this.state.animationDuration,i=Utils.getTranslate3dProperty(o,this.state),n=Utils.getTransitionProperty({animationDuration:0}),[4,this.setState({activeIndex:o,translate3d:i,transition:n,animationDuration:e,fadeoutAnimationIndex:null,fadeoutAnimationPosition:null,fadeoutAnimationProcessing:!1})];case 1:return t.sent(),[2]}})})},t.prototype._handleUpdated=function(){this.props.onUpdated&&this.props.onUpdated(__assign(__assign({},this.eventObject),{type:types_1.EventType.UPDATE}))},t.prototype._handleResized=function(){this.props.onResized&&this.props.onResized(__assign(__assign({},this.eventObject),{type:types_1.EventType.RESIZE}))},t.prototype._handleSlideChange=function(t){this.props.onSlideChange&&(t=t?__assign(__assign({},this.eventObject),{type:t}):this.eventObject,this.props.onSlideChange(t))},t.prototype._handleSlideChanged=function(s){return __awaiter(this,void 0,void 0,function(){var e,i,n,o;return __generator(this,function(t){switch(t.label){case 0:return(i=this.state,e=i.isAutoPlaying,i=i.isAutoPlayCanceledOnAction,n=this.props,o=n.autoPlayStrategy,n=n.onSlideChanged,Utils.shouldCancelAutoPlayOnAction(o)&&this.hasUserAction&&!i)?[4,this.setState({isAutoPlayCanceledOnAction:!0,isAutoPlaying:!1})]:[3,2];case 1:return t.sent(),[3,3];case 2:e&&this._handlePlay(),t.label=3;case 3:return this.isAnimationDisabled=!1,n&&(o=s?__assign(__assign({},this.eventObject),{type:s}):this.eventObject,n(o)),s===types_1.EventType.UPDATE&&this._handleUpdated(),[2]}})})},t.prototype._handleDotClick=function(t){this.hasUserAction=!0,this.slideTo(t)},t.prototype._handlePlay=function(){this._setAutoPlayInterval()},t.prototype._cancelTimeoutAnimations=function(){this._clearAutoPlayTimeout(),this._clearSlideEndTimeout(),this.clearTouchendTimeout()},t.prototype._clearAutoPlayTimeout=function(){window.clearTimeout(this.autoPlayTimeoutId),this.autoPlayTimeoutId=void 0},t.prototype._clearSlideEndTimeout=function(){clearTimeout(this.slideEndTimeoutId),this.slideEndTimeoutId=void 0},t.prototype.clearTouchendTimeout=function(){clearTimeout(this.touchEndTimeoutId),this.touchEndTimeoutId=void 0},t.prototype._clearTouchmovePosition=function(){this.startTouchmovePosition=void 0},t.prototype._setTouchmovePosition=function(){var t=Utils.getTranslateXProperty(this.stageComponent);this.startTouchmovePosition=-t},t.prototype._setInitialState=function(){return __awaiter(this,void 0,void 0,function(){var e;return __generator(this,function(t){switch(t.label){case 0:return e=Utils.calculateInitialState(this.props,this.stageComponent),this.rootComponentDimensions=Utils.getElementDimensions(this.rootElement),[4,this.setState(e)];case 1:return t.sent(),this.props.onInitialized&&this.props.onInitialized(__assign(__assign({},this.eventObject),{type:types_1.EventType.INIT})),[2]}})})},t.prototype._setAutoPlayInterval=function(){var t=this,e=this.props,i=e.autoPlayDirection,e=e.autoPlayInterval;this.autoPlayTimeoutId=window.setTimeout(function(){t.isHovered||(i===types_1.AutoplayDirection.RTL?t.slidePrev():t.slideNext())},e)},t.prototype._setupSwipeHandlers=function(){this.swipeListener=new vanilla_swipe_1.default({element:this.rootElement,delta:this.props.swipeDelta,onSwiping:this._handleTouchmove,onSwiped:this._handleTouchend,rotationAngle:5,mouseTrackingEnabled:this.props.mouseTracking,touchTrackingEnabled:this.props.touchTracking,preventDefaultTouchmoveEvent:!this.props.touchMoveDefaultEvents,preventTrackingOnMouseleave:!0}),this.swipeListener.init()},t.prototype._updateComponent=function(){var t=this,e=(this.props.syncStateOnPropsUpdate?this.state:this.props).activeIndex,i=__assign(__assign({},this.props),{activeIndex:e});this._cancelTimeoutAnimations(),this.isAnimationDisabled=!1,this.state.isAutoPlaying&&this._handlePlay(),this.setState({clones:Utils.createClones(i)}),requestAnimationFrame(function(){t.setState(Utils.calculateInitialState(i,t.stageComponent),function(){return t._handleUpdated()})})},t.prototype._updateSwipeProps=function(){this.swipeListener&&this.swipeListener.update({delta:this.props.swipeDelta,mouseTrackingEnabled:this.props.mouseTracking,touchTrackingEnabled:this.props.touchTracking,preventDefaultTouchmoveEvent:!this.props.touchMoveDefaultEvents})},t.prototype._renderDotsNavigation=function(){var t=this.props,e=t.renderDotsItem,t=t.controlsStrategy;return react_1.default.createElement(Views.DotsNavigation,{state:this.state,onClick:this._handleDotClick,renderDotsItem:e,controlsStrategy:t})},t.prototype._renderPrevButton=function(){var t=this.props.renderPrevButton,e=Utils.getSlideItemInfo(this.state).isPrevSlideDisabled;return react_1.default.createElement(Views.PrevNextButton,{name:"prev",onClick:this.slidePrev,isDisabled:e,renderPrevButton:t})},t.prototype._renderNextButton=function(){var t=this.props.renderNextButton,e=Utils.getSlideItemInfo(this.state).isNextSlideDisabled;return react_1.default.createElement(Views.PrevNextButton,{name:"next",onClick:this.slideNext,isDisabled:e,renderNextButton:t})},t.prototype._renderPlayPauseButton=function(){var t=this.props.renderPlayPauseButton,e=this.state.isAutoPlaying;return react_1.default.createElement(Views.PlayPauseButton,{isPlaying:e,onClick:this._handlePlayPauseToggle,renderPlayPauseButton:t})},t.prototype.render=function(){var t=this.state,e=t.translate3d,i=t.clones,n=t.transition,t=t.canUseDom,o=Utils.shouldDisableDots(this.props,this.state),s=Utils.shouldDisableButtons(this.props,this.state),a=Utils.getRenderWrapperStyles(this.props,this.state,this.stageComponent),e=Utils.getRenderStageStyles({translate3d:e},{transition:n}),n=this.props.ssrSilentMode||t?"":types_1.Modifiers.SSR,t=Utils.concatClassnames(types_1.Classnames.ROOT,n);return react_1.default.createElement("div",{className:t},react_1.default.createElement("div",{ref:this._setRootComponentRef},react_1.default.createElement("div",{style:a,className:types_1.Classnames.WRAPPER,onMouseEnter:this._handleMouseEnter,onMouseLeave:this._handleMouseLeave},react_1.default.createElement("ul",{style:e,className:types_1.Classnames.STAGE,ref:this._setStageComponentRef},i.map(this._renderStageItem)))),o?null:this._renderDotsNavigation(),s?null:this._renderPrevButton(),s?null:this._renderNextButton(),this.props.disableSlideInfo?null:this._renderSlideInfo(),this.props.autoPlayControls?this._renderPlayPauseButton():null)},t.defaultProps=defaultProps_1.defaultProps,t}(react_1.default.PureComponent));exports.default=AliceCarousel;

package.json

 {
   "name": "react-alice-carousel",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "React image gallery, react slideshow carousel, react content rotator",
@@ -5,0 +5,0 @@ "main": "./lib/react-alice-carousel.js",

README.md

@@ -36,6 +36,9 @@ # React Alice Carousel
 ## Installation
+
 ```apacheconfig
 npm i react-alice-carousel
 ```
+
 #### Style import
+
 ```
@@ -45,2 +48,3 @@ # CSS
 ```
+
 ```
@@ -50,3 +54,5 @@ # SCSS
 ```
+
 ## Usage
+
 ```javascript
@@ -60,15 +66,12 @@ import React from 'react';
 const items = [
-  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
-  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
-  <img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
+	<img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
+	<img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
+	<img src="path-to-img" onDragStart={handleDragStart} role="presentation" />,
 ];
 
-const Gallery = () => {
-  return (
-    <AliceCarousel mouseTracking items={items} />
-  );
-}
+const Gallery = () => <AliceCarousel mouseTracking items={items} />;
 ```
 
 #### Options
+
 - `activeIndex` : Number, default `0` - Set carousel at the specified position.
@@ -85,10 +88,10 @@ - `animationDuration`: Number, default `400` - Set duration of animation.
 - `autoPlayStrategy`: String(`default`, `action`, `all`, `none`) - Set a strategy for autoplay mode
-    * `default` - pause automatic playback on the hover
-    * `action` - stop automatic playback if user action was detected
-    * `all` - merge `default` && `action` strategies
-    * `none` - ignore any user actions when the `autoPlay` property was specified
+  - `default` - pause automatic playback on the hover
+  - `action` - stop automatic playback if user action was detected
+  - `all` - merge `default` && `action` strategies
+  - `none` - ignore any user actions when the `autoPlay` property was specified
 - `controlsStrategy`: String (`default`, `responsive`, `alternate` or combined string `"default,alternate"`) - Set a strategy for gallery controls.
-    * `default` - use controls as is
-    * `alternate` - show each dot for each slide
-    * `responsive` - navigation will be hidden if the number of gallery elements is equal to the number of items in the slide.
+  - `default` - use controls as is
+  - `alternate` - show each dot for each slide
+  - `responsive` - navigation will be hidden if the number of gallery elements is equal to the number of items in the slide.
 - `disableButtonsControls`: Boolean, default `false` - Disable buttons controls.
@@ -99,16 +102,18 @@ - `disableDotsControls`: Boolean, default `false` - Disable dots controls.
 - `innerWidth`: Number, default `0` - Set a static value for a breakpoint(`key`) of the "responsive" property. For example, if you can't use 'window.innerWidth' during SSR.
-- `items`: Array, default `undefined`  - Set gallery items, preferable to use this property instead of children.
-- `keyboardNavigation`: Boolean, default `false`  - Enable keyboard navigation
-    * `ArrowLeft` - go to the prev slide
-    * `ArrowRight` - go to the next slide
-    * `Space` - run/stop autoplay mode if `autoPlay` property is equal `true`
-- `mouseTracking`: Boolean, default `false`  - Enable mouse drag animation.
-- `paddingLeft`: Number, default `0`  - Set the gallery offset from the left.
-- `paddingRight`: Number, default `0`  - Set the gallery offset from the right.
-- `renderKey`: Number, default `undefined`  - Auxiliary property, allows call the render method without changing the state inside the gallery instance.
+- `items`: Array, default `undefined` - Set gallery items, preferable to use this property instead of children.
+- `keyboardNavigation`: Boolean, default `false` - Enable keyboard navigation
+  - `ArrowLeft` - go to the prev slide
+  - `ArrowRight` - go to the next slide
+  - `Space` - run/stop autoplay mode if `autoPlay` property is equal `true`
+- `mouseTracking`: Boolean, default `false` - Enable mouse drag animation. Consider the problem with links, see the example of using the `<Link/>` component below.
+- `paddingLeft`: Number, default `0` - Set the gallery offset from the left.
+- `paddingRight`: Number, default `0` - Set the gallery offset from the right.
+- `renderKey`: Number, default `undefined` - Auxiliary property, allows call the render method without changing the state inside the gallery instance.
 - `responsive`: Object, default `undefined` - The key is the breakpoint (default is the result of: () => window.innerWidth or `innerWidth` property if the last presented).
-    * `items` - set number of items in the slide. Default: `1`
-    * `itemsFit`: one of (`contain | fill | undefined`) - defines, how item should fill the container according slide's width. Default: `fill`.
-  
-      If `contain` is specified, the gallery will use the value from the `items` property to determine the width of the element for each slide and fill in the empty space as needed.
+
+  - `items` - set number of items in the slide. Default: `1`
+  - `itemsFit`: one of (`contain | fill | undefined`) - defines, how item should fill the container according slide's width. Default: `fill`.
+
+    If `contain` is specified, the gallery will use the value from the `items` property to determine the width of the element for each slide and fill in the empty space as needed.
+
   ```js
@@ -124,11 +129,12 @@ {
         }
-    ```
-- `syncStateOnPropsUpdate`: Boolean, default `true`  - Sync some props (like `activeIndex`) with carousel state while new props passed. This allows you to avoid resetting the carousel position while updating the props (e.g.: `children` or `items`).
-- `swipeDelta`: Number, default `20`  - Set minimum distance to the start of the swiping (px).
-- `swipeExtraPadding`: Number, default `200`  - Set maximum distance from initial place before swipe action will be stopped (px).
-- `ssrSilentMode`: Boolean, default `true`  - Disable classnames modifiers for server side rendering.
-- `touchTracking`: Boolean, default `true`  - Enable touch move animation.
-- `touchMoveDefaultEvents`: Boolean, default `true`  - Enable touch move default events on swiping. If `false` was specified, this prevents vertical scrolling of the parent elements during the swipe. 
+  ```
+
+- `syncStateOnPropsUpdate`: Boolean, default `true` - Sync some props (like `activeIndex`) with carousel state while new props passed. This allows you to avoid resetting the carousel position while updating the props (e.g.: `children` or `items`).
+- `swipeDelta`: Number, default `20` - Set minimum distance to the start of the swiping (px).
+- `swipeExtraPadding`: Number, default `200` - Set maximum distance from initial place before swipe action will be stopped (px).
+- `ssrSilentMode`: Boolean, default `true` - Disable classnames modifiers for server side rendering.
+- `touchTracking`: Boolean, default `true` - Enable touch move animation.
+- `touchMoveDefaultEvents`: Boolean, default `true` - Enable touch move default events on swiping. If `false` was specified, this prevents vertical scrolling of the parent elements during the swipe.
 - `onInitialized(e: EventObject)`: Function - Fired as callback after the gallery was created.
-- `onResizeEvent(e: Event)`: Function, default `shouldProcessResizeEvent` method - Fired during the "resize" event to determine whether to call the event handler. Default method checks is the root element width has changed. 
+- `onResizeEvent(e: Event)`: Function, default `shouldProcessResizeEvent` method - Fired during the "resize" event to determine whether to call the event handler. Default method checks is the root element width has changed.
 - `onResized(e: EventObject)`: Function - Fired as callback after the gallery was resized.
@@ -145,2 +151,3 @@ - `onUpdated(e: EventObject)`: Function - Fired as callback after updating the gallery props.
 #### Methods (Refs [example](https://maxmarinich.github.io/react-alice-carousel/#custom-components-refs))
+
 - `slidePrev(e: Event) => void` : Go to the prev slide.
@@ -150,28 +157,49 @@ - `slideNext(e: Event) => void` : Go to the next slide.
 
+#### Components (Links [example](https://maxmarinich.github.io/react-alice-carousel/#custom-components-links))
+
+- `<Link />` : allows properly handle click and drag events when mouseTracking enabled, extends base HTMLAnchorElement
+
+```javascript
+import React from 'react';
+import AliceCarousel, { Link } from 'react-alice-carousel';
+import 'react-alice-carousel/lib/alice-carousel.css';
+
+const Gallery = () => {
+  return (
+    <AliceCarousel mouseTracking>
+      <Link href="#">
+        <img src="path-to-image" />
+      </Link>
+    </AliceCarousel>
+  );
+};
+```
+
 #### Types
+
 ```typescript
 type EventObject = {
-  item: number;
-  slide: number;
-  itemsInSlide: number;
-  isPrevSlideDisabled: boolean;
-  isNextSlideDisabled: boolean;
-  type: EventType;
+	item: number;
+	slide: number;
+	itemsInSlide: number;
+	isPrevSlideDisabled: boolean;
+	isNextSlideDisabled: boolean;
+	type: EventType;
 };
 
 type SlideInfo = {
-  item: number;
-  itemsCount: number;
+	item: number;
+	itemsCount: number;
 };
 
 type DotsItem = {
-  isActive: boolean;
-  activeIndex: number;
+	isActive: boolean;
+	activeIndex: number;
 };
 
 enum EventType {
-  ACTION = 'action', // used if a general user action (button click or swipe)
-  INIT = 'init',     // used if the initial event was triggered
-  RESIZE = 'resize', // used if the gallery size was changed
-  UPDATE = 'update', // used if the gallery was updated with props
+	ACTION = 'action', // used if a general user action (button click or swipe)
+	INIT = 'init', // used if the initial event was triggered
+	RESIZE = 'resize', // used if the gallery size was changed
+	UPDATE = 'update', // used if the gallery was updated with props
 }
@@ -181,45 +209,38 @@ ```
 #### CSS classes
+
 ```css
 .alice-carousel
-
-.alice-carousel__stage
-.alice-carousel__stage-item
-
-.alice-carousel__prev-btn
-.alice-carousel__prev-btn-item
-
-.alice-carousel__next-btn
-.alice-carousel__next-btn-item
-
-.alice-carousel__play-btn
-.alice-carousel__play-btn-item
-
-.alice-carousel__dots
-.alice-carousel__dots-item
-
-.alice-carousel__slide-info
-.alice-carousel__slide-info-item
+	.alice-carousel__stage
+	.alice-carousel__stage-item
+	.alice-carousel__prev-btn
+	.alice-carousel__prev-btn-item
+	.alice-carousel__next-btn
+	.alice-carousel__next-btn-item
+	.alice-carousel__play-btn
+	.alice-carousel__play-btn-item
+	.alice-carousel__dots
+	.alice-carousel__dots-item
+	.alice-carousel__slide-info
+	.alice-carousel__slide-info-item;
 ```
 
 #### CSS modifiers
+
 ```css
 .alice-carousel.__ssr
-
-.alice-carousel__stage-item.__active
-.alice-carousel__stage-item.__cloned
-.alice-carousel__stage-item.__target
-
-.alice-carousel__next-btn-item.__inactive
-.alice-carousel__prev-btn-item.__inactive
-
-.alice-carousel__play-btn-item.__pause
-
-.alice-carousel__dots-item.__active
-.alice-carousel__dots-item.__custom
-
-.alice-carousel__slide-info-item.__separator
+	.alice-carousel__stage-item.__active
+	.alice-carousel__stage-item.__cloned
+	.alice-carousel__stage-item.__target
+	.alice-carousel__next-btn-item.__inactive
+	.alice-carousel__prev-btn-item.__inactive
+	.alice-carousel__play-btn-item.__pause
+	.alice-carousel__dots-item.__active
+	.alice-carousel__dots-item.__custom
+	.alice-carousel__slide-info-item.__separator;
 ```
 
 ## Build the project locally
+
 #### Clone
+
 ```apacheconfig
@@ -229,3 +250,5 @@ git clone https://github.com/maxmarinich/react-alice-carousel
 ```
+
 #### Run
+
 ```apacheconfig
@@ -235,7 +258,11 @@ npm ci
 ```
+
 #### Test
+
 ```apacheconfig
 npm test
 ```
+
 ## License
+
 MIT

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95498

increased by1.95%

Number of package files

46

increased by4.55%

Lines of code

712

increased by1.14%

Number of lines in readme file

257

increased by11.74%

Worsened metrics

Number of low quality alerts

14

increased by7.69%

No dependency changes