react-responsive-carousel - npm Package Compare versions

Comparing version 3.1.50 to 3.1.51

CHANGELOG.md

@@ -10,4 +10,10 @@ # Changelog
 
-## [Unreleased](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.49...HEAD)
+## [Unreleased](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.50...HEAD)
 
+## [v3.1.50](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.49...v3.1.50) - 2019-08-11
+
+### Commits
+
+- fix(onClickItem): cancelClick should be true when onSwipeEnd [`6e8dbbf`](https://github.com/leandrowd/react-responsive-carousel/commit/6e8dbbf9c3cf8d0ea94f48a8a641d19cc9727075)
+
 ## [v3.1.49](https://github.com/leandrowd/react-responsive-carousel/compare/v3.1.47...v3.1.49) - 2019-04-17
@@ -14,0 +20,0 @@

lib/components/Carousel.js

@@ -67,4 +67,346 @@ 'use strict';
 
-        _initialiseProps.call(_this);
+        _this.setThumbsRef = function (node) {
+            _this.thumbsRef = node;
+        };
 
+        _this.setCarouselWrapperRef = function (node) {
+            _this.carouselWrapperRef = node;
+        };
+
+        _this.setListRef = function (node) {
+            _this.listRef = node;
+        };
+
+        _this.setItemsWrapperRef = function (node) {
+            _this.itemsWrapperRef = node;
+        };
+
+        _this.setItemsRef = function (node, index) {
+            if (!_this.itemsRef) {
+                _this.itemsRef = [];
+            }
+            _this.itemsRef[index] = node;
+        };
+
+        _this.autoPlay = function () {
+            if (!_this.state.autoPlay || _react.Children.count(_this.props.children) <= 1) {
+                return;
+            }
+
+            clearTimeout(_this.timer);
+            _this.timer = setTimeout(function () {
+                _this.increment();
+            }, _this.props.interval);
+        };
+
+        _this.clearAutoPlay = function () {
+            if (!_this.state.autoPlay) {
+                return;
+            }
+
+            clearTimeout(_this.timer);
+        };
+
+        _this.resetAutoPlay = function () {
+            _this.clearAutoPlay();
+            _this.autoPlay();
+        };
+
+        _this.stopOnHover = function () {
+            _this.setState({ isMouseEntered: true });
+            _this.clearAutoPlay();
+        };
+
+        _this.startOnLeave = function () {
+            _this.setState({ isMouseEntered: false });
+            _this.autoPlay();
+        };
+
+        _this.navigateWithKeyboard = function (e) {
+            var axis = _this.props.axis;
+
+            var isHorizontal = axis === 'horizontal';
+            var keyNames = {
+                ArrowUp: 38,
+                ArrowRight: 39,
+                ArrowDown: 40,
+                ArrowLeft: 37
+            };
+
+            var nextKey = isHorizontal ? keyNames.ArrowRight : keyNames.ArrowDown;
+            var prevKey = isHorizontal ? keyNames.ArrowLeft : keyNames.ArrowUp;
+
+            if (nextKey === e.keyCode) {
+                _this.increment();
+            } else if (prevKey === e.keyCode) {
+                _this.decrement();
+            }
+        };
+
+        _this.updateSizes = function () {
+            if (!_this.state.initialized) {
+                return;
+            }
+
+            var isHorizontal = _this.props.axis === 'horizontal';
+            var firstItem = _this.itemsRef[0];
+            var itemSize = isHorizontal ? firstItem.clientWidth : firstItem.clientHeight;
+
+            _this.setState(function (_state, props) {
+                return {
+                    itemSize: itemSize
+                };
+            });
+
+            if (_this.thumbsRef) {
+                _this.thumbsRef.updateSizes();
+            }
+        };
+
+        _this.setMountState = function () {
+            _this.setState({ hasMount: true });
+            _this.updateSizes();
+        };
+
+        _this.handleClickItem = function (index, item) {
+            if (_react.Children.count(_this.props.children) === 0) {
+                return;
+            }
+
+            if (_this.state.cancelClick) {
+                _this.setState({
+                    cancelClick: false
+                });
+
+                return;
+            }
+
+            _this.props.onClickItem(index, item);
+
+            if (index !== _this.state.selectedItem) {
+                _this.setState({
+                    selectedItem: index
+                });
+            }
+        };
+
+        _this.handleOnChange = function (index, item) {
+            if (_react.Children.count(_this.props.children) <= 1) {
+                return;
+            }
+
+            _this.props.onChange(index, item);
+        };
+
+        _this.handleClickThumb = function (index, item) {
+            _this.props.onClickThumb(index, item);
+
+            _this.selectItem({
+                selectedItem: index
+            });
+        };
+
+        _this.onSwipeStart = function (event) {
+            _this.setState({
+                swiping: true
+            });
+            _this.props.onSwipeStart(event);
+            _this.clearAutoPlay();
+        };
+
+        _this.onSwipeEnd = function (event) {
+            _this.setState({
+                swiping: false,
+                cancelClick: false
+            });
+            _this.props.onSwipeEnd(event);
+            _this.autoPlay();
+        };
+
+        _this.onSwipeMove = function (delta, event) {
+            _this.props.onSwipeMove(event);
+            var isHorizontal = _this.props.axis === 'horizontal';
+            var childrenLength = _react.Children.count(_this.props.children);
+
+            var initialBoundry = 0;
+
+            var currentPosition = _this.getPosition(_this.state.selectedItem);
+            var finalBoundry = _this.props.infiniteLoop ? _this.getPosition(childrenLength - 1) - 100 : _this.getPosition(childrenLength - 1);
+
+            var axisDelta = isHorizontal ? delta.x : delta.y;
+            var handledDelta = axisDelta;
+
+            // prevent user from swiping left out of boundaries
+            if (currentPosition === initialBoundry && axisDelta > 0) {
+                handledDelta = 0;
+            }
+
+            // prevent user from swiping right out of boundaries
+            if (currentPosition === finalBoundry && axisDelta < 0) {
+                handledDelta = 0;
+            }
+
+            var position = currentPosition + 100 / (_this.state.itemSize / handledDelta);
+            if (_this.props.infiniteLoop) {
+                // When allowing infinite loop, if we slide left from position 0 we reveal the cloned last slide that appears before it
+                // if we slide even further we need to jump to other side so it can continue - and vice versa for the last slide
+                if (_this.state.selectedItem === 0 && position > -100) {
+                    position -= childrenLength * 100;
+                } else if (_this.state.selectedItem === childrenLength - 1 && position < -childrenLength * 100) {
+                    position += childrenLength * 100;
+                }
+            }
+            position += '%';
+            _this.setPosition(position);
+
+            // allows scroll if the swipe was within the tolerance
+            var hasMoved = Math.abs(axisDelta) > _this.props.swipeScrollTolerance;
+
+            if (hasMoved && !_this.state.cancelClick) {
+                _this.setState({
+                    cancelClick: true
+                });
+            }
+
+            return hasMoved;
+        };
+
+        _this.setPosition = function (position, forceReflow) {
+            var list = _reactDom2.default.findDOMNode(_this.listRef);
+            ['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
+                list.style[prop] = (0, _CSSTranslate2.default)(position, _this.props.axis);
+            });
+            if (forceReflow) {
+                list.offsetLeft;
+            }
+        };
+
+        _this.resetPosition = function () {
+            var currentPosition = _this.getPosition(_this.state.selectedItem) + '%';
+            _this.setPosition(currentPosition);
+        };
+
+        _this.decrement = function () {
+            var positions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+            var fromSwipe = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+            _this.moveTo(_this.state.selectedItem - (typeof positions === 'number' ? positions : 1), fromSwipe);
+        };
+
+        _this.increment = function () {
+            var positions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+            var fromSwipe = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+            _this.moveTo(_this.state.selectedItem + (typeof positions === 'number' ? positions : 1), fromSwipe);
+        };
+
+        _this.moveTo = function (position, fromSwipe) {
+            var lastPosition = _react.Children.count(_this.props.children) - 1;
+            var needClonedSlide = _this.props.infiniteLoop && !fromSwipe && (position < 0 || position > lastPosition);
+            var oldPosition = position;
+
+            if (position < 0) {
+                position = _this.props.infiniteLoop ? lastPosition : 0;
+            }
+
+            if (position > lastPosition) {
+                position = _this.props.infiniteLoop ? 0 : lastPosition;
+            }
+
+            if (needClonedSlide) {
+                // set swiping true would disable transition time, then we set slider to cloned position and force a reflow
+                // this is only needed for non-swiping situation
+                _this.setState({
+                    swiping: true
+                }, function () {
+                    if (oldPosition < 0) {
+                        if (_this.props.centerMode && _this.props.axis === 'horizontal') {
+                            _this.setPosition('-' + ((lastPosition + 2) * _this.props.centerSlidePercentage - (100 - _this.props.centerSlidePercentage) / 2) + '%', true);
+                        } else {
+                            _this.setPosition('-' + (lastPosition + 2) * 100 + '%', true);
+                        }
+                    } else if (oldPosition > lastPosition) {
+                        _this.setPosition(0, true);
+                    }
+
+                    _this.selectItem({
+                        selectedItem: position,
+                        swiping: false
+                    });
+                });
+            } else {
+                _this.selectItem({
+                    // if it's not a slider, we don't need to set position here
+                    selectedItem: position
+                });
+            }
+
+            // don't reset auto play when stop on hover is enabled, doing so will trigger a call to auto play more than once
+            // and will result in the interval function not being cleared correctly.
+            if (_this.state.autoPlay && _this.state.isMouseEntered === false) {
+                _this.resetAutoPlay();
+            }
+        };
+
+        _this.onClickNext = function () {
+            _this.increment(1, false);
+        };
+
+        _this.onClickPrev = function () {
+            _this.decrement(1, false);
+        };
+
+        _this.onSwipeForward = function () {
+            _this.increment(1, true);
+        };
+
+        _this.onSwipeBackwards = function () {
+            _this.decrement(1, true);
+        };
+
+        _this.changeItem = function (e) {
+            if (!e.key || e.key === 'Enter') {
+                var newIndex = e.target.value;
+
+                _this.selectItem({
+                    selectedItem: newIndex
+                });
+            }
+        };
+
+        _this.selectItem = function (state, cb) {
+            _this.setState(state, cb);
+            _this.handleOnChange(state.selectedItem, _react.Children.toArray(_this.props.children)[state.selectedItem]);
+        };
+
+        _this.getInitialImage = function () {
+            var selectedItem = _this.props.selectedItem;
+            var item = _this.itemsRef && _this.itemsRef[selectedItem];
+            var images = item && item.getElementsByTagName('img');
+            return images && images[selectedItem];
+        };
+
+        _this.getVariableImageHeight = function (position) {
+            var item = _this.itemsRef && _this.itemsRef[position];
+            var images = item && item.getElementsByTagName('img');
+            if (_this.state.hasMount && images.length > 0) {
+                var image = images[0];
+
+                if (!image.complete) {
+                    // if the image is still loading, the size won't be available so we trigger a new render after it's done
+                    var onImageLoad = function onImageLoad() {
+                        _this.forceUpdate();
+                        image.removeEventListener('load', onImageLoad);
+                    };
+
+                    image.addEventListener('load', onImageLoad);
+                }
+
+                var height = image.clientHeight;
+                return height > 0 ? height : null;
+            }
+
+            return null;
+        };
+
         _this.state = {
@@ -271,3 +613,3 @@ initialized: false,
                 _react.Children.map(this.props.children, function (item, index) {
-                    return _react2.default.createElement('li', { className: _cssClasses2.default.DOT(index === _this4.state.selectedItem), onClick: _this4.changeItem, onKeyDown: _this4.changeItem, value: index, key: index, role: 'button', tabIndex: 0 });
+                    return _react2.default.createElement('li', { className: _cssClasses2.default.DOT(index === _this4.state.selectedItem), onClick: _this4.changeItem, onKeyDown: _this4.changeItem, value: index, key: index, role: 'button', tabIndex: 0, 'aria-label': _this4.props.labels.item + ' ' + (index + 1) });
                 })
@@ -298,3 +640,3 @@ );
                 _Thumbs2.default,
-                { ref: this.setThumbsRef, onSelectItem: this.handleClickThumb, selectedItem: this.state.selectedItem, transitionTime: this.props.transitionTime, thumbWidth: this.props.thumbWidth },
+                { ref: this.setThumbsRef, onSelectItem: this.handleClickThumb, selectedItem: this.state.selectedItem, transitionTime: this.props.transitionTime, thumbWidth: this.props.thumbWidth, labels: this.props.labels },
                 this.props.children
@@ -385,3 +727,3 @@ );
                     { className: _cssClasses2.default.CAROUSEL(true), style: { width: this.props.width } },
-                    _react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.onClickPrev }),
+                    _react2.default.createElement('button', { type: 'button', 'aria-label': this.props.labels.leftArrow, className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.onClickPrev }),
                     _react2.default.createElement(
@@ -411,3 +753,3 @@ 'div',
                     ),
-                    _react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_NEXT(!hasNext), onClick: this.onClickNext }),
+                    _react2.default.createElement('button', { type: 'button', 'aria-label': this.props.labels.rightArrow, className: _cssClasses2.default.ARROW_NEXT(!hasNext), onClick: this.onClickNext }),
                     this.renderControls(),
@@ -452,3 +794,11 @@ this.renderStatus()
     centerMode: _propTypes2.default.bool,
-    centerSlidePercentage: _propTypes2.default.number
+    centerSlidePercentage: _propTypes2.default.number,
+    labels: _propTypes2.default.shape({
+        leftArrow: _propTypes2.default.string,
+        rightArrow: _propTypes2.default.string,
+        item: _propTypes2.default.string
+    }),
+    onSwipeStart: _propTypes2.default.func,
+    onSwipeEnd: _propTypes2.default.func,
+    onSwipeMove: _propTypes2.default.func
 };
@@ -479,351 +829,12 @@ Carousel.defaultProps = {
     centerMode: false,
-    centerSlidePercentage: 80
+    centerSlidePercentage: 80,
+    labels: {
+        leftArrow: 'previous slide / item',
+        rightArrow: 'next slide / item',
+        item: 'slide item'
+    },
+    onSwipeStart: function onSwipeStart() {},
+    onSwipeEnd: function onSwipeEnd() {},
+    onSwipeMove: function onSwipeMove() {}
 };
-
-var _initialiseProps = function _initialiseProps() {
-    var _this5 = this;
-
-    this.setThumbsRef = function (node) {
-        _this5.thumbsRef = node;
-    };
-
-    this.setCarouselWrapperRef = function (node) {
-        _this5.carouselWrapperRef = node;
-    };
-
-    this.setListRef = function (node) {
-        _this5.listRef = node;
-    };
-
-    this.setItemsWrapperRef = function (node) {
-        _this5.itemsWrapperRef = node;
-    };
-
-    this.setItemsRef = function (node, index) {
-        if (!_this5.itemsRef) {
-            _this5.itemsRef = [];
-        }
-        _this5.itemsRef[index] = node;
-    };
-
-    this.autoPlay = function () {
-        if (!_this5.state.autoPlay || _react.Children.count(_this5.props.children) <= 1) {
-            return;
-        }
-
-        clearTimeout(_this5.timer);
-        _this5.timer = setTimeout(function () {
-            _this5.increment();
-        }, _this5.props.interval);
-    };
-
-    this.clearAutoPlay = function () {
-        if (!_this5.state.autoPlay) {
-            return;
-        }
-
-        clearTimeout(_this5.timer);
-    };
-
-    this.resetAutoPlay = function () {
-        _this5.clearAutoPlay();
-        _this5.autoPlay();
-    };
-
-    this.stopOnHover = function () {
-        _this5.setState({ isMouseEntered: true });
-        _this5.clearAutoPlay();
-    };
-
-    this.startOnLeave = function () {
-        _this5.setState({ isMouseEntered: false });
-        _this5.autoPlay();
-    };
-
-    this.navigateWithKeyboard = function (e) {
-        var axis = _this5.props.axis;
-
-        var isHorizontal = axis === 'horizontal';
-        var keyNames = {
-            ArrowUp: 38,
-            ArrowRight: 39,
-            ArrowDown: 40,
-            ArrowLeft: 37
-        };
-
-        var nextKey = isHorizontal ? keyNames.ArrowRight : keyNames.ArrowDown;
-        var prevKey = isHorizontal ? keyNames.ArrowLeft : keyNames.ArrowUp;
-
-        if (nextKey === e.keyCode) {
-            _this5.increment();
-        } else if (prevKey === e.keyCode) {
-            _this5.decrement();
-        }
-    };
-
-    this.updateSizes = function () {
-        if (!_this5.state.initialized) {
-            return;
-        }
-
-        var isHorizontal = _this5.props.axis === 'horizontal';
-        var firstItem = _this5.itemsRef[0];
-        var itemSize = isHorizontal ? firstItem.clientWidth : firstItem.clientHeight;
-
-        _this5.setState(function (_state, props) {
-            return {
-                itemSize: itemSize,
-                wrapperSize: isHorizontal ? itemSize * _react.Children.count(props.children) : itemSize
-            };
-        });
-
-        if (_this5.thumbsRef) {
-            _this5.thumbsRef.updateSizes();
-        }
-    };
-
-    this.setMountState = function () {
-        _this5.setState({ hasMount: true });
-        _this5.updateSizes();
-    };
-
-    this.handleClickItem = function (index, item) {
-        if (_react.Children.count(_this5.props.children) === 0) {
-            return;
-        }
-
-        if (_this5.state.cancelClick) {
-            _this5.setState({
-                cancelClick: false
-            });
-
-            return;
-        }
-
-        _this5.props.onClickItem(index, item);
-
-        if (index !== _this5.state.selectedItem) {
-            _this5.setState({
-                selectedItem: index
-            });
-        }
-    };
-
-    this.handleOnChange = function (index, item) {
-        if (_react.Children.count(_this5.props.children) <= 1) {
-            return;
-        }
-
-        _this5.props.onChange(index, item);
-    };
-
-    this.handleClickThumb = function (index, item) {
-        _this5.props.onClickThumb(index, item);
-
-        _this5.selectItem({
-            selectedItem: index
-        });
-    };
-
-    this.onSwipeStart = function () {
-        _this5.setState({
-            swiping: true
-        });
-        _this5.clearAutoPlay();
-    };
-
-    this.onSwipeEnd = function () {
-        _this5.setState({
-            swiping: false,
-            cancelClick: false
-        });
-        _this5.autoPlay();
-    };
-
-    this.onSwipeMove = function (delta) {
-        var isHorizontal = _this5.props.axis === 'horizontal';
-        var childrenLength = _react.Children.count(_this5.props.children);
-
-        var initialBoundry = 0;
-
-        var currentPosition = _this5.getPosition(_this5.state.selectedItem);
-        var finalBoundry = _this5.props.infiniteLoop ? _this5.getPosition(childrenLength - 1) - 100 : _this5.getPosition(childrenLength - 1);
-
-        var axisDelta = isHorizontal ? delta.x : delta.y;
-        var handledDelta = axisDelta;
-
-        // prevent user from swiping left out of boundaries
-        if (currentPosition === initialBoundry && axisDelta > 0) {
-            handledDelta = 0;
-        }
-
-        // prevent user from swiping right out of boundaries
-        if (currentPosition === finalBoundry && axisDelta < 0) {
-            handledDelta = 0;
-        }
-
-        var position = currentPosition + 100 / (_this5.state.itemSize / handledDelta);
-        if (_this5.props.infiniteLoop) {
-            // When allowing infinite loop, if we slide left from position 0 we reveal the cloned last slide that appears before it
-            // if we slide even further we need to jump to other side so it can continue - and vice versa for the last slide
-            if (_this5.state.selectedItem === 0 && position > -100) {
-                position -= childrenLength * 100;
-            } else if (_this5.state.selectedItem === childrenLength - 1 && position < -childrenLength * 100) {
-                position += childrenLength * 100;
-            }
-        }
-        position += '%';
-        _this5.setPosition(position);
-
-        // allows scroll if the swipe was within the tolerance
-        var hasMoved = Math.abs(axisDelta) > _this5.props.swipeScrollTolerance;
-
-        if (hasMoved && !_this5.state.cancelClick) {
-            _this5.setState({
-                cancelClick: true
-            });
-        }
-
-        return hasMoved;
-    };
-
-    this.setPosition = function (position, forceReflow) {
-        var list = _reactDom2.default.findDOMNode(_this5.listRef);
-        ['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
-            list.style[prop] = (0, _CSSTranslate2.default)(position, _this5.props.axis);
-        });
-        if (forceReflow) {
-            list.offsetLeft;
-        }
-    };
-
-    this.resetPosition = function () {
-        var currentPosition = _this5.getPosition(_this5.state.selectedItem) + '%';
-        _this5.setPosition(currentPosition);
-    };
-
-    this.decrement = function () {
-        var positions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-        var fromSwipe = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-        _this5.moveTo(_this5.state.selectedItem - (typeof positions === 'number' ? positions : 1), fromSwipe);
-    };
-
-    this.increment = function () {
-        var positions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-        var fromSwipe = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-
-        _this5.moveTo(_this5.state.selectedItem + (typeof positions === 'number' ? positions : 1), fromSwipe);
-    };
-
-    this.moveTo = function (position, fromSwipe) {
-        var lastPosition = _react.Children.count(_this5.props.children) - 1;
-        var needClonedSlide = _this5.props.infiniteLoop && !fromSwipe && (position < 0 || position > lastPosition);
-        var oldPosition = position;
-
-        if (position < 0) {
-            position = _this5.props.infiniteLoop ? lastPosition : 0;
-        }
-
-        if (position > lastPosition) {
-            position = _this5.props.infiniteLoop ? 0 : lastPosition;
-        }
-
-        if (needClonedSlide) {
-            // set swiping true would disable transition time, then we set slider to cloned position and force a reflow
-            // this is only needed for non-swiping situation
-            _this5.setState({
-                swiping: true
-            }, function () {
-                if (oldPosition < 0) {
-                    if (_this5.props.centerMode && _this5.props.axis === 'horizontal') {
-                        _this5.setPosition('-' + ((lastPosition + 2) * _this5.props.centerSlidePercentage - (100 - _this5.props.centerSlidePercentage) / 2) + '%', true);
-                    } else {
-                        _this5.setPosition('-' + (lastPosition + 2) * 100 + '%', true);
-                    }
-                } else if (oldPosition > lastPosition) {
-                    _this5.setPosition(0, true);
-                }
-
-                _this5.selectItem({
-                    selectedItem: position,
-                    swiping: false
-                });
-            });
-        } else {
-            _this5.selectItem({
-                // if it's not a slider, we don't need to set position here
-                selectedItem: position
-            });
-        }
-
-        // don't reset auto play when stop on hover is enabled, doing so will trigger a call to auto play more than once
-        // and will result in the interval function not being cleared correctly.
-        if (_this5.state.autoPlay && _this5.state.isMouseEntered === false) {
-            _this5.resetAutoPlay();
-        }
-    };
-
-    this.onClickNext = function () {
-        _this5.increment(1, false);
-    };
-
-    this.onClickPrev = function () {
-        _this5.decrement(1, false);
-    };
-
-    this.onSwipeForward = function () {
-        _this5.increment(1, true);
-    };
-
-    this.onSwipeBackwards = function () {
-        _this5.decrement(1, true);
-    };
-
-    this.changeItem = function (e) {
-        if (!e.key || e.key === 'Enter') {
-            var newIndex = e.target.value;
-
-            _this5.selectItem({
-                selectedItem: newIndex
-            });
-        }
-    };
-
-    this.selectItem = function (state, cb) {
-        _this5.setState(state, cb);
-        _this5.handleOnChange(state.selectedItem, _react.Children.toArray(_this5.props.children)[state.selectedItem]);
-    };
-
-    this.getInitialImage = function () {
-        var selectedItem = _this5.props.selectedItem;
-        var item = _this5.itemsRef && _this5.itemsRef[selectedItem];
-        var images = item && item.getElementsByTagName('img');
-        return images && images[selectedItem];
-    };
-
-    this.getVariableImageHeight = function (position) {
-        var item = _this5.itemsRef && _this5.itemsRef[position];
-        var images = item && item.getElementsByTagName('img');
-        if (_this5.state.hasMount && images.length > 0) {
-            var image = images[0];
-
-            if (!image.complete) {
-                // if the image is still loading, the size won't be available so we trigger a new render after it's done
-                var onImageLoad = function onImageLoad() {
-                    _this5.forceUpdate();
-                    image.removeEventListener('load', onImageLoad);
-                };
-
-                image.addEventListener('load', onImageLoad);
-            }
-
-            var height = image.clientHeight;
-            return height > 0 ? height : null;
-        }
-
-        return null;
-    };
-};
-
 exports.default = Carousel;

lib/components/Thumbs.js

@@ -184,3 +184,4 @@ 'use strict';
                     onClick: _this2.handleClickItem.bind(_this2, index, _this2.props.children[index]),
-                    onKeyDown: _this2.handleClickItem.bind(_this2, index, _this2.props.children[index])
+                    onKeyDown: _this2.handleClickItem.bind(_this2, index, _this2.props.children[index]),
+                    'aria-label': _this2.props.labels.item + ' ' + (index + 1)
                 };
@@ -242,3 +243,3 @@
                     { className: _cssClasses2.default.WRAPPER(false), ref: this.setItemsWrapperRef },
-                    _react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.slideRight }),
+                    _react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_PREV(!hasPrev), onClick: this.slideRight, 'aria-label': this.props.labels.leftArrow }),
                     _react2.default.createElement(
@@ -258,3 +259,3 @@ _reactEasySwipe2.default,
                     ),
-                    _react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_NEXT(!hasNext), onClick: this.slideLeft })
+                    _react2.default.createElement('button', { type: 'button', className: _cssClasses2.default.ARROW_NEXT(!hasNext), onClick: this.slideLeft, 'aria-label': this.props.labels.rightArrow })
                 )
@@ -273,3 +274,8 @@ );
     selectedItem: _propTypes2.default.number,
-    thumbWidth: _propTypes2.default.number
+    thumbWidth: _propTypes2.default.number,
+    labels: _propTypes2.default.shape({
+        leftArrow: _propTypes2.default.string,
+        rightArrow: _propTypes2.default.string,
+        item: _propTypes2.default.string
+    })
 };
@@ -391,5 +397,3 @@ Thumbs.defaultProps = {
         _this3.setState({
-            firstItem: position,
-            // if it's not a slider, we don't need to set position here
-            selectedItem: _this3.state.selectedItem
+            firstItem: position
         });
@@ -396,0 +400,0 @@ };

package.json

 {
   "name": "react-responsive-carousel",
-  "version": "3.1.50",
+  "version": "3.1.51",
   "description": "React Responsive Carousel",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -47,3 +47,3 @@ # React Responsive Carousel
 ### Installing as a package
-`npm install react-responsive-carousel --save`
+`npm install react-responsive-carousel`
 
@@ -118,2 +118,6 @@ ### Usage
 | centerSlidePercentage | `number`      | `80` | optionally specify percentage width (as an integer) of the slides in `centerMode` |
+| labels | `object [key: string]: string`      | `{ leftArrow, rightArrow, item }` | optionally specify labels to be applied to controls |
+| onSwipeStart          | `function`    | - | Fired when a swiping gesture has started |
+| onSwipeEnd            | `function`    | - | Fired when a swiping gesture has ended |
+| onSwipeMove           | `function`    | - | Fired when a swiping gesture is happening |
 
@@ -120,0 +124,0 @@

No alert changes

Improved metrics

Total package byte prevSize

971070

increased by0.27%

Lines of code

1626

increased by1.18%

Number of lines in readme file

177

increased by2.31%

No dependency changes