react-slideshow-image 3.6.0 → 3.7.1

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;
@@ -162,7 +163,7 @@ function (_Component) {
         var clientX = e.touches ? e.touches[0].pageX : e.clientX;
 
         if (this.dragging) {
-          var translateValue = this.width * (this.state.index + slidesToShow);
+          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) {
@@ -197,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;
 
@@ -207,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();
@@ -386,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,
@@ -396,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",
@@ -440,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", {
@@ -450,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();
@@ -474,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-slideshow-image",
-  "version": "3.6.0",
+  "version": "3.7.1",
   "author": "Femi Oladeji",
   "description": "An image slideshow with react",
   "files": [
@@ -45,19 +45,19 @@
     "html-webpack-plugin": "^3.0.0",
     "husky": "^0.14.3",
     "jest": "^26.0.1",
-    "lint-staged": "^7.3.0",
+    "lint-staged": "^12.3.7",
     "prettier": "^1.14.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
     "react-syntax-highlighter": "^15.4.3",
-    "serve": "^11.3.2",
+    "serve": "^13.0.2",
     "style-loader": "^1.2.1",
     "uglifycss": "0.0.29",
     "webpack": "^4.42.0",
     "webpack-cli": "^3.3.4",
-    "webpack-dev-server": "^3.7.1"
+    "webpack-dev-server": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0",
@@ -72,15 +72,15 @@
   "main": "dist/react-slideshow-image.min.js",
   "scripts": {
     "dev": "webpack-dev-server",
-    "build": "webpack --config webpack.config.dist.js && uglifycss src/css/styles.css > dist/styles.css   ",
-    "heroku-postbuild": "npm i --only=dev && webpack --prod",
+    "build": "webpack --config webpack.config.dist.js && uglifycss src/css/styles.css > dist/styles.css",
+    "heroku-postbuild": "npm i --only=dev && webpack --prod && echo '/* /index.html 200' | cat >public/_redirects",
     "start": "serve public -s",
     "precommit": "lint-staged",
     "test": "jest && codecov",
     "prepublishOnly": "NODE_ENV=production babel src --out-dir lib --copy-files && npm run build"
   },
   "dependencies": {
-    "@tweenjs/tween.js": "^18.1.2",
+    "@tweenjs/tween.js": "^18.6.4",
     "resize-observer-polyfill": "^1.5.1"
   }
 }