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/README.md +22 -200
- package/dist/react-slideshow-image.min.js +1 -1
- package/dist/react-slideshow-image.min.js.map +1 -1
- package/dist/styles.css +1 -1
- package/lib/css/styles.css +43 -18
- package/lib/fade.js +35 -85
- package/lib/helpers.js +101 -3
- package/lib/slide.js +44 -91
- package/lib/zoom.js +41 -91
- package/package.json +11 -5
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
|
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: "
|
237
|
-
value: function
|
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
|
-
|
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",
|
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
|
-
},
|
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
|
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
|
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
|
-
}))),
|
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
|
283
|
+
var _this6 = this;
|
334
284
|
|
335
285
|
var index = this.state.index;
|
336
|
-
var _this$
|
337
|
-
children = _this$
|
338
|
-
scale = _this$
|
339
|
-
autoplay = _this$
|
340
|
-
infinite = _this$
|
341
|
-
transitionDuration = _this$
|
342
|
-
duration = _this$
|
343
|
-
onChange = _this$
|
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 (
|
359
|
-
|
308
|
+
if (_this6.willUnmount) {
|
309
|
+
_this6.tweenGroup.removeAll();
|
360
310
|
|
361
311
|
return;
|
362
312
|
}
|
363
313
|
|
364
314
|
requestAnimationFrame(animate);
|
365
315
|
|
366
|
-
|
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
|
-
|
375
|
-
|
376
|
-
|
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 (
|
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
|
-
|
337
|
+
_this6.setState({
|
388
338
|
index: newIndex
|
389
339
|
}, function () {
|
390
|
-
|
340
|
+
_this6.divsContainer.children[index].style.transform = "scale(1)";
|
391
341
|
});
|
392
342
|
|
393
343
|
if (autoplay && (infinite || newIndex < children.length - 1)) {
|
394
|
-
clearTimeout(
|
395
|
-
|
396
|
-
|
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:
|
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": "
|
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
|
-
"
|
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"
|