nuka-carousel - npm Package Compare versions

Comparing version 0.0.18 to 0.0.19

lib/carousel.js

@@ -78,3 +78,3 @@ 'use strict';
     slidesToShow: _React2['default'].PropTypes.number,
-    slidesToScroll: _React2['default'].PropTypes.number,
+    slidesToScroll: _React2['default'].PropTypes.oneOfType([_React2['default'].PropTypes.number, _React2['default'].PropTypes.oneOf(['auto'])]),
     slideWidth: _React2['default'].PropTypes.oneOfType([_React2['default'].PropTypes.string, _React2['default'].PropTypes.number]),
@@ -113,3 +113,4 @@ speed: _React2['default'].PropTypes.number,
       slideCount: 0,
-      slideWidth: 0
+      slideWidth: 0,
+      slidesToScroll: this.props.slidesToScroll
     };
@@ -165,4 +166,7 @@ },
             slideCount: self.state.slideCount,
+            frameWidth: self.state.frameWidth,
+            slideWidth: self.state.slideWidth,
+            slidesToScroll: self.state.slidesToScroll,
+            cellSpacing: self.props.cellSpacing,
             slidesToShow: self.props.slidesToShow,
-            slidesToScroll: self.props.slidesToScroll,
             nextSlide: self.nextSlide,
@@ -302,3 +306,3 @@ previousSlide: self.previousSlide,
       if (this.touchObject.direction === 1) {
-        if (this.state.currentSlide >= _React2['default'].Children.count(this.props.children) - this.props.slidesToScroll) {
+        if (this.state.currentSlide >= _React2['default'].Children.count(this.props.children) - this.state.slidesToScroll) {
           this.animateSlide(_tweenState2['default'].easingTypes[this.props.edgeEasing]);
@@ -374,7 +378,7 @@ } else {
     var self = this;
-    if (this.state.currentSlide + this.props.slidesToScroll >= _React2['default'].Children.count(this.props.children)) {
+    if (this.state.currentSlide + this.state.slidesToScroll >= _React2['default'].Children.count(this.props.children)) {
       return;
     }
     this.setState({
-      currentSlide: this.state.currentSlide + this.props.slidesToScroll
+      currentSlide: this.state.currentSlide + this.state.slidesToScroll
     }, function () {
@@ -388,7 +392,7 @@ self.animateSlide();
     var self = this;
-    if (this.state.currentSlide - this.props.slidesToScroll < 0) {
+    if (this.state.currentSlide - this.state.slidesToScroll < 0) {
       return;
     }
     this.setState({
-      currentSlide: this.state.currentSlide - this.props.slidesToScroll
+      currentSlide: this.state.currentSlide - this.state.slidesToScroll
     }, function () {
@@ -482,3 +486,2 @@ self.animateSlide();
         slideWidth,
-        frameWidth,
         frameHeight,
@@ -505,7 +508,10 @@ slideHeight;
         slideWidth,
+        slidesToScroll,
         firstSlide,
         frame,
+        frameWidth,
         frameHeight,
         slideHeight;
 
+    slidesToScroll = this.props.slidesToScroll;
     frame = _React2['default'].findDOMNode(this.refs.frame);
@@ -535,7 +541,13 @@ firstSlide = frame.childNodes[0].childNodes[0];
     frameHeight = slideHeight + this.props.cellSpacing / 2 * (this.props.slidesToShow - 1);
+    frameWidth = this.props.vertical ? frameHeight : frame.offsetWidth;
 
+    if (this.props.slidesToScroll === 'auto') {
+      slidesToScroll = Math.floor(frameWidth / (slideWidth + this.props.cellSpacing));
+    }
+
     this.setState({
-      frameWidth: this.props.vertical ? frameHeight : frame.offsetWidth,
+      frameWidth: frameWidth,
       slideCount: _React2['default'].Children.count(this.props.children),
       slideWidth: slideWidth,
+      slidesToScroll: slidesToScroll,
       left: this.props.vertical ? 0 : this.getTargetLeft(),
@@ -542,0 +554,0 @@ top: this.props.vertical ? this.getTargetLeft() : 0

package.json

 {
   "name": "nuka-carousel",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Pure React Carousel",
@@ -30,3 +30,3 @@ "main": "index.js",
     "istanbul-instrumenter-loader": "^0.1.2",
-    "karma": "~0.12.21",
+    "karma": "~0.13.3",
     "karma-chrome-launcher": "~0.1.4",
@@ -40,3 +40,3 @@ "karma-coverage": "^0.3.1",
     "karma-sinon-chai": "^0.3.0",
-    "karma-webpack": "^1.5.0",
+    "karma-webpack": "^1.7.0",
     "mocha": "^2.2.1",
@@ -43,0 +43,0 @@ "react": "^0.13.3",

README.md

@@ -114,5 +114,10 @@ #nuka-carousel
 ####slidesToScroll
-`React.PropTypes.number`
+```
+slidesToScroll: React.PropTypes.oneOfType([
+  React.PropTypes.number,
+  React.PropTypes.oneOf(['auto'])
+])
+```
 
-Slides to scroll at once.
+Slides to scroll at once. Set to `"auto"` to always scroll the current number of visible slides.
 
@@ -119,0 +124,0 @@ ####slideWidth

src/carousel.js

@@ -54,3 +54,6 @@ 'use strict';
     slidesToShow: React.PropTypes.number,
-    slidesToScroll: React.PropTypes.number,
+    slidesToScroll: React.PropTypes.oneOfType([
+      React.PropTypes.number,
+      React.PropTypes.oneOf(['auto'])
+    ]),
     slideWidth: React.PropTypes.oneOfType([
@@ -92,3 +95,4 @@ React.PropTypes.string,
       slideCount: 0,
-      slideWidth: 0
+      slideWidth: 0,
+      slidesToScroll: this.props.slidesToScroll
     }
@@ -140,4 +144,7 @@ },
                   slideCount={self.state.slideCount}
+                  frameWidth={self.state.frameWidth}
+                  slideWidth={self.state.slideWidth}
+                  slidesToScroll={self.state.slidesToScroll}
+                  cellSpacing={self.props.cellSpacing}
                   slidesToShow={self.props.slidesToShow}
-                  slidesToScroll={self.props.slidesToScroll}
                   nextSlide={self.nextSlide}
@@ -291,3 +298,3 @@ previousSlide={self.previousSlide}
       if (this.touchObject.direction === 1) {
-        if (this.state.currentSlide >= React.Children.count(this.props.children) - this.props.slidesToScroll) {
+        if (this.state.currentSlide >= React.Children.count(this.props.children) - this.state.slidesToScroll) {
           this.animateSlide(tweenState.easingTypes[this.props.edgeEasing]);
@@ -364,7 +371,7 @@ } else {
     var self = this;
-    if ((this.state.currentSlide + this.props.slidesToScroll) >= React.Children.count(this.props.children)) {
+    if ((this.state.currentSlide + this.state.slidesToScroll) >= React.Children.count(this.props.children)) {
       return;
     }
     this.setState({
-      currentSlide: this.state.currentSlide + this.props.slidesToScroll
+      currentSlide: this.state.currentSlide + this.state.slidesToScroll
     }, function() {
@@ -378,7 +385,7 @@ self.animateSlide();
     var self = this;
-    if ((this.state.currentSlide - this.props.slidesToScroll) < 0) {
+    if ((this.state.currentSlide - this.state.slidesToScroll) < 0) {
       return;
     }
     this.setState({
-      currentSlide: this.state.currentSlide - this.props.slidesToScroll
+      currentSlide: this.state.currentSlide - this.state.slidesToScroll
     }, function() {
@@ -463,3 +470,3 @@ self.animateSlide();
   setInitialDimensions() {
-    var self = this, slideWidth, frameWidth, frameHeight, slideHeight;
+    var self = this, slideWidth, frameHeight, slideHeight;
 
@@ -482,4 +489,12 @@ slideWidth = this.props.vertical ? (this.props.initialSlideHeight || 0) : (this.props.initialSlideWidth || 0);
   setDimensions() {
-    var self = this, slideWidth, firstSlide, frame, frameHeight, slideHeight;
+    var self = this,
+      slideWidth,
+      slidesToScroll,
+      firstSlide,
+      frame,
+      frameWidth,
+      frameHeight,
+      slideHeight;
 
+    slidesToScroll = this.props.slidesToScroll;
     frame = React.findDOMNode(this.refs.frame);
@@ -509,7 +524,13 @@ firstSlide = frame.childNodes[0].childNodes[0];
     frameHeight = slideHeight + ((this.props.cellSpacing / 2) * (this.props.slidesToShow - 1));
+    frameWidth = this.props.vertical ? frameHeight : frame.offsetWidth;
 
+    if (this.props.slidesToScroll === 'auto') {
+      slidesToScroll = Math.floor(frameWidth / (slideWidth + this.props.cellSpacing));
+    }
+
     this.setState({
-      frameWidth: this.props.vertical ? frameHeight : frame.offsetWidth,
+      frameWidth: frameWidth,
       slideCount: React.Children.count(this.props.children),
       slideWidth: slideWidth,
+      slidesToScroll: slidesToScroll,
       left: this.props.vertical ? 0 : this.getTargetLeft(),
@@ -516,0 +537,0 @@ top: this.props.vertical ? this.getTargetLeft() : 0

test/specs/carousel.spec.js

@@ -401,2 +401,61 @@ 'use strict';
 
+    it('should set slidesToScroll to passed in slidesToScroll', function() {
+        component = React.render(
+          React.createElement(carousel, {slidesToScroll: 3, width: "600px"},
+            React.createElement('p', {className: 'test-slide'}, 'Slide 1'),
+            React.createElement('p', null, 'Slide 2'),
+            React.createElement('p', null, 'Slide 3')
+          ),
+          container
+        );
+
+        expect(component.state.slidesToScroll).to.equal(3);
+    });
+
+    it('should set slidesToScroll to 2 if slideWidth is 250px and slidesToScroll is auto',
+      function() {
+        component = React.render(
+          React.createElement(carousel, {slideWidth: "250px", width: "600px", slidesToScroll: "auto"},
+            React.createElement('p', {className: 'test-slide'}, 'Slide 1'),
+            React.createElement('p', null, 'Slide 2'),
+            React.createElement('p', null, 'Slide 3')
+          ),
+          container
+        );
+
+        expect(component.state.slidesToScroll).to.equal(2);
+    });
+
+    it('should set slidesToScroll to 3 with slideWidth: 100px, cellSpacing: 100, slidesToScroll:auto',
+      function() {
+        component = React.render(
+          React.createElement(carousel, {
+            slideWidth: "100px",
+            width: "600px",
+            cellSpacing: 100,
+            slidesToScroll: "auto"
+          },
+            React.createElement('p', {className: 'test-slide'}, 'Slide 1'),
+            React.createElement('p', null, 'Slide 2'),
+            React.createElement('p', null, 'Slide 3')
+          ),
+          container
+        );
+
+        expect(component.state.slidesToScroll).to.equal(3);
+    });
+
+    it('should set slidesToScroll to 6 if slideWidth is 100px and slidesToScroll is auto',
+      function() {
+        component = React.render(
+          React.createElement(carousel, {slideWidth: "100px", width: "600px", slidesToScroll: "auto"},
+            React.createElement('p', {className: 'test-slide'}, 'Slide 1'),
+            React.createElement('p', null, 'Slide 2'),
+            React.createElement('p', null, 'Slide 3')
+          ),
+          container
+        );
+
+        expect(component.state.slidesToScroll).to.equal(6);
+    });
   });
@@ -403,0 +462,0 @@

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

84248

increased by4.39%

Lines of code

2311

increased by3.73%

Number of lines in readme file

175

increased by2.94%

No dependency changes