nuka-carousel - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

lib/carousel.js

@@ -70,3 +70,7 @@ 'use strict';
     data: _react2['default'].PropTypes.func,
-    decorators: _react2['default'].PropTypes.array,
+    decorators: _react2['default'].PropTypes.arrayOf(_react2['default'].PropTypes.shape({
+      component: _react2['default'].PropTypes.func,
+      position: _react2['default'].PropTypes.oneOf(['TopLeft', 'TopCenter', 'TopRight', 'CenterLeft', 'CenterCenter', 'CenterRight', 'BottomLeft', 'BottomCenter', 'BottomRight']),
+      style: _react2['default'].PropTypes.object
+    })),
     dragging: _react2['default'].PropTypes.bool,
@@ -83,3 +87,5 @@ easing: _react2['default'].PropTypes.string,
     vertical: _react2['default'].PropTypes.bool,
-    width: _react2['default'].PropTypes.string
+    width: _react2['default'].PropTypes.string,
+    beforeSlide: _react2['default'].PropTypes.func,
+    afterSlide: _react2['default'].PropTypes.func
   },
@@ -102,3 +108,5 @@
       vertical: false,
-      width: '100%'
+      width: '100%',
+      beforeSlide: function beforeSlide() {},
+      afterSlide: function afterSlide() {}
     };
@@ -367,2 +375,5 @@ },
     }
+
+    this.props.beforeSlide(this.state.currentSlide, index);
+
     this.setState({
@@ -372,2 +383,3 @@ currentSlide: index
       self.animateSlide();
+      this.props.afterSlide(index);
       self.setExternalData();
@@ -382,8 +394,4 @@ });
     }
-    this.setState({
-      currentSlide: this.state.currentSlide + this.state.slidesToScroll
-    }, function () {
-      self.animateSlide();
-      self.setExternalData();
-    });
+
+    this.goToSlide(this.state.currentSlide + this.state.slidesToScroll);
   },
@@ -396,8 +404,4 @@
     }
-    this.setState({
-      currentSlide: this.state.currentSlide - this.state.slidesToScroll
-    }, function () {
-      self.animateSlide();
-      self.setExternalData();
-    });
+
+    this.goToSlide(this.state.currentSlide - this.state.slidesToScroll);
   },
@@ -404,0 +408,0 @@

package.json

 {
   "name": "nuka-carousel",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Pure React Carousel",
@@ -43,2 +43,3 @@ "main": "index.js",
     "react": "^0.14.0",
+    "react-addons-test-utils": "^0.14.0",
     "react-dom": "^0.14.0",
@@ -45,0 +46,0 @@ "react-hot-loader": "^1.3.0",

README.md

@@ -175,2 +175,6 @@ #nuka-carousel
 
-```
+```
+
+### Contributing
+
+See the [Contribution Docs](CONTRIBUTING.md).

src/carousel.js

@@ -45,3 +45,19 @@ 'use strict';
     data: React.PropTypes.func,
-    decorators: React.PropTypes.array,
+    decorators: React.PropTypes.arrayOf(
+      React.PropTypes.shape({
+        component: React.PropTypes.func,
+        position: React.PropTypes.oneOf([
+          'TopLeft',
+          'TopCenter',
+          'TopRight',
+          'CenterLeft',
+          'CenterCenter',
+          'CenterRight',
+          'BottomLeft',
+          'BottomCenter',
+          'BottomRight'
+        ]),
+        style: React.PropTypes.object
+      })
+    ),
     dragging: React.PropTypes.bool,
@@ -64,3 +80,5 @@ easing: React.PropTypes.string,
     vertical: React.PropTypes.bool,
-    width: React.PropTypes.string
+    width: React.PropTypes.string,
+    beforeSlide: React.PropTypes.func,
+    afterSlide: React.PropTypes.func
   },
@@ -83,3 +101,5 @@
       vertical: false,
-      width: '100%'
+      width: '100%',
+      beforeSlide: function(){},
+      afterSlide: function(){}
     }
@@ -359,2 +379,5 @@ },
     }
+
+    this.props.beforeSlide(this.state.currentSlide, index);
+
     this.setState({
@@ -364,2 +387,3 @@ currentSlide: index
       self.animateSlide();
+      this.props.afterSlide(index);
       self.setExternalData();
@@ -374,8 +398,4 @@ });
     }
-    this.setState({
-      currentSlide: this.state.currentSlide + this.state.slidesToScroll
-    }, function() {
-      self.animateSlide();
-      self.setExternalData();
-    });
+
+    this.goToSlide(this.state.currentSlide + this.state.slidesToScroll);
   },
@@ -388,8 +408,4 @@
     }
-    this.setState({
-      currentSlide: this.state.currentSlide - this.state.slidesToScroll
-    }, function() {
-      self.animateSlide();
-      self.setExternalData();
-    });
+
+    this.goToSlide(this.state.currentSlide - this.state.slidesToScroll);
   },
@@ -396,0 +412,0 @@

test/specs/carousel.spec.js

@@ -5,4 +5,5 @@ 'use strict';
 
-  var React = require('react/addons');
-  var TestUtils = React.addons.TestUtils;
+  var React = require('react');
+  var ReactDOM = require('react-dom');
+  var TestUtils = require('react-addons-test-utils');
 
@@ -16,3 +17,3 @@ var carousel, container, component;
       container = document.body;
-      component = React.render(
+      component = ReactDOM.render(
         React.createElement(carousel, {},
@@ -28,3 +29,3 @@ React.createElement('p', null, 'Slide 1'),
     afterEach(function() {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
@@ -46,7 +47,7 @@
     afterEach(function() {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('should render a .slider div', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {},
@@ -67,3 +68,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should render a .slider-frame div', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {},
@@ -84,3 +85,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should render a .slider-list ul', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {},
@@ -101,3 +102,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should render children with a .slider-slide class', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {},
@@ -118,3 +119,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should render decorators by default', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {},
@@ -154,7 +155,7 @@ React.createElement('p', null, 'Slide 1'),
     afterEach(function() {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('should render with class "slider" with no props supplied', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {},
@@ -175,3 +176,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should render with class "test" with className supplied', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {className: 'test'},
@@ -192,3 +193,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should merge provided styles with the defaults', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {style: {backgroundColor: 'black'}},
@@ -210,3 +211,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should merge provided styles with the defaults', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {style: {backgroundColor: 'black'}},
@@ -228,3 +229,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should align to 0 if cellAlign is left', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slidesToShow: 3,cellAlign: 'left', width: "500px"},
@@ -245,3 +246,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should align to 200 if cellAlign is center', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slidesToShow: 3,cellAlign: 'center', width: '600px'},
@@ -263,3 +264,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should align to 400 if cellAlign is right', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slidesToShow: 3,cellAlign: 'right', width: '600px'},
@@ -281,3 +282,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should set slide width to 200 if cellSpacing is not provided', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slidesToShow: 3, width: '600px'},
@@ -299,3 +300,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should set slide width to 180 if cellSpacing is set to 30', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slidesToShow: 3, cellSpacing: 30, width: '600px'},
@@ -317,3 +318,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should not add mouse handlers if dragging is false', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {dragging: false},
@@ -335,3 +336,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should add mouse handlers if dragging is true', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {dragging: false},
@@ -353,3 +354,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should add frame margin if framePadding is supplied a value', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {framePadding: '40px'},
@@ -371,3 +372,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should set slideWidth to 1000 if slidesToShow is 1', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slidesToShow: 1, width: "1000px"},
@@ -390,3 +391,3 @@ React.createElement('p', {className: 'test-slide'}, 'Slide 1'),
     it('should set slideWidth to 200 if slidesToShow is 3', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slidesToShow: 3, width: "600px"},
@@ -409,3 +410,3 @@ React.createElement('p', {className: 'test-slide'}, 'Slide 1'),
     it('should have currentSlide equal 2 if slidesToScroll is 2 and it advances', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slidesToShow: 2, slidesToScroll: 2},
@@ -425,3 +426,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should set slidesToScroll to passed in slidesToScroll', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slidesToScroll: 3, width: "600px"},
@@ -440,3 +441,3 @@ React.createElement('p', {className: 'test-slide'}, 'Slide 1'),
       function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slideWidth: "250px", width: "600px", slidesToScroll: "auto"},
@@ -455,3 +456,3 @@ React.createElement('p', {className: 'test-slide'}, 'Slide 1'),
       function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {
@@ -475,3 +476,3 @@ slideWidth: "100px",
       function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, {slideWidth: "100px", width: "600px", slidesToScroll: "auto"},
@@ -497,7 +498,7 @@ React.createElement('p', {className: 'test-slide'}, 'Slide 1'),
     afterEach(function() {
-      React.unmountComponentAtNode(container);
+      ReactDOM.unmountComponentAtNode(container);
     });
 
     it('should advance if nextSlide() is called', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, null,
@@ -517,3 +518,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should not advance if nextSlide() is called and the currentSlide is the last slide', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, null,
@@ -535,3 +536,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should not go back if previousSlide() is called and the currentSlide is the first slide', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, null,
@@ -551,3 +552,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should go back if previousSlide() is called', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, null,
@@ -568,3 +569,3 @@ React.createElement('p', null, 'Slide 1'),
     it('should go to 2 if goToSlide(2) is called', function() {
-        component = React.render(
+        component = ReactDOM.render(
           React.createElement(carousel, null,
@@ -571,0 +572,0 @@ React.createElement('p', null, 'Slide 1'),

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

85626

increased by1.59%

Number of package files

21

increased by5%

Lines of code

2326

increased by0.56%

Number of lines in readme file

180

increased by2.86%

Worsened metrics

Dev dependency count

40

increased by2.56%

No dependency changes