react-slideshow-image 2.0.1 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/zoom.js CHANGED
@@ -7,6 +7,8 @@ exports["default"] = void 0;
7
7
 
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
 
10
+ var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
11
+
10
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
13
 
12
14
  var _tween = _interopRequireDefault(require("@tweenjs/tween.js"));
@@ -19,6 +21,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
19
21
 
20
22
  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); }
21
23
 
24
+ 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); }
25
+
22
26
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
23
27
 
24
28
  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) {
77
81
  value: function initResizeObserver() {
78
82
  var _this2 = this;
79
83
 
80
- this.resizeObserver = new ResizeObserver(function (entries) {
84
+ this.resizeObserver = new _resizeObserverPolyfill["default"](function (entries) {
81
85
  if (!entries) return;
82
86
 
83
87
  _this2.handleResize();
@@ -233,88 +237,32 @@ function (_Component) {
233
237
  }
234
238
  }
235
239
  }, {
236
- key: "showIndicators",
237
- value: function showIndicators() {
240
+ key: "render",
241
+ value: function render() {
238
242
  var _this5 = this;
239
243
 
240
- var isCustomIndicator = typeof this.props.indicators !== 'boolean';
241
- var className = !isCustomIndicator && 'each-slideshow-indicator';
242
- return _react["default"].createElement("div", {
243
- className: "indicators"
244
- }, this.props.children.map(function (each, key) {
245
- return _react["default"].createElement("div", {
246
- key: key,
247
- "data-key": key,
248
- className: "".concat(className, " ").concat(_this5.state.index === key && 'active'),
249
- onClick: _this5.navigate
250
- }, isCustomIndicator && _this5.props.indicators(key));
251
- }));
252
- }
253
- }, {
254
- key: "showPreviousArrow",
255
- value: function showPreviousArrow() {
256
244
  var _this$props5 = this.props,
245
+ indicators = _this$props5.indicators,
257
246
  arrows = _this$props5.arrows,
258
- prevArrow = _this$props5.prevArrow,
259
- infinite = _this$props5.infinite;
260
- var className = '';
261
-
262
- if (!prevArrow) {
263
- className = "nav ".concat(this.state.index <= 0 && !infinite && 'disabled');
264
- }
265
-
266
- return arrows && _react["default"].createElement("div", {
267
- className: className,
268
- "data-type": "prev",
269
- onClick: this.preZoom
270
- }, prevArrow ? prevArrow : _react["default"].createElement("span", null));
271
- }
272
- }, {
273
- key: "showNextArrow",
274
- value: function showNextArrow() {
275
- var _this$props6 = this.props,
276
- arrows = _this$props6.arrows,
277
- nextArrow = _this$props6.nextArrow,
278
- infinite = _this$props6.infinite,
279
- children = _this$props6.children;
280
- var className = '';
281
-
282
- if (!nextArrow) {
283
- className = "nav ".concat(this.state.index === children.length - 1 && !infinite && 'disabled');
284
- }
285
-
286
- return arrows && _react["default"].createElement("div", {
287
- className: className,
288
- "data-type": "next",
289
- onClick: this.preZoom
290
- }, nextArrow ? nextArrow : _react["default"].createElement("span", null));
291
- }
292
- }, {
293
- key: "render",
294
- value: function render() {
295
- var _this6 = this;
296
-
297
- var _this$props7 = this.props,
298
- indicators = _this$props7.indicators,
299
- arrows = _this$props7.arrows,
300
- infinite = _this$props7.infinite,
301
- children = _this$props7.children;
247
+ children = _this$props5.children;
302
248
  var index = this.state.index;
303
249
  var unhandledProps = (0, _helpers.getUnhandledProps)(Zoom.propTypes, this.props);
304
- return _react["default"].createElement("div", unhandledProps, _react["default"].createElement("div", {
250
+ return _react["default"].createElement("div", _extends({
251
+ "aria-roledescription": "carousel"
252
+ }, unhandledProps), _react["default"].createElement("div", {
305
253
  className: "react-slideshow-container",
306
254
  onMouseEnter: this.pauseSlides,
307
255
  onMouseLeave: this.startSlides,
308
256
  ref: this.reactSlideshowWrapper
309
- }, this.showPreviousArrow(), _react["default"].createElement("div", {
257
+ }, arrows && (0, _helpers.showPreviousArrow)(this.props, this.state.index, this.preZoom), _react["default"].createElement("div", {
310
258
  className: "react-slideshow-zoom-wrapper",
311
259
  ref: function ref(_ref3) {
312
- return _this6.wrapper = _ref3;
260
+ return _this5.wrapper = _ref3;
313
261
  }
314
262
  }, _react["default"].createElement("div", {
315
263
  className: "zoom-wrapper",
316
264
  ref: function ref(wrap) {
317
- return _this6.divsContainer = wrap;
265
+ return _this5.divsContainer = wrap;
318
266
  }
319
267
  }, children.map(function (each, key) {
320
268
  return _react["default"].createElement("div", {
@@ -323,24 +271,26 @@ function (_Component) {
323
271
  zIndex: key === index ? '1' : '0'
324
272
  },
325
273
  "data-index": key,
326
- key: key
274
+ key: key,
275
+ "aria-roledescription": "slide",
276
+ "aria-hidden": key === index ? 'false' : 'true'
327
277
  }, each);
328
- }))), this.showNextArrow()), indicators && this.showIndicators());
278
+ }))), arrows && (0, _helpers.showNextArrow)(this.props, this.state.index, this.preZoom)), indicators && (0, _helpers.showIndicators)(this.props, this.state.index, this.navigate));
329
279
  }
330
280
  }, {
331
281
  key: "zoomTo",
332
282
  value: function zoomTo(newIndex) {
333
- var _this7 = this;
283
+ var _this6 = this;
334
284
 
335
285
  var index = this.state.index;
336
- var _this$props8 = this.props,
337
- children = _this$props8.children,
338
- scale = _this$props8.scale,
339
- autoplay = _this$props8.autoplay,
340
- infinite = _this$props8.infinite,
341
- transitionDuration = _this$props8.transitionDuration,
342
- duration = _this$props8.duration,
343
- onChange = _this$props8.onChange;
286
+ var _this$props6 = this.props,
287
+ children = _this$props6.children,
288
+ scale = _this$props6.scale,
289
+ autoplay = _this$props6.autoplay,
290
+ infinite = _this$props6.infinite,
291
+ transitionDuration = _this$props6.transitionDuration,
292
+ duration = _this$props6.duration,
293
+ onChange = _this$props6.onChange;
344
294
  var existingTweens = this.tweenGroup.getAll();
345
295
 
346
296
  if (!existingTweens.length) {
@@ -355,15 +305,15 @@ function (_Component) {
355
305
  };
356
306
 
357
307
  var animate = function animate() {
358
- if (_this7.willUnmount) {
359
- _this7.tweenGroup.removeAll();
308
+ if (_this6.willUnmount) {
309
+ _this6.tweenGroup.removeAll();
360
310
 
361
311
  return;
362
312
  }
363
313
 
364
314
  requestAnimationFrame(animate);
365
315
 
366
- _this7.tweenGroup.update();
316
+ _this6.tweenGroup.update();
367
317
  };
368
318
 
369
319
  animate();
@@ -371,12 +321,12 @@ function (_Component) {
371
321
  opacity: 1,
372
322
  scale: scale
373
323
  }, transitionDuration).onUpdate(function (value) {
374
- _this7.divsContainer.children[newIndex].style.opacity = value.opacity;
375
- _this7.divsContainer.children[index].style.opacity = 1 - value.opacity;
376
- _this7.divsContainer.children[index].style.transform = "scale(".concat(value.scale, ")");
324
+ _this6.divsContainer.children[newIndex].style.opacity = value.opacity;
325
+ _this6.divsContainer.children[index].style.opacity = 1 - value.opacity;
326
+ _this6.divsContainer.children[index].style.transform = "scale(".concat(value.scale, ")");
377
327
  }).start();
378
328
  tween.onComplete(function () {
379
- if (_this7.willUnmount) {
329
+ if (_this6.willUnmount) {
380
330
  return;
381
331
  }
382
332
 
@@ -384,16 +334,16 @@ function (_Component) {
384
334
  onChange(index, newIndex);
385
335
  }
386
336
 
387
- _this7.setState({
337
+ _this6.setState({
388
338
  index: newIndex
389
339
  }, function () {
390
- _this7.divsContainer.children[index].style.transform = "scale(1)";
340
+ _this6.divsContainer.children[index].style.transform = "scale(1)";
391
341
  });
392
342
 
393
343
  if (autoplay && (infinite || newIndex < children.length - 1)) {
394
- clearTimeout(_this7.timeout);
395
- _this7.timeout = setTimeout(function () {
396
- _this7.zoomTo((newIndex + 1) % children.length);
344
+ clearTimeout(_this6.timeout);
345
+ _this6.timeout = setTimeout(function () {
346
+ _this6.zoomTo((newIndex + 1) % children.length);
397
347
  }, duration);
398
348
  }
399
349
  });
@@ -412,7 +362,7 @@ Zoom.defaultProps = {
412
362
  arrows: true,
413
363
  autoplay: true,
414
364
  infinite: true,
415
- pauseOnHover: false
365
+ pauseOnHover: true
416
366
  };
417
367
  Zoom.propTypes = {
418
368
  duration: _propTypes["default"].number,
package/package.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "name": "react-slideshow-image",
3
- "version": "2.0.1",
3
+ "version": "3.0.2",
4
4
  "author": "Femi Oladeji",
5
5
  "description": "An image slideshow with react",
6
6
  "files": [
7
7
  "lib",
8
8
  "dist"
9
9
  ],
10
+ "homepage": "https://react-slideshow.herokuapp.com",
10
11
  "npmFileMap": [
11
12
  {
12
13
  "basePath": "/dist/",
@@ -37,8 +38,10 @@
37
38
  "babel-jest": "^26.0.1",
38
39
  "babel-loader": "^8.0.6",
39
40
  "codecov": "^3.1.0",
41
+ "copy-webpack-plugin": "^6.0.3",
40
42
  "css-loader": "^3.5.3",
41
43
  "extract-text-webpack-plugin": "4.0.0-alpha.0",
44
+ "file-loader": "^6.0.0",
42
45
  "html-webpack-plugin": "^3.0.0",
43
46
  "husky": "^0.14.3",
44
47
  "jest": "^26.0.1",
@@ -46,7 +49,10 @@
46
49
  "prettier": "^1.14.3",
47
50
  "react": "^16.2.0",
48
51
  "react-dom": "^16.2.0",
49
- "serve": "^10.0.2",
52
+ "react-router": "^5.1.2",
53
+ "react-router-dom": "^5.1.2",
54
+ "react-syntax-highlighter": "^12.2.1",
55
+ "serve": "^11.3.2",
50
56
  "style-loader": "^1.2.1",
51
57
  "uglifycss": "0.0.29",
52
58
  "webpack": "^4.42.0",
@@ -58,7 +64,7 @@
58
64
  "react-dom": "^16.2.0"
59
65
  },
60
66
  "lint-staged": {
61
- "{src,__tests__}/**/*.{js,jsx,json,css}": [
67
+ "{src,__tests__,docs}/**/*.{js,jsx,json,css}": [
62
68
  "prettier --single-quote --write",
63
69
  "git add ."
64
70
  ]
@@ -67,8 +73,8 @@
67
73
  "scripts": {
68
74
  "dev": "webpack-dev-server",
69
75
  "build": "webpack --config webpack.config.dist.js && uglifycss src/css/styles.css > dist/styles.css ",
70
- "heroku-postbuild": "npm i --only=dev && webpack",
71
- "start": "serve public/",
76
+ "heroku-postbuild": "npm i --only=dev && webpack --prod",
77
+ "start": "serve public -s",
72
78
  "precommit": "lint-staged",
73
79
  "test": "jest && codecov",
74
80
  "prepublish": "NODE_ENV=production babel src --out-dir lib --copy-files && npm run build"