react-multi-carousel - npm Package Compare versions

Comparing version 1.0.18 to 1.0.19

lib/Carousel.js

@@ -15,8 +15,8 @@ "use strict";
 const utils_1 = require("./utils");
-const defaultTransitionDuration = 200;
-const defaultTransition = "all 0.2s";
+const defaultTransitionDuration = 300;
+const defaultTransition = "transform 300ms";
 class Container extends React.Component {
     constructor(props) {
         super(props);
-        this.itemRef = React.createRef();
+        this.containerRef = React.createRef();
         this.state = {
@@ -30,3 +30,4 @@ itemWidth: 0,
             domLoaded: false,
-            transform: "translate3d(0px,0,0)"
+            transform: 0,
+            containerWidth: 0
         };
@@ -42,10 +43,87 @@ this.onResize = this.onResize.bind(this);
     componentDidMount() {
-        const { disableSwipeOnMobile, disableDrag } = this.props;
         this.setState({ domLoaded: true });
-        if (this.itemRef && this.itemRef.current) {
-            this.setState({ itemWidth: this.itemRef.current.offsetWidth });
-        }
+        this.correctCurrentState();
         window.addEventListener("resize", this.onResize);
         this.onResize();
     }
+    correctCurrentState(shouldCorrectItemPosition) {
+        const { responsive } = this.props;
+        Object.keys(responsive).forEach(item => {
+            const { breakpoint, items } = responsive[item];
+            const { max, min } = breakpoint;
+            if (window.innerWidth >= min && window.innerWidth <= max) {
+                this.setState({ slidesToShow: items, deviceType: item });
+                this.setContainerAndItemWidth(items, shouldCorrectItemPosition);
+            }
+        });
+    }
+    setContainerAndItemWidth(slidesToShow, shouldCorrectItemPosition) {
+        if (this.containerRef && this.containerRef.current) {
+            const containerWidth = this.containerRef.current.offsetWidth;
+            const itemWidth = Math.round(this.containerRef.current.offsetWidth / slidesToShow);
+            this.setState({
+                containerWidth,
+                itemWidth
+            });
+            if (shouldCorrectItemPosition) {
+                this.setState({
+                    transform: -(itemWidth * this.state.currentSlide)
+                });
+            }
+        }
+    }
+    onResize() {
+        this.correctCurrentState();
+    }
+    componentDidUpdate(prevProps, { containerWidth }) {
+        if (this.containerRef &&
+            this.containerRef.current &&
+            this.containerRef.current.offsetWidth !== containerWidth) {
+            setTimeout(() => {
+                this.correctCurrentState(true);
+            }, this.props.transitionDuration || defaultTransitionDuration);
+        }
+    }
+    resetAllItems() {
+        this.setState({ transform: 0, currentSlide: 0 });
+    }
+    next() {
+        const { slidesToShow } = this.state;
+        const { slidesToSlide, infinite } = this.props;
+        if (this.state.currentSlide + 1 + slidesToShow <= this.state.totalItems) {
+            this.setState({
+                transform: -(this.state.itemWidth *
+                    (this.state.currentSlide + slidesToSlide)),
+                currentSlide: this.state.currentSlide + slidesToSlide
+            });
+        }
+        else {
+            if (infinite) {
+                this.resetAllItems();
+            }
+        }
+    }
+    previous() {
+        const { slidesToShow } = this.state;
+        const { slidesToSlide, infinite } = this.props;
+        if (this.state.currentSlide - slidesToSlide >= 0) {
+            this.setState({
+                transform: -(this.state.itemWidth *
+                    (this.state.currentSlide - slidesToSlide)),
+                currentSlide: this.state.currentSlide - slidesToSlide
+            });
+        }
+        else {
+            if (infinite) {
+                this.setState({
+                    transform: -(this.state.itemWidth *
+                        (this.state.totalItems - slidesToShow)),
+                    currentSlide: this.state.totalItems - slidesToShow
+                });
+            }
+        }
+    }
+    componentWillUnmount() {
+        window.removeEventListener("resize", this.onResize);
+    }
     handleMouseDown(e) {
@@ -65,8 +143,8 @@ if (this.props.disableDrag) {
         if (activeItem.mousedown) {
-            if (activeItem.initialPosition - e.pageX > this.state.itemWidth / 4) {
-                this.next();
+            if (activeItem.initialPosition - e.pageX > this.state.itemWidth / 2) {
+                this.previous();
                 this.setState({ activeItem: {} });
             }
-            if (e.pageX - activeItem.initialPosition > this.state.itemWidth / 4) {
-                this.previous();
+            if (e.pageX - activeItem.initialPosition > this.state.itemWidth / 2) {
+                this.next();
                 this.setState({ activeItem: {} });
@@ -114,92 +192,11 @@ }
     }
-    componentWillUnmount() {
-        const { disableSwipeOnMobile, disableDrag } = this.props;
-        window.removeEventListener("resize", this.onResize);
-    }
-    onResize() {
-        if (this.itemRef &&
-            this.itemRef.current &&
-            this.itemRef.current.offsetWidth !== this.state.itemWidth) {
-            this.setState({ itemWidth: this.itemRef.current.offsetWidth });
-        }
-        this.setItemsToSlide();
-    }
-    resetAllItems() {
-        this.setState({ transform: "translate3d(0px,0,0)", currentSlide: 0 });
-    }
-    componentDidUpdate(prevProps, { domLoaded, itemWidth }) {
-        if (!domLoaded && this.state.domLoaded) {
-            this.setItemsToSlide();
-        }
-        if (this.itemRef.current.offsetWidth !== itemWidth) {
-            setTimeout(() => {
-                this.setState({
-                    itemWidth: this.itemRef.current.offsetWidth,
-                    transform: `translate3d(${-(this.itemRef.current.offsetWidth * this.state.currentSlide)}px,0,0)`
-                });
-                this.setItemsToSlide();
-            }, this.props.transitionDuration || defaultTransitionDuration);
-        }
-    }
-    setItemsToSlide() {
-        const { responsive } = this.props;
-        Object.keys(responsive).forEach(item => {
-            const { breakpoint, items } = responsive[item];
-            const { max, min } = breakpoint;
-            if (window.innerWidth >= min && window.innerWidth <= max) {
-                this.setState({ slidesToShow: items, deviceType: item });
-            }
-        });
-    }
-    next() {
-        const { slidesToShow } = this.state;
-        const { slidesToSlide, infinite } = this.props;
-        if (this.state.currentSlide + 1 + slidesToShow <= this.state.totalItems) {
-            this.setState({
-                transform: `translate3d(${-(this.state.itemWidth *
-                    (this.state.currentSlide + slidesToSlide))}px,0,0)`,
-                currentSlide: this.state.currentSlide + slidesToSlide
-            });
-        }
-        else {
-            if (infinite) {
-                this.resetAllItems();
-            }
-        }
-    }
-    previous() {
-        const { slidesToShow } = this.state;
-        const { slidesToSlide, infinite } = this.props;
-        if (this.state.currentSlide - slidesToSlide >= 0) {
-            this.setState({
-                transform: `translate3d(-${this.state.itemWidth *
-                    (this.state.currentSlide - slidesToSlide)}px,0,0)`,
-                currentSlide: this.state.currentSlide - slidesToSlide
-            });
-        }
-        else {
-            if (infinite) {
-                this.setState({
-                    transform: `translate3d(-${this.state.itemWidth *
-                        (this.state.totalItems - slidesToShow)}px,0,0)`,
-                    currentSlide: this.state.totalItems - slidesToShow
-                });
-            }
-        }
-    }
     render() {
-        const { domLoaded, slidesToShow } = this.state;
+        const { domLoaded, slidesToShow, containerWidth, itemWidth } = this.state;
         const { deviceType, responsive, forSSR, children, slidesToSlide, customLeftArrow, customRightArrow, disableSwipeOnMobile, removeArrow, removeArrowOnDeviceType, infinite, containerClassName, contentClassName, itemClassName, customTransition } = this.props;
-        let itemWidth;
-        if (forSSR && deviceType && !domLoaded && !slidesToShow) {
-            itemWidth = utils_1.guessWidthFromDeviceType(deviceType, responsive);
+        let flexBisis;
+        const domFullLoaded = domLoaded && slidesToShow && containerWidth && itemWidth;
+        if (forSSR && deviceType && !domFullLoaded) {
+            flexBisis = utils_1.guessWidthFromDeviceType(deviceType, responsive);
         }
-        else {
-            if (slidesToShow) {
-                itemWidth = (100 / slidesToShow).toFixed(1);
-            }
-            else {
-                itemWidth = 0;
-            }
-        }
+        const shouldRenderOnSSR = forSSR && deviceType && !domFullLoaded && flexBisis;
         const isLeftEndReach = !(this.state.currentSlide - slidesToSlide >= 0);
@@ -239,7 +236,8 @@ const isRightEndReach = !(this.state.currentSlide + 1 + slidesToShow <=
         };
-        return (React.createElement("div", { className: containerClassName, style: style_1.containerStyle },
-            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: customTransition || defaultTransition,
-                    flex: `1 0 ${itemWidth}%`,
-                    transform: this.state.transform
+        return (React.createElement("div", { className: containerClassName, ref: this.containerRef, style: style_1.containerStyle },
+            React.createElement("div", { className: contentClassName, 
+                // @ts-ignore
+                style: Object.assign({}, style_1.contentStyle, { transition: customTransition || defaultTransition, overflow: shouldRenderOnSSR ? "hidden" : "unset", transform: `translate3d(${this.state.transform}px,0,0)` }) }, React.Children.toArray(children).map((child, index) => (React.createElement("div", { key: index, onMouseMove: this.handleMouseMove, onMouseDown: this.handleMouseDown, onMouseUp: this.handleMouseUp, onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd, style: {
+                    flex: shouldRenderOnSSR ? `1 0 ${flexBisis}%` : "auto",
+                    width: domFullLoaded ? `${itemWidth}px` : "auto"
                 }, className: itemClassName }, child)))),
@@ -246,0 +244,0 @@ shouldShowArrows && !disableLeftArrow && React.createElement(LeftArrow, null),

lib/style.d.ts

 declare const containerStyle: {
     display: string;
     alignItems: string;
+    overflow: string;
 };
 declare const contentStyle: {
     display: string;
-    overflow: string;
     flexDirection: string;
-    transition: string;
     position: string;
-    alignItems: string;
+    willChange: string;
 };
@@ -13,0 +12,0 @@ declare const arrowStyle: {

lib/style.js

@@ -5,3 +5,4 @@ "use strict";
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    overflow: 'hidden'
 };
@@ -11,7 +12,5 @@ exports.containerStyle = containerStyle;
     display: "flex",
-    overflow: "hidden",
     flexDirection: "row",
-    transition: "all 0.2s",
     position: "relative",
-    alignItems: "stretch"
+    willChange: 'transform'
 };
@@ -18,0 +17,0 @@ exports.contentStyle = contentStyle;

lib/types.d.ts

@@ -32,2 +32,3 @@ /// <reference types="react" />
     itemWidth: number;
+    containerWidth: number;
     slidesToShow: number;
@@ -39,4 +40,4 @@ currentSlide: number;
     deviceType?: string;
-    transform: string;
+    transform: number | string;
 }
 export { CarouselInternalState, CarouselProps, responsiveType };

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

30648

increased by0.47%

Worsened metrics

Lines of code

414

decreased by-0.72%

No dependency changes