Change naming of lastPosition to lastX

YIZHUANG · May 11, 2019 · fc0d144 · fc0d144
1 parent d637872
commit fc0d144
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@ Production-ready, lightweight fully customizable React carousel component that r
 
 The technical details of this carousel can be found at [www.w3js.com -> react-multi-carousel](https://w3js.com/article/react-carousel-with-server-side-rendering-support-part-1z/881).
 
+Don't forget to leave a star if this project help you reduce time to develop.
+
 [![npm version](https://badge.fury.io/js/react-multi-carousel.svg)](https://www.npmjs.com/package/react-multi-carousel)
 [![Build Status](https://api.travis-ci.org/YIZHUANG/react-multi-carousel.svg?branch=master)](https://travis-ci.org/YIZHUANG/react-multi-carousel)
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2FYIZHUANG%2Freact-multi-carousel.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2FYIZHUANG%2Freact-multi-carousel?ref=badge_shield)

diff --git a/src/Carousel.tsx b/src/Carousel.tsx
@@ -42,7 +42,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
   private readonly containerRef: React.RefObject<any>;
   public onMove: boolean;
   public initialX: number;
-  public lastPosition: number;
+  public lastX: number;
   public isAnimationAllowed: boolean;
   public direction: string;
   public autoPlay?: any;
@@ -87,7 +87,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
     );
     this.onMove = false;
     this.initialX = 0;
-    this.lastPosition = 0;
+    this.lastX = 0;
     this.isAnimationAllowed = false;
     this.direction = "";
     this.initialY = 0;
@@ -355,7 +355,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
   public resetMoveStatus(): void {
     this.onMove = false;
     this.initialX = 0;
-    this.lastPosition = 0;
+    this.lastX = 0;
     this.direction = "";
     this.initialY = 0;
   }
@@ -371,7 +371,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
     this.onMove = true;
     this.initialX = clientX;
     this.initialY = clientY;
-    this.lastPosition = clientX;
+    this.lastX = clientX;
     this.isAnimationAllowed = false;
   }
   public handleMove(e: any): void {
@@ -397,7 +397,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
         this.state,
         this.props,
         this.initialX,
-        this.lastPosition,
+        this.lastX,
         clientX
       );
       if (direction) {
@@ -407,7 +407,7 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
           this.setState({ transform: nextPosition });
         }
       }
-      this.lastPosition = clientX;
+      this.lastX = clientX;
     }
   }
   public handleOut(e: any): void {
@@ -425,11 +425,11 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
     if (this.onMove) {
       if (this.direction === "right") {
         const canGoNext =
-          this.initialX - this.lastPosition >=
+          this.initialX - this.lastX >=
           this.props.minimumTouchDrag!;
         if (canGoNext) {
           const slidesHavePassed = Math.round(
-            (this.initialX - this.lastPosition) / this.state.itemWidth
+            (this.initialX - this.lastX) / this.state.itemWidth
           );
           this.next(slidesHavePassed);
         } else {
@@ -438,11 +438,11 @@ class Carousel extends React.Component<CarouselProps, CarouselInternalState> {
       }
       if (this.direction === "left") {
         const canGoNext =
-          this.lastPosition - this.initialX >
+          this.lastX - this.initialX >
           this.props.minimumTouchDrag!;
         if (canGoNext) {
           const slidesHavePassed = Math.round(
-            (this.lastPosition - this.initialX) / this.state.itemWidth
+            (this.lastX - this.initialX) / this.state.itemWidth
           );
           this.previous(slidesHavePassed);
         } else {

diff --git a/src/utils/mouseOrTouchMove.ts b/src/utils/mouseOrTouchMove.ts
@@ -5,7 +5,7 @@ function populateSlidesOnMouseTouchMove(
   state: CarouselInternalState,
   props: CarouselProps,
   initialX: number,
-  lastPosition: number,
+  lastX: number,
   clientX: number
 ): {
   direction?: string;
@@ -25,10 +25,10 @@ function populateSlidesOnMouseTouchMove(
   let nextPosition;
   // making sure we have items to slide back to, prevent oversliding.
   const slidesHavePassedRight = Math.round(
-    (initialX - lastPosition) / itemWidth
+    (initialX - lastX) / itemWidth
   );
   const slidesHavePassedLeft = Math.round(
-    (lastPosition - initialX) / itemWidth
+    (lastX - initialX) / itemWidth
   );
   const isMovingRight = initialX > clientX;
   const isMovingLeft = clientX > initialX;
@@ -39,7 +39,7 @@ function populateSlidesOnMouseTouchMove(
       const translateXLimit = Math.abs(
         -(itemWidth * (totalItems - slidesToShow))
       );
-      const nextTranslate = transform - (lastPosition - clientX);
+      const nextTranslate = transform - (lastX - clientX);
       const isLastSlide = currentSlide === totalItems - slidesToShow;
       if (
         Math.abs(nextTranslate) <= translateXLimit ||
@@ -54,7 +54,7 @@ function populateSlidesOnMouseTouchMove(
     const isAboutToOverSlide = !(slidesHavePassedLeft <= slidesToShow);
     if (!isAboutToOverSlide) {
       direction = "left";
-      const nextTranslate = transform + (clientX - lastPosition);
+      const nextTranslate = transform + (clientX - lastX);
       const isFirstSlide = currentSlide === 0;
       if (nextTranslate <= 0 || (isFirstSlide && infinite)) {
         canContinue = true;