react-multi-carousel - npm Package Compare versions

Comparing version 1.3.11 to 1.3.12

lib/Carousel.js

@@ -202,3 +202,3 @@ "use strict";
         var childrenArr = React.Children.toArray(this.props.children);
-        var _b = utils_1.whenEnteredClones(this.state, childrenArr, this.props), hasEnterClonedAfter = _b.hasEnterClonedAfter, hasEnterClonedBefore = _b.hasEnterClonedBefore, nextSlide = _b.nextSlide, nextPosition = _b.nextPosition;
+        var _b = utils_1.checkClonesPosition(this.state, childrenArr, this.props), isReachingTheEnd = _b.isReachingTheEnd, isReachingTheStart = _b.isReachingTheStart, nextSlide = _b.nextSlide, nextPosition = _b.nextPosition;
         if (
@@ -210,3 +210,3 @@ // this is to prevent this gets called on the server-side.
             !this.state.isSliding) {
-            if (hasEnterClonedAfter || hasEnterClonedBefore) {
+            if (isReachingTheEnd || isReachingTheStart) {
                 this.isAnimationAllowed = false;
@@ -213,0 +213,0 @@ setTimeout(function () {

lib/utils/clones.d.ts

@@ -16,8 +16,8 @@ import { CarouselInternalState, CarouselProps } from "../types";
 };
-declare function whenEnteredClones({ currentSlide, slidesToShow, itemWidth, totalItems }: CarouselInternalState, childrenArr: any[], props: CarouselProps): {
-    hasEnterClonedAfter: boolean;
-    hasEnterClonedBefore: boolean;
+declare function checkClonesPosition({ currentSlide, slidesToShow, itemWidth, totalItems }: CarouselInternalState, childrenArr: any[], props: CarouselProps): {
+    isReachingTheEnd: boolean;
+    isReachingTheStart: boolean;
     nextSlide: number;
     nextPosition: number;
 };
-export { getOriginalCounterPart, getCloneCounterPart, getClones, whenEnteredClones };
+export { getOriginalCounterPart, getCloneCounterPart, getClones, checkClonesPosition };

lib/utils/clones.js

@@ -101,18 +101,25 @@ "use strict";
 */
-function whenEnteredClones(_a, childrenArr, props) {
+function checkClonesPosition(_a, childrenArr, props) {
     var currentSlide = _a.currentSlide, slidesToShow = _a.slidesToShow, itemWidth = _a.itemWidth, totalItems = _a.totalItems;
+    // the one is here for pre-swtiching the position just right before we are one more slide away from the end.
+    // this gives us enough time to pre-clone the carousel items.
+    var reservedSlide = 1;
     var nextSlide = 0;
     var nextPosition = 0;
-    var hasEnterClonedAfter;
-    var hasEnterClonedBefore = currentSlide === 0;
+    var isReachingTheEnd;
+    var isReachingTheStart = currentSlide <= reservedSlide;
     var originalFirstSlide = childrenArr.length - (childrenArr.length - slidesToShow * 2);
     if (childrenArr.length > slidesToShow * 2) {
-        hasEnterClonedAfter =
-            currentSlide >= originalFirstSlide + childrenArr.length;
-        if (hasEnterClonedAfter) {
+        isReachingTheEnd =
+            currentSlide >=
+                originalFirstSlide + childrenArr.length - reservedSlide;
+        if (isReachingTheEnd) {
             nextSlide = currentSlide - childrenArr.length;
             nextPosition = -(itemWidth * nextSlide);
         }
-        if (hasEnterClonedBefore) {
-            nextSlide = originalFirstSlide + (childrenArr.length - slidesToShow * 2);
+        if (isReachingTheStart) {
+            nextSlide =
+                originalFirstSlide +
+                    currentSlide +
+                    (childrenArr.length - slidesToShow * 2);
             nextPosition = -(itemWidth * nextSlide);
@@ -122,14 +129,15 @@ }
     else {
-        hasEnterClonedAfter = currentSlide >= childrenArr.length * 2;
-        if (hasEnterClonedAfter) {
+        isReachingTheEnd =
+            currentSlide + reservedSlide >= childrenArr.length * 2;
+        if (isReachingTheEnd) {
             nextSlide = currentSlide - childrenArr.length;
             nextPosition = -(itemWidth * nextSlide);
         }
-        if (hasEnterClonedBefore) {
+        if (isReachingTheStart) {
             if (props.showDots) {
-                nextSlide = childrenArr.length;
+                nextSlide = childrenArr.length + currentSlide;
                 nextPosition = -(itemWidth * nextSlide);
             }
             else {
-                nextSlide = totalItems - slidesToShow * 2;
+                nextSlide = totalItems - slidesToShow * 2 + currentSlide;
                 nextPosition = -(itemWidth * nextSlide);
@@ -140,4 +148,4 @@ }
     return {
-        hasEnterClonedAfter: hasEnterClonedAfter,
-        hasEnterClonedBefore: hasEnterClonedBefore,
+        isReachingTheEnd: isReachingTheEnd,
+        isReachingTheStart: isReachingTheStart,
         nextSlide: nextSlide,
@@ -147,3 +155,3 @@ nextPosition: nextPosition
 }
-exports.whenEnteredClones = whenEnteredClones;
+exports.checkClonesPosition = checkClonesPosition;
 //# sourceMappingURL=clones.js.map

lib/utils/index.d.ts

@@ -1,2 +0,2 @@
-import { getOriginalCounterPart, getCloneCounterPart, getClones, whenEnteredClones } from "./clones";
+import { getOriginalCounterPart, getCloneCounterPart, getClones, checkClonesPosition } from "./clones";
 import { getWidthFromDeviceType, getParitialVisibilityGutter, getItemClientSideWidth } from "./elementWidth";
@@ -9,2 +9,2 @@ import { getInitialState, getIfSlideIsVisbile, getTransformForCenterMode, getTransformForPartialVsibile } from './common';
 import { populateSlidesOnMouseTouchMove } from './mouseOrTouchMove';
-export { getOriginalCounterPart, getCloneCounterPart, getClones, getWidthFromDeviceType, whenEnteredClones, getItemClientSideWidth, getParitialVisibilityGutter, throttle, getInitialState, getIfSlideIsVisbile, getTransformForCenterMode, getTransformForPartialVsibile, throwError, populateNextSlides, populatePreviousSlides, populateSlidesOnMouseTouchMove };
+export { getOriginalCounterPart, getCloneCounterPart, getClones, getWidthFromDeviceType, checkClonesPosition, getItemClientSideWidth, getParitialVisibilityGutter, throttle, getInitialState, getIfSlideIsVisbile, getTransformForCenterMode, getTransformForPartialVsibile, throwError, populateNextSlides, populatePreviousSlides, populateSlidesOnMouseTouchMove };

lib/utils/index.js

@@ -7,3 +7,3 @@ "use strict";
 exports.getClones = clones_1.getClones;
-exports.whenEnteredClones = clones_1.whenEnteredClones;
+exports.checkClonesPosition = clones_1.checkClonesPosition;
 var elementWidth_1 = require("./elementWidth");
@@ -10,0 +10,0 @@ exports.getWidthFromDeviceType = elementWidth_1.getWidthFromDeviceType;

package.json

 {
   "name": "react-multi-carousel",
-  "version": "1.3.11",
+  "version": "1.3.12",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

151867

increased by0.3%

Lines of code

1417

increased by0.57%

No dependency changes