react-responsive-carousel - npm Package Compare versions

Comparing version 3.0.20 to 3.0.21

lib/components/Carousel.js

@@ -32,2 +32,5 @@ 'use strict';
         useKeyboardArrows: React.PropTypes.bool,
+        autoPlay: React.PropTypes.bool,
+        stopOnHover: React.PropTypes.bool,
+        interval: React.PropTypes.number,
         swipeScrollTolerance: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.string])
@@ -46,2 +49,5 @@ },
             useKeyboardArrows: false,
+            autoPlay: false,
+            stopOnHover: true,
+            interval: 3000,
             swipeScrollTolerance: 5
@@ -57,3 +63,3 @@ };
     },
-    componentWillReceiveProps: function componentWillReceiveProps(props, state) {
+    componentWillReceiveProps: function componentWillReceiveProps(props) {
         if (props.selectedItem !== this.state.selectedItem) {
@@ -68,2 +74,3 @@ this.updateSizes();
         this.bindEvents();
+        this.setupAutoPlay();
 
@@ -82,3 +89,40 @@ var images = ReactDOM.findDOMNode(this.item0).getElementsByTagName('img');
         this.unbindEvents();
+        this.destroyAutoPlay();
     },
+    setupAutoPlay: function setupAutoPlay() {
+        if (this.props.autoPlay) {
+            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();
+
+            if (this.props.stopOnHover) {
+                var carouselWrapper = ReactDOM.findDOMNode(this.carouselWrapper);
+                carouselWrapper.removeEventListener('mousemove', this.stopOnHover);
+                carouselWrapper.removeEventListener('mouseleave', this.autoPlay);
+            }
+        }
+    },
+    autoPlay: function autoPlay() {
+        var _this = this;
+
+        this.timer = setTimeout(function () {
+            _this.increment();
+            _this.autoPlay();
+        }, this.props.interval);
+    },
+    clearAutoPlay: function clearAutoPlay() {
+        clearTimeout(this.timer);
+    },
+    stopOnHover: function stopOnHover() {
+        this.clearAutoPlay();
+    },
     bindEvents: function bindEvents() {
@@ -173,3 +217,3 @@ // as the widths are calculated, we need to resize
     onSwipeMove: function onSwipeMove(delta) {
-        var _this = this;
+        var _this2 = this;
 
@@ -200,3 +244,3 @@ var list = ReactDOM.findDOMNode(this.itemList);
         ['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
-            list.style[prop] = CSSTranslate(position, _this.props.axis);
+            list.style[prop] = CSSTranslate(position, _this2.props.axis);
         });
@@ -241,7 +285,7 @@
     renderItems: function renderItems() {
-        var _this2 = this;
+        var _this3 = this;
 
         return React.Children.map(this.props.children, function (item, index) {
-            var hasMount = _this2.state.hasMount;
-            var itemClass = klass.ITEM(true, index === _this2.state.selectedItem);
+            var hasMount = _this3.state.hasMount;
+            var itemClass = klass.ITEM(true, index === _this3.state.selectedItem);
 
@@ -251,5 +295,5 @@ return React.createElement(
                 { ref: function ref(node) {
-                        return _this2["item" + index] = node;
+                        return _this3["item" + index] = node;
                     }, key: "itemKey" + index, className: itemClass,
-                    onClick: _this2.handleClickItem.bind(_this2, index, item) },
+                    onClick: _this3.handleClickItem.bind(_this3, index, item) },
                 item
@@ -260,3 +304,3 @@ );
     renderControls: function renderControls() {
-        var _this3 = this;
+        var _this4 = this;
 
@@ -271,3 +315,3 @@ if (!this.props.showIndicators) {
             React.Children.map(this.props.children, function (item, index) {
-                return React.createElement('li', { className: klass.DOT(index === _this3.state.selectedItem), onClick: _this3.changeItem, value: index, key: index });
+                return React.createElement('li', { className: klass.DOT(index === _this4.state.selectedItem), onClick: _this4.changeItem, value: index, key: index });
             })
@@ -301,3 +345,3 @@ );
     render: function render() {
-        var _this4 = this;
+        var _this5 = this;
 
@@ -343,3 +387,3 @@ var itemsLength = this.props.children.length;
             ref: function ref(node) {
-                return _this4.itemList = node;
+                return _this5.itemList = node;
             }
@@ -367,3 +411,5 @@ };
             'div',
-            { className: this.props.className },
+            { className: this.props.className, ref: function ref(node) {
+                    return _this5.carouselWrapper = node;
+                } },
             React.createElement(
@@ -376,3 +422,3 @@ 'div',
                     { className: klass.WRAPPER(true, this.props.axis), style: containerStyles, ref: function ref(node) {
-                            return _this4.itemsWrapper = node;
+                            return _this5.itemsWrapper = node;
                         } },
@@ -379,0 +425,0 @@ React.createElement(

package.json

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

README.md

@@ -61,2 +61,6 @@ # React Responsive Carousel
 | width   | `string` | - | Allows to set a fixed width |
+| useKeyboardArrows   | `boolean` | false | Adds support to next and prev through keyboard arrows |
+| autoPlay   | `boolean` | false | Auto play |
+| stopOnHover   | `boolean` | true | Stop auto play while mouse is over the carousel |
+| interval   | `number` | `5000` | Interval of auto play |
 | useKeyboardArrows   | `boolean` | `false` | Adds support to next and prev through keyboard arrows |
@@ -63,0 +67,0 @@ | 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 |

stories/index.js

@@ -65,7 +65,12 @@ import React from 'react';
   ))
-  .add('fixed height', () => (
-    <Carousel height="700">
+  .add('auto play', () => (
+    <Carousel autoPlay={true} infiniteLoop={true}>
         { baseChildren.props.children }
     </Carousel>
   ))
+  .add('auto play stopping on hover', () => (
+    <Carousel autoPlay={true} stopOnHover={true} infiniteLoop={true}>
+        { baseChildren.props.children }
+    </Carousel>
+  ))
   .add('initial selected', () => (
@@ -72,0 +77,0 @@ <Carousel selectedItem={3}>

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

906009

increased by0.23%

Lines of code

1279

increased by3.9%

Number of lines in readme file

111

increased by3.74%

No dependency changes