react-slideshow-image 3.6.1 → 3.7.2

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;
@@ -200,6 +201,13 @@ function (_Component) {
           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;
 
       var numberOfSlides = _react["default"].Children.count(this.props.children);
@@ -387,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,
@@ -411,13 +429,13 @@ function (_Component) {
     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,
-          infinite = _getProps13.infinite;
+      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;
@@ -461,23 +479,23 @@ function (_Component) {
           "aria-roledescription": "slide",
           "aria-hidden": isSlideActive ? 'false' : 'true'
         }, each);
-      }), infinite ? 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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-slideshow-image",
-  "version": "3.6.1",
+  "version": "3.7.2",
   "author": "Femi Oladeji",
   "description": "An image slideshow with react",
   "files": [
@@ -45,23 +45,23 @@
     "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",
-    "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0"
+    "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
   },
   "lint-staged": {
     "{src,__tests__,docs}/**/*.{js,jsx,json,css}": [
@@ -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"
   }
 }