react-slideshow-image 2.0.1 → 3.0.2

package/lib/zoom.js

@@ -7,6 +7,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _tween = _interopRequireDefault(require("@tweenjs/tween.js"));
@@ -19,6 +21,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -77,7 +81,7 @@ function (_Component) {
     value: function initResizeObserver() {
       var _this2 = this;
 
-      this.resizeObserver = new ResizeObserver(function (entries) {
+      this.resizeObserver = new _resizeObserverPolyfill["default"](function (entries) {
         if (!entries) return;
 
         _this2.handleResize();
@@ -233,88 +237,32 @@ function (_Component) {
       }
     }
   }, {
-    key: "showIndicators",
-    value: function showIndicators() {
+    key: "render",
+    value: function render() {
       var _this5 = this;
 
-      var isCustomIndicator = typeof this.props.indicators !== 'boolean';
-      var className = !isCustomIndicator && 'each-slideshow-indicator';
-      return _react["default"].createElement("div", {
-        className: "indicators"
-      }, this.props.children.map(function (each, key) {
-        return _react["default"].createElement("div", {
-          key: key,
-          "data-key": key,
-          className: "".concat(className, " ").concat(_this5.state.index === key && 'active'),
-          onClick: _this5.navigate
-        }, isCustomIndicator && _this5.props.indicators(key));
-      }));
-    }
-  }, {
-    key: "showPreviousArrow",
-    value: function showPreviousArrow() {
       var _this$props5 = this.props,
+          indicators = _this$props5.indicators,
           arrows = _this$props5.arrows,
-          prevArrow = _this$props5.prevArrow,
-          infinite = _this$props5.infinite;
-      var className = '';
-
-      if (!prevArrow) {
-        className = "nav ".concat(this.state.index <= 0 && !infinite && 'disabled');
-      }
-
-      return arrows && _react["default"].createElement("div", {
-        className: className,
-        "data-type": "prev",
-        onClick: this.preZoom
-      }, prevArrow ? prevArrow : _react["default"].createElement("span", null));
-    }
-  }, {
-    key: "showNextArrow",
-    value: function showNextArrow() {
-      var _this$props6 = this.props,
-          arrows = _this$props6.arrows,
-          nextArrow = _this$props6.nextArrow,
-          infinite = _this$props6.infinite,
-          children = _this$props6.children;
-      var className = '';
-
-      if (!nextArrow) {
-        className = "nav ".concat(this.state.index === children.length - 1 && !infinite && 'disabled');
-      }
-
-      return arrows && _react["default"].createElement("div", {
-        className: className,
-        "data-type": "next",
-        onClick: this.preZoom
-      }, nextArrow ? nextArrow : _react["default"].createElement("span", null));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this6 = this;
-
-      var _this$props7 = this.props,
-          indicators = _this$props7.indicators,
-          arrows = _this$props7.arrows,
-          infinite = _this$props7.infinite,
-          children = _this$props7.children;
+          children = _this$props5.children;
       var index = this.state.index;
       var unhandledProps = (0, _helpers.getUnhandledProps)(Zoom.propTypes, this.props);
-      return _react["default"].createElement("div", unhandledProps, _react["default"].createElement("div", {
+      return _react["default"].createElement("div", _extends({
+        "aria-roledescription": "carousel"
+      }, unhandledProps), _react["default"].createElement("div", {
         className: "react-slideshow-container",
         onMouseEnter: this.pauseSlides,
         onMouseLeave: this.startSlides,
         ref: this.reactSlideshowWrapper
-      }, this.showPreviousArrow(), _react["default"].createElement("div", {
+      }, arrows && (0, _helpers.showPreviousArrow)(this.props, this.state.index, this.preZoom), _react["default"].createElement("div", {
         className: "react-slideshow-zoom-wrapper",
         ref: function ref(_ref3) {
-          return _this6.wrapper = _ref3;
+          return _this5.wrapper = _ref3;
         }
       }, _react["default"].createElement("div", {
         className: "zoom-wrapper",
         ref: function ref(wrap) {
-          return _this6.divsContainer = wrap;
+          return _this5.divsContainer = wrap;
         }
       }, children.map(function (each, key) {
         return _react["default"].createElement("div", {
@@ -323,24 +271,26 @@ function (_Component) {
             zIndex: key === index ? '1' : '0'
           },
           "data-index": key,
-          key: key
+          key: key,
+          "aria-roledescription": "slide",
+          "aria-hidden": key === index ? 'false' : 'true'
         }, each);
-      }))), this.showNextArrow()), indicators && this.showIndicators());
+      }))), arrows && (0, _helpers.showNextArrow)(this.props, this.state.index, this.preZoom)), indicators && (0, _helpers.showIndicators)(this.props, this.state.index, this.navigate));
     }
   }, {
     key: "zoomTo",
     value: function zoomTo(newIndex) {
-      var _this7 = this;
+      var _this6 = this;
 
       var index = this.state.index;
-      var _this$props8 = this.props,
-          children = _this$props8.children,
-          scale = _this$props8.scale,
-          autoplay = _this$props8.autoplay,
-          infinite = _this$props8.infinite,
-          transitionDuration = _this$props8.transitionDuration,
-          duration = _this$props8.duration,
-          onChange = _this$props8.onChange;
+      var _this$props6 = this.props,
+          children = _this$props6.children,
+          scale = _this$props6.scale,
+          autoplay = _this$props6.autoplay,
+          infinite = _this$props6.infinite,
+          transitionDuration = _this$props6.transitionDuration,
+          duration = _this$props6.duration,
+          onChange = _this$props6.onChange;
       var existingTweens = this.tweenGroup.getAll();
 
       if (!existingTweens.length) {
@@ -355,15 +305,15 @@ function (_Component) {
         };
 
         var animate = function animate() {
-          if (_this7.willUnmount) {
-            _this7.tweenGroup.removeAll();
+          if (_this6.willUnmount) {
+            _this6.tweenGroup.removeAll();
 
             return;
           }
 
           requestAnimationFrame(animate);
 
-          _this7.tweenGroup.update();
+          _this6.tweenGroup.update();
         };
 
         animate();
@@ -371,12 +321,12 @@ function (_Component) {
           opacity: 1,
           scale: scale
         }, transitionDuration).onUpdate(function (value) {
-          _this7.divsContainer.children[newIndex].style.opacity = value.opacity;
-          _this7.divsContainer.children[index].style.opacity = 1 - value.opacity;
-          _this7.divsContainer.children[index].style.transform = "scale(".concat(value.scale, ")");
+          _this6.divsContainer.children[newIndex].style.opacity = value.opacity;
+          _this6.divsContainer.children[index].style.opacity = 1 - value.opacity;
+          _this6.divsContainer.children[index].style.transform = "scale(".concat(value.scale, ")");
         }).start();
         tween.onComplete(function () {
-          if (_this7.willUnmount) {
+          if (_this6.willUnmount) {
             return;
           }
 
@@ -384,16 +334,16 @@ function (_Component) {
             onChange(index, newIndex);
           }
 
-          _this7.setState({
+          _this6.setState({
             index: newIndex
           }, function () {
-            _this7.divsContainer.children[index].style.transform = "scale(1)";
+            _this6.divsContainer.children[index].style.transform = "scale(1)";
           });
 
           if (autoplay && (infinite || newIndex < children.length - 1)) {
-            clearTimeout(_this7.timeout);
-            _this7.timeout = setTimeout(function () {
-              _this7.zoomTo((newIndex + 1) % children.length);
+            clearTimeout(_this6.timeout);
+            _this6.timeout = setTimeout(function () {
+              _this6.zoomTo((newIndex + 1) % children.length);
             }, duration);
           }
         });
@@ -412,7 +362,7 @@ Zoom.defaultProps = {
   arrows: true,
   autoplay: true,
   infinite: true,
-  pauseOnHover: false
+  pauseOnHover: true
 };
 Zoom.propTypes = {
   duration: _propTypes["default"].number,

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "react-slideshow-image",
-  "version": "2.0.1",
+  "version": "3.0.2",
   "author": "Femi Oladeji",
   "description": "An image slideshow with react",
   "files": [
     "lib",
     "dist"
   ],
+  "homepage": "https://react-slideshow.herokuapp.com",
   "npmFileMap": [
     {
       "basePath": "/dist/",
@@ -37,8 +38,10 @@
     "babel-jest": "^26.0.1",
     "babel-loader": "^8.0.6",
     "codecov": "^3.1.0",
+    "copy-webpack-plugin": "^6.0.3",
     "css-loader": "^3.5.3",
     "extract-text-webpack-plugin": "4.0.0-alpha.0",
+    "file-loader": "^6.0.0",
     "html-webpack-plugin": "^3.0.0",
     "husky": "^0.14.3",
     "jest": "^26.0.1",
@@ -46,7 +49,10 @@
     "prettier": "^1.14.3",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "serve": "^10.0.2",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-syntax-highlighter": "^12.2.1",
+    "serve": "^11.3.2",
     "style-loader": "^1.2.1",
     "uglifycss": "0.0.29",
     "webpack": "^4.42.0",
@@ -58,7 +64,7 @@
     "react-dom": "^16.2.0"
   },
   "lint-staged": {
-    "{src,__tests__}/**/*.{js,jsx,json,css}": [
+    "{src,__tests__,docs}/**/*.{js,jsx,json,css}": [
       "prettier --single-quote --write",
       "git add ."
     ]
@@ -67,8 +73,8 @@
   "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",
-    "start": "serve public/",
+    "heroku-postbuild": "npm i --only=dev && webpack --prod",
+    "start": "serve public -s",
     "precommit": "lint-staged",
     "test": "jest && codecov",
     "prepublish": "NODE_ENV=production babel src --out-dir lib --copy-files && npm run build"