react-slideshow-image - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

lib/components/slideshow/fade.js

@@ -51,2 +51,3 @@ 'use strict';
     _this.goto = _this.goto.bind(_this);
+    _this.preFade = _this.preFade.bind(_this);
     return _this;
@@ -116,2 +117,20 @@ }
   }, {
+    key: 'preFade',
+    value: function preFade(_ref2) {
+      var target = _ref2.target;
+
+      if (target.className.includes('disabled')) {
+        return;
+      }
+      var _state = this.state,
+          index = _state.index,
+          children = _state.children;
+
+      if (target.dataset.type === 'prev') {
+        this.fadeImages(index === 0 ? children.length - 1 : index - 1);
+      } else {
+        this.fadeImages((index + 1) % children.length);
+      }
+    }
+  }, {
     key: 'render',
@@ -123,6 +142,7 @@ value: function render() {
           indicators = _props.indicators,
-          arrows = _props.arrows;
-      var _state = this.state,
-          children = _state.children,
-          index = _state.index;
+          arrows = _props.arrows,
+          infinite = _props.infinite;
+      var _state2 = this.state,
+          children = _state2.children,
+          index = _state2.index;
 
@@ -138,6 +158,5 @@ return _react2.default.createElement(
             {
-              className: 'nav',
-              onClick: function onClick() {
-                return _this3.fadeImages(index === 0 ? children.length - 1 : index - 1);
-              }
+              className: 'nav ' + (index <= 0 && !infinite ? 'disabled' : ''),
+              'data-type': 'prev',
+              onClick: this.preFade
             },
@@ -176,6 +195,5 @@ '<'
             {
-              className: 'nav',
-              onClick: function onClick() {
-                return _this3.fadeImages((index + 1) % children.length);
-              }
+              className: 'nav ' + (index === children.length - 1 && !infinite ? 'disabled' : ''),
+              'data-type': 'next',
+              onClick: this.preFade
             },
@@ -204,5 +222,10 @@ '>'
 
-      var _state2 = this.state,
-          children = _state2.children,
-          index = _state2.index;
+      var _state3 = this.state,
+          children = _state3.children,
+          index = _state3.index;
+      var _props2 = this.props,
+          autoplay = _props2.autoplay,
+          infinite = _props2.infinite,
+          duration = _props2.duration,
+          transitionDuration = _props2.transitionDuration;
 
@@ -223,3 +246,3 @@ clearTimeout(this.timeout);
 
-      var tween = new TWEEN.Tween(value).to({ opacity: 1 }, this.props.transitionDuration).onUpdate(function (value) {
+      var tween = new TWEEN.Tween(value).to({ opacity: 1 }, transitionDuration).onUpdate(function (value) {
         _this4.divsContainer.children[newIndex].style.opacity = value.opacity;
@@ -236,6 +259,6 @@ _this4.divsContainer.children[index].style.opacity = 1 - value.opacity;
         });
-        if (_this4.props.autoplay) {
+        if (autoplay && (infinite || newIndex < children.length - 1)) {
           _this4.timeout = setTimeout(function () {
             _this4.fadeImages((newIndex + 1) % children.length);
-          }, _this4.props.duration);
+          }, duration);
         }
@@ -254,3 +277,4 @@ });
   arrows: true,
-  autoplay: true
+  autoplay: true,
+  infinite: true
 };
@@ -263,4 +287,5 @@
   arrows: _propTypes2.default.bool,
-  autoplay: _propTypes2.default.bool
+  autoplay: _propTypes2.default.bool,
+  infinite: _propTypes2.default.bool
 };
 exports.default = Fade;

lib/components/slideshow/zoom.js

@@ -51,2 +51,3 @@ 'use strict';
     _this.goto = _this.goto.bind(_this);
+    _this.preZoom = _this.preZoom.bind(_this);
     return _this;
@@ -116,2 +117,20 @@ }
   }, {
+    key: 'preZoom',
+    value: function preZoom(_ref2) {
+      var target = _ref2.target;
+
+      if (target.className.includes('disabled')) {
+        return;
+      }
+      var _state = this.state,
+          index = _state.index,
+          children = _state.children;
+
+      if (target.dataset.type === 'prev') {
+        this.zoomTo(index === 0 ? children.length - 1 : index - 1);
+      } else {
+        this.zoomTo((index + 1) % children.length);
+      }
+    }
+  }, {
     key: 'render',
@@ -123,6 +142,7 @@ value: function render() {
           indicators = _props.indicators,
-          arrows = _props.arrows;
-      var _state = this.state,
-          children = _state.children,
-          index = _state.index;
+          arrows = _props.arrows,
+          infinite = _props.infinite;
+      var _state2 = this.state,
+          children = _state2.children,
+          index = _state2.index;
 
@@ -138,6 +158,5 @@ return _react2.default.createElement(
             {
-              className: 'nav',
-              onClick: function onClick() {
-                return _this3.zoomTo(index === 0 ? children.length - 1 : index - 1);
-              }
+              className: 'nav ' + (index <= 0 && !infinite ? 'disabled' : ''),
+              'data-type': 'prev',
+              onClick: this.preZoom
             },
@@ -176,6 +195,5 @@ '<'
             {
-              className: 'nav',
-              onClick: function onClick() {
-                return _this3.zoomTo((index + 1) % children.length);
-              }
+              className: 'nav ' + (index === children.length - 1 && !infinite ? 'disabled' : ''),
+              'data-type': 'next',
+              onClick: this.preZoom
             },
@@ -204,8 +222,11 @@ '>'
 
-      var _state2 = this.state,
-          children = _state2.children,
-          index = _state2.index;
+      var _state3 = this.state,
+          children = _state3.children,
+          index = _state3.index;
       var _props2 = this.props,
           scale = _props2.scale,
-          autoplay = _props2.autoplay;
+          autoplay = _props2.autoplay,
+          infinite = _props2.infinite,
+          transitionDuration = _props2.transitionDuration,
+          duration = _props2.duration;
 
@@ -229,3 +250,3 @@ clearTimeout(this.timeout);
 
-      var tween = new TWEEN.Tween(value).to({ opacity: 1, scale: scale }, this.props.transitionDuration).onUpdate(function (value) {
+      var tween = new TWEEN.Tween(value).to({ opacity: 1, scale: scale }, transitionDuration).onUpdate(function (value) {
         _this4.divsContainer.children[newIndex].style.opacity = value.opacity;
@@ -245,6 +266,6 @@ _this4.divsContainer.children[index].style.opacity = 1 - value.opacity;
         });
-        if (autoplay) {
+        if (autoplay && (infinite || newIndex < children.length - 1)) {
           _this4.timeout = setTimeout(function () {
             _this4.zoomTo((newIndex + 1) % children.length);
-          }, _this4.props.duration);
+          }, duration);
         }
@@ -263,3 +284,4 @@ });
   arrows: true,
-  autoplay: true
+  autoplay: true,
+  infinite: true
 };
@@ -273,4 +295,5 @@
   arrows: _propTypes2.default.bool,
-  autoplay: _propTypes2.default.bool
+  autoplay: _propTypes2.default.bool,
+  infinite: _propTypes2.default.bool
 };
 exports.default = Zoom;

package.json

 {
   "name": "react-slideshow-image",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "author": "Femi Oladeji",
@@ -34,6 +34,6 @@ "description": "An image slideshow with react",
     "react-testing-library": "^5.2.0",
-    "serve": "^6.5.1",
-    "webpack": "^4.0.1",
-    "webpack-cli": "^2.0.9",
-    "webpack-dev-server": "^3.1.0"
+    "serve": "^10.0.2",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9"
   },
@@ -45,3 +45,3 @@ "peerDependencies": {
   "lint-staged": {
-    "[src|__tests__]/**/*.{js,jsx,json,css}": [
+    "{src,__tests__}/**/*.{js,jsx,json,css}": [
       "prettier --single-quote --write",
@@ -60,3 +60,3 @@ "npm run prepublishOnly",
     "test": "jest && codecov",
-    "prepublishOnly": "NODE_ENV=production babel src/lib --out-dir lib --copy-files"
+    "prepublishOnly": "NODE_ENV=production babel src/lib --out-dir lib --copy-files --ignore *.test.js"
   },
@@ -63,0 +63,0 @@ "dependencies": {

README.md

@@ -76,3 +76,3 @@ # React-Slideshow
   transitionDuration: 500,
-  infinite: true,
+  infinite: false,
   indicators: true
@@ -167,3 +167,3 @@ }
 | transitionDuration  | integer     | 1000          | Determines how long the transition takes                                                   |
-| infinite            | boolean     | true          | Specifies if the transition should loop throughout (only applicable to slide for now)      |
+| infinite            | boolean     | true          | Specifies if the transition should loop throughout      |
 | indicators          | boolean     | false         | For specifying if there should be dots below the slideshow                                 |
@@ -170,0 +170,0 @@ | scale               | number      |               | *Required* when using zoom to specify the scale the current slide should be zoomed to      |

No alert changes

Improved metrics

Total package byte prevSize

60854

increased by2.62%

Lines of code

1202

increased by3.8%

No dependency changes