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/dist/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.react-slideshow-container{display:flex;align-items:center}.react-slideshow-container .nav{height:30px;background:rgba(255,255,255,0.6);width:30px;
|
|
1
|
+
.react-slideshow-container{display:flex;align-items:center}.react-slideshow-container .nav{z-index:10}.react-slideshow-container .default-nav{height:30px;background:rgba(255,255,255,0.6);width:30px;border:0;text-align:center;cursor:pointer;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.react-slideshow-container .default-nav span{display:block;width:10px;height:10px;border-color:#000;border-style:solid;transform:rotate(45deg)}.react-slideshow-container .default-nav.disabled span{border-color:#666}.react-slideshow-container .default-nav:hover,.react-slideshow-container .default-nav:focus{background:#fff;color:#666;outline:0}.react-slideshow-container .default-nav.disabled:hover{cursor:not-allowed}.react-slideshow-container .default-nav:first-of-type{margin-right:-30px;border-right:0;border-top:0}.react-slideshow-container .default-nav:first-of-type span{margin-left:5px;border-right:0;border-top:0}.react-slideshow-container .default-nav:last-of-type{margin-left:-30px}.react-slideshow-container .default-nav:last-of-type span{margin-right:5px;border-left:0;border-bottom:0}.react-slideshow-container+div.indicators{display:flex;flex-wrap:wrap;justify-content:center;margin-top:20px}.react-slideshow-container+div.indicators li{display:inline-block;position:relative;width:7px;height:7px;padding:5px;margin:0}.react-slideshow-container+div.indicators .each-slideshow-indicator{border:0;opacity:.25;cursor:pointer;background:transparent;color:transparent}.react-slideshow-container+div.indicators .each-slideshow-indicator:before{position:absolute;top:0;left:0;width:7px;height:7px;border-radius:50%;content:'';background:#000;text-align:center}.react-slideshow-container+div.indicators .each-slideshow-indicator:hover,.react-slideshow-container+div.indicators .each-slideshow-indicator.active,.react-slideshow-container+div.indicators .each-slideshow-indicator:focus{opacity:.75;outline:0}.react-slideshow-fade-wrapper{width:100%;overflow:hidden}.react-slideshow-fade-wrapper .react-slideshow-fade-images-wrap{display:flex;flex-wrap:wrap}.react-slideshow-fade-wrapper .react-slideshow-fade-images-wrap>div{position:relative;opacity:0}.react-slideshow-wrapper.slide{width:100%;overflow:hidden}.react-slideshow-wrapper .images-wrap{display:flex;flex-wrap:wrap}.react-slideshow-zoom-wrapper{width:100%;overflow:hidden}.react-slideshow-zoom-wrapper .zoom-wrapper{display:flex;flex-wrap:wrap;overflow:hidden}.react-slideshow-zoom-wrapper .zoom-wrapper>div{position:relative;display:flex}
|
package/lib/css/styles.css
CHANGED
|
@@ -4,10 +4,14 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.react-slideshow-container .nav {
|
|
7
|
+
z-index: 10;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.react-slideshow-container .default-nav {
|
|
7
11
|
height: 30px;
|
|
8
12
|
background: rgba(255, 255, 255, 0.6);
|
|
9
13
|
width: 30px;
|
|
10
|
-
|
|
14
|
+
border: none;
|
|
11
15
|
text-align: center;
|
|
12
16
|
cursor: pointer;
|
|
13
17
|
color: #fff;
|
|
@@ -17,7 +21,7 @@
|
|
|
17
21
|
justify-content: center;
|
|
18
22
|
}
|
|
19
23
|
|
|
20
|
-
.react-slideshow-container .nav span {
|
|
24
|
+
.react-slideshow-container .default-nav span {
|
|
21
25
|
display: block;
|
|
22
26
|
width: 10px;
|
|
23
27
|
height: 10px;
|
|
@@ -26,36 +30,38 @@
|
|
|
26
30
|
transform: rotate(45deg);
|
|
27
31
|
}
|
|
28
32
|
|
|
29
|
-
.react-slideshow-container .nav.disabled span {
|
|
33
|
+
.react-slideshow-container .default-nav.disabled span {
|
|
30
34
|
border-color: #666;
|
|
31
35
|
}
|
|
32
36
|
|
|
33
|
-
.react-slideshow-container .nav:hover
|
|
34
|
-
|
|
37
|
+
.react-slideshow-container .default-nav:hover,
|
|
38
|
+
.react-slideshow-container .default-nav:focus {
|
|
39
|
+
background: #fff;
|
|
35
40
|
color: #666;
|
|
41
|
+
outline: none;
|
|
36
42
|
}
|
|
37
43
|
|
|
38
|
-
.react-slideshow-container .nav.disabled:hover {
|
|
44
|
+
.react-slideshow-container .default-nav.disabled:hover {
|
|
39
45
|
cursor: not-allowed;
|
|
40
46
|
}
|
|
41
47
|
|
|
42
|
-
.react-slideshow-container .nav:first-of-type {
|
|
48
|
+
.react-slideshow-container .default-nav:first-of-type {
|
|
43
49
|
margin-right: -30px;
|
|
44
50
|
border-right: none;
|
|
45
51
|
border-top: none;
|
|
46
52
|
}
|
|
47
53
|
|
|
48
|
-
.react-slideshow-container .nav:first-of-type span {
|
|
54
|
+
.react-slideshow-container .default-nav:first-of-type span {
|
|
49
55
|
margin-left: 5px;
|
|
50
56
|
border-right: none;
|
|
51
57
|
border-top: none;
|
|
52
58
|
}
|
|
53
59
|
|
|
54
|
-
.react-slideshow-container .nav:last-of-type {
|
|
60
|
+
.react-slideshow-container .default-nav:last-of-type {
|
|
55
61
|
margin-left: -30px;
|
|
56
62
|
}
|
|
57
63
|
|
|
58
|
-
.react-slideshow-container .nav:last-of-type span {
|
|
64
|
+
.react-slideshow-container .default-nav:last-of-type span {
|
|
59
65
|
margin-right: 5px;
|
|
60
66
|
border-left: none;
|
|
61
67
|
border-bottom: none;
|
|
@@ -68,21 +74,40 @@
|
|
|
68
74
|
margin-top: 20px;
|
|
69
75
|
}
|
|
70
76
|
|
|
71
|
-
.react-slideshow-container + div.indicators
|
|
77
|
+
.react-slideshow-container + div.indicators li {
|
|
78
|
+
display: inline-block;
|
|
79
|
+
position: relative;
|
|
72
80
|
width: 7px;
|
|
73
81
|
height: 7px;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
background: #ccc;
|
|
77
|
-
cursor: pointer;
|
|
82
|
+
padding: 5px;
|
|
83
|
+
margin: 0;
|
|
78
84
|
}
|
|
79
85
|
|
|
80
|
-
.react-slideshow-container + div.indicators
|
|
81
|
-
|
|
86
|
+
.react-slideshow-container + div.indicators .each-slideshow-indicator {
|
|
87
|
+
border: none;
|
|
88
|
+
opacity: 0.25;
|
|
89
|
+
cursor: pointer;
|
|
90
|
+
background: transparent;
|
|
91
|
+
color: transparent;
|
|
82
92
|
}
|
|
83
93
|
|
|
84
|
-
.react-slideshow-container + div.indicators
|
|
94
|
+
.react-slideshow-container + div.indicators .each-slideshow-indicator:before {
|
|
95
|
+
position: absolute;
|
|
96
|
+
top: 0;
|
|
97
|
+
left: 0;
|
|
98
|
+
width: 7px;
|
|
99
|
+
height: 7px;
|
|
100
|
+
border-radius: 50%;
|
|
101
|
+
content: '';
|
|
85
102
|
background: #000;
|
|
103
|
+
text-align: center;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.react-slideshow-container + div.indicators .each-slideshow-indicator:hover,
|
|
107
|
+
.react-slideshow-container + div.indicators .each-slideshow-indicator.active,
|
|
108
|
+
.react-slideshow-container + div.indicators .each-slideshow-indicator:focus {
|
|
109
|
+
opacity: 0.75;
|
|
110
|
+
outline: none;
|
|
86
111
|
}
|
|
87
112
|
|
|
88
113
|
.react-slideshow-fade-wrapper {
|
package/lib/fade.js
CHANGED
|
@@ -21,6 +21,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
|
|
|
21
21
|
|
|
22
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); }
|
|
23
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
|
+
|
|
24
26
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
25
27
|
|
|
26
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); } }
|
|
@@ -235,85 +237,31 @@ function (_Component) {
|
|
|
235
237
|
this.goNext();
|
|
236
238
|
}
|
|
237
239
|
}
|
|
238
|
-
}, {
|
|
239
|
-
key: "showIndicators",
|
|
240
|
-
value: function showIndicators() {
|
|
241
|
-
var _this5 = this;
|
|
242
|
-
|
|
243
|
-
var isCustomIndicator = typeof this.props.indicators !== 'boolean';
|
|
244
|
-
var className = !isCustomIndicator && 'each-slideshow-indicator';
|
|
245
|
-
return _react["default"].createElement("div", {
|
|
246
|
-
className: "indicators"
|
|
247
|
-
}, this.props.children.map(function (each, key) {
|
|
248
|
-
return _react["default"].createElement("div", {
|
|
249
|
-
key: key,
|
|
250
|
-
"data-key": key,
|
|
251
|
-
className: "".concat(className, " ").concat(_this5.state.index === key && 'active'),
|
|
252
|
-
onClick: _this5.navigate
|
|
253
|
-
}, isCustomIndicator && _this5.props.indicators(key));
|
|
254
|
-
}));
|
|
255
|
-
}
|
|
256
|
-
}, {
|
|
257
|
-
key: "showPreviousArrow",
|
|
258
|
-
value: function showPreviousArrow() {
|
|
259
|
-
var _this$props5 = this.props,
|
|
260
|
-
arrows = _this$props5.arrows,
|
|
261
|
-
prevArrow = _this$props5.prevArrow,
|
|
262
|
-
infinite = _this$props5.infinite;
|
|
263
|
-
var className = '';
|
|
264
|
-
|
|
265
|
-
if (!prevArrow) {
|
|
266
|
-
className = "nav ".concat(this.state.index <= 0 && !infinite && 'disabled');
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
return arrows && _react["default"].createElement("div", {
|
|
270
|
-
className: className,
|
|
271
|
-
"data-type": "prev",
|
|
272
|
-
onClick: this.preFade
|
|
273
|
-
}, prevArrow ? prevArrow : _react["default"].createElement("span", null));
|
|
274
|
-
}
|
|
275
|
-
}, {
|
|
276
|
-
key: "showNextArrow",
|
|
277
|
-
value: function showNextArrow() {
|
|
278
|
-
var _this$props6 = this.props,
|
|
279
|
-
arrows = _this$props6.arrows,
|
|
280
|
-
nextArrow = _this$props6.nextArrow,
|
|
281
|
-
infinite = _this$props6.infinite,
|
|
282
|
-
children = _this$props6.children;
|
|
283
|
-
var className = '';
|
|
284
|
-
|
|
285
|
-
if (!nextArrow) {
|
|
286
|
-
className = "nav ".concat(this.state.index === children.length - 1 && !infinite && 'disabled');
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
return arrows && _react["default"].createElement("div", {
|
|
290
|
-
className: className,
|
|
291
|
-
"data-type": "next",
|
|
292
|
-
onClick: this.preFade
|
|
293
|
-
}, nextArrow ? nextArrow : _react["default"].createElement("span", null));
|
|
294
|
-
}
|
|
295
240
|
}, {
|
|
296
241
|
key: "render",
|
|
297
242
|
value: function render() {
|
|
298
|
-
var
|
|
243
|
+
var _this5 = this;
|
|
299
244
|
|
|
300
|
-
var _this$
|
|
301
|
-
indicators = _this$
|
|
302
|
-
children = _this$
|
|
245
|
+
var _this$props5 = this.props,
|
|
246
|
+
indicators = _this$props5.indicators,
|
|
247
|
+
children = _this$props5.children,
|
|
248
|
+
arrows = _this$props5.arrows;
|
|
303
249
|
var index = this.state.index;
|
|
304
250
|
var unhandledProps = (0, _helpers.getUnhandledProps)(Fade.propTypes, this.props);
|
|
305
|
-
return _react["default"].createElement("div",
|
|
251
|
+
return _react["default"].createElement("div", _extends({
|
|
252
|
+
"aria-roledescription": "carousel"
|
|
253
|
+
}, unhandledProps), _react["default"].createElement("div", {
|
|
306
254
|
className: "react-slideshow-container",
|
|
307
255
|
onMouseEnter: this.pauseSlides,
|
|
308
256
|
onMouseLeave: this.startSlides,
|
|
309
257
|
ref: this.reactSlideshowWrapper
|
|
310
|
-
},
|
|
258
|
+
}, arrows && (0, _helpers.showPreviousArrow)(this.props, this.state.index, this.preFade), _react["default"].createElement("div", {
|
|
311
259
|
className: "react-slideshow-fade-wrapper",
|
|
312
260
|
ref: this.wrapper
|
|
313
261
|
}, _react["default"].createElement("div", {
|
|
314
262
|
className: "react-slideshow-fade-images-wrap",
|
|
315
263
|
ref: function ref(wrap) {
|
|
316
|
-
return
|
|
264
|
+
return _this5.divsContainer = wrap;
|
|
317
265
|
}
|
|
318
266
|
}, children.map(function (each, key) {
|
|
319
267
|
return _react["default"].createElement("div", {
|
|
@@ -322,23 +270,25 @@ function (_Component) {
|
|
|
322
270
|
zIndex: key === index ? '1' : '0'
|
|
323
271
|
},
|
|
324
272
|
"data-index": key,
|
|
325
|
-
key: key
|
|
273
|
+
key: key,
|
|
274
|
+
"aria-roledescription": "slide",
|
|
275
|
+
"aria-hidden": key === index ? 'false' : 'true'
|
|
326
276
|
}, each);
|
|
327
|
-
}))),
|
|
277
|
+
}))), arrows && (0, _helpers.showNextArrow)(this.props, this.state.index, this.preFade)), indicators && (0, _helpers.showIndicators)(this.props, this.state.index, this.navigate));
|
|
328
278
|
}
|
|
329
279
|
}, {
|
|
330
280
|
key: "fadeImages",
|
|
331
281
|
value: function fadeImages(newIndex) {
|
|
332
|
-
var
|
|
282
|
+
var _this6 = this;
|
|
333
283
|
|
|
334
284
|
var index = this.state.index;
|
|
335
|
-
var _this$
|
|
336
|
-
autoplay = _this$
|
|
337
|
-
children = _this$
|
|
338
|
-
infinite = _this$
|
|
339
|
-
duration = _this$
|
|
340
|
-
transitionDuration = _this$
|
|
341
|
-
onChange = _this$
|
|
285
|
+
var _this$props6 = this.props,
|
|
286
|
+
autoplay = _this$props6.autoplay,
|
|
287
|
+
children = _this$props6.children,
|
|
288
|
+
infinite = _this$props6.infinite,
|
|
289
|
+
duration = _this$props6.duration,
|
|
290
|
+
transitionDuration = _this$props6.transitionDuration,
|
|
291
|
+
onChange = _this$props6.onChange;
|
|
342
292
|
var existingTweens = this.tweenGroup.getAll();
|
|
343
293
|
|
|
344
294
|
if (!existingTweens.length) {
|
|
@@ -352,30 +302,30 @@ function (_Component) {
|
|
|
352
302
|
};
|
|
353
303
|
|
|
354
304
|
var animate = function animate() {
|
|
355
|
-
if (
|
|
356
|
-
|
|
305
|
+
if (_this6.willUnmount) {
|
|
306
|
+
_this6.tweenGroup.removeAll();
|
|
357
307
|
|
|
358
308
|
return;
|
|
359
309
|
}
|
|
360
310
|
|
|
361
311
|
requestAnimationFrame(animate);
|
|
362
312
|
|
|
363
|
-
|
|
313
|
+
_this6.tweenGroup.update();
|
|
364
314
|
};
|
|
365
315
|
|
|
366
316
|
animate();
|
|
367
317
|
var tween = new _tween["default"].Tween(value, this.tweenGroup).to({
|
|
368
318
|
opacity: 1
|
|
369
319
|
}, transitionDuration).onUpdate(function (value) {
|
|
370
|
-
|
|
371
|
-
|
|
320
|
+
_this6.divsContainer.children[newIndex].style.opacity = value.opacity;
|
|
321
|
+
_this6.divsContainer.children[index].style.opacity = 1 - value.opacity;
|
|
372
322
|
}).start();
|
|
373
323
|
tween.onComplete(function () {
|
|
374
|
-
if (
|
|
324
|
+
if (_this6.willUnmount) {
|
|
375
325
|
return;
|
|
376
326
|
}
|
|
377
327
|
|
|
378
|
-
|
|
328
|
+
_this6.setState({
|
|
379
329
|
index: newIndex
|
|
380
330
|
});
|
|
381
331
|
|
|
@@ -384,9 +334,9 @@ function (_Component) {
|
|
|
384
334
|
}
|
|
385
335
|
|
|
386
336
|
if (autoplay && (infinite || newIndex < children.length - 1)) {
|
|
387
|
-
clearTimeout(
|
|
388
|
-
|
|
389
|
-
|
|
337
|
+
clearTimeout(_this6.timeout);
|
|
338
|
+
_this6.timeout = setTimeout(function () {
|
|
339
|
+
_this6.fadeImages((newIndex + 1) % children.length);
|
|
390
340
|
}, duration);
|
|
391
341
|
}
|
|
392
342
|
});
|
|
@@ -405,7 +355,7 @@ Fade.defaultProps = {
|
|
|
405
355
|
arrows: true,
|
|
406
356
|
autoplay: true,
|
|
407
357
|
infinite: true,
|
|
408
|
-
pauseOnHover:
|
|
358
|
+
pauseOnHover: true
|
|
409
359
|
};
|
|
410
360
|
Fade.propTypes = {
|
|
411
361
|
duration: _propTypes["default"].number,
|
package/lib/helpers.js
CHANGED
|
@@ -3,12 +3,110 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.getUnhandledProps =
|
|
6
|
+
exports.showIndicators = exports.getUnhandledProps = exports.showPreviousArrow = exports.showNextArrow = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
12
|
+
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); }
|
|
13
|
+
|
|
14
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
15
|
+
|
|
16
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
7
17
|
|
|
8
|
-
function
|
|
18
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
19
|
+
|
|
20
|
+
var getUnhandledProps = function getUnhandledProps(ComponentProps, props) {
|
|
9
21
|
var handledProps = Object.keys(ComponentProps);
|
|
10
22
|
return Object.keys(props).reduce(function (acc, prop) {
|
|
11
23
|
if (handledProps.indexOf(prop) === -1) acc[prop] = props[prop];
|
|
12
24
|
return acc;
|
|
13
25
|
}, {});
|
|
14
|
-
}
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
exports.getUnhandledProps = getUnhandledProps;
|
|
29
|
+
|
|
30
|
+
var showPreviousArrow = function showPreviousArrow(_ref, currentIndex, moveSlides) {
|
|
31
|
+
var prevArrow = _ref.prevArrow,
|
|
32
|
+
infinite = _ref.infinite;
|
|
33
|
+
var isDisabled = currentIndex <= 0 && !infinite;
|
|
34
|
+
var props = {
|
|
35
|
+
'data-type': 'prev',
|
|
36
|
+
'aria-label': 'Previous Slide',
|
|
37
|
+
disabled: isDisabled,
|
|
38
|
+
onClick: moveSlides
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
if (prevArrow) {
|
|
42
|
+
return _react["default"].cloneElement(prevArrow, _objectSpread({
|
|
43
|
+
className: "".concat(prevArrow.props.className, " nav ").concat(isDisabled ? 'disabled' : '')
|
|
44
|
+
}, props));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
var className = "nav default-nav ".concat(isDisabled ? 'disabled' : '');
|
|
48
|
+
return _react["default"].createElement("button", _extends({
|
|
49
|
+
className: className
|
|
50
|
+
}, props), _react["default"].createElement("span", null));
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
exports.showPreviousArrow = showPreviousArrow;
|
|
54
|
+
|
|
55
|
+
var showNextArrow = function showNextArrow(_ref2, currentIndex, moveSlides) {
|
|
56
|
+
var nextArrow = _ref2.nextArrow,
|
|
57
|
+
infinite = _ref2.infinite,
|
|
58
|
+
children = _ref2.children;
|
|
59
|
+
var isDisabled = currentIndex === children.length - 1 && !infinite;
|
|
60
|
+
var props = {
|
|
61
|
+
'data-type': 'next',
|
|
62
|
+
'aria-label': 'Next Slide',
|
|
63
|
+
disabled: isDisabled,
|
|
64
|
+
onClick: moveSlides
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
if (nextArrow) {
|
|
68
|
+
return _react["default"].cloneElement(nextArrow, _objectSpread({
|
|
69
|
+
className: "".concat(nextArrow.props.className, " nav ").concat(isDisabled ? 'disabled' : '')
|
|
70
|
+
}, props));
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
var className = "nav default-nav ".concat(isDisabled ? 'disabled' : '');
|
|
74
|
+
return _react["default"].createElement("button", _extends({
|
|
75
|
+
className: className
|
|
76
|
+
}, props), _react["default"].createElement("span", null));
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
exports.showNextArrow = showNextArrow;
|
|
80
|
+
|
|
81
|
+
var showDefaultIndicator = function showDefaultIndicator(currentIndex, key, indicatorProps) {
|
|
82
|
+
return _react["default"].createElement("li", {
|
|
83
|
+
key: key
|
|
84
|
+
}, _react["default"].createElement("button", _extends({
|
|
85
|
+
className: "each-slideshow-indicator ".concat(currentIndex === key ? 'active' : '')
|
|
86
|
+
}, indicatorProps)));
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
var showCustomIndicator = function showCustomIndicator(currentIndex, key, indicatorProps, eachIndicator) {
|
|
90
|
+
return _react["default"].cloneElement(eachIndicator, _objectSpread({
|
|
91
|
+
className: "".concat(eachIndicator.props.className, " ").concat(currentIndex === key ? 'active' : ''),
|
|
92
|
+
key: key
|
|
93
|
+
}, indicatorProps));
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
var showIndicators = function showIndicators(props, currentIndex, navigate) {
|
|
97
|
+
var children = props.children,
|
|
98
|
+
indicators = props.indicators;
|
|
99
|
+
var isCustomIndicator = typeof indicators !== 'boolean';
|
|
100
|
+
return _react["default"].createElement("div", {
|
|
101
|
+
className: "indicators"
|
|
102
|
+
}, children.map(function (_, key) {
|
|
103
|
+
var indicatorProps = {
|
|
104
|
+
'data-key': key,
|
|
105
|
+
'aria-label': "Go to slide ".concat(key + 1),
|
|
106
|
+
onClick: navigate
|
|
107
|
+
};
|
|
108
|
+
return isCustomIndicator ? showCustomIndicator(currentIndex, key, indicatorProps, indicators(key)) : showDefaultIndicator(currentIndex, key, indicatorProps);
|
|
109
|
+
}));
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
exports.showIndicators = showIndicators;
|
package/lib/slide.js
CHANGED
|
@@ -21,6 +21,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
|
|
|
21
21
|
|
|
22
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); }
|
|
23
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
|
+
|
|
24
26
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
25
27
|
|
|
26
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); } }
|
|
@@ -223,118 +225,69 @@ function (_Component) {
|
|
|
223
225
|
|
|
224
226
|
this.slideImages(index - 1);
|
|
225
227
|
}
|
|
226
|
-
}, {
|
|
227
|
-
key: "showIndicators",
|
|
228
|
-
value: function showIndicators() {
|
|
229
|
-
var _this7 = this;
|
|
230
|
-
|
|
231
|
-
var isCustomIndicator = typeof this.props.indicators !== 'boolean';
|
|
232
|
-
var className = !isCustomIndicator && 'each-slideshow-indicator';
|
|
233
|
-
return _react["default"].createElement("div", {
|
|
234
|
-
className: "indicators"
|
|
235
|
-
}, this.props.children.map(function (_, key) {
|
|
236
|
-
return _react["default"].createElement("div", {
|
|
237
|
-
key: key,
|
|
238
|
-
"data-key": key,
|
|
239
|
-
className: "".concat(className, " ").concat(_this7.state.index === key && 'active'),
|
|
240
|
-
onClick: _this7.goToSlide
|
|
241
|
-
}, isCustomIndicator && _this7.props.indicators(key));
|
|
242
|
-
}));
|
|
243
|
-
}
|
|
244
|
-
}, {
|
|
245
|
-
key: "showPreviousArrow",
|
|
246
|
-
value: function showPreviousArrow() {
|
|
247
|
-
var _this$props4 = this.props,
|
|
248
|
-
arrows = _this$props4.arrows,
|
|
249
|
-
prevArrow = _this$props4.prevArrow,
|
|
250
|
-
infinite = _this$props4.infinite;
|
|
251
|
-
var className = '';
|
|
252
|
-
|
|
253
|
-
if (!prevArrow) {
|
|
254
|
-
className = "nav ".concat(this.state.index <= 0 && !infinite && 'disabled');
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
return arrows && _react["default"].createElement("div", {
|
|
258
|
-
className: className,
|
|
259
|
-
"data-type": "prev",
|
|
260
|
-
onClick: this.moveSlides
|
|
261
|
-
}, prevArrow ? prevArrow : _react["default"].createElement("span", null));
|
|
262
|
-
}
|
|
263
|
-
}, {
|
|
264
|
-
key: "showNextArrow",
|
|
265
|
-
value: function showNextArrow() {
|
|
266
|
-
var _this$props5 = this.props,
|
|
267
|
-
arrows = _this$props5.arrows,
|
|
268
|
-
nextArrow = _this$props5.nextArrow,
|
|
269
|
-
infinite = _this$props5.infinite,
|
|
270
|
-
children = _this$props5.children;
|
|
271
|
-
var className = '';
|
|
272
|
-
|
|
273
|
-
if (!nextArrow) {
|
|
274
|
-
className = "nav ".concat(this.state.index === children.length - 1 && !infinite && 'disabled');
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
return arrows && _react["default"].createElement("div", {
|
|
278
|
-
className: className,
|
|
279
|
-
"data-type": "next",
|
|
280
|
-
onClick: this.moveSlides
|
|
281
|
-
}, nextArrow ? nextArrow : _react["default"].createElement("span", null));
|
|
282
|
-
}
|
|
283
228
|
}, {
|
|
284
229
|
key: "render",
|
|
285
230
|
value: function render() {
|
|
286
|
-
var
|
|
231
|
+
var _this7 = this;
|
|
287
232
|
|
|
288
|
-
var _this$
|
|
289
|
-
children = _this$
|
|
290
|
-
infinite = _this$
|
|
291
|
-
indicators = _this$
|
|
292
|
-
arrows = _this$
|
|
233
|
+
var _this$props4 = this.props,
|
|
234
|
+
children = _this$props4.children,
|
|
235
|
+
infinite = _this$props4.infinite,
|
|
236
|
+
indicators = _this$props4.indicators,
|
|
237
|
+
arrows = _this$props4.arrows;
|
|
293
238
|
var unhandledProps = (0, _helpers.getUnhandledProps)(Slideshow.propTypes, this.props);
|
|
294
239
|
var index = this.state.index;
|
|
295
240
|
var style = {
|
|
296
241
|
transform: "translate(-".concat((index + 1) * this.width, "px)")
|
|
297
242
|
};
|
|
298
|
-
return _react["default"].createElement("div",
|
|
243
|
+
return _react["default"].createElement("div", _extends({
|
|
244
|
+
"aria-roledescription": "carousel"
|
|
245
|
+
}, unhandledProps), _react["default"].createElement("div", {
|
|
299
246
|
className: "react-slideshow-container",
|
|
300
247
|
onMouseEnter: this.pauseSlides,
|
|
301
248
|
onMouseLeave: this.startSlides,
|
|
302
249
|
ref: this.reactSlideshowWrapper
|
|
303
|
-
},
|
|
250
|
+
}, arrows && (0, _helpers.showPreviousArrow)(this.props, this.state.index, this.moveSlides), _react["default"].createElement("div", {
|
|
304
251
|
className: "react-slideshow-wrapper slide",
|
|
305
252
|
ref: function ref(_ref4) {
|
|
306
|
-
return
|
|
253
|
+
return _this7.wrapper = _ref4;
|
|
307
254
|
}
|
|
308
255
|
}, _react["default"].createElement("div", {
|
|
309
256
|
className: "images-wrap",
|
|
310
257
|
style: style,
|
|
311
258
|
ref: function ref(_ref3) {
|
|
312
|
-
return
|
|
259
|
+
return _this7.imageContainer = _ref3;
|
|
313
260
|
}
|
|
314
261
|
}, _react["default"].createElement("div", {
|
|
315
|
-
"data-index": "-1"
|
|
262
|
+
"data-index": "-1",
|
|
263
|
+
"aria-roledescription": "slide",
|
|
264
|
+
"aria-hidden": "false"
|
|
316
265
|
}, children[children.length - 1]), children.map(function (each, key) {
|
|
317
266
|
return _react["default"].createElement("div", {
|
|
318
267
|
"data-index": key,
|
|
319
268
|
key: key,
|
|
320
|
-
className: key === index ? 'active' : ''
|
|
269
|
+
className: key === index ? 'active' : '',
|
|
270
|
+
"aria-roledescription": "slide",
|
|
271
|
+
"aria-hidden": key === index ? 'false' : 'true'
|
|
321
272
|
}, each);
|
|
322
273
|
}), _react["default"].createElement("div", {
|
|
323
|
-
"data-index": "-1"
|
|
324
|
-
|
|
274
|
+
"data-index": "-1",
|
|
275
|
+
"aria-roledescription": "slide",
|
|
276
|
+
"aria-hidden": "false"
|
|
277
|
+
}, children[0]))), arrows && (0, _helpers.showNextArrow)(this.props, this.state.index, this.moveSlides)), indicators && (0, _helpers.showIndicators)(this.props, this.state.index, this.goToSlide));
|
|
325
278
|
}
|
|
326
279
|
}, {
|
|
327
280
|
key: "slideImages",
|
|
328
281
|
value: function slideImages(index) {
|
|
329
|
-
var
|
|
330
|
-
|
|
331
|
-
var _this$
|
|
332
|
-
children = _this$
|
|
333
|
-
transitionDuration = _this$
|
|
334
|
-
autoplay = _this$
|
|
335
|
-
infinite = _this$
|
|
336
|
-
duration = _this$
|
|
337
|
-
onChange = _this$
|
|
282
|
+
var _this8 = this;
|
|
283
|
+
|
|
284
|
+
var _this$props5 = this.props,
|
|
285
|
+
children = _this$props5.children,
|
|
286
|
+
transitionDuration = _this$props5.transitionDuration,
|
|
287
|
+
autoplay = _this$props5.autoplay,
|
|
288
|
+
infinite = _this$props5.infinite,
|
|
289
|
+
duration = _this$props5.duration,
|
|
290
|
+
onChange = _this$props5.onChange;
|
|
338
291
|
var existingTweens = this.tweenGroup.getAll();
|
|
339
292
|
|
|
340
293
|
if (!existingTweens.length) {
|
|
@@ -345,39 +298,39 @@ function (_Component) {
|
|
|
345
298
|
var tween = new _tween["default"].Tween(value, this.tweenGroup).to({
|
|
346
299
|
margin: -this.width * (index + 1)
|
|
347
300
|
}, transitionDuration).onUpdate(function (value) {
|
|
348
|
-
|
|
301
|
+
_this8.imageContainer.style.transform = "translate(".concat(value.margin, "px)");
|
|
349
302
|
}).start();
|
|
350
303
|
|
|
351
304
|
var animate = function animate() {
|
|
352
|
-
if (
|
|
353
|
-
|
|
305
|
+
if (_this8.willUnmount) {
|
|
306
|
+
_this8.tweenGroup.removeAll();
|
|
354
307
|
|
|
355
308
|
return;
|
|
356
309
|
}
|
|
357
310
|
|
|
358
311
|
requestAnimationFrame(animate);
|
|
359
312
|
|
|
360
|
-
|
|
313
|
+
_this8.tweenGroup.update();
|
|
361
314
|
};
|
|
362
315
|
|
|
363
316
|
animate();
|
|
364
317
|
tween.onComplete(function () {
|
|
365
318
|
var newIndex = index < 0 ? children.length - 1 : index >= children.length ? 0 : index;
|
|
366
319
|
|
|
367
|
-
if (
|
|
320
|
+
if (_this8.willUnmount) {
|
|
368
321
|
return;
|
|
369
322
|
}
|
|
370
323
|
|
|
371
324
|
if (typeof onChange === 'function') {
|
|
372
|
-
onChange(
|
|
325
|
+
onChange(_this8.state.index, newIndex);
|
|
373
326
|
}
|
|
374
327
|
|
|
375
|
-
|
|
328
|
+
_this8.setState({
|
|
376
329
|
index: newIndex
|
|
377
330
|
}, function () {
|
|
378
|
-
if (autoplay && (infinite ||
|
|
379
|
-
|
|
380
|
-
return
|
|
331
|
+
if (autoplay && (infinite || _this8.state.index < children.length)) {
|
|
332
|
+
_this8.timeout = setTimeout(function () {
|
|
333
|
+
return _this8.goNext();
|
|
381
334
|
}, duration);
|
|
382
335
|
}
|
|
383
336
|
});
|
|
@@ -397,7 +350,7 @@ Slideshow.defaultProps = {
|
|
|
397
350
|
autoplay: true,
|
|
398
351
|
indicators: false,
|
|
399
352
|
arrows: true,
|
|
400
|
-
pauseOnHover:
|
|
353
|
+
pauseOnHover: true
|
|
401
354
|
};
|
|
402
355
|
Slideshow.propTypes = {
|
|
403
356
|
duration: _propTypes["default"].number,
|