Socket
Socket
Sign inDemoInstall

react-responsive-carousel

Package Overview
Dependencies
Maintainers
1
Versions
121
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-responsive-carousel - npm Package Compare versions

Comparing version 3.2.6 to 3.2.7

babel.config.cjs.json
babel.config.json

9

CHANGELOG.md

@@ -10,4 +10,11 @@ # Changelog

## [Unreleased](https://github.com/leandrowd/react-responsive-carousel/compare/v3.2.5...HEAD)
## [Unreleased](https://github.com/leandrowd/react-responsive-carousel/compare/v3.2.6...HEAD)
## [v3.2.6](https://github.com/leandrowd/react-responsive-carousel/compare/v3.2.5...v3.2.6) - 2020-05-06
### Commits
- Fix storybook storysource [`0780a0a`](https://github.com/leandrowd/react-responsive-carousel/commit/0780a0aeacd3be585bd7a494b497918406e92c30)
- gh-439: Allow IE11 compilation and more [`db38c3f`](https://github.com/leandrowd/react-responsive-carousel/commit/db38c3f61e2691cea78ee31eb71eea0e5d95a6a4)
## [v3.2.5](https://github.com/leandrowd/react-responsive-carousel/compare/v3.2.4...v3.2.5) - 2020-04-26

@@ -14,0 +21,0 @@

269

lib/cjs/components/Carousel.js

@@ -12,3 +12,3 @@ "use strict";

var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactEasySwipe = _interopRequireDefault(require("react-easy-swipe"));

@@ -19,8 +19,4 @@ var _cssClasses = _interopRequireDefault(require("../cssClasses"));

var _reactEasySwipe = _interopRequireDefault(require("react-easy-swipe"));
var _Thumbs = _interopRequireDefault(require("./Thumbs"));
var customPropTypes = _interopRequireWildcard(require("../customPropTypes"));
var _document = _interopRequireDefault(require("../shims/document"));

@@ -34,5 +30,5 @@

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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); }
function _typeof(obj) { "@babel/helpers - typeof"; 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); }

@@ -43,2 +39,4 @@ 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; }

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); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -56,3 +54,3 @@

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

@@ -73,5 +71,9 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

var Carousel = /*#__PURE__*/function (_Component) {
_inherits(Carousel, _Component);
var isKeyboardEvent = function isKeyboardEvent(e) {
return e ? e.hasOwnProperty('key') : false;
};
var Carousel = /*#__PURE__*/function (_React$Component) {
_inherits(Carousel, _React$Component);
var _super = _createSuper(Carousel);

@@ -86,2 +88,12 @@

_defineProperty(_assertThisInitialized(_this), "thumbsRef", void 0);
_defineProperty(_assertThisInitialized(_this), "carouselWrapperRef", void 0);
_defineProperty(_assertThisInitialized(_this), "listRef", void 0);
_defineProperty(_assertThisInitialized(_this), "itemsRef", void 0);
_defineProperty(_assertThisInitialized(_this), "timer", void 0);
_defineProperty(_assertThisInitialized(_this), "setThumbsRef", function (node) {

@@ -99,6 +111,2 @@ _this.thumbsRef = node;

_defineProperty(_assertThisInitialized(_this), "setItemsWrapperRef", function (node) {
_this.itemsWrapperRef = node;
});
_defineProperty(_assertThisInitialized(_this), "setItemsRef", function (node, index) {

@@ -117,3 +125,3 @@ if (!_this.itemsRef) {

clearTimeout(_this.timer);
if (_this.timer) clearTimeout(_this.timer);
_this.timer = setTimeout(function () {

@@ -129,3 +137,3 @@ _this.increment();

clearTimeout(_this.timer);
if (_this.timer) clearTimeout(_this.timer);
});

@@ -142,5 +150,3 @@

isMouseEntered: true
});
_this.clearAutoPlay();
}, _this.clearAutoPlay);
});

@@ -151,8 +157,10 @@

isMouseEntered: false
});
_this.autoPlay();
}, _this.autoPlay);
});
_defineProperty(_assertThisInitialized(_this), "isFocusWithinTheCarousel", function () {
if (!_this.carouselWrapperRef) {
return false;
}
if ((0, _document.default)().activeElement === _this.carouselWrapperRef || _this.carouselWrapperRef.contains((0, _document.default)().activeElement)) {

@@ -189,3 +197,3 @@ return true;

_defineProperty(_assertThisInitialized(_this), "updateSizes", function () {
if (!_this.state.initialized) {
if (!_this.state.initialized || !_this.itemsRef || _this.itemsRef.length === 0) {
return;

@@ -198,6 +206,4 @@ }

_this.setState(function (_state, props) {
return {
itemSize: itemSize
};
_this.setState({
itemSize: itemSize
});

@@ -313,4 +319,2 @@

position += '%';
_this.setPosition(position); // allows scroll if the swipe was within the tolerance

@@ -333,8 +337,10 @@

['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
list.style[prop] = (0, _CSSTranslate.default)(position, _this.props.axis);
});
if (list instanceof HTMLElement) {
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
list.style[prop] = (0, _CSSTranslate.default)(position, '%', _this.props.axis);
});
if (forceReflow) {
list.offsetLeft;
if (forceReflow) {
list.offsetLeft;
}
}

@@ -344,3 +350,3 @@ });

_defineProperty(_assertThisInitialized(_this), "resetPosition", function () {
var currentPosition = _this.getPosition(_this.state.selectedItem) + '%';
var currentPosition = _this.getPosition(_this.state.selectedItem);

@@ -365,2 +371,6 @@ _this.setPosition(currentPosition);

_defineProperty(_assertThisInitialized(_this), "moveTo", function (position, fromSwipe) {
if (typeof position !== 'number') {
return;
}
var lastPosition = _react.Children.count(_this.props.children) - 1;

@@ -385,6 +395,6 @@ var needClonedSlide = _this.props.infiniteLoop && !fromSwipe && (position < 0 || position > lastPosition);

if (oldPosition < 0) {
if (_this.props.centerMode && _this.props.axis === 'horizontal') {
_this.setPosition("-".concat((lastPosition + 2) * _this.props.centerSlidePercentage - (100 - _this.props.centerSlidePercentage) / 2, "%"), true);
if (_this.props.centerMode && _this.props.centerSlidePercentage && _this.props.axis === 'horizontal') {
_this.setPosition(-(lastPosition + 2) * _this.props.centerSlidePercentage - (100 - _this.props.centerSlidePercentage) / 2, true);
} else {
_this.setPosition("-".concat((lastPosition + 2) * 100, "%"), true);
_this.setPosition(-(lastPosition + 2) * 100, true);
}

@@ -430,10 +440,10 @@ } else if (oldPosition > lastPosition) {

_defineProperty(_assertThisInitialized(_this), "changeItem", function (e) {
if (!e.key || e.key === 'Enter') {
var newIndex = e.target.value;
_this.selectItem({
selectedItem: newIndex
});
}
_defineProperty(_assertThisInitialized(_this), "changeItem", function (newIndex) {
return function (e) {
if (!isKeyboardEvent(e) || e.key === 'Enter') {
_this.selectItem({
selectedItem: newIndex
});
}
};
});

@@ -456,3 +466,3 @@

var item = _this.itemsRef && _this.itemsRef[position];
var images = item && item.getElementsByTagName('img');
var images = item && item.getElementsByTagName('img') || [];

@@ -485,3 +495,6 @@ if (_this.state.hasMount && images.length > 0) {

isMouseEntered: false,
autoPlay: props.autoPlay
autoPlay: props.autoPlay,
swiping: false,
cancelClick: false,
itemSize: 1
};

@@ -648,2 +661,6 @@ return _this;

if (!this.props.children) {
return [];
}
return _react.Children.map(this.props.children, function (item, index) {

@@ -658,5 +675,6 @@ var slideProps = {

};
var extraProps = {};
if (_this2.props.centerMode && _this2.props.axis === 'horizontal') {
slideProps.style = {
extraProps.style = {
minWidth: _this2.props.centerSlidePercentage + '%'

@@ -666,3 +684,3 @@ };

return /*#__PURE__*/_react.default.createElement("li", slideProps, _this2.props.renderItem(item, {
return /*#__PURE__*/_react.default.createElement("li", _extends({}, slideProps, extraProps), _this2.props.renderItem(item, {
isSelected: index === _this2.state.selectedItem

@@ -677,3 +695,9 @@ }));

if (!this.props.showIndicators) {
var _this$props = this.props,
showIndicators = _this$props.showIndicators,
labels = _this$props.labels,
renderIndicator = _this$props.renderIndicator,
children = _this$props.children;
if (!showIndicators) {
return null;

@@ -684,4 +708,4 @@ }

className: "control-dots"
}, _react.Children.map(this.props.children, function (item, index) {
return _this3.props.renderIndicator(_this3.changeItem, index === _this3.state.selectedItem, index, _this3.props.labels.item);
}, _react.Children.map(children, function (_, index) {
return renderIndicator && renderIndicator(_this3.changeItem(index), index === _this3.state.selectedItem, index, labels.item);
}));

@@ -703,3 +727,3 @@ }

value: function renderThumbs() {
if (!this.props.showThumbs || _react.Children.count(this.props.children) === 0) {
if (!this.props.showThumbs || !this.props.children || _react.Children.count(this.props.children) === 0) {
return null;

@@ -720,2 +744,4 @@ }

value: function render() {
var _this4 = this;
if (!this.props.children || _react.Children.count(this.props.children) === 0) {

@@ -728,5 +754,5 @@ return null;

var hasPrev = canShowArrows && (this.state.selectedItem > 0 || this.props.infiniteLoop); // show right arrow
var hasPrev = canShowArrows && (this.state.selectedItem > 0 || this.props.infiniteLoop) || false; // show right arrow
var hasNext = canShowArrows && (this.state.selectedItem < _react.Children.count(this.props.children) - 1 || this.props.infiniteLoop); // obj to hold the transformations and styles
var hasNext = canShowArrows && (this.state.selectedItem < _react.Children.count(this.props.children) - 1 || this.props.infiniteLoop) || false; // obj to hold the transformations and styles

@@ -736,3 +762,3 @@ var itemListStyles = {};

var transformProp = (0, _CSSTranslate.default)(currentPosition + '%', this.props.axis);
var transformProp = (0, _CSSTranslate.default)(currentPosition, '%', this.props.axis);
var transitionTime = this.props.transitionTime + 'ms';

@@ -791,3 +817,3 @@ itemListStyles = {

ref: this.setCarouselWrapperRef,
tabIndex: "0"
tabIndex: 0
}, /*#__PURE__*/_react.default.createElement("div", {

@@ -800,7 +826,6 @@ className: _cssClasses.default.CAROUSEL(true),

className: _cssClasses.default.WRAPPER(true, this.props.axis),
style: containerStyles,
ref: this.setItemsWrapperRef
style: containerStyles
}, this.props.swipeable ? /*#__PURE__*/_react.default.createElement(_reactEasySwipe.default, _extends({
tagName: "ul",
ref: this.setListRef
innerRef: this.setListRef
}, swiperProps, {

@@ -810,3 +835,5 @@ allowMouseEvents: this.props.emulateTouch

className: _cssClasses.default.SLIDER(true, this.state.swiping),
ref: this.setListRef,
ref: function ref(node) {
return _this4.setListRef(node);
},
style: itemListStyles

@@ -818,74 +845,12 @@ }, this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone)), this.props.renderArrowNext(this.onClickNext, hasNext, this.props.labels.rightArrow), this.renderControls(), this.renderStatus()), this.renderThumbs());

return Carousel;
}(_react.Component);
}(_react.default.Component);
exports.default = Carousel;
_defineProperty(Carousel, "displayName", 'Carousel');
_defineProperty(Carousel, "propTypes", {
className: _propTypes.default.string,
children: _propTypes.default.node,
showArrows: _propTypes.default.bool,
showStatus: _propTypes.default.bool,
showIndicators: _propTypes.default.bool,
infiniteLoop: _propTypes.default.bool,
showThumbs: _propTypes.default.bool,
thumbWidth: _propTypes.default.number,
selectedItem: _propTypes.default.number,
onClickItem: _propTypes.default.func.isRequired,
onClickThumb: _propTypes.default.func.isRequired,
onChange: _propTypes.default.func.isRequired,
axis: _propTypes.default.oneOf(['horizontal', 'vertical']),
verticalSwipe: _propTypes.default.oneOf(['natural', 'standard']),
width: customPropTypes.unit,
useKeyboardArrows: _propTypes.default.bool,
autoPlay: _propTypes.default.bool,
stopOnHover: _propTypes.default.bool,
interval: _propTypes.default.number,
transitionTime: _propTypes.default.number,
swipeScrollTolerance: _propTypes.default.number,
swipeable: _propTypes.default.bool,
dynamicHeight: _propTypes.default.bool,
emulateTouch: _propTypes.default.bool,
statusFormatter: _propTypes.default.func.isRequired,
centerMode: _propTypes.default.bool,
centerSlidePercentage: _propTypes.default.number,
labels: _propTypes.default.shape({
leftArrow: _propTypes.default.string,
rightArrow: _propTypes.default.string,
item: _propTypes.default.string
}),
onSwipeStart: _propTypes.default.func,
onSwipeEnd: _propTypes.default.func,
onSwipeMove: _propTypes.default.func,
renderArrowPrev: _propTypes.default.func,
renderArrowNext: _propTypes.default.func,
renderIndicator: _propTypes.default.func,
renderItem: _propTypes.default.func,
renderThumbs: _propTypes.default.func
});
_defineProperty(Carousel, "defaultProps", {
showIndicators: true,
showArrows: true,
showStatus: true,
showThumbs: true,
infiniteLoop: false,
selectedItem: 0,
axis: 'horizontal',
verticalSwipe: 'standard',
width: '100%',
useKeyboardArrows: false,
autoPlay: false,
stopOnHover: true,
centerSlidePercentage: 80,
interval: 3000,
transitionTime: 350,
swipeScrollTolerance: 5,
swipeable: true,
dynamicHeight: false,
emulateTouch: false,
onClickItem: noop,
onClickThumb: noop,
onChange: noop,
statusFormatter: defaultStatusFormatter,
centerMode: false,
centerSlidePercentage: 80,
labels: {

@@ -896,2 +861,5 @@ leftArrow: 'previous slide / item',

},
onClickItem: noop,
onClickThumb: noop,
onChange: noop,
onSwipeStart: function onSwipeStart() {},

@@ -928,12 +896,43 @@ onSwipeEnd: function onSwipeEnd() {},

},
renderItem: function renderItem(item, _ref) {
var isSelected = _ref.isSelected;
renderItem: function renderItem(item) {
return item;
},
renderThumbs: function renderThumbs(children) {
return children;
}
});
var images = _react.Children.map(children, function (item) {
var img = item; // if the item is not an image, try to find the first image in the item's children.
var _default = Carousel;
exports.default = _default;
if (item.type !== 'img') {
img = _react.Children.toArray(item.props.children).find(function (children) {
return children.type === 'img';
});
}
if (!img) {
return undefined;
}
return img;
});
if (images.filter(function (image) {
return image;
}).length === 0) {
console.warn("No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components. More info at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md");
return [];
}
return images;
},
statusFormatter: defaultStatusFormatter,
selectedItem: 0,
showArrows: true,
showIndicators: true,
showStatus: true,
showThumbs: true,
stopOnHover: true,
swipeScrollTolerance: 5,
swipeable: true,
transitionTime: 350,
verticalSwipe: 'standard',
width: '100%'
});

156

lib/cjs/components/Thumbs.js

@@ -10,4 +10,2 @@ "use strict";

var _propTypes = _interopRequireDefault(require("prop-types"));
var _cssClasses = _interopRequireDefault(require("../cssClasses"));

@@ -27,4 +25,6 @@

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; 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); }
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); }

@@ -44,3 +44,3 @@

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

@@ -55,2 +55,6 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

var isKeyboardEvent = function isKeyboardEvent(e) {
return e.hasOwnProperty('key');
};
var Thumbs = /*#__PURE__*/function (_Component) {

@@ -68,2 +72,10 @@ _inherits(Thumbs, _Component);

_defineProperty(_assertThisInitialized(_this), "itemsWrapperRef", void 0);
_defineProperty(_assertThisInitialized(_this), "itemsListRef", void 0);
_defineProperty(_assertThisInitialized(_this), "thumbsRef", void 0);
_defineProperty(_assertThisInitialized(_this), "lastPosition", 0);
_defineProperty(_assertThisInitialized(_this), "setItemsWrapperRef", function (node) {

@@ -86,7 +98,8 @@ _this.itemsWrapperRef = node;

_defineProperty(_assertThisInitialized(_this), "updateSizes", function () {
if (!_this.props.children || !_this.itemsWrapperRef || _this.state.images.length === 0) {
if (!_this.props.children || !_this.itemsWrapperRef || !_this.thumbsRef) {
return;
}
var total = _this.props.children.length;
var total = _react.Children.count(_this.props.children);
var wrapperSize = _this.itemsWrapperRef.clientWidth;

@@ -100,7 +113,7 @@ var itemSize = _this.props.thumbWidth ? _this.props.thumbWidth : (0, _dimensions.outerWidth)(_this.thumbsRef[0]);

return {
itemSize,
visibleItems,
itemSize: itemSize,
visibleItems: visibleItems,
firstItem: showArrows ? _this.getFirstItem(props.selectedItem) : 0,
lastPosition,
showArrows
lastPosition: lastPosition,
showArrows: showArrows
};

@@ -110,12 +123,4 @@ });

_defineProperty(_assertThisInitialized(_this), "setMountState", function () {
_this.setState({
hasMount: true
});
_this.updateSizes();
});
_defineProperty(_assertThisInitialized(_this), "handleClickItem", function (index, item, e) {
if (!e.keyCode || e.key === 'Enter') {
if (!isKeyboardEvent(e) || e.key === 'Enter') {
var handler = _this.props.onSelectItem;

@@ -141,3 +146,9 @@

_defineProperty(_assertThisInitialized(_this), "onSwipeMove", function (deltaX) {
_defineProperty(_assertThisInitialized(_this), "onSwipeMove", function (delta) {
var deltaX = delta.x;
if (!_this.state.itemSize || !_this.itemsWrapperRef) {
return false;
}
var leftBoundary = 0;

@@ -157,9 +168,11 @@ var currentPosition = -_this.state.firstItem * _this.state.itemSize;

var wrapperSize = _this.itemsWrapperRef.clientWidth;
var position = currentPosition + 100 / (wrapperSize / deltaX) + '%'; // if 3d isn't available we will use left to move
var position = currentPosition + 100 / (wrapperSize / deltaX); // if 3d isn't available we will use left to move
if (_this.itemsListRef) {
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
_this.itemsListRef.style[prop] = (0, _CSSTranslate.default)(position, _this.props.axis);
_this.itemsListRef.style[prop] = (0, _CSSTranslate.default)(position, '%', _this.props.axis);
});
}
return true;
});

@@ -188,9 +201,7 @@

selectedItem: _props.selectedItem,
hasMount: false,
swiping: false,
showArrows: false,
firstItem: 0,
itemSize: null,
visibleItems: 0,
lastPosition: 0,
showArrows: false,
images: _this.getImages()
lastPosition: 0
};

@@ -202,3 +213,3 @@ return _this;

key: "componentDidMount",
value: function componentDidMount(nextProps) {
value: function componentDidMount() {
this.setupThumbs();

@@ -208,3 +219,3 @@ }

key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(props, state) {
value: function UNSAFE_componentWillReceiveProps(props) {
if (props.selectedItem !== this.state.selectedItem) {

@@ -216,8 +227,2 @@ this.setState({

}
if (props.children !== this.props.children) {
this.setState({
images: this.getImages()
});
}
}

@@ -260,30 +265,2 @@ }, {

}, {
key: "getImages",
value: function getImages() {
var images = _react.Children.map(this.props.children, function (item, index) {
var img = item; // if the item is not an image, try to find the first image in the item's children.
if (item.type !== 'img') {
img = _react.Children.toArray(item.props.children).filter(function (children) {
return children.type === 'img';
})[0];
}
if (!img || img.length === 0) {
return null;
}
return img;
});
if (images.filter(function (image) {
return image;
}).length === 0) {
console.warn("No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components. More info at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md");
return [];
}
return images;
}
}, {
key: "getFirstItem",

@@ -312,4 +289,4 @@ value: function getFirstItem(selectedItem) {

return this.state.images.map(function (img, index) {
var itemClass = _cssClasses.default.ITEM(false, index === _this2.state.selectedItem && _this2.state.hasMount);
return this.props.children.map(function (img, index) {
var itemClass = _cssClasses.default.ITEM(false, index === _this2.state.selectedItem);

@@ -329,9 +306,2 @@ var thumbProps = {

};
if (index === 0) {
img = _react.default.cloneElement(img, {
onLoad: _this2.setMountState
});
}
return /*#__PURE__*/_react.default.createElement("li", _extends({}, thumbProps, {

@@ -346,2 +316,4 @@ role: "button",

value: function render() {
var _this3 = this;
if (!this.props.children) {

@@ -357,4 +329,4 @@ return null;

var itemListStyles = {};
var currentPosition = -this.state.firstItem * this.state.itemSize + 'px';
var transformProp = (0, _CSSTranslate.default)(currentPosition, this.props.axis);
var currentPosition = -this.state.firstItem * (this.state.itemSize || 0);
var transformProp = (0, _CSSTranslate.default)(currentPosition, 'px', this.props.axis);
var transitionTime = this.props.transitionTime + 'ms';

@@ -383,3 +355,5 @@ itemListStyles = {

className: _cssClasses.default.ARROW_PREV(!hasPrev),
onClick: this.slideRight,
onClick: function onClick() {
return _this3.slideRight();
},
"aria-label": this.props.labels.leftArrow

@@ -399,3 +373,5 @@ }), /*#__PURE__*/_react.default.createElement(_reactEasySwipe.default, {

className: _cssClasses.default.ARROW_NEXT(!hasNext),
onClick: this.slideLeft,
onClick: function onClick() {
return _this3.slideLeft();
},
"aria-label": this.props.labels.rightArrow

@@ -409,24 +385,16 @@ })));

exports.default = Thumbs;
_defineProperty(Thumbs, "displayName", 'Thumbs');
_defineProperty(Thumbs, "propsTypes", {
children: _propTypes.default.element.isRequired,
transitionTime: _propTypes.default.number,
selectedItem: _propTypes.default.number,
thumbWidth: _propTypes.default.number,
labels: _propTypes.default.shape({
leftArrow: _propTypes.default.string,
rightArrow: _propTypes.default.string,
item: _propTypes.default.string
})
});
_defineProperty(Thumbs, "defaultProps", {
axis: 'horizontal',
labels: {
leftArrow: 'previous slide / item',
rightArrow: 'next slide / item',
item: 'slide item'
},
selectedItem: 0,
thumbWidth: 80,
transitionTime: 350,
axis: 'horizontal'
});
var _default = Thumbs;
exports.default = _default;
transitionTime: 350
});

9

lib/cjs/cssClasses.js

@@ -12,8 +12,9 @@ "use strict";

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; }
var _default = {
ROOT: function ROOT(customClassName) {
return (0, _classnames.default)({
'carousel-root': true,
[customClassName]: !!customClassName
});
return (0, _classnames.default)(_defineProperty({
'carousel-root': true
}, customClassName || '', !!customClassName));
},

@@ -20,0 +21,0 @@ CAROUSEL: function CAROUSEL(isSlider) {

5

lib/cjs/CSSTranslate.js

@@ -8,4 +8,5 @@ "use strict";

var _default = function _default(position, axis) {
var positionCss = axis === 'horizontal' ? [position, 0, 0] : [0, position, 0];
var _default = function _default(position, metric, axis) {
var positionPercent = position === 0 ? position : position + metric;
var positionCss = axis === 'horizontal' ? [positionPercent, 0, 0] : [0, positionPercent, 0];
var transitionProp = 'translate3d';

@@ -12,0 +13,0 @@ var translatedPosition = '(' + positionCss.join(',') + ')';

4

lib/cjs/main.js

@@ -9,5 +9,7 @@ "use strict";

function _typeof(obj) { "@babel/helpers - typeof"; 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); }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

@@ -14,0 +16,0 @@ Promise.resolve().then(function () {

383

lib/es/components/Carousel.js

@@ -1,3 +0,32 @@

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); }
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _reactEasySwipe = _interopRequireDefault(require("react-easy-swipe"));
var _cssClasses = _interopRequireDefault(require("../cssClasses"));
var _CSSTranslate = _interopRequireDefault(require("../CSSTranslate"));
var _Thumbs = _interopRequireDefault(require("./Thumbs"));
var _document = _interopRequireDefault(require("../shims/document"));
var _window = _interopRequireDefault(require("../shims/window"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; 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); }
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; }

@@ -7,2 +36,4 @@

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); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

@@ -20,3 +51,3 @@

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

@@ -31,13 +62,2 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

import React, { Component, Children } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import klass from '../cssClasses';
import CSSTranslate from '../CSSTranslate';
import Swipe from 'react-easy-swipe';
import Thumbs from './Thumbs';
import * as customPropTypes from '../customPropTypes';
import getDocument from '../shims/document';
import getWindow from '../shims/window';
var noop = function noop() {};

@@ -49,5 +69,9 @@

var Carousel = /*#__PURE__*/function (_Component) {
_inherits(Carousel, _Component);
var isKeyboardEvent = function isKeyboardEvent(e) {
return e ? e.hasOwnProperty('key') : false;
};
var Carousel = /*#__PURE__*/function (_React$Component) {
_inherits(Carousel, _React$Component);
var _super = _createSuper(Carousel);

@@ -62,2 +86,12 @@

_defineProperty(_assertThisInitialized(_this), "thumbsRef", void 0);
_defineProperty(_assertThisInitialized(_this), "carouselWrapperRef", void 0);
_defineProperty(_assertThisInitialized(_this), "listRef", void 0);
_defineProperty(_assertThisInitialized(_this), "itemsRef", void 0);
_defineProperty(_assertThisInitialized(_this), "timer", void 0);
_defineProperty(_assertThisInitialized(_this), "setThumbsRef", function (node) {

@@ -75,6 +109,2 @@ _this.thumbsRef = node;

_defineProperty(_assertThisInitialized(_this), "setItemsWrapperRef", function (node) {
_this.itemsWrapperRef = node;
});
_defineProperty(_assertThisInitialized(_this), "setItemsRef", function (node, index) {

@@ -89,7 +119,7 @@ if (!_this.itemsRef) {

_defineProperty(_assertThisInitialized(_this), "autoPlay", function () {
if (!_this.state.autoPlay || Children.count(_this.props.children) <= 1) {
if (!_this.state.autoPlay || _react.Children.count(_this.props.children) <= 1) {
return;
}
clearTimeout(_this.timer);
if (_this.timer) clearTimeout(_this.timer);
_this.timer = setTimeout(function () {

@@ -105,3 +135,3 @@ _this.increment();

clearTimeout(_this.timer);
if (_this.timer) clearTimeout(_this.timer);
});

@@ -118,5 +148,3 @@

isMouseEntered: true
});
_this.clearAutoPlay();
}, _this.clearAutoPlay);
});

@@ -127,9 +155,11 @@

isMouseEntered: false
});
_this.autoPlay();
}, _this.autoPlay);
});
_defineProperty(_assertThisInitialized(_this), "isFocusWithinTheCarousel", function () {
if (getDocument().activeElement === _this.carouselWrapperRef || _this.carouselWrapperRef.contains(getDocument().activeElement)) {
if (!_this.carouselWrapperRef) {
return false;
}
if ((0, _document.default)().activeElement === _this.carouselWrapperRef || _this.carouselWrapperRef.contains((0, _document.default)().activeElement)) {
return true;

@@ -165,3 +195,3 @@ }

_defineProperty(_assertThisInitialized(_this), "updateSizes", function () {
if (!_this.state.initialized) {
if (!_this.state.initialized || !_this.itemsRef || _this.itemsRef.length === 0) {
return;

@@ -174,6 +204,4 @@ }

_this.setState(function (_state, props) {
return {
itemSize: itemSize
};
_this.setState({
itemSize: itemSize
});

@@ -195,3 +223,3 @@

_defineProperty(_assertThisInitialized(_this), "handleClickItem", function (index, item) {
if (Children.count(_this.props.children) === 0) {
if (_react.Children.count(_this.props.children) === 0) {
return;

@@ -218,3 +246,3 @@ }

_defineProperty(_assertThisInitialized(_this), "handleOnChange", function (index, item) {
if (Children.count(_this.props.children) <= 1) {
if (_react.Children.count(_this.props.children) <= 1) {
return;

@@ -259,3 +287,5 @@ }

var isHorizontal = _this.props.axis === 'horizontal';
var childrenLength = Children.count(_this.props.children);
var childrenLength = _react.Children.count(_this.props.children);
var initialBoundry = 0;

@@ -290,4 +320,2 @@

position += '%';
_this.setPosition(position); // allows scroll if the swipe was within the tolerance

@@ -308,9 +336,12 @@

_defineProperty(_assertThisInitialized(_this), "setPosition", function (position, forceReflow) {
var list = ReactDOM.findDOMNode(_this.listRef);
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
list.style[prop] = CSSTranslate(position, _this.props.axis);
});
var list = _reactDom.default.findDOMNode(_this.listRef);
if (forceReflow) {
list.offsetLeft;
if (list instanceof HTMLElement) {
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
list.style[prop] = (0, _CSSTranslate.default)(position, '%', _this.props.axis);
});
if (forceReflow) {
list.offsetLeft;
}
}

@@ -320,3 +351,3 @@ });

_defineProperty(_assertThisInitialized(_this), "resetPosition", function () {
var currentPosition = _this.getPosition(_this.state.selectedItem) + '%';
var currentPosition = _this.getPosition(_this.state.selectedItem);

@@ -341,3 +372,7 @@ _this.setPosition(currentPosition);

_defineProperty(_assertThisInitialized(_this), "moveTo", function (position, fromSwipe) {
var lastPosition = Children.count(_this.props.children) - 1;
if (typeof position !== 'number') {
return;
}
var lastPosition = _react.Children.count(_this.props.children) - 1;
var needClonedSlide = _this.props.infiniteLoop && !fromSwipe && (position < 0 || position > lastPosition);

@@ -361,6 +396,6 @@ var oldPosition = position;

if (oldPosition < 0) {
if (_this.props.centerMode && _this.props.axis === 'horizontal') {
_this.setPosition("-".concat((lastPosition + 2) * _this.props.centerSlidePercentage - (100 - _this.props.centerSlidePercentage) / 2, "%"), true);
if (_this.props.centerMode && _this.props.centerSlidePercentage && _this.props.axis === 'horizontal') {
_this.setPosition(-(lastPosition + 2) * _this.props.centerSlidePercentage - (100 - _this.props.centerSlidePercentage) / 2, true);
} else {
_this.setPosition("-".concat((lastPosition + 2) * 100, "%"), true);
_this.setPosition(-(lastPosition + 2) * 100, true);
}

@@ -406,10 +441,10 @@ } else if (oldPosition > lastPosition) {

_defineProperty(_assertThisInitialized(_this), "changeItem", function (e) {
if (!e.key || e.key === 'Enter') {
var newIndex = e.target.value;
_this.selectItem({
selectedItem: newIndex
});
}
_defineProperty(_assertThisInitialized(_this), "changeItem", function (newIndex) {
return function (e) {
if (!isKeyboardEvent(e) || e.key === 'Enter') {
_this.selectItem({
selectedItem: newIndex
});
}
};
});

@@ -420,3 +455,3 @@

_this.handleOnChange(state.selectedItem, Children.toArray(_this.props.children)[state.selectedItem]);
_this.handleOnChange(state.selectedItem, _react.Children.toArray(_this.props.children)[state.selectedItem]);
});

@@ -433,3 +468,3 @@

var item = _this.itemsRef && _this.itemsRef[position];
var images = item && item.getElementsByTagName('img');
var images = item && item.getElementsByTagName('img') || [];

@@ -462,3 +497,6 @@ if (_this.state.hasMount && images.length > 0) {

isMouseEntered: false,
autoPlay: props.autoPlay
autoPlay: props.autoPlay,
swiping: false,
cancelClick: false,
itemSize: 1
};

@@ -516,3 +554,3 @@ return _this;

if (this.state.autoPlay && Children.count(this.props.children) > 1) {
if (this.state.autoPlay && _react.Children.count(this.props.children) > 1) {
this.setupAutoPlay();

@@ -568,8 +606,8 @@ }

// the carousel when the window is resized
getWindow().addEventListener('resize', this.updateSizes); // issue #2 - image loading smaller
(0, _window.default)().addEventListener('resize', this.updateSizes); // issue #2 - image loading smaller
getWindow().addEventListener('DOMContentLoaded', this.updateSizes);
(0, _window.default)().addEventListener('DOMContentLoaded', this.updateSizes);
if (this.props.useKeyboardArrows) {
getDocument().addEventListener('keydown', this.navigateWithKeyboard);
(0, _document.default)().addEventListener('keydown', this.navigateWithKeyboard);
}

@@ -581,4 +619,4 @@ }

// removing listeners
getWindow().removeEventListener('resize', this.updateSizes);
getWindow().removeEventListener('DOMContentLoaded', this.updateSizes);
(0, _window.default)().removeEventListener('resize', this.updateSizes);
(0, _window.default)().removeEventListener('DOMContentLoaded', this.updateSizes);
var initialImage = this.getInitialImage();

@@ -591,3 +629,3 @@

if (this.props.useKeyboardArrows) {
getDocument().removeEventListener('keydown', this.navigateWithKeyboard);
(0, _document.default)().removeEventListener('keydown', this.navigateWithKeyboard);
}

@@ -607,3 +645,3 @@ }

var childrenLength = Children.count(this.props.children);
var childrenLength = _react.Children.count(this.props.children);

@@ -630,3 +668,7 @@ if (this.props.centerMode && this.props.axis === 'horizontal') {

return Children.map(this.props.children, function (item, index) {
if (!this.props.children) {
return [];
}
return _react.Children.map(this.props.children, function (item, index) {
var slideProps = {

@@ -637,8 +679,9 @@ ref: function ref(e) {

key: 'itemKey' + index + (isClone ? 'clone' : ''),
className: klass.ITEM(true, index === _this2.state.selectedItem),
className: _cssClasses.default.ITEM(true, index === _this2.state.selectedItem),
onClick: _this2.handleClickItem.bind(_this2, index, item)
};
var extraProps = {};
if (_this2.props.centerMode && _this2.props.axis === 'horizontal') {
slideProps.style = {
extraProps.style = {
minWidth: _this2.props.centerSlidePercentage + '%'

@@ -648,3 +691,3 @@ };

return /*#__PURE__*/React.createElement("li", slideProps, _this2.props.renderItem(item, {
return /*#__PURE__*/_react.default.createElement("li", _extends({}, slideProps, extraProps), _this2.props.renderItem(item, {
isSelected: index === _this2.state.selectedItem

@@ -659,10 +702,16 @@ }));

if (!this.props.showIndicators) {
var _this$props = this.props,
showIndicators = _this$props.showIndicators,
labels = _this$props.labels,
renderIndicator = _this$props.renderIndicator,
children = _this$props.children;
if (!showIndicators) {
return null;
}
return /*#__PURE__*/React.createElement("ul", {
return /*#__PURE__*/_react.default.createElement("ul", {
className: "control-dots"
}, Children.map(this.props.children, function (item, index) {
return _this3.props.renderIndicator(_this3.changeItem, index === _this3.state.selectedItem, index, _this3.props.labels.item);
}, _react.Children.map(children, function (_, index) {
return renderIndicator && renderIndicator(_this3.changeItem(index), index === _this3.state.selectedItem, index, labels.item);
}));

@@ -677,5 +726,5 @@ }

return /*#__PURE__*/React.createElement("p", {
return /*#__PURE__*/_react.default.createElement("p", {
className: "carousel-status"
}, this.props.statusFormatter(this.state.selectedItem + 1, Children.count(this.props.children)));
}, this.props.statusFormatter(this.state.selectedItem + 1, _react.Children.count(this.props.children)));
}

@@ -685,7 +734,7 @@ }, {

value: function renderThumbs() {
if (!this.props.showThumbs || Children.count(this.props.children) === 0) {
if (!this.props.showThumbs || !this.props.children || _react.Children.count(this.props.children) === 0) {
return null;
}
return /*#__PURE__*/React.createElement(Thumbs, {
return /*#__PURE__*/_react.default.createElement(_Thumbs.default, {
ref: this.setThumbsRef,

@@ -702,3 +751,5 @@ onSelectItem: this.handleClickThumb,

value: function render() {
if (!this.props.children || Children.count(this.props.children) === 0) {
var _this4 = this;
if (!this.props.children || _react.Children.count(this.props.children) === 0) {
return null;

@@ -708,7 +759,7 @@ }

var isHorizontal = this.props.axis === 'horizontal';
var canShowArrows = this.props.showArrows && Children.count(this.props.children) > 1; // show left arrow?
var canShowArrows = this.props.showArrows && _react.Children.count(this.props.children) > 1; // show left arrow?
var hasPrev = canShowArrows && (this.state.selectedItem > 0 || this.props.infiniteLoop); // show right arrow
var hasPrev = canShowArrows && (this.state.selectedItem > 0 || this.props.infiniteLoop) || false; // show right arrow
var hasNext = canShowArrows && (this.state.selectedItem < Children.count(this.props.children) - 1 || this.props.infiniteLoop); // obj to hold the transformations and styles
var hasNext = canShowArrows && (this.state.selectedItem < _react.Children.count(this.props.children) - 1 || this.props.infiniteLoop) || false; // obj to hold the transformations and styles

@@ -718,3 +769,3 @@ var itemListStyles = {};

var transformProp = CSSTranslate(currentPosition + '%', this.props.axis);
var transformProp = (0, _CSSTranslate.default)(currentPosition, '%', this.props.axis);
var transitionTime = this.props.transitionTime + 'ms';

@@ -745,3 +796,3 @@ itemListStyles = {

var swiperProps = {
className: klass.SLIDER(true, this.state.swiping),
className: _cssClasses.default.SLIDER(true, this.state.swiping),
onSwipeMove: this.onSwipeMove,

@@ -771,23 +822,24 @@ onSwipeStart: this.onSwipeStart,

return /*#__PURE__*/React.createElement("div", {
className: klass.ROOT(this.props.className),
return /*#__PURE__*/_react.default.createElement("div", {
className: _cssClasses.default.ROOT(this.props.className),
ref: this.setCarouselWrapperRef,
tabIndex: "0"
}, /*#__PURE__*/React.createElement("div", {
className: klass.CAROUSEL(true),
tabIndex: 0
}, /*#__PURE__*/_react.default.createElement("div", {
className: _cssClasses.default.CAROUSEL(true),
style: {
width: this.props.width
}
}, this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow), /*#__PURE__*/React.createElement("div", {
className: klass.WRAPPER(true, this.props.axis),
style: containerStyles,
ref: this.setItemsWrapperRef
}, this.props.swipeable ? /*#__PURE__*/React.createElement(Swipe, _extends({
}, this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow), /*#__PURE__*/_react.default.createElement("div", {
className: _cssClasses.default.WRAPPER(true, this.props.axis),
style: containerStyles
}, this.props.swipeable ? /*#__PURE__*/_react.default.createElement(_reactEasySwipe.default, _extends({
tagName: "ul",
ref: this.setListRef
innerRef: this.setListRef
}, swiperProps, {
allowMouseEvents: this.props.emulateTouch
}), this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone) : /*#__PURE__*/React.createElement("ul", {
className: klass.SLIDER(true, this.state.swiping),
ref: this.setListRef,
}), this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone) : /*#__PURE__*/_react.default.createElement("ul", {
className: _cssClasses.default.SLIDER(true, this.state.swiping),
ref: function ref(node) {
return _this4.setListRef(node);
},
style: itemListStyles

@@ -799,74 +851,12 @@ }, this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone)), this.props.renderArrowNext(this.onClickNext, hasNext, this.props.labels.rightArrow), this.renderControls(), this.renderStatus()), this.renderThumbs());

return Carousel;
}(Component);
}(_react.default.Component);
exports.default = Carousel;
_defineProperty(Carousel, "displayName", 'Carousel');
_defineProperty(Carousel, "propTypes", {
className: PropTypes.string,
children: PropTypes.node,
showArrows: PropTypes.bool,
showStatus: PropTypes.bool,
showIndicators: PropTypes.bool,
infiniteLoop: PropTypes.bool,
showThumbs: PropTypes.bool,
thumbWidth: PropTypes.number,
selectedItem: PropTypes.number,
onClickItem: PropTypes.func.isRequired,
onClickThumb: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
axis: PropTypes.oneOf(['horizontal', 'vertical']),
verticalSwipe: PropTypes.oneOf(['natural', 'standard']),
width: customPropTypes.unit,
useKeyboardArrows: PropTypes.bool,
autoPlay: PropTypes.bool,
stopOnHover: PropTypes.bool,
interval: PropTypes.number,
transitionTime: PropTypes.number,
swipeScrollTolerance: PropTypes.number,
swipeable: PropTypes.bool,
dynamicHeight: PropTypes.bool,
emulateTouch: PropTypes.bool,
statusFormatter: PropTypes.func.isRequired,
centerMode: PropTypes.bool,
centerSlidePercentage: PropTypes.number,
labels: PropTypes.shape({
leftArrow: PropTypes.string,
rightArrow: PropTypes.string,
item: PropTypes.string
}),
onSwipeStart: PropTypes.func,
onSwipeEnd: PropTypes.func,
onSwipeMove: PropTypes.func,
renderArrowPrev: PropTypes.func,
renderArrowNext: PropTypes.func,
renderIndicator: PropTypes.func,
renderItem: PropTypes.func,
renderThumbs: PropTypes.func
});
_defineProperty(Carousel, "defaultProps", {
showIndicators: true,
showArrows: true,
showStatus: true,
showThumbs: true,
infiniteLoop: false,
selectedItem: 0,
axis: 'horizontal',
verticalSwipe: 'standard',
width: '100%',
useKeyboardArrows: false,
autoPlay: false,
stopOnHover: true,
centerSlidePercentage: 80,
interval: 3000,
transitionTime: 350,
swipeScrollTolerance: 5,
swipeable: true,
dynamicHeight: false,
emulateTouch: false,
onClickItem: noop,
onClickThumb: noop,
onChange: noop,
statusFormatter: defaultStatusFormatter,
centerMode: false,
centerSlidePercentage: 80,
labels: {

@@ -877,2 +867,5 @@ leftArrow: 'previous slide / item',

},
onClickItem: noop,
onClickThumb: noop,
onChange: noop,
onSwipeStart: function onSwipeStart() {},

@@ -882,6 +875,6 @@ onSwipeEnd: function onSwipeEnd() {},

renderArrowPrev: function renderArrowPrev(onClickHandler, hasPrev, label) {
return /*#__PURE__*/React.createElement("button", {
return /*#__PURE__*/_react.default.createElement("button", {
type: "button",
"aria-label": label,
className: klass.ARROW_PREV(!hasPrev),
className: _cssClasses.default.ARROW_PREV(!hasPrev),
onClick: onClickHandler

@@ -891,6 +884,6 @@ });

renderArrowNext: function renderArrowNext(onClickHandler, hasNext, label) {
return /*#__PURE__*/React.createElement("button", {
return /*#__PURE__*/_react.default.createElement("button", {
type: "button",
"aria-label": label,
className: klass.ARROW_NEXT(!hasNext),
className: _cssClasses.default.ARROW_NEXT(!hasNext),
onClick: onClickHandler

@@ -900,4 +893,4 @@ });

renderIndicator: function renderIndicator(onClickHandler, isSelected, index, label) {
return /*#__PURE__*/React.createElement("li", {
className: klass.DOT(isSelected),
return /*#__PURE__*/_react.default.createElement("li", {
className: _cssClasses.default.DOT(isSelected),
onClick: onClickHandler,

@@ -912,11 +905,43 @@ onKeyDown: onClickHandler,

},
renderItem: function renderItem(item, _ref) {
var isSelected = _ref.isSelected;
renderItem: function renderItem(item) {
return item;
},
renderThumbs: function renderThumbs(children) {
return children;
}
});
var images = _react.Children.map(children, function (item) {
var img = item; // if the item is not an image, try to find the first image in the item's children.
export default Carousel;
if (item.type !== 'img') {
img = _react.Children.toArray(item.props.children).find(function (children) {
return children.type === 'img';
});
}
if (!img) {
return undefined;
}
return img;
});
if (images.filter(function (image) {
return image;
}).length === 0) {
console.warn("No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components. More info at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md");
return [];
}
return images;
},
statusFormatter: defaultStatusFormatter,
selectedItem: 0,
showArrows: true,
showIndicators: true,
showStatus: true,
showThumbs: true,
stopOnHover: true,
swipeScrollTolerance: 5,
swipeable: true,
transitionTime: 350,
verticalSwipe: 'standard',
width: '100%'
});

217

lib/es/components/Thumbs.js

@@ -0,1 +1,28 @@

"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _cssClasses = _interopRequireDefault(require("../cssClasses"));
var _dimensions = require("../dimensions");
var _CSSTranslate = _interopRequireDefault(require("../CSSTranslate"));
var _reactEasySwipe = _interopRequireDefault(require("react-easy-swipe"));
var _window = _interopRequireDefault(require("../shims/window"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { "@babel/helpers - typeof"; 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); }
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); }

@@ -15,3 +42,3 @@

function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

@@ -26,9 +53,5 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

import React, { Component, Children } from 'react';
import PropTypes from 'prop-types';
import klass from '../cssClasses';
import { outerWidth } from '../dimensions';
import CSSTranslate from '../CSSTranslate';
import Swipe from 'react-easy-swipe';
import getWindow from '../shims/window';
var isKeyboardEvent = function isKeyboardEvent(e) {
return e.hasOwnProperty('key');
};

@@ -47,2 +70,10 @@ var Thumbs = /*#__PURE__*/function (_Component) {

_defineProperty(_assertThisInitialized(_this), "itemsWrapperRef", void 0);
_defineProperty(_assertThisInitialized(_this), "itemsListRef", void 0);
_defineProperty(_assertThisInitialized(_this), "thumbsRef", void 0);
_defineProperty(_assertThisInitialized(_this), "lastPosition", 0);
_defineProperty(_assertThisInitialized(_this), "setItemsWrapperRef", function (node) {

@@ -65,9 +96,10 @@ _this.itemsWrapperRef = node;

_defineProperty(_assertThisInitialized(_this), "updateSizes", function () {
if (!_this.props.children || !_this.itemsWrapperRef || _this.state.images.length === 0) {
if (!_this.props.children || !_this.itemsWrapperRef || !_this.thumbsRef) {
return;
}
var total = _this.props.children.length;
var total = _react.Children.count(_this.props.children);
var wrapperSize = _this.itemsWrapperRef.clientWidth;
var itemSize = _this.props.thumbWidth ? _this.props.thumbWidth : outerWidth(_this.thumbsRef[0]);
var itemSize = _this.props.thumbWidth ? _this.props.thumbWidth : (0, _dimensions.outerWidth)(_this.thumbsRef[0]);
var visibleItems = Math.floor(wrapperSize / itemSize);

@@ -79,7 +111,7 @@ var lastPosition = total - visibleItems;

return {
itemSize,
visibleItems,
itemSize: itemSize,
visibleItems: visibleItems,
firstItem: showArrows ? _this.getFirstItem(props.selectedItem) : 0,
lastPosition,
showArrows
lastPosition: lastPosition,
showArrows: showArrows
};

@@ -89,12 +121,4 @@ });

_defineProperty(_assertThisInitialized(_this), "setMountState", function () {
_this.setState({
hasMount: true
});
_this.updateSizes();
});
_defineProperty(_assertThisInitialized(_this), "handleClickItem", function (index, item, e) {
if (!e.keyCode || e.key === 'Enter') {
if (!isKeyboardEvent(e) || e.key === 'Enter') {
var handler = _this.props.onSelectItem;

@@ -120,3 +144,9 @@

_defineProperty(_assertThisInitialized(_this), "onSwipeMove", function (deltaX) {
_defineProperty(_assertThisInitialized(_this), "onSwipeMove", function (delta) {
var deltaX = delta.x;
if (!_this.state.itemSize || !_this.itemsWrapperRef) {
return false;
}
var leftBoundary = 0;

@@ -136,9 +166,11 @@ var currentPosition = -_this.state.firstItem * _this.state.itemSize;

var wrapperSize = _this.itemsWrapperRef.clientWidth;
var position = currentPosition + 100 / (wrapperSize / deltaX) + '%'; // if 3d isn't available we will use left to move
var position = currentPosition + 100 / (wrapperSize / deltaX); // if 3d isn't available we will use left to move
if (_this.itemsListRef) {
['WebkitTransform', 'MozTransform', 'MsTransform', 'OTransform', 'transform', 'msTransform'].forEach(function (prop) {
_this.itemsListRef.style[prop] = CSSTranslate(position, _this.props.axis);
_this.itemsListRef.style[prop] = (0, _CSSTranslate.default)(position, '%', _this.props.axis);
});
}
return true;
});

@@ -167,9 +199,7 @@

selectedItem: _props.selectedItem,
hasMount: false,
swiping: false,
showArrows: false,
firstItem: 0,
itemSize: null,
visibleItems: 0,
lastPosition: 0,
showArrows: false,
images: _this.getImages()
lastPosition: 0
};

@@ -181,3 +211,3 @@ return _this;

key: "componentDidMount",
value: function componentDidMount(nextProps) {
value: function componentDidMount() {
this.setupThumbs();

@@ -187,3 +217,3 @@ }

key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(props, state) {
value: function UNSAFE_componentWillReceiveProps(props) {
if (props.selectedItem !== this.state.selectedItem) {

@@ -195,8 +225,2 @@ this.setState({

}
if (props.children !== this.props.children) {
this.setState({
images: this.getImages()
});
}
}

@@ -224,5 +248,5 @@ }, {

// the carousel when the window is resized
getWindow().addEventListener('resize', this.updateSizes); // issue #2 - image loading smaller
(0, _window.default)().addEventListener('resize', this.updateSizes); // issue #2 - image loading smaller
getWindow().addEventListener('DOMContentLoaded', this.updateSizes); // when the component is rendered we need to calculate
(0, _window.default)().addEventListener('DOMContentLoaded', this.updateSizes); // when the component is rendered we need to calculate
// the container size to adjust the responsive behaviour

@@ -236,34 +260,6 @@

// removing listeners
getWindow().removeEventListener('resize', this.updateSizes);
getWindow().removeEventListener('DOMContentLoaded', this.updateSizes);
(0, _window.default)().removeEventListener('resize', this.updateSizes);
(0, _window.default)().removeEventListener('DOMContentLoaded', this.updateSizes);
}
}, {
key: "getImages",
value: function getImages() {
var images = Children.map(this.props.children, function (item, index) {
var img = item; // if the item is not an image, try to find the first image in the item's children.
if (item.type !== 'img') {
img = Children.toArray(item.props.children).filter(function (children) {
return children.type === 'img';
})[0];
}
if (!img || img.length === 0) {
return null;
}
return img;
});
if (images.filter(function (image) {
return image;
}).length === 0) {
console.warn("No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components. More info at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md");
return [];
}
return images;
}
}, {
key: "getFirstItem",

@@ -292,4 +288,5 @@ value: function getFirstItem(selectedItem) {

return this.state.images.map(function (img, index) {
var itemClass = klass.ITEM(false, index === _this2.state.selectedItem && _this2.state.hasMount);
return this.props.children.map(function (img, index) {
var itemClass = _cssClasses.default.ITEM(false, index === _this2.state.selectedItem);
var thumbProps = {

@@ -308,10 +305,3 @@ key: index,

};
if (index === 0) {
img = React.cloneElement(img, {
onLoad: _this2.setMountState
});
}
return /*#__PURE__*/React.createElement("li", _extends({}, thumbProps, {
return /*#__PURE__*/_react.default.createElement("li", _extends({}, thumbProps, {
role: "button",

@@ -325,2 +315,4 @@ tabIndex: 0

value: function render() {
var _this3 = this;
if (!this.props.children) {

@@ -336,4 +328,4 @@ return null;

var itemListStyles = {};
var currentPosition = -this.state.firstItem * this.state.itemSize + 'px';
var transformProp = CSSTranslate(currentPosition, this.props.axis);
var currentPosition = -this.state.firstItem * (this.state.itemSize || 0);
var transformProp = (0, _CSSTranslate.default)(currentPosition, 'px', this.props.axis);
var transitionTime = this.props.transitionTime + 'ms';

@@ -354,15 +346,17 @@ itemListStyles = {

};
return /*#__PURE__*/React.createElement("div", {
className: klass.CAROUSEL(false)
}, /*#__PURE__*/React.createElement("div", {
className: klass.WRAPPER(false),
return /*#__PURE__*/_react.default.createElement("div", {
className: _cssClasses.default.CAROUSEL(false)
}, /*#__PURE__*/_react.default.createElement("div", {
className: _cssClasses.default.WRAPPER(false),
ref: this.setItemsWrapperRef
}, /*#__PURE__*/React.createElement("button", {
}, /*#__PURE__*/_react.default.createElement("button", {
type: "button",
className: klass.ARROW_PREV(!hasPrev),
onClick: this.slideRight,
className: _cssClasses.default.ARROW_PREV(!hasPrev),
onClick: function onClick() {
return _this3.slideRight();
},
"aria-label": this.props.labels.leftArrow
}), /*#__PURE__*/React.createElement(Swipe, {
}), /*#__PURE__*/_react.default.createElement(_reactEasySwipe.default, {
tagName: "ul",
className: klass.SLIDER(false, this.state.swiping),
className: _cssClasses.default.SLIDER(false, this.state.swiping),
onSwipeLeft: this.slideLeft,

@@ -375,6 +369,8 @@ onSwipeRight: this.slideRight,

innerRef: this.setItemsListRef
}, this.renderItems()), /*#__PURE__*/React.createElement("button", {
}, this.renderItems()), /*#__PURE__*/_react.default.createElement("button", {
type: "button",
className: klass.ARROW_NEXT(!hasNext),
onClick: this.slideLeft,
className: _cssClasses.default.ARROW_NEXT(!hasNext),
onClick: function onClick() {
return _this3.slideLeft();
},
"aria-label": this.props.labels.rightArrow

@@ -386,25 +382,18 @@ })));

return Thumbs;
}(Component);
}(_react.Component);
exports.default = Thumbs;
_defineProperty(Thumbs, "displayName", 'Thumbs');
_defineProperty(Thumbs, "propsTypes", {
children: PropTypes.element.isRequired,
transitionTime: PropTypes.number,
selectedItem: PropTypes.number,
thumbWidth: PropTypes.number,
labels: PropTypes.shape({
leftArrow: PropTypes.string,
rightArrow: PropTypes.string,
item: PropTypes.string
})
});
_defineProperty(Thumbs, "defaultProps", {
axis: 'horizontal',
labels: {
leftArrow: 'previous slide / item',
rightArrow: 'next slide / item',
item: 'slide item'
},
selectedItem: 0,
thumbWidth: 80,
transitionTime: 350,
axis: 'horizontal'
});
export default Thumbs;
transitionTime: 350
});

40

lib/es/cssClasses.js

@@ -1,11 +0,22 @@

import classNames from 'classnames';
export default {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _classnames = _interopRequireDefault(require("classnames"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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; }
var _default = {
ROOT: function ROOT(customClassName) {
return classNames({
'carousel-root': true,
[customClassName]: !!customClassName
});
return (0, _classnames.default)(_defineProperty({
'carousel-root': true
}, customClassName || '', !!customClassName));
},
CAROUSEL: function CAROUSEL(isSlider) {
return classNames({
return (0, _classnames.default)({
carousel: true,

@@ -16,3 +27,3 @@ 'carousel-slider': isSlider

WRAPPER: function WRAPPER(isSlider, axis) {
return classNames({
return (0, _classnames.default)({
'thumbs-wrapper': !isSlider,

@@ -25,3 +36,3 @@ 'slider-wrapper': isSlider,

SLIDER: function SLIDER(isSlider, isSwiping) {
return classNames({
return (0, _classnames.default)({
thumbs: !isSlider,

@@ -33,3 +44,3 @@ slider: isSlider,

ITEM: function ITEM(isSlider, selected) {
return classNames({
return (0, _classnames.default)({
thumb: !isSlider,

@@ -41,3 +52,3 @@ slide: isSlider,

ARROW_PREV: function ARROW_PREV(disabled) {
return classNames({
return (0, _classnames.default)({
'control-arrow control-prev': true,

@@ -48,3 +59,3 @@ 'control-disabled': disabled

ARROW_NEXT: function ARROW_NEXT(disabled) {
return classNames({
return (0, _classnames.default)({
'control-arrow control-next': true,

@@ -55,3 +66,3 @@ 'control-disabled': disabled

DOT: function DOT(selected) {
return classNames({
return (0, _classnames.default)({
dot: true,

@@ -61,2 +72,3 @@ selected: selected

}
};
};
exports.default = _default;

16

lib/es/CSSTranslate.js

@@ -1,6 +0,16 @@

export default (function (position, axis) {
var positionCss = axis === 'horizontal' ? [position, 0, 0] : [0, position, 0];
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _default = function _default(position, metric, axis) {
var positionPercent = position === 0 ? position : position + metric;
var positionCss = axis === 'horizontal' ? [positionPercent, 0, 0] : [0, positionPercent, 0];
var transitionProp = 'translate3d';
var translatedPosition = '(' + positionCss.join(',') + ')';
return transitionProp + translatedPosition;
});
};
exports.default = _default;

13

lib/es/dimensions.js

@@ -1,2 +0,9 @@

export var outerWidth = function outerWidth(el) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.outerWidth = void 0;
var outerWidth = function outerWidth(el) {
var width = el.offsetWidth;

@@ -6,2 +13,4 @@ var style = getComputedStyle(el);

return width;
};
};
exports.outerWidth = outerWidth;

26

lib/es/index.js

@@ -1,3 +0,23 @@

import Carousel from './components/Carousel';
import Thumbs from './components/Thumbs';
export { Carousel, Thumbs };
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Carousel", {
enumerable: true,
get: function get() {
return _Carousel.default;
}
});
Object.defineProperty(exports, "Thumbs", {
enumerable: true,
get: function get() {
return _Thumbs.default;
}
});
var _Carousel = _interopRequireDefault(require("./components/Carousel"));
var _Thumbs = _interopRequireDefault(require("./components/Thumbs"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

50

lib/es/main.js

@@ -1,10 +0,22 @@

import React from 'react';
import ReactDOM from 'react-dom';
import(
/* webpackChunkName: "carousel-component" */
'./components/Carousel').then(function (_ref) {
"use strict";
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; 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); }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
Promise.resolve().then(function () {
return _interopRequireWildcard(require('./components/Carousel'));
}).then(function (_ref) {
var Carousel = _ref.default;
var DemoCarousel = function DemoCarousel() {
return /*#__PURE__*/React.createElement(Carousel, {
return /*#__PURE__*/_react.default.createElement(Carousel, {
showArrows: true,

@@ -41,25 +53,25 @@ infiniteLoop: true,

}
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/1.jpeg"
}), /*#__PURE__*/React.createElement("p", {
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 1")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
}, "Legend 1")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/2.jpeg"
}), /*#__PURE__*/React.createElement("p", {
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 2")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
}, "Legend 2")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/3.jpeg"
}), /*#__PURE__*/React.createElement("p", {
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 3")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
}, "Legend 3")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/4.jpeg"
}), /*#__PURE__*/React.createElement("p", {
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 4")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
}, "Legend 4")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/5.jpeg"
}), /*#__PURE__*/React.createElement("p", {
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"
}, "Legend 5")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
}, "Legend 5")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
src: "assets/6.jpeg"
}), /*#__PURE__*/React.createElement("p", {
}), /*#__PURE__*/_react.default.createElement("p", {
className: "legend"

@@ -69,3 +81,3 @@ }, "Legend 6")));

ReactDOM.render( /*#__PURE__*/React.createElement(DemoCarousel, null), document.querySelector('.demo-carousel'));
_reactDom.default.render( /*#__PURE__*/_react.default.createElement(DemoCarousel, null), document.querySelector('.demo-carousel'));
});

13

lib/es/shims/document.js

@@ -1,3 +0,12 @@

export default (function () {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _default = function _default() {
return document;
});
};
exports.default = _default;

13

lib/es/shims/window.js

@@ -1,3 +0,12 @@

export default (function () {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _default = function _default() {
return window;
});
};
exports.default = _default;

6

package.json
{
"name": "react-responsive-carousel",
"version": "3.2.6",
"version": "3.2.7",
"description": "React Responsive Carousel",

@@ -48,4 +48,4 @@ "author": {

"lib:build": "yarn lib:build-cjs && yarn lib:build-es && yarn lib:build-styles && yarn lib:build-types",
"lib:build-cjs": "babel ./src -d lib/cjs --ignore './src/__tests__'",
"lib:build-es": "MODULE=true babel ./src -d lib/es --ignore './src/__tests__'",
"lib:build-cjs": "babel ./src -d lib/cjs --ignore './src/__tests__' --extensions '.ts,.tsx' --config-file ./babel.config.cjs.json",
"lib:build-es": "babel ./src -d lib/es --ignore './src/__tests__' --extensions '.ts,.tsx' --config-file ./babel.config.json",
"lib:build-styles": "mkdir -p lib/styles && node-sass src/carousel.scss > lib/styles/carousel.css && node-sass --output-style compressed src/carousel.scss > lib/styles/carousel.min.css",

@@ -52,0 +52,0 @@ "lib:build-types": "tsc -p tsconfig.types.json",

lib/cjs/customPropTypes.js
lib/es/customPropTypes.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc