react-responsive-carousel - npm Package Compare versions

Comparing version 3.0.21 to 3.0.22

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 ? "symbol" : typeof obj; };
+
 var React = require('react');
@@ -36,3 +38,4 @@ var ReactDOM = require('react-dom');
         interval: React.PropTypes.number,
-        swipeScrollTolerance: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string])
+        swipeScrollTolerance: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string]),
+        dynamicHeight: React.PropTypes.bool
     },
@@ -53,3 +56,4 @@
             interval: 3000,
-            swipeScrollTolerance: 5
+            swipeScrollTolerance: 5,
+            dynamicHeight: false
         };
@@ -64,14 +68,25 @@ },
     },
-    componentWillReceiveProps: function componentWillReceiveProps(props) {
-        if (props.selectedItem !== this.state.selectedItem) {
+    componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+        if (nextProps.selectedItem !== this.state.selectedItem) {
             this.updateSizes();
             this.setState({
-                selectedItem: props.selectedItem
+                selectedItem: nextProps.selectedItem
             });
         }
+
+        if (nextProps.autoPlay !== this.props.autoPlay) {
+            if (nextProps.autoPlay) {
+                this.setupAutoPlay();
+            } else {
+                this.destroyAutoPlay();
+            }
+        }
     },
-    componentDidMount: function componentDidMount(nextProps) {
+    componentDidMount: function componentDidMount() {
         this.bindEvents();
-        this.setupAutoPlay();
 
+        if (this.props.autoPlay) {
+            this.setupAutoPlay();
+        }
+
         var images = ReactDOM.findDOMNode(this.item0).getElementsByTagName('img');
@@ -92,21 +107,17 @@ var initialImage = images && images[this.props.selectedItem];
     setupAutoPlay: function setupAutoPlay() {
-        if (this.props.autoPlay) {
-            this.autoPlay();
+        this.autoPlay();
 
-            if (this.props.stopOnHover) {
-                var carouselWrapper = ReactDOM.findDOMNode(this.carouselWrapper);
-                carouselWrapper.addEventListener('mouseenter', this.stopOnHover);
-                carouselWrapper.addEventListener('mouseleave', this.autoPlay);
-            }
+        if (this.props.stopOnHover) {
+            var carouselWrapper = ReactDOM.findDOMNode(this.carouselWrapper);
+            carouselWrapper.addEventListener('mouseenter', this.stopOnHover);
+            carouselWrapper.addEventListener('mouseleave', this.autoPlay);
         }
     },
     destroyAutoPlay: function destroyAutoPlay() {
-        if (this.props.autoPlay) {
-            this.clearAutoPlay();
+        this.clearAutoPlay();
 
-            if (this.props.stopOnHover) {
-                var carouselWrapper = ReactDOM.findDOMNode(this.carouselWrapper);
-                carouselWrapper.removeEventListener('mousemove', this.stopOnHover);
-                carouselWrapper.removeEventListener('mouseleave', this.autoPlay);
-            }
+        if (this.props.stopOnHover) {
+            var carouselWrapper = ReactDOM.findDOMNode(this.carouselWrapper);
+            carouselWrapper.removeEventListener('mousemove', this.stopOnHover);
+            carouselWrapper.removeEventListener('mouseleave', this.autoPlay);
         }
@@ -338,5 +349,35 @@ },
     },
-    render: function render() {
+    getVariableImageHeight: function getVariableImageHeight(position) {
         var _this5 = this;
 
+        if (this.state.hasMount && this['item' + position].getElementsByTagName('img').length > 0) {
+            var _ret = function () {
+                var image = _this5['item' + position].getElementsByTagName('img')[0];
+
+                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
+                };
+            }();
+
+            if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v;
+        }
+
+        return null;
+    },
+    render: function render() {
+        var _this6 = this;
+
         var itemsLength = this.props.children.length;
@@ -381,3 +422,3 @@
             ref: function ref(node) {
-                return _this5.itemList = node;
+                return _this6.itemList = node;
             }
@@ -393,2 +434,8 @@ };
             });
+
+            if (this.props.dynamicHeight) {
+                var itemHeight = this.getVariableImageHeight(this.state.selectedItem);
+                swiperProps.style.height = itemHeight || 'auto';
+                containerStyles.height = itemHeight || 'auto';
+            }
         } else {
@@ -407,3 +454,3 @@ merge(swiperProps, {
             { className: this.props.className, ref: function ref(node) {
-                    return _this5.carouselWrapper = node;
+                    return _this6.carouselWrapper = node;
                 } },
@@ -417,3 +464,3 @@ React.createElement(
                     { className: klass.WRAPPER(true, this.props.axis), style: containerStyles, ref: function ref(node) {
-                            return _this5.itemsWrapper = node;
+                            return _this6.itemsWrapper = node;
                         } },
@@ -420,0 +467,0 @@ React.createElement(

lib/components/Thumbs.js

@@ -168,3 +168,3 @@ 'use strict';
             if (item.type !== "img") {
-                img = item.props.children.filter(function (children) {
+                img = React.Children.toArray(item.props.children).filter(function (children) {
                     return children.type === "img";
@@ -175,3 +175,4 @@ })[0];
             if (img.length) {
-                console.log(img, img.length, "No images found! Can't build the thumb list");
+                console.warn(img, img.length, "No images found! Can't build the thumb list. If you don't need thumbs, set showThumbs={false} in the Carousel");
+                return null;
             }
@@ -178,0 +179,0 @@

package.json

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

README.md

@@ -67,2 +67,3 @@ # React Responsive Carousel
 | swipeScrollTolerance  | `number` | `5` | Allows scroll when the swipe movement occurs in a different direction than the carousel axis and within the tolerance - Increase for loose - Decrease for strict | 
+| dynamicHeight | `boolean` | false | Adjusts the carousel height if required. -- Do not work with vertical axis --
 
@@ -69,0 +70,0 @@

stories/index.js

@@ -65,2 +65,12 @@ import React from 'react';
   ))
+  .add('dynamic height images', () => (
+    <Carousel showArrows={false} dynamicHeight={true}>
+        <div><img src="http://placehold.it/350x150" /></div>
+        <div><img src="http://placehold.it/255x150" /></div>
+        <div><img src="http://placehold.it/295x150" /></div>
+        <div><img src="http://placehold.it/310x150" /></div>
+        <div><img src="http://placehold.it/575x250" /></div>
+        <div><img src="http://placehold.it/450x150" /></div>
+    </Carousel>
+  ))
   .add('auto play', () => (
@@ -67,0 +77,0 @@ <Carousel autoPlay={true} infiniteLoop={true}>

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

907796

increased by0.2%

Number of package files

39

increased by2.63%

Lines of code

1330

increased by3.99%

Number of lines in readme file

112

increased by0.9%

No dependency changes