react-multi-carousel - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

lib/Carousel.js

@@ -26,3 +26,4 @@ "use strict";
             deviceType: "",
-            domLoaded: false
+            domLoaded: false,
+            transform: "translate3d(0px,0,0)"
         };
@@ -44,17 +45,2 @@ this.onResize = this.onResize.bind(this);
         window.addEventListener("resize", this.onResize);
-        const allItems = [
-            ...document.getElementsByClassName("carousel__item")
-        ];
-        allItems.forEach(item => {
-            if (!disableDrag) {
-                item.addEventListener("mousedown", this.handleMouseDown);
-                item.addEventListener("mousemove", this.handleMouseMove);
-                item.addEventListener("mouseup", this.handleMouseUp);
-            }
-            if (!disableSwipeOnMobile) {
-                item.addEventListener("touchstart", this.handleTouchStart);
-                item.addEventListener("touchmove", this.handleTouchMove);
-                item.addEventListener("touchend", this.handleTouchEnd);
-            }
-        });
         this.onResize();
@@ -74,5 +60,2 @@ }
         }
-        const allItems = [
-            ...document.getElementsByClassName("carousel__item")
-        ];
         const { activeItem } = this.state;
@@ -130,17 +113,2 @@ if (activeItem.mousedown) {
         const { disableSwipeOnMobile, disableDrag } = this.props;
-        const allItems = [
-            ...document.getElementsByClassName("carousel__item")
-        ];
-        allItems.forEach(item => {
-            if (!disableDrag) {
-                item.removeEventListener("mousedown", this.handleMouseDown);
-                item.removeEventListener("mousemove", this.handleMouseMove);
-                item.removeEventListener("mouseup", this.handleMouseUp);
-            }
-            if (!disableSwipeOnMobile) {
-                item.removeEventListener("touchstart", this.handleTouchStart);
-                item.removeEventListener("touchmove", this.handleTouchMove);
-                item.removeEventListener("touchend", this.handleTouchEnd);
-            }
-        });
         window.removeEventListener("resize", this.onResize);
@@ -158,12 +126,3 @@ }
     resetAllItems() {
-        const allItems = [
-            ...document.getElementsByClassName("carousel__item")
-        ];
-        allItems.forEach(item => {
-            const left = item.offsetLeft;
-            item.style.transform = `translate3d(0px,0,0)`;
-        });
-        this.setState({
-            currentSlide: 0
-        });
+        this.setState({ transform: 'translate3d(0px,0,0)', currentSlide: 0 });
     }
@@ -191,11 +150,6 @@ componentDidUpdate(prevProps, { domLoaded, itemWidth }) {
         const { slidesToSlide } = this.props;
-        const allItems = [
-            ...document.getElementsByClassName("carousel__item")
-        ];
         if (this.state.currentSlide + 1 + slidesToShow <= this.state.totalItems) {
-            allItems.forEach(item => {
-                item.style.transform = `translate3d(${-(this.state.itemWidth *
-                    (this.state.currentSlide + slidesToSlide))}px,0,0)`;
-            });
             this.setState({
+                transform: `translate3d(${-(this.state.itemWidth *
+                    (this.state.currentSlide + slidesToSlide))}px,0,0)`,
                 currentSlide: this.state.currentSlide + slidesToSlide
@@ -211,11 +165,6 @@ });
         const { slidesToSlide } = this.props;
-        const allItems = [
-            ...document.getElementsByClassName("carousel__item")
-        ];
         if (this.state.currentSlide - slidesToSlide >= 0) {
-            allItems.forEach(item => {
-                item.style.transform = `translate3d(-${this.state.itemWidth *
-                    (this.state.currentSlide - slidesToSlide)}px,0,0)`;
-            });
             this.setState({
+                transform: `translate3d(-${this.state.itemWidth *
+                    (this.state.currentSlide - slidesToSlide)}px,0,0)`,
                 currentSlide: this.state.currentSlide - slidesToSlide
@@ -225,7 +174,5 @@ });
         else {
-            allItems.forEach(item => {
-                item.style.transform = `translate3d(-${this.state.itemWidth *
-                    (this.state.totalItems - slidesToShow)}px,0,0)`;
-            });
             this.setState({
+                transform: `translate3d(-${this.state.itemWidth *
+                    (this.state.totalItems - slidesToShow)}px,0,0)`,
                 currentSlide: this.state.totalItems - slidesToShow
@@ -282,6 +229,7 @@ });
             shouldShowArrows && React.createElement(LeftArrow, null),
-            React.createElement("div", { className: contentClassName, style: style_1.contentStyle }, React.Children.toArray(children).map((child, index) => (React.createElement("div", { key: index, ref: this.itemRef, style: {
+            React.createElement("div", { className: contentClassName, style: style_1.contentStyle }, React.Children.toArray(children).map((child, index) => (React.createElement("div", { key: index, ref: this.itemRef, onMouseMove: this.handleMouseMove, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, style: {
                     transition: transition || "all 0.2s",
-                    flex: `1 0 ${itemWidth}%`
-                }, className: `carousel__item ${itemClassName}` }, child)))),
+                    flex: `1 0 ${itemWidth}%`,
+                    transform: this.state.transform
+                }, className: itemClassName }, child)))),
             shouldShowArrows && React.createElement(RightArrow, null)));
@@ -288,0 +236,0 @@ }

lib/types.d.ts

@@ -37,3 +37,4 @@ /// <reference types="react" />
     deviceType?: string;
+    transform: string;
 }
 export { CarouselInternalState, CarouselProps, responsiveType };

package.json

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

No alert changes

Worsened metrics

Total package byte prevSize

28088

decreased by-10.95%

Lines of code

395

decreased by-11.24%

No dependency changes