react-slideshow-image 3.5.0 → 3.7.0

package/lib/fade.js

@@ -67,6 +67,8 @@ function (_Component) {
     _this.tweenGroup = new _tween["default"].Group();
     _this.reactSlideshowWrapper = (0, _react.createRef)();
     _this.wrapper = (0, _react.createRef)();
+    _this.startSwipe = _this.startSwipe.bind(_assertThisInitialized(_this));
+    _this.endSwipe = _this.endSwipe.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -258,16 +260,49 @@ function (_Component) {
         this.goNext();
       }
     }
+  }, {
+    key: "startSwipe",
+    value: function startSwipe(e) {
+      var _getProps6 = (0, _props.getProps)(this.props),
+          canSwipe = _getProps6.canSwipe;
+
+      if (canSwipe) {
+        this.startingClientX = e.touches ? e.touches[0].pageX : e.clientX;
+        clearTimeout(this.timeout);
+        this.dragging = true;
+      }
+    }
+  }, {
+    key: "endSwipe",
+    value: function endSwipe(e) {
+      var clientX = e.changedTouches ? e.changedTouches[0].pageX : e.clientX;
+      var distance = clientX - this.startingClientX;
+
+      var _getProps7 = (0, _props.getProps)(this.props),
+          canSwipe = _getProps7.canSwipe;
+
+      if (canSwipe) {
+        this.dragging = false;
+
+        if (Math.abs(distance) / this.width > 0.2) {
+          if (distance < 0) {
+            this.goNext();
+          } else {
+            this.goBack();
+          }
+        }
+      }
+    }
   }, {
     key: "render",
     value: function render() {
       var _this5 = this;
 
-      var _getProps6 = (0, _props.getProps)(this.props),
-          indicators = _getProps6.indicators,
-          children = _getProps6.children,
-          arrows = _getProps6.arrows,
-          cssClass = _getProps6.cssClass;
+      var _getProps8 = (0, _props.getProps)(this.props),
+          indicators = _getProps8.indicators,
+          children = _getProps8.children,
+          arrows = _getProps8.arrows,
+          cssClass = _getProps8.cssClass;
 
       var index = this.state.index;
       var unhandledProps = (0, _helpers.getUnhandledProps)(_props.propTypes, this.props);
@@ -279,6 +314,11 @@ function (_Component) {
         onMouseEnter: this.pauseSlides,
         onMouseOver: this.pauseSlides,
         onMouseLeave: this.startSlides,
+        onMouseDown: this.startSwipe,
+        onMouseUp: this.endSwipe,
+        onTouchStart: this.startSwipe,
+        onTouchEnd: this.endSwipe,
+        onTouchCancel: this.endSwipe,
         ref: this.reactSlideshowWrapper
       }, arrows && (0, _helpers.showPreviousArrow)((0, _props.getProps)(this.props), this.state.index, this.preFade), _react["default"].createElement("div", {
         className: "react-slideshow-fade-wrapper ".concat(cssClass),
@@ -308,14 +348,14 @@ function (_Component) {
 
       var index = this.state.index;
 
-      var _getProps7 = (0, _props.getProps)(this.props),
-          autoplay = _getProps7.autoplay,
-          children = _getProps7.children,
-          infinite = _getProps7.infinite,
-          duration = _getProps7.duration,
-          transitionDuration = _getProps7.transitionDuration,
-          onChange = _getProps7.onChange,
-          easing = _getProps7.easing;
+      var _getProps9 = (0, _props.getProps)(this.props),
+          autoplay = _getProps9.autoplay,
+          children = _getProps9.children,
+          infinite = _getProps9.infinite,
+          duration = _getProps9.duration,
+          transitionDuration = _getProps9.transitionDuration,
+          onChange = _getProps9.onChange,
+          easing = _getProps9.easing;
 
       var existingTweens = this.tweenGroup.getAll();
 

package/lib/props.js

@@ -31,7 +31,14 @@ var defaultProps = {
   canSwipe: true,
   slidesToShow: 1,
   slidesToScroll: 1,
-  cssClass: ''
+  cssClass: '',
+  responsive: []
+};
+
+var getResponsiveSettings = function getResponsiveSettings(windowWidth, responsive) {
+  return responsive.find(function (each) {
+    return each.breakpoint <= windowWidth;
+  });
 };
 
 var getProps = function getProps(componentProps) {
@@ -39,7 +46,18 @@ var getProps = function getProps(componentProps) {
     return each;
   });
 
-  return _objectSpread({}, defaultProps, {}, componentProps, {
+  var settings = {};
+
+  if (typeof window !== 'undefined' && Array.isArray(componentProps.responsive)) {
+    var windowWidth = window.innerWidth;
+    var responsiveSettings = getResponsiveSettings(windowWidth, componentProps.responsive);
+
+    if (responsiveSettings) {
+      settings = responsiveSettings.settings;
+    }
+  }
+
+  return _objectSpread({}, defaultProps, {}, componentProps, {}, settings, {
     children: children
   });
 };
@@ -62,7 +80,8 @@ var propTypes = {
   canSwipe: 'boolean',
   slidesToShow: 'number',
   slidesToScroll: 'number',
-  cssClass: 'string'
+  cssClass: 'string',
+  responsive: 'array'
 };
 exports.propTypes = propTypes;
 
@@ -73,7 +92,9 @@ var validatePropTypes = function validatePropTypes(props) {
     if (propTypes[key]) {
       if (Array.isArray(propTypes[key]) && !propTypes[key].includes(propValueType)) {
         console.warn("".concat(key, " must be of one of type ").concat(propTypes[key].join(', ')));
-      } else if (!Array.isArray(propTypes[key]) && propValueType !== propTypes[key]) {
+      } else if (propTypes[key] === 'array' && !Array.isArray(props[key])) {
+        console.warn("".concat(key, " must be of type ").concat(propTypes[key]));
+      } else if (propTypes[key] !== 'array' && !Array.isArray(propTypes[key]) && propValueType !== propTypes[key]) {
         console.warn("".concat(key, " must be of type ").concat(propTypes[key]));
       }
     }

package/lib/slide.js

@@ -51,6 +51,7 @@ function (_Component) {
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(Slideshow).call(this));
     _this.state = {
+      slidesToShow: props.slidesToShow || 1,
       index: props.defaultIndex && props.defaultIndex < props.children.length ? props.defaultIndex : 0
     };
     _this.width = 0;
@@ -153,14 +154,31 @@ function (_Component) {
     value: function swipe(e) {
       var _getProps4 = (0, _props.getProps)(this.props),
           canSwipe = _getProps4.canSwipe,
-          slidesToShow = _getProps4.slidesToShow;
+          slidesToShow = _getProps4.slidesToShow,
+          children = _getProps4.children,
+          infinite = _getProps4.infinite,
+          slidesToScroll = _getProps4.slidesToScroll;
 
       if (canSwipe) {
         var clientX = e.touches ? e.touches[0].pageX : e.clientX;
 
         if (this.dragging) {
-          var translateValue = this.width * (this.state.index + slidesToShow);
-          this.distanceSwiped = clientX - this.startingClientX;
+          var translateValue = this.width * (this.state.index + this.getOffset(infinite, slidesToShow));
+          var distance = clientX - this.startingClientX;
+
+          if (!infinite && this.state.index === children.length - slidesToScroll && distance < 0) {
+            // if it is the last and infinite is false and you're swiping left
+            // then nothing happens
+            return;
+          }
+
+          if (!infinite && this.state.index === 0 && distance > 0) {
+            // if it is the first and infinite is false and you're swiping right
+            // then nothing happens
+            return;
+          }
+
+          this.distanceSwiped = distance;
           translateValue -= this.distanceSwiped;
           this.imageContainer.style.transform = "translate(-".concat(translateValue, "px)");
         }
@@ -180,7 +198,15 @@ function (_Component) {
       this.allImages = this.wrapper && Array.prototype.slice.call(this.wrapper.querySelectorAll(".images-wrap > div"), 0) || [];
 
       var _getProps5 = (0, _props.getProps)(this.props),
-          slidesToShow = _getProps5.slidesToShow;
+          slidesToShow = _getProps5.slidesToShow,
+          infinite = _getProps5.infinite;
+
+      if (this.state.slidesToShow !== slidesToShow) {
+        this.setState({
+          slidesToShow: slidesToShow,
+          index: 0
+        });
+      }
 
       this.width = (this.wrapper && this.wrapper.clientWidth || 0) / slidesToShow;
 
@@ -190,7 +216,7 @@ function (_Component) {
 
       if (this.imageContainer) {
         this.imageContainer.style.width = "".concat(fullwidth, "px");
-        this.imageContainer.style.transform = "translate(-".concat(this.width * (this.state.index + slidesToShow), "px)");
+        this.imageContainer.style.transform = "translate(-".concat(this.width * (this.state.index + this.getOffset(infinite, slidesToShow)), "px)");
       }
 
       this.applySlideStyle();
@@ -369,7 +395,17 @@ function (_Component) {
     }
   }, {
     key: "renderTrailingSlides",
-    value: function renderTrailingSlides(children, slidesToShow) {
+    value: function renderTrailingSlides() {
+      var _getProps13 = (0, _props.getProps)(this.props),
+          children = _getProps13.children,
+          slidesToShow = _getProps13.slidesToShow,
+          slidesToScroll = _getProps13.slidesToScroll,
+          infinite = _getProps13.infinite;
+
+      if (!infinite && slidesToShow === slidesToScroll) {
+        return;
+      }
+
       return children.slice(0, slidesToShow).map(function (each, index) {
         return _react["default"].createElement("div", {
           "data-index": children.length + index,
@@ -379,22 +415,32 @@ function (_Component) {
         }, each);
       });
     }
+  }, {
+    key: "getOffset",
+    value: function getOffset(infinite, slidesToShow) {
+      if (!infinite) {
+        return 0;
+      }
+
+      return slidesToShow;
+    }
   }, {
     key: "render",
     value: function render() {
       var _this7 = this;
 
-      var _getProps13 = (0, _props.getProps)(this.props),
-          children = _getProps13.children,
-          indicators = _getProps13.indicators,
-          arrows = _getProps13.arrows,
-          cssClass = _getProps13.cssClass,
-          slidesToShow = _getProps13.slidesToShow;
+      var _getProps14 = (0, _props.getProps)(this.props),
+          children = _getProps14.children,
+          indicators = _getProps14.indicators,
+          arrows = _getProps14.arrows,
+          cssClass = _getProps14.cssClass,
+          slidesToShow = _getProps14.slidesToShow,
+          infinite = _getProps14.infinite;
 
       var unhandledProps = (0, _helpers.getUnhandledProps)(_props.propTypes, this.props);
       var index = this.state.index;
       var style = {
-        transform: "translate(-".concat((index + slidesToShow) * this.width, "px)")
+        transform: "translate(-".concat((index + this.getOffset(infinite, slidesToShow)) * this.width, "px)")
       };
       return _react["default"].createElement("div", _extends({
         dir: "ltr",
@@ -423,7 +469,7 @@ function (_Component) {
         ref: function ref(_ref3) {
           return _this7.imageContainer = _ref3;
         }
-      }, this.renderPreceedingSlides(children, slidesToShow), children.map(function (each, key) {
+      }, infinite ? this.renderPreceedingSlides(children, slidesToShow) : '', children.map(function (each, key) {
         var isSlideActive = _this7.isSlideActive(key);
 
         return _react["default"].createElement("div", {
@@ -433,23 +479,23 @@ function (_Component) {
           "aria-roledescription": "slide",
           "aria-hidden": isSlideActive ? 'false' : 'true'
         }, each);
-      }), this.renderTrailingSlides(children, slidesToShow))), arrows && (0, _helpers.showNextArrow)((0, _props.getProps)(this.props), this.state.index, this.moveSlides)), indicators && (0, _helpers.showIndicators)((0, _props.getProps)(this.props), this.state.index, this.goToSlide));
+      }), this.renderTrailingSlides())), arrows && (0, _helpers.showNextArrow)((0, _props.getProps)(this.props), this.state.index, this.moveSlides)), indicators && (0, _helpers.showIndicators)((0, _props.getProps)(this.props), this.state.index, this.goToSlide));
     }
   }, {
     key: "slideImages",
     value: function slideImages(index, animationDuration) {
       var _this8 = this;
 
-      var _getProps14 = (0, _props.getProps)(this.props),
-          children = _getProps14.children,
-          transitionDuration = _getProps14.transitionDuration,
-          autoplay = _getProps14.autoplay,
-          infinite = _getProps14.infinite,
-          duration = _getProps14.duration,
-          onChange = _getProps14.onChange,
-          easing = _getProps14.easing,
-          slidesToShow = _getProps14.slidesToShow,
-          slidesToScroll = _getProps14.slidesToScroll;
+      var _getProps15 = (0, _props.getProps)(this.props),
+          children = _getProps15.children,
+          transitionDuration = _getProps15.transitionDuration,
+          autoplay = _getProps15.autoplay,
+          infinite = _getProps15.infinite,
+          duration = _getProps15.duration,
+          onChange = _getProps15.onChange,
+          easing = _getProps15.easing,
+          slidesToShow = _getProps15.slidesToShow,
+          slidesToScroll = _getProps15.slidesToScroll;
 
       transitionDuration = animationDuration || transitionDuration;
       var existingTweens = this.tweenGroup.getAll();
@@ -457,10 +503,10 @@ function (_Component) {
       if (!existingTweens.length) {
         clearTimeout(this.timeout);
         var value = {
-          margin: -this.width * (this.state.index + slidesToShow) + this.distanceSwiped
+          margin: -this.width * (this.state.index + this.getOffset(infinite, slidesToShow)) + this.distanceSwiped
         };
         var tween = new _tween["default"].Tween(value, this.tweenGroup).to({
-          margin: -this.width * (index + slidesToShow)
+          margin: -this.width * (index + this.getOffset(infinite, slidesToShow))
         }, transitionDuration).onUpdate(function (value) {
           if (_this8.imageContainer) {
             _this8.imageContainer.style.transform = "translate(".concat(value.margin, "px)");

package/lib/zoom.js

@@ -66,6 +66,8 @@ function (_Component) {
     _this.tweenGroup = new _tween["default"].Group();
     _this.initResizeObserver = _this.initResizeObserver.bind(_assertThisInitialized(_this));
     _this.reactSlideshowWrapper = (0, _react.createRef)();
+    _this.startSwipe = _this.startSwipe.bind(_assertThisInitialized(_this));
+    _this.endSwipe = _this.endSwipe.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -257,16 +259,49 @@ function (_Component) {
         this.goNext();
       }
     }
+  }, {
+    key: "startSwipe",
+    value: function startSwipe(e) {
+      var _getProps6 = (0, _props.getProps)(this.props),
+          canSwipe = _getProps6.canSwipe;
+
+      if (canSwipe) {
+        this.startingClientX = e.touches ? e.touches[0].pageX : e.clientX;
+        clearTimeout(this.timeout);
+        this.dragging = true;
+      }
+    }
+  }, {
+    key: "endSwipe",
+    value: function endSwipe(e) {
+      var clientX = e.changedTouches ? e.changedTouches[0].pageX : e.clientX;
+      var distance = clientX - this.startingClientX;
+
+      var _getProps7 = (0, _props.getProps)(this.props),
+          canSwipe = _getProps7.canSwipe;
+
+      if (canSwipe) {
+        this.dragging = false;
+
+        if (Math.abs(distance) / this.width > 0.2) {
+          if (distance < 0) {
+            this.goNext();
+          } else {
+            this.goBack();
+          }
+        }
+      }
+    }
   }, {
     key: "render",
     value: function render() {
       var _this5 = this;
 
-      var _getProps6 = (0, _props.getProps)(this.props),
-          indicators = _getProps6.indicators,
-          arrows = _getProps6.arrows,
-          children = _getProps6.children,
-          cssClass = _getProps6.cssClass;
+      var _getProps8 = (0, _props.getProps)(this.props),
+          indicators = _getProps8.indicators,
+          arrows = _getProps8.arrows,
+          children = _getProps8.children,
+          cssClass = _getProps8.cssClass;
 
       var index = this.state.index;
       var unhandledProps = (0, _helpers.getUnhandledProps)(_props.propTypes, this.props);
@@ -278,6 +313,11 @@ function (_Component) {
         onMouseEnter: this.pauseSlides,
         onMouseOver: this.pauseSlides,
         onMouseLeave: this.startSlides,
+        onMouseDown: this.startSwipe,
+        onMouseUp: this.endSwipe,
+        onTouchStart: this.startSwipe,
+        onTouchEnd: this.endSwipe,
+        onTouchCancel: this.endSwipe,
         ref: this.reactSlideshowWrapper
       }, arrows && (0, _helpers.showPreviousArrow)((0, _props.getProps)(this.props), this.state.index, this.preZoom), _react["default"].createElement("div", {
         className: "react-slideshow-zoom-wrapper ".concat(cssClass),
@@ -309,15 +349,15 @@ function (_Component) {
 
       var index = this.state.index;
 
-      var _getProps7 = (0, _props.getProps)(this.props),
-          children = _getProps7.children,
-          scale = _getProps7.scale,
-          autoplay = _getProps7.autoplay,
-          infinite = _getProps7.infinite,
-          transitionDuration = _getProps7.transitionDuration,
-          duration = _getProps7.duration,
-          onChange = _getProps7.onChange,
-          easing = _getProps7.easing;
+      var _getProps9 = (0, _props.getProps)(this.props),
+          children = _getProps9.children,
+          scale = _getProps9.scale,
+          autoplay = _getProps9.autoplay,
+          infinite = _getProps9.infinite,
+          transitionDuration = _getProps9.transitionDuration,
+          duration = _getProps9.duration,
+          onChange = _getProps9.onChange,
+          easing = _getProps9.easing;
 
       var existingTweens = this.tweenGroup.getAll();
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "react-slideshow-image",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "author": "Femi Oladeji",
   "description": "An image slideshow with react",
   "files": [
     "lib",
     "dist"
   ],
-  "homepage": "https://react-slideshow.herokuapp.com",
+  "homepage": "https://react-slideshow-image.netlify.com",
   "npmFileMap": [
     {
       "basePath": "/dist/",