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/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;z-index:10;text-align:center;cursor:pointer;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}.react-slideshow-container .nav span{display:block;width:10px;height:10px;border-color:#000;border-style:solid;transform:rotate(45deg)}.react-slideshow-container .nav.disabled span{border-color:#666}.react-slideshow-container .nav:hover{background:white;color:#666}.react-slideshow-container .nav.disabled:hover{cursor:not-allowed}.react-slideshow-container .nav:first-of-type{margin-right:-30px;border-right:0;border-top:0}.react-slideshow-container .nav:first-of-type span{margin-left:5px;border-right:0;border-top:0}.react-slideshow-container .nav:last-of-type{margin-left:-30px}.react-slideshow-container .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>.each-slideshow-indicator{width:7px;height:7px;margin:0 5px 10px;border-radius:50%;background:#ccc;cursor:pointer}.react-slideshow-container+div.indicators>.each-slideshow-indicator:hover{background:#666}.react-slideshow-container+div.indicators>.each-slideshow-indicator.active{background:#000}.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}
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}
@@ -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
- z-index: 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
- background: white;
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 > .each-slideshow-indicator {
77
+ .react-slideshow-container + div.indicators li {
78
+ display: inline-block;
79
+ position: relative;
72
80
  width: 7px;
73
81
  height: 7px;
74
- margin: 0 5px 10px;
75
- border-radius: 50%;
76
- background: #ccc;
77
- cursor: pointer;
82
+ padding: 5px;
83
+ margin: 0;
78
84
  }
79
85
 
80
- .react-slideshow-container + div.indicators > .each-slideshow-indicator:hover {
81
- background: #666;
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 > .each-slideshow-indicator.active {
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 _this6 = this;
243
+ var _this5 = this;
299
244
 
300
- var _this$props7 = this.props,
301
- indicators = _this$props7.indicators,
302
- children = _this$props7.children;
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", unhandledProps, _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
- }, this.showPreviousArrow(), _react["default"].createElement("div", {
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 _this6.divsContainer = wrap;
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
- }))), this.showNextArrow()), indicators && this.showIndicators());
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 _this7 = this;
282
+ var _this6 = this;
333
283
 
334
284
  var index = this.state.index;
335
- var _this$props8 = this.props,
336
- autoplay = _this$props8.autoplay,
337
- children = _this$props8.children,
338
- infinite = _this$props8.infinite,
339
- duration = _this$props8.duration,
340
- transitionDuration = _this$props8.transitionDuration,
341
- onChange = _this$props8.onChange;
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 (_this7.willUnmount) {
356
- _this7.tweenGroup.removeAll();
305
+ if (_this6.willUnmount) {
306
+ _this6.tweenGroup.removeAll();
357
307
 
358
308
  return;
359
309
  }
360
310
 
361
311
  requestAnimationFrame(animate);
362
312
 
363
- _this7.tweenGroup.update();
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
- _this7.divsContainer.children[newIndex].style.opacity = value.opacity;
371
- _this7.divsContainer.children[index].style.opacity = 1 - value.opacity;
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 (_this7.willUnmount) {
324
+ if (_this6.willUnmount) {
375
325
  return;
376
326
  }
377
327
 
378
- _this7.setState({
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(_this7.timeout);
388
- _this7.timeout = setTimeout(function () {
389
- _this7.fadeImages((newIndex + 1) % children.length);
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: false
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 = 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 getUnhandledProps(ComponentProps, props) {
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 _this8 = this;
231
+ var _this7 = this;
287
232
 
288
- var _this$props6 = this.props,
289
- children = _this$props6.children,
290
- infinite = _this$props6.infinite,
291
- indicators = _this$props6.indicators,
292
- arrows = _this$props6.arrows;
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", unhandledProps, _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
- }, this.showPreviousArrow(), _react["default"].createElement("div", {
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 _this8.wrapper = _ref4;
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 _this8.imageContainer = _ref3;
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
- }, children[0]))), this.showNextArrow()), indicators && this.showIndicators());
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 _this9 = this;
330
-
331
- var _this$props7 = this.props,
332
- children = _this$props7.children,
333
- transitionDuration = _this$props7.transitionDuration,
334
- autoplay = _this$props7.autoplay,
335
- infinite = _this$props7.infinite,
336
- duration = _this$props7.duration,
337
- onChange = _this$props7.onChange;
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
- _this9.imageContainer.style.transform = "translate(".concat(value.margin, "px)");
301
+ _this8.imageContainer.style.transform = "translate(".concat(value.margin, "px)");
349
302
  }).start();
350
303
 
351
304
  var animate = function animate() {
352
- if (_this9.willUnmount) {
353
- _this9.tweenGroup.removeAll();
305
+ if (_this8.willUnmount) {
306
+ _this8.tweenGroup.removeAll();
354
307
 
355
308
  return;
356
309
  }
357
310
 
358
311
  requestAnimationFrame(animate);
359
312
 
360
- _this9.tweenGroup.update();
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 (_this9.willUnmount) {
320
+ if (_this8.willUnmount) {
368
321
  return;
369
322
  }
370
323
 
371
324
  if (typeof onChange === 'function') {
372
- onChange(_this9.state.index, newIndex);
325
+ onChange(_this8.state.index, newIndex);
373
326
  }
374
327
 
375
- _this9.setState({
328
+ _this8.setState({
376
329
  index: newIndex
377
330
  }, function () {
378
- if (autoplay && (infinite || _this9.state.index < children.length)) {
379
- _this9.timeout = setTimeout(function () {
380
- return _this9.goNext();
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: false
353
+ pauseOnHover: true
401
354
  };
402
355
  Slideshow.propTypes = {
403
356
  duration: _propTypes["default"].number,