react-alice-carousel - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

lib/react-alice-carousel.d.ts

 import React from 'react';
 import { EventData } from 'vanilla-swipe';
-import { AutoplayDirection, AnimationType, Props, SlideTo, State } from './types';
+import { AutoplayDirection, AnimationType, Props, SlideTo, State, EventObject } from './types';
 export default class AliceCarousel extends React.PureComponent<Props, State> {
@@ -56,9 +56,3 @@ static defaultProps: {
     componentWillUnmount(): void;
-    get eventObject(): {
-        item: number;
-        slide: number;
-        itemsInSlide: number;
-        isNextSlideDisabled: boolean;
-        isPrevSlideDisabled: boolean;
-    };
+    get eventObject(): EventObject;
     get isFadeoutAnimationAllowed(): boolean;
@@ -65,0 +59,0 @@ get touchmovePosition(): number;

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)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)};return function(t,e){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),Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[i]}})}:function(t,e,i,n){void 0===n&&(n=i),t[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.hasOwnProperty.call(t,i)&&__createBinding(e,t,i);return __setModuleDefault(e,t),e},__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(i,n){var o,s,a,r={label:0,sent:function(){if(1&a[0])throw a[1];return a[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(e){return function(t){return function(e){if(o)throw new TypeError("Generator is already executing.");for(;r;)try{if(o=1,s&&(a=2&e[0]?s.return:e[0]?s.throw||((a=s.return)&&a.call(s),0):s.next)&&!(a=a.call(s,e[1])).done)return a;switch(s=0,a&&(e=[2&e[0],a.value]),e[0]){case 0:case 1:a=e;break;case 4:return r.label++,{value:e[1],done:!1};case 5:r.label++,s=e[1],e=[0];continue;case 7:e=r.ops.pop(),r.trys.pop();continue;default:if(!(a=0<(a=r.trys).length&&a[a.length-1])&&(6===e[0]||2===e[0])){r=0;continue}if(3===e[0]&&(!a||e[1]>a[0]&&e[1]<a[3])){r.label=e[1];break}if(6===e[0]&&r.label<a[1]){r.label=a[1],a=e;break}if(a&&r.label<a[2]){r.label=a[2],r.ops.push(e);break}a[2]&&r.ops.pop(),r.trys.pop();continue}e=n.call(i,r)}catch(t){e=[6,t],s=0}finally{o=a=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}([e,t])}}},__importDefault=function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__importDefault(require("react")),vanilla_swipe_1=__importDefault(require("vanilla-swipe")),defaultProps_1=require("./defaultProps"),types_1=require("./types"),Views=__importStar(require("./views")),Utils=__importStar(require("./utils")),AliceCarousel=function(i){function t(t){var o=i.call(this,t)||this;o.swipeListener=null,o._handleBeforeSlideEnd=function(){return __awaiter(o,void 0,void 0,function(){var e,i,n;return __generator(this,function(t){switch(t.label){case 0:return(i=this.state,e=i.activeIndex,n=i.itemsCount,i=i.fadeoutAnimationProcessing,Utils.shouldRecalculateSlideIndex(e,n))?(n=Utils.getUpdateSlidePositionIndex(e,n),[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(),[2]}})})},o._handleMouseEnter=function(){var t=o.props.autoPlayStrategy;Utils.shouldCancelAutoPlayOnHover(t)&&o.state.isAutoPlaying&&(o.isHovered=!0,o._handlePause())},o._handleMouseLeave=function(){o.state.isAutoPlaying&&(o.isHovered=!1,o._handlePlay())},o._handlePause=function(){o._clearAutoPlayTimeout()},o._handlePlayPauseToggle=function(){return __awaiter(o,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]}})})},o._setRootComponentRef=function(t){return o.RootElement=t},o._setStageComponentRef=function(t){return o.stageComponent=t},o._renderStageItem=function(t,e){var i=Utils.getRenderStageItemStyles(e,o.state),n=Utils.getRenderStageItemClasses(e,o.state);return react_1.default.createElement(Views.StageItem,{styles:i,className:n,key:"stage-item-"+e,item:t})},o._renderSlideInfo=function(){var t=o.state,e=t.activeIndex,t=t.itemsCount;return react_1.default.createElement(Views.SlideInfo,{slidesLength:t,activeIndex:e})};var e=Utils.getItemsCount(t),t=Utils.createClones(t);return o.state={activeIndex:0,animationDuration:0,autoWidth:!1,clones:t,itemsCount:e,itemsOffset:0,itemsInSlide:1,infinite:!1,initialStageHeight:0,isAutoPlaying:!1,isAutoPlayCanceledOnAction:!1,isStageContentPartial:!0,fadeoutAnimationIndex:null,fadeoutAnimationPosition:null,fadeoutAnimationProcessing:!1,transformationSet:[],transition:Utils.getTransitionProperty(),translate3d:0,stageWidth:0,stageContentWidth:0,swipeLimitMin:0,swipeLimitMax:0,swipeAllowedPositionMax:0,swipeShiftValue:0},o.isHovered=!1,o.isAnimationDisabled=!1,o.isTouchMoveProcessStarted=!1,o.cancelTouchAnimations=!1,o.hasUserAction=!1,o.RootElement=void 0,o.rootComponentDimensions={},o.stageComponent=void 0,o.startTouchmovePosition=void 0,o.slideTo=o.slideTo.bind(o),o.slidePrev=o.slidePrev.bind(o),o.slideNext=o.slideNext.bind(o),o._handleTouchmove=o._handleTouchmove.bind(o),o._handleTouchend=o._handleTouchend.bind(o),o._handleDotClick=o._handleDotClick.bind(o),o._handleResize=o._handleResize.bind(o),o._handleResizeDebounced=Utils.debounce(o._handleResize,100),o}return __extends(t,i),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._setupSwipeHandlers(),this.props.autoPlay&&this._handlePlay(),window.addEventListener("resize",this._handleResizeDebounced),[2]}})})},t.prototype.componentDidUpdate=function(t,e){var i=this.props,n=i.activeIndex,o=i.animationDuration,s=i.autoWidth,a=i.children,r=i.infinite,l=i.items,u=i.paddingLeft,d=i.paddingRight,c=i.responsive,h=i.swipeExtraPadding,p=i.mouseTracking,m=i.swipeDelta,_=i.touchTracking,i=i.touchMoveDefaultEvents;a&&t.children!==a?(e=e.activeIndex,e=__assign(__assign({},this.props),{activeIndex:e}),this._updateComponent(e)):t.autoWidth!==s||t.infinite!==r||t.items!==l||t.paddingLeft!==u||t.paddingRight!==d||t.responsive!==c||t.swipeExtraPadding!==h?this._updateComponent():(t.animationDuration!==o&&this.setState({animationDuration:o}),t.activeIndex!==n&&this.slideTo(n)),t.swipeDelta===m&&t.mouseTracking===p&&t.touchTracking===_&&t.touchMoveDefaultEvents===i||this._updateSwipeProps()},t.prototype.componentWillUnmount=function(){this._cancelTimeoutAnimations(),this.swipeListener&&this.swipeListener.destroy(),window.removeEventListener("resize",this._handleResizeDebounced)},Object.defineProperty(t.prototype,"eventObject",{get:function(){var t=this.state,e=t.itemsInSlide,i=t.activeIndex,n=Utils.getSlideItemInfo(this.state),t=n.isNextSlideDisabled,n=n.isPrevSlideDisabled;return{item:i,slide:Utils.getActiveSlideIndex(t,this.state),itemsInSlide:e,isNextSlideDisabled:t,isPrevSlideDisabled:n}},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,s=e.autoWidth,e=e.autoHeight;return 1===t&&i===types_1.AnimationType.FADEOUT&&!(n||o||s||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){var e,i;void 0===t&&(t=0),this._handlePause(),this.isFadeoutAnimationAllowed?(e=Utils.getFadeoutAnimationPosition(t,this.state),i=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:t,fadeoutAnimationIndex:i,fadeoutAnimationPosition:e})):this._handleSlideTo({activeIndex:t})},t.prototype.slidePrev=function(t){this._handlePause(),t&&t.isTrusted&&(this.hasUserAction=!0);var e,i=this.state.activeIndex-1;this.isFadeoutAnimationAllowed?(e=-this.state.stageWidth,t=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:i,fadeoutAnimationIndex:t,fadeoutAnimationPosition:e})):this._handleSlideTo({activeIndex:i})},t.prototype.slideNext=function(t){this._handlePause(),t&&t.isTrusted&&(this.hasUserAction=!0);var e,i=this.state.activeIndex+1;this.isFadeoutAnimationAllowed?(e=this.state.stageWidth,t=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:i,fadeoutAnimationIndex:t,fadeoutAnimationPosition:e})):this._handleSlideTo({activeIndex:i})},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,s=this.props.swipeDelta,a=this.state,r=a.swipeShiftValue,l=a.swipeLimitMin,u=a.swipeLimitMax,e=a.infinite,a=a.fadeoutAnimationProcessing;if(this.hasUserAction=!0,!(a||!this.isTouchMoveProcessStarted&&Utils.isVerticalTouchmoveDetected(n,i,s))){this.isTouchMoveProcessStarted||(this._cancelTimeoutAnimations(),this._setTouchmovePosition(),this.isAnimationDisabled=!0,this.isTouchMoveProcessStarted=!0);var d=Utils.getTouchmoveTranslatePosition(o,this.touchmovePosition);if(!1===e)return l<d||d<-u?void 0:void Utils.animate(this.stageComponent,{position:d});if(Utils.shouldRecalculateSwipePosition(d,l,u))try{!function t(){Utils.getIsLeftDirection(o)?d+=r:d+=-r;Utils.shouldRecalculateSwipePosition(d,l,u)&&t()}()}catch(t){Utils.debug(t)}Utils.animate(this.stageComponent,{position:d})}},t.prototype._handleTouchend=function(t,e){var i,n,o=e.deltaX;this._clearTouchmovePosition(),this.isTouchMoveProcessStarted&&(this.isTouchMoveProcessStarted=!1,i=this.state.animationDuration,n=this.props.animationEasingFunction,e=Utils.getTranslateXProperty(this.stageComponent),e=Utils.getSwipeTouchendPosition(this.state,o,e),this._handleSlideChange(),Utils.animate(this.stageComponent,{position:e,animationDuration:i,animationEasingFunction:n}),this._handleBeforeTouchEnd(e))},t.prototype._handleBeforeTouchEnd=function(o){var t=this,e=this.state.animationDuration;this.touchEndTimeoutId=setTimeout(function(){return __awaiter(t,void 0,void 0,function(){var e,i,n;return __generator(this,function(t){switch(t.label){case 0:return e=Utils.getSwipeTouchendIndex(o,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(),[4,this._handleSlideChanged()];case 2:return t.sent(),[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,t=t.fadeoutAnimationPosition,l=void 0===t?null:t;return __awaiter(this,void 0,void 0,function(){var e,i,n,o,s;return __generator(this,function(t){switch(t.label){case 0:return(o=this.props,e=o.infinite,n=o.animationEasingFunction,i=this.state,s=i.itemsInSlide,o=i.itemsCount,i=i.animationDuration,this.isAnimationDisabled||this.state.activeIndex===a||!e&&Utils.shouldCancelSlideAnimation(a,o,s))?[2]:(this.isAnimationDisabled=!0,this._cancelTimeoutAnimations(),this._handleSlideChange(),o=!1,s=Utils.getTranslate3dProperty(a,this.state),n=null!==r&&null!==l?(o=!0,Utils.getTransitionProperty()):Utils.getTransitionProperty({animationDuration:i,animationEasingFunction:n}),[4,this.setState({activeIndex:a,transition:n,translate3d:s,animationDuration:i,fadeoutAnimationIndex:r,fadeoutAnimationPosition:l,fadeoutAnimationProcessing:o})]);case 1:return t.sent(),this.slideEndTimeoutId=setTimeout(this._handleBeforeSlideEnd,i),[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._handleSlideChange=function(){this.props.onSlideChange&&this.props.onSlideChange(this.eventObject)},t.prototype._handleResized=function(){this.props.onResized&&this.props.onResized(this.eventObject)},t.prototype._handleSlideChanged=function(){return __awaiter(this,void 0,void 0,function(){var e,i,n,o;return __generator(this,function(t){switch(t.label){case 0:return n=this.state,e=n.isAutoPlaying,i=n.isAutoPlayCanceledOnAction,o=this.props,n=o.autoPlayStrategy,o=o.onSlideChanged,Utils.shouldCancelAutoPlayOnAction(n)&&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,o&&o(this.eventObject),[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(){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(this.eventObject),[2]}})})},t.prototype._setAutoPlayInterval=function(){var t=this,e=this.props,i=e.autoPlayDirection,e=e.autoPlayInterval;this.autoPlayTimeoutId=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(t){var e=this;void 0===t&&(t=this.props),this._cancelTimeoutAnimations(),this.isAnimationDisabled=!1,this.state.isAutoPlaying&&this._handlePlay(),this.setState({clones:Utils.createClones(t)}),requestAnimationFrame(function(){e.setState(Utils.calculateInitialState(t,e.stageComponent))})},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(){return react_1.default.createElement(Views.DotsNavigation,{state:this.state,onClick:this._handleDotClick})},t.prototype._renderPrevButton=function(){var t=Utils.getSlideItemInfo(this.state).isPrevSlideDisabled;return react_1.default.createElement(Views.PrevNextButton,{name:"prev",disabled:t,onClick:this.slidePrev})},t.prototype._renderNextButton=function(){var t=Utils.getSlideItemInfo(this.state).isNextSlideDisabled;return react_1.default.createElement(Views.PrevNextButton,{name:"next",disabled:t,onClick:this.slideNext})},t.prototype._renderPlayPauseButton=function(){var t=this.state.isAutoPlaying;return react_1.default.createElement(Views.PlayPauseButton,{isPlaying:t,onClick:this._handlePlayPauseToggle})},t.prototype.render=function(){var t=this.state,e=t.translate3d,i=t.clones,n=t.transition,o=Utils.shouldDisableDots(this.props,this.state),t=Utils.getRenderWrapperStyles(this.props,this.state,this.stageComponent),n=Utils.getRenderStageStyles({translate3d:e},{transition:n});return react_1.default.createElement("div",{className:"alice-carousel"},react_1.default.createElement("div",{ref:this._setRootComponentRef},react_1.default.createElement("div",{style:t,className:"alice-carousel__wrapper",onMouseEnter:this._handleMouseEnter,onMouseLeave:this._handleMouseLeave},react_1.default.createElement("ul",{style:n,className:"alice-carousel__stage",ref:this._setStageComponentRef},i.map(this._renderStageItem)))),o?null:this._renderDotsNavigation(),this.props.disableSlideInfo?null:this._renderSlideInfo(),this.props.disableButtonsControls?null:this._renderPrevButton(),this.props.disableButtonsControls?null:this._renderNextButton(),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)e.hasOwnProperty(i)&&(t[i]=e[i])})(t,e)};return function(t,e){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),Object.defineProperty(t,n,{enumerable:!0,get:function(){return e[i]}})}:function(t,e,i,n){void 0===n&&(n=i),t[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.hasOwnProperty.call(t,i)&&__createBinding(e,t,i);return __setModuleDefault(e,t),e},__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(i,n){var o,s,a,r={label:0,sent:function(){if(1&a[0])throw a[1];return a[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(e){return function(t){return function(e){if(o)throw new TypeError("Generator is already executing.");for(;r;)try{if(o=1,s&&(a=2&e[0]?s.return:e[0]?s.throw||((a=s.return)&&a.call(s),0):s.next)&&!(a=a.call(s,e[1])).done)return a;switch(s=0,a&&(e=[2&e[0],a.value]),e[0]){case 0:case 1:a=e;break;case 4:return r.label++,{value:e[1],done:!1};case 5:r.label++,s=e[1],e=[0];continue;case 7:e=r.ops.pop(),r.trys.pop();continue;default:if(!(a=0<(a=r.trys).length&&a[a.length-1])&&(6===e[0]||2===e[0])){r=0;continue}if(3===e[0]&&(!a||e[1]>a[0]&&e[1]<a[3])){r.label=e[1];break}if(6===e[0]&&r.label<a[1]){r.label=a[1],a=e;break}if(a&&r.label<a[2]){r.label=a[2],r.ops.push(e);break}a[2]&&r.ops.pop(),r.trys.pop();continue}e=n.call(i,r)}catch(t){e=[6,t],s=0}finally{o=a=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}([e,t])}}},__importDefault=function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});var react_1=__importDefault(require("react")),vanilla_swipe_1=__importDefault(require("vanilla-swipe")),defaultProps_1=require("./defaultProps"),types_1=require("./types"),Views=__importStar(require("./views")),Utils=__importStar(require("./utils")),AliceCarousel=function(i){function t(t){var o=i.call(this,t)||this;o.swipeListener=null,o._handleBeforeSlideEnd=function(){return __awaiter(o,void 0,void 0,function(){var e,i,n;return __generator(this,function(t){switch(t.label){case 0:return(i=this.state,e=i.activeIndex,n=i.itemsCount,i=i.fadeoutAnimationProcessing,Utils.shouldRecalculateSlideIndex(e,n))?(n=Utils.getUpdateSlidePositionIndex(e,n),[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(),[2]}})})},o._handleMouseEnter=function(){var t=o.props.autoPlayStrategy;Utils.shouldCancelAutoPlayOnHover(t)&&o.state.isAutoPlaying&&(o.isHovered=!0,o._handlePause())},o._handleMouseLeave=function(){o.state.isAutoPlaying&&(o.isHovered=!1,o._handlePlay())},o._handlePause=function(){o._clearAutoPlayTimeout()},o._handlePlayPauseToggle=function(){return __awaiter(o,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]}})})},o._setRootComponentRef=function(t){return o.RootElement=t},o._setStageComponentRef=function(t){return o.stageComponent=t},o._renderStageItem=function(t,e){var i=Utils.getRenderStageItemStyles(e,o.state),n=Utils.getRenderStageItemClasses(e,o.state);return react_1.default.createElement(Views.StageItem,{styles:i,className:n,key:"stage-item-"+e,item:t})},o._renderSlideInfo=function(){var t=o.props.renderSlideInfo,e=o.state,i=e.activeIndex,e=e.itemsCount;return react_1.default.createElement(Views.SlideInfo,{itemsCount:e,activeIndex:i,renderSlideInfo:t})};var e=Utils.getItemsCount(t),t=Utils.createClones(t);return o.state={activeIndex:0,animationDuration:0,autoWidth:!1,clones:t,itemsCount:e,itemsOffset:0,itemsInSlide:1,infinite:!1,initialStageHeight:0,isAutoPlaying:!1,isAutoPlayCanceledOnAction:!1,isStageContentPartial:!0,fadeoutAnimationIndex:null,fadeoutAnimationPosition:null,fadeoutAnimationProcessing:!1,transformationSet:[],transition:Utils.getTransitionProperty(),translate3d:0,stageWidth:0,stageContentWidth:0,swipeLimitMin:0,swipeLimitMax:0,swipeAllowedPositionMax:0,swipeShiftValue:0},o.isHovered=!1,o.isAnimationDisabled=!1,o.isTouchMoveProcessStarted=!1,o.cancelTouchAnimations=!1,o.hasUserAction=!1,o.RootElement=void 0,o.rootComponentDimensions={},o.stageComponent=void 0,o.startTouchmovePosition=void 0,o.slideTo=o.slideTo.bind(o),o.slidePrev=o.slidePrev.bind(o),o.slideNext=o.slideNext.bind(o),o._handleTouchmove=o._handleTouchmove.bind(o),o._handleTouchend=o._handleTouchend.bind(o),o._handleDotClick=o._handleDotClick.bind(o),o._handleResize=o._handleResize.bind(o),o._handleResizeDebounced=Utils.debounce(o._handleResize,100),o}return __extends(t,i),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._setupSwipeHandlers(),this.props.autoPlay&&this._handlePlay(),window.addEventListener("resize",this._handleResizeDebounced),[2]}})})},t.prototype.componentDidUpdate=function(t,e){var i=this.props,n=i.activeIndex,o=i.animationDuration,s=i.autoWidth,a=i.children,r=i.infinite,l=i.items,u=i.paddingLeft,d=i.paddingRight,c=i.responsive,h=i.swipeExtraPadding,p=i.mouseTracking,m=i.swipeDelta,_=i.touchTracking,i=i.touchMoveDefaultEvents;a&&t.children!==a?(e=e.activeIndex,e=__assign(__assign({},this.props),{activeIndex:e}),this._updateComponent(e)):t.autoWidth!==s||t.infinite!==r||t.items!==l||t.paddingLeft!==u||t.paddingRight!==d||t.responsive!==c||t.swipeExtraPadding!==h?this._updateComponent():(t.animationDuration!==o&&this.setState({animationDuration:o}),t.activeIndex!==n&&this.slideTo(n)),t.swipeDelta===m&&t.mouseTracking===p&&t.touchTracking===_&&t.touchMoveDefaultEvents===i||this._updateSwipeProps()},t.prototype.componentWillUnmount=function(){this._cancelTimeoutAnimations(),this.swipeListener&&this.swipeListener.destroy(),window.removeEventListener("resize",this._handleResizeDebounced)},Object.defineProperty(t.prototype,"eventObject",{get:function(){var t=this.state,e=t.itemsInSlide,i=t.activeIndex,n=Utils.getSlideItemInfo(this.state),t=n.isNextSlideDisabled,n=n.isPrevSlideDisabled;return{item:i,slide:Utils.getActiveSlideIndex(t,this.state),itemsInSlide:e,isNextSlideDisabled:t,isPrevSlideDisabled:n}},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,s=e.autoWidth,e=e.autoHeight;return 1===t&&i===types_1.AnimationType.FADEOUT&&!(n||o||s||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){var e,i;void 0===t&&(t=0),this._handlePause(),this.isFadeoutAnimationAllowed?(e=Utils.getFadeoutAnimationPosition(t,this.state),i=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:t,fadeoutAnimationIndex:i,fadeoutAnimationPosition:e})):this._handleSlideTo({activeIndex:t})},t.prototype.slidePrev=function(t){this._handlePause(),t&&t.isTrusted&&(this.hasUserAction=!0);var e,i=this.state.activeIndex-1;this.isFadeoutAnimationAllowed?(e=-this.state.stageWidth,t=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:i,fadeoutAnimationIndex:t,fadeoutAnimationPosition:e})):this._handleSlideTo({activeIndex:i})},t.prototype.slideNext=function(t){this._handlePause(),t&&t.isTrusted&&(this.hasUserAction=!0);var e,i=this.state.activeIndex+1;this.isFadeoutAnimationAllowed?(e=this.state.stageWidth,t=Utils.getFadeoutAnimationIndex(this.state),this._handleSlideTo({activeIndex:i,fadeoutAnimationIndex:t,fadeoutAnimationPosition:e})):this._handleSlideTo({activeIndex:i})},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,s=this.props.swipeDelta,a=this.state,r=a.swipeShiftValue,l=a.swipeLimitMin,u=a.swipeLimitMax,e=a.infinite,a=a.fadeoutAnimationProcessing;if(this.hasUserAction=!0,!(a||!this.isTouchMoveProcessStarted&&Utils.isVerticalTouchmoveDetected(n,i,s))){this.isTouchMoveProcessStarted||(this._cancelTimeoutAnimations(),this._setTouchmovePosition(),this.isAnimationDisabled=!0,this.isTouchMoveProcessStarted=!0);var d=Utils.getTouchmoveTranslatePosition(o,this.touchmovePosition);if(!1===e)return l<d||d<-u?void 0:void Utils.animate(this.stageComponent,{position:d});if(Utils.shouldRecalculateSwipePosition(d,l,u))try{!function t(){Utils.getIsLeftDirection(o)?d+=r:d+=-r;Utils.shouldRecalculateSwipePosition(d,l,u)&&t()}()}catch(t){Utils.debug(t)}Utils.animate(this.stageComponent,{position:d})}},t.prototype._handleTouchend=function(t,e){var i,n,o=e.deltaX;this._clearTouchmovePosition(),this.isTouchMoveProcessStarted&&(this.isTouchMoveProcessStarted=!1,i=this.state.animationDuration,n=this.props.animationEasingFunction,e=Utils.getTranslateXProperty(this.stageComponent),e=Utils.getSwipeTouchendPosition(this.state,o,e),this._handleSlideChange(),Utils.animate(this.stageComponent,{position:e,animationDuration:i,animationEasingFunction:n}),this._handleBeforeTouchEnd(e))},t.prototype._handleBeforeTouchEnd=function(o){var t=this,e=this.state.animationDuration;this.touchEndTimeoutId=setTimeout(function(){return __awaiter(t,void 0,void 0,function(){var e,i,n;return __generator(this,function(t){switch(t.label){case 0:return e=Utils.getSwipeTouchendIndex(o,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(),[4,this._handleSlideChanged()];case 2:return t.sent(),[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,t=t.fadeoutAnimationPosition,l=void 0===t?null:t;return __awaiter(this,void 0,void 0,function(){var e,i,n,o,s;return __generator(this,function(t){switch(t.label){case 0:return(o=this.props,e=o.infinite,n=o.animationEasingFunction,i=this.state,s=i.itemsInSlide,o=i.itemsCount,i=i.animationDuration,this.isAnimationDisabled||this.state.activeIndex===a||!e&&Utils.shouldCancelSlideAnimation(a,o,s))?[2]:(this.isAnimationDisabled=!0,this._cancelTimeoutAnimations(),this._handleSlideChange(),o=!1,s=Utils.getTranslate3dProperty(a,this.state),n=null!==r&&null!==l?(o=!0,Utils.getTransitionProperty()):Utils.getTransitionProperty({animationDuration:i,animationEasingFunction:n}),[4,this.setState({activeIndex:a,transition:n,translate3d:s,animationDuration:i,fadeoutAnimationIndex:r,fadeoutAnimationPosition:l,fadeoutAnimationProcessing:o})]);case 1:return t.sent(),this.slideEndTimeoutId=setTimeout(this._handleBeforeSlideEnd,i),[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._handleSlideChange=function(){this.props.onSlideChange&&this.props.onSlideChange(this.eventObject)},t.prototype._handleResized=function(){this.props.onResized&&this.props.onResized(this.eventObject)},t.prototype._handleSlideChanged=function(){return __awaiter(this,void 0,void 0,function(){var e,i,n,o;return __generator(this,function(t){switch(t.label){case 0:return n=this.state,e=n.isAutoPlaying,i=n.isAutoPlayCanceledOnAction,o=this.props,n=o.autoPlayStrategy,o=o.onSlideChanged,Utils.shouldCancelAutoPlayOnAction(n)&&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,o&&o(this.eventObject),[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(){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(this.eventObject),[2]}})})},t.prototype._setAutoPlayInterval=function(){var t=this,e=this.props,i=e.autoPlayDirection,e=e.autoPlayInterval;this.autoPlayTimeoutId=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(t){var e=this;void 0===t&&(t=this.props),this._cancelTimeoutAnimations(),this.isAnimationDisabled=!1,this.state.isAutoPlaying&&this._handlePlay(),this.setState({clones:Utils.createClones(t)}),requestAnimationFrame(function(){e.setState(Utils.calculateInitialState(t,e.stageComponent))})},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.renderDotsItem;return react_1.default.createElement(Views.DotsNavigation,{state:this.state,onClick:this._handleDotClick,renderDotsItem: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,o=Utils.shouldDisableDots(this.props,this.state),t=Utils.getRenderWrapperStyles(this.props,this.state,this.stageComponent),n=Utils.getRenderStageStyles({translate3d:e},{transition:n});return react_1.default.createElement("div",{className:"alice-carousel"},react_1.default.createElement("div",{ref:this._setRootComponentRef},react_1.default.createElement("div",{style:t,className:"alice-carousel__wrapper",onMouseEnter:this._handleMouseEnter,onMouseLeave:this._handleMouseLeave},react_1.default.createElement("ul",{style:n,className:"alice-carousel__stage",ref:this._setStageComponentRef},i.map(this._renderStageItem)))),o?null:this._renderDotsNavigation(),this.props.disableSlideInfo?null:this._renderSlideInfo(),this.props.disableButtonsControls?null:this._renderPrevButton(),this.props.disableButtonsControls?null:this._renderNextButton(),this.props.autoPlayControls?this._renderPlayPauseButton():null)},t.defaultProps=defaultProps_1.defaultProps,t}(react_1.default.PureComponent);exports.default=AliceCarousel;

lib/types/index.d.ts

@@ -34,2 +34,13 @@ export interface Props {
     onSlideChanged?: (e: EventObject) => void;
+    renderSlideInfo?: (e: SlideInfo) => any;
+    renderDotsItem?: (e: DotsItem) => any;
+    renderPrevButton?: ({ isDisabled }: {
+        isDisabled: any;
+    }) => any;
+    renderNextButton?: ({ isDisabled }: {
+        isDisabled: any;
+    }) => any;
+    renderPlayPauseButton?: ({ isPlaying }: {
+        isPlaying: any;
+    }) => any;
 }
@@ -95,2 +106,10 @@ export interface State {
 };
+export declare type SlideInfo = {
+    item: number;
+    itemsCount: number;
+};
+export declare type DotsItem = {
+    isActive: boolean;
+    activeIndex: number;
+};
 export declare enum AnimationType {
@@ -97,0 +116,0 @@ FADEOUT = "fadeout",

lib/utils/render.d.ts

@@ -6,5 +6,5 @@ import { State } from '../types';
 export declare const getSlideIndexForMultipleItems: (activeIndex: any, itemsInSlide: any, slidesLength: any, isNextSlideDisabled: any) => number;
-export declare const getSlideInfo: (activeIndex?: number, slidesLength?: number) => {
-    slideIndex: number;
-    slidesLength: number;
+export declare const getSlideInfo: (activeIndex?: number, itemsCount?: number) => {
+    item: number;
+    itemsCount: number;
 };
@@ -11,0 +11,0 @@ export declare const getSlideItemInfo: (state: State) => {

lib/utils/render.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getSlideItemInfo=exports.getSlideInfo=exports.getSlideIndexForMultipleItems=exports.getSlideIndexForNonMultipleItems=exports.getActiveSlideDotsLength=exports.getActiveSlideIndex=void 0,exports.getActiveSlideIndex=function(e,t){var i=t||{},o=i.itemsInSlide,t=i.itemsCount,i=i.activeIndex+o;return 1===o?exports.getSlideIndexForNonMultipleItems(i,o,t):exports.getSlideIndexForMultipleItems(i,o,t,e)},exports.getActiveSlideDotsLength=function(e,t){if(void 0===e&&(e=0),void 0===t&&(t=1),e&&t){var i=Math.floor(e/t);return e%t==0?i-1:i}return 0},exports.getSlideIndexForNonMultipleItems=function(e,t,i){return e<t?i-t:i<e?0:e-1},exports.getSlideIndexForMultipleItems=function(e,t,i,o){var n=exports.getActiveSlideDotsLength(i,t);return e===i+t?0:o||e<t&&0!==e?n:0===e?i%t==0?n:n-1:0<t?Math.floor(e/t)-1:0},exports.getSlideInfo=function(e,t){void 0===e&&(e=0),void 0===t&&(t=0);e+=1;return e<1?e=t:t<e&&(e=1),{slideIndex:e,slidesLength:t}},exports.getSlideItemInfo=function(e){var t=e||{},i=t.activeIndex,e=t.infinite;return{isPrevSlideDisabled:!1===e&&0===i,isNextSlideDisabled:!1===e&&t.itemsCount-t.itemsInSlide===i}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getSlideItemInfo=exports.getSlideInfo=exports.getSlideIndexForMultipleItems=exports.getSlideIndexForNonMultipleItems=exports.getActiveSlideDotsLength=exports.getActiveSlideIndex=void 0,exports.getActiveSlideIndex=function(e,t){var i=t||{},o=i.itemsInSlide,t=i.itemsCount,i=i.activeIndex+o;return 1===o?exports.getSlideIndexForNonMultipleItems(i,o,t):exports.getSlideIndexForMultipleItems(i,o,t,e)},exports.getActiveSlideDotsLength=function(e,t){if(void 0===e&&(e=0),void 0===t&&(t=1),e&&t){var i=Math.floor(e/t);return e%t==0?i-1:i}return 0},exports.getSlideIndexForNonMultipleItems=function(e,t,i){return e<t?i-t:i<e?0:e-1},exports.getSlideIndexForMultipleItems=function(e,t,i,o){var n=exports.getActiveSlideDotsLength(i,t);return e===i+t?0:o||e<t&&0!==e?n:0===e?i%t==0?n:n-1:0<t?Math.floor(e/t)-1:0},exports.getSlideInfo=function(e,t){void 0===e&&(e=0),void 0===t&&(t=0);e+=1;return e<1?e=t:t<e&&(e=1),{item:e,itemsCount:t}},exports.getSlideItemInfo=function(e){var t=e||{},i=t.activeIndex,e=t.infinite;return{isPrevSlideDisabled:!1===e&&0===i,isNextSlideDisabled:!1===e&&t.itemsCount-t.itemsInSlide===i}};

lib/views/DotsNavigation.d.ts

 import { MouseEventHandler } from 'react';
 import { State } from '../types';
-export declare const DotsNavigation: ({ state, onClick, onMouseEnter, onMouseLeave }: Props) => JSX.Element;
+export declare const DotsNavigation: ({ state, onClick, onMouseEnter, onMouseLeave, renderDotsItem }: Props) => JSX.Element;
 declare type Props = {
@@ -9,3 +9,7 @@ state: State;
     onMouseLeave?: MouseEventHandler;
+    renderDotsItem?: ({ isActive, activeIndex }: {
+        isActive: any;
+        activeIndex: any;
+    }) => any;
 };
 export {};

lib/views/DotsNavigation.js

@@ -1,1 +0,1 @@
-"use strict";var __createBinding=Object.create?function(e,t,i,n){void 0===n&&(n=i),Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[i]}})}:function(e,t,i,n){void 0===n&&(n=i),e[n]=t[i]},__setModuleDefault=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},__importStar=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)"default"!==i&&Object.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t},__importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.DotsNavigation=void 0;var react_1=__importDefault(require("react")),Utils=__importStar(require("../utils"));exports.DotsNavigation=function(e){var r=e.state,a=e.onClick,o=e.onMouseEnter,u=e.onMouseLeave,l=r.itemsCount,c=r.itemsInSlide,s=r.infinite,d=r.autoWidth,_=r.activeIndex,f=Utils.getSlideItemInfo(r).isNextSlideDisabled,v=Utils.getDotsNavigationLength(l,c,d);return react_1.default.createElement("ul",{className:"alice-carousel__dots"},Array.from({length:l}).map(function(e,t){if(t<v){var i=Utils.checkIsTheLastDotIndex(t,Boolean(s),v),n=Utils.getItemIndexForDotNavigation(t,i,l,c),i=Utils.getActiveSlideIndex(f,r);d&&((i=_)<0?i=l-1:l<=_&&(i=0),n=t);i=i===t?" __active":"";return react_1.default.createElement("li",{key:"dot-item-"+t,onMouseEnter:o,onMouseLeave:u,onClick:function(){return a(n)},className:"alice-carousel__dots-item"+i})}}))};
+"use strict";var __createBinding=Object.create?function(e,t,i,n){void 0===n&&(n=i),Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[i]}})}:function(e,t,i,n){void 0===n&&(n=i),e[n]=t[i]},__setModuleDefault=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},__importStar=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)"default"!==i&&Object.hasOwnProperty.call(e,i)&&__createBinding(t,e,i);return __setModuleDefault(t,e),t},__importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.DotsNavigation=void 0;var react_1=__importDefault(require("react")),Utils=__importStar(require("../utils"));exports.DotsNavigation=function(e){var o=e.state,a=e.onClick,u=e.onMouseEnter,l=e.onMouseLeave,c=e.renderDotsItem,s=o.itemsCount,d=o.itemsInSlide,_=o.infinite,f=o.autoWidth,v=o.activeIndex,m=Utils.getSlideItemInfo(o).isNextSlideDisabled,g=Utils.getDotsNavigationLength(s,d,f);return react_1.default.createElement("ul",{className:"alice-carousel__dots"},Array.from({length:s}).map(function(e,t){if(t<g){var i=Utils.checkIsTheLastDotIndex(t,Boolean(_),g),n=Utils.getItemIndexForDotNavigation(t,i,s,d),r=Utils.getActiveSlideIndex(m,o);f&&((r=v)<0?r=s-1:s<=v&&(r=0),n=t);i=r===t?" __active":"",r=c?" __custom":"";return react_1.default.createElement("li",{key:"dot-item-"+t,onMouseEnter:u,onMouseLeave:l,onClick:function(){return a(n)},className:"alice-carousel__dots-item"+i+r},c&&c({isActive:i,activeIndex:t}))}}))};

lib/views/PlayPauseButton.d.ts

 /// <reference types="react" />
-export declare const PlayPauseButton: ({ isPlaying, onClick }: Props) => JSX.Element;
+export declare const PlayPauseButton: ({ isPlaying, onClick, renderPlayPauseButton }: Props) => JSX.Element;
 declare type Props = {
     isPlaying: boolean;
     onClick: (e: any) => void;
+    renderPlayPauseButton?: ({ isPlaying }: {
+        isPlaying: any;
+    }) => any;
 };
 export {};

lib/views/PlayPauseButton.js

@@ -1,1 +0,1 @@
-"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PlayPauseButton=void 0;var react_1=__importDefault(require("react"));exports.PlayPauseButton=function(e){var a=e.isPlaying,e=e.onClick;return react_1.default.createElement("div",{className:"alice-carousel__play-btn"},react_1.default.createElement("div",{className:"alice-carousel__play-btn-wrapper"},react_1.default.createElement("div",{onClick:e,className:"alice-carousel__play-btn-item"+(a?" __pause":"")})))};
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PlayPauseButton=void 0;var react_1=__importDefault(require("react"));exports.PlayPauseButton=function(e){var a=e.isPlaying,t=e.onClick,e=e.renderPlayPauseButton;return"function"==typeof e?react_1.default.createElement("div",{className:"alice-carousel__play-btn",onClick:t},e({isPlaying:a})):react_1.default.createElement("div",{className:"alice-carousel__play-btn"},react_1.default.createElement("div",{className:"alice-carousel__play-btn-wrapper"},react_1.default.createElement("div",{onClick:t,className:"alice-carousel__play-btn-item"+(a?" __pause":"")})))};

lib/views/PrevNextButton.d.ts

 /// <reference types="react" />
-export declare const PrevNextButton: ({ name, disabled, onClick }: Props) => JSX.Element;
+export declare const PrevNextButton: ({ name, isDisabled, onClick, renderPrevButton, renderNextButton }: Props) => JSX.Element;
 declare type Props = {
     name: 'prev' | 'next';
-    disabled: boolean;
+    isDisabled: boolean;
     onClick: (e: any) => void;
+    renderPrevButton?: ({ isDisabled }: {
+        isDisabled: any;
+    }) => any;
+    renderNextButton?: ({ isDisabled }: {
+        isDisabled: any;
+    }) => any;
 };
 export {};

lib/views/PrevNextButton.js

@@ -1,1 +0,1 @@
-"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PrevNextButton=void 0;var react_1=__importDefault(require("react"));exports.PrevNextButton=function(e){var t=e.name,a=e.disabled,e=e.onClick,a="alice-carousel__"+t+"-btn-item"+(a?" __inactive":"");return react_1.default.createElement("div",{className:"alice-carousel__"+t+"-btn"},react_1.default.createElement("div",{className:"alice-carousel__"+t+"-btn-wrapper"},react_1.default.createElement("p",{className:a,onClick:e},react_1.default.createElement("span",{"data-area":"prev"===t?"<":">"}))))};
+"use strict";var __importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.PrevNextButton=void 0;var react_1=__importDefault(require("react"));exports.PrevNextButton=function(e){var t=e.name,a=e.isDisabled,r=e.onClick,c=e.renderPrevButton,l=e.renderNextButton,e="alice-carousel__"+t+"-btn-item"+(a?" __inactive":"");return"function"==typeof c?react_1.default.createElement("div",{className:"alice-carousel__"+t+"-btn",onClick:r},c({isDisabled:a})):"function"==typeof l?react_1.default.createElement("div",{className:"alice-carousel__"+t+"-btn",onClick:r},l({isDisabled:a})):react_1.default.createElement("div",{className:"alice-carousel__"+t+"-btn"},react_1.default.createElement("div",{className:"alice-carousel__"+t+"-btn-wrapper"},react_1.default.createElement("p",{className:e,onClick:r},react_1.default.createElement("span",{"data-area":"prev"===t?"<":">"}))))};

lib/views/SlideInfo.d.ts

 /// <reference types="react" />
-export declare const SlideInfo: ({ activeIndex, slidesLength }: {
+export declare const SlideInfo: ({ activeIndex, itemsCount, renderSlideInfo }: {
     activeIndex: any;
-    slidesLength: any;
+    itemsCount: any;
+    renderSlideInfo: any;
 }) => JSX.Element;

lib/views/SlideInfo.js

@@ -1,1 +0,1 @@
-"use strict";var __createBinding=Object.create?function(e,t,a,r){void 0===r&&(r=a),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[a]}})}:function(e,t,a,r){void 0===r&&(r=a),e[r]=t[a]},__setModuleDefault=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},__importStar=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var a in e)"default"!==a&&Object.hasOwnProperty.call(e,a)&&__createBinding(t,e,a);return __setModuleDefault(t,e),t},__importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SlideInfo=void 0;var react_1=__importDefault(require("react")),Utils=__importStar(require("../utils"));exports.SlideInfo=function(e){var t=e.activeIndex,e=e.slidesLength,e=Utils.getSlideInfo(t,e);return react_1.default.createElement("div",{className:"alice-carousel__slide-info"},react_1.default.createElement("span",{className:"alice-carousel__slide-info-item"},e.slideIndex),react_1.default.createElement("span",{className:"alice-carousel__slide-info-item alice-carousel__slide-info-item--separator"},"/"),react_1.default.createElement("span",{className:"alice-carousel__slide-info-item"},e.slidesLength))};
+"use strict";var __createBinding=Object.create?function(e,t,a,r){void 0===r&&(r=a),Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[a]}})}:function(e,t,a,r){void 0===r&&(r=a),e[r]=t[a]},__setModuleDefault=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t},__importStar=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var a in e)"default"!==a&&Object.hasOwnProperty.call(e,a)&&__createBinding(t,e,a);return __setModuleDefault(t,e),t},__importDefault=function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.SlideInfo=void 0;var react_1=__importDefault(require("react")),Utils=__importStar(require("../utils"));exports.SlideInfo=function(e){var t=e.activeIndex,a=e.itemsCount,e=e.renderSlideInfo,t=Utils.getSlideInfo(t,a).item;return"function"==typeof e?react_1.default.createElement("div",{className:"alice-carousel__slide-info"},e({item:t,itemsCount:a})):react_1.default.createElement("div",{className:"alice-carousel__slide-info"},react_1.default.createElement("span",{className:"alice-carousel__slide-info-item"},t),react_1.default.createElement("span",{className:"alice-carousel__slide-info-item alice-carousel__slide-info-item--separator"},"/"),react_1.default.createElement("span",{className:"alice-carousel__slide-info-item"},a))};

package.json

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

README.md

@@ -8,5 +8,5 @@ # React Alice Carousel
 
-#### 👉  Live demo: [v2.x.x](https://maxmarinich.github.io/react-alice-carousel/static)
+#### 👉  Live demo (API): [v2.x.x](https://maxmarinich.github.io/react-alice-carousel/static)
 
-#### 👉  Previous version: [v1.x.x](https://github.com/maxmarinich/react-alice-carousel/tree/v1)
+#### 👉  Previous version (API): [v1.x.x](https://github.com/maxmarinich/react-alice-carousel/tree/v1)
 
@@ -94,2 +94,13 @@ ![demo gif](https://github.com/maxmarinich/react-alice-carousel/raw/master/src/assets/img/react-alice-carousel.gif)
 - `responsive`: Object, default `undefined` - Set number of items in the slide. The key is the breakpoint (default is the result of: () => window.innerWidth).
+    ```js
+        {
+          0: {
+              items: 1,
+          },
+          1024: {
+              items: 3
+          }
+        }
+    ```
+
 - `swipeDelta`: Number, default `20`  - Set minimum distance to the start of the swiping (px).
@@ -99,13 +110,54 @@ - `swipeExtraPadding`: Number, default `200`  - Set maximum distance from initial place before swipe action will be stopped (px).
 - `touchMoveDefaultEvents`: Boolean, default `true`  - Enable touch move default events on swiping.
-- `onInitialized`: Function - Fired as callback after the gallery was created.
-- `onResizeEvent`: Function - Fired during `resize` event to determine whether the event handler should be called.
-- `onResized`: Function - Fired as callback after the gallery was resized.
-- `onSlideChange`: Function - Fired while the event object is changing.
-- `onSlideChanged`: Function - Fired after the event object was changed.
+- `onInitialized(e: EventObject)`: Function - Fired as callback after the gallery was created.
+- `onResizeEvent(e: Event)`: Function - Fired during `resize` event to determine whether the event handler should be called.
+- `onResized(e: EventObject)`: Function - Fired as callback after the gallery was resized.
+- `onSlideChange(e: EventObject)`: Function - Fired before the event object changes.
+- `onSlideChanged(e: EventObject)`: Function - Fired after the event object was changed.
+- `renderSlideInfo(e: SlideInfo)`: Rendering function - create a custom component.
+- `renderDotsItem(e: DotsItem)`: Rendering function - create a custom component.
+- `renderPrevButton({ isDisabled })`: Rendering function - create a custom component.
+- `renderNextButton({ isDisabled })`: Rendering function - create a custom component.
+- `renderPlayPauseButton({ isPlaying })`: Rendering function - create a custom component.
 
 #### Methods
-- `slidePrev(e: any) => void` : Go to the prev slide.
-- `slideNext(e: any) => void` : Go to the next slide.
+- `slidePrev(e: Event) => void` : Go to the prev slide.
+- `slideNext(e: Event) => void` : Go to the next slide.
 - `slideTo(activeIndex?: number) => void` : Go to the specified slide.
 
+#### Types
+```typescript
+type EventObject = {
+  item: number;
+  slide: number;
+  itemsInSlide: number;
+  isPrevSlideDisabled: boolean;
+  isNextSlideDisabled: boolean;
+};
+
+type SlideInfo = {
+  item: number;
+  itemsCount: number;
+};
+
+type DotsItem = {
+  isActive: boolean;
+  activeIndex: number;
+};
+```
+
+#### CSS class names
+```css
+.alice-carousel__stage
+.alice-carousel__stage-item
+
+.alice-carousel__prev-btn
+.alice-carousel__next-btn
+.alice-carousel__play-btn
+
+.alice-carousel__dots
+.alice-carousel__dots-item
+
+.alice-carousel__slide-info
+```
+
 ## Build the project locally
@@ -112,0 +164,0 @@ #### Clone

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

Fixed 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

80898

increased by1.85%

Lines of code

579

increased by5.08%

Number of lines in readme file

177

increased by41.6%

Worsened metrics

Number of package files

42

decreased by-2.33%

No dependency changes