react-responsive-carousel - npm Package Compare versions

Comparing version 3.1.6 to 3.1.7

lib/components/Carousel.js

@@ -5,2 +5,4 @@ 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 var React = require('react');
@@ -91,5 +93,3 @@ var ReactDOM = require('react-dom');
 
-        var images = ReactDOM.findDOMNode(this.item0).getElementsByTagName('img');
-        var initialImage = images && images[this.props.selectedItem];
-
+        var initialImage = this.getInitialImage();
         if (initialImage) {
@@ -161,2 +161,7 @@ // if it's a carousel of images, we set the mount state after the first image is loaded
 
+        var initialImage = this.getInitialImage();
+        if (initialImage) {
+            initialImage.removeEventListener("load", this.setMountState);
+        }
+
         if (this.props.useKeyboardArrows) {
@@ -369,2 +374,7 @@ document.removeEventListener("keydown", this.navigateWithKeyboard);
     },
+    getInitialImage: function getInitialImage() {
+        var selectedItem = this.props.selectedItem;
+        var images = ReactDOM.findDOMNode(this['item' + selectedItem]).getElementsByTagName('img');
+        return images && images[selectedItem];
+    },
     getVariableImageHeight: function getVariableImageHeight(position) {
@@ -374,16 +384,24 @@ var _this5 = this;
         if (this.state.hasMount && this['item' + position].getElementsByTagName('img').length > 0) {
-            var image = this['item' + position].getElementsByTagName('img')[0];
+            var _ret = function () {
+                var image = _this5['item' + position].getElementsByTagName('img')[0];
 
-            if (!image.complete) {
-                // if the image is still loading, the size won't be available so we trigger a new render after it's done
-                var onImageLoad = function onImageLoad() {
-                    _this5.forceUpdate();
-                    image.removeEventListener('load', onImageLoad);
+                if (!image.complete) {
+                    (function () {
+                        // if the image is still loading, the size won't be available so we trigger a new render after it's done
+                        var onImageLoad = function onImageLoad() {
+                            _this5.forceUpdate();
+                            image.removeEventListener('load', onImageLoad);
+                        };
+
+                        image.addEventListener('load', onImageLoad);
+                    })();
+                }
+
+                var height = _this5['item' + position].getElementsByTagName('img')[0].clientHeight;
+                return {
+                    v: height > 0 ? height : null
                 };
+            }();
 
-                image.addEventListener('load', onImageLoad);
-            }
-
-            var height = this['item' + position].getElementsByTagName('img')[0].clientHeight;
-            return height > 0 ? height : null;
+            if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
         }
@@ -390,0 +408,0 @@

lib/components/Thumbs.js

@@ -45,7 +45,2 @@ 'use strict';
     },
-    componentWillUnmount: function componentWillUnmount() {
-        // removing listeners
-        window.removeEventListener("resize", this.updateStatics);
-        window.removeEventListener("DOMContentLoaded", this.updateStatics);
-    },
     componentDidMount: function componentDidMount(nextProps) {
@@ -58,4 +53,6 @@ // as the widths are calculated, we need to resize
 
-        var defaultImg = ReactDOM.findDOMNode(this.thumb0).getElementsByTagName('img')[0];
-        defaultImg.addEventListener('load', this.setMountState);
+        var defaultImg = this.getDefaultImage();
+        if (defaultImg) {
+            defaultImg.addEventListener('load', this.onFirstImageLoad);
+        }
 
@@ -66,2 +63,12 @@ // when the component is rendered we need to calculate
     },
+    componentWillUnmount: function componentWillUnmount() {
+        // removing listeners
+        window.removeEventListener("resize", this.updateStatics);
+        window.removeEventListener("DOMContentLoaded", this.updateStatics);
+
+        var defaultImg = this.getDefaultImage();
+        if (defaultImg) {
+            defaultImg.removeEventListener('load', this.onFirstImageLoad);
+        }
+    },
     updateStatics: function updateStatics() {
@@ -75,4 +82,15 @@ var total = this.props.children.length;
     },
-    setMountState: function setMountState() {
+    getDefaultImage: function getDefaultImage() {
+        var firstItem = ReactDOM.findDOMNode(this.thumb0);
+
+        if (firstItem) {
+            var firstImage = firstItem.getElementsByTagName('img');
+            return firstImage && firstImage[0];
+        }
+
+        return null;
+    },
+    onFirstImageLoad: function onFirstImageLoad() {
         this.setState({ hasMount: true });
+        this.updateStatics();
     },
@@ -79,0 +97,0 @@ handleClickItem: function handleClickItem(index, item) {

package.json

 {
   "name": "react-responsive-carousel",
-  "version": "3.1.6",
+  "version": "3.1.7",
   "description": "React Responsive Carousel",
@@ -5,0 +5,0 @@ "author": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1173429

increased by0.11%

Lines of code

1401

increased by2.26%

No dependency changes