react-slideshow-image 2.0.1 → 3.0.2

Sign up to get free protection for your applications and to get access to all the features.
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"