@itseasy21/react-elastic-carousel
Version:
A flexible and responsive carousel component for react
1,138 lines (1,088 loc) • 71.3 kB
JavaScript
'use strict';
var React = require('react');
var PropTypes = require('prop-types');
var ResizeObserver = require('resize-observer-polyfill');
var reactSwipeable = require('react-swipeable');
var styled = require('styled-components');
var jsxRuntime = require('react/jsx-runtime');
var cx = require('classnames');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
var ResizeObserver__default = /*#__PURE__*/_interopDefault(ResizeObserver);
var styled__default = /*#__PURE__*/_interopDefault(styled);
var cx__default = /*#__PURE__*/_interopDefault(cx);
function _objectWithoutPropertiesLoose(r, e) {
if (null == r) return {};
var t = {};
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
if (-1 !== e.indexOf(n)) continue;
t[n] = r[n];
}
return t;
}
function _objectWithoutProperties(e, t) {
if (null == e) return {};
var o,
r,
i = _objectWithoutPropertiesLoose(e, t);
if (Object.getOwnPropertySymbols) {
var n = Object.getOwnPropertySymbols(e);
for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
}
return i;
}
function _classCallCheck(a, n) {
if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function toPrimitive(t, r) {
if ("object" != _typeof(t) || !t) return t;
var e = t[Symbol.toPrimitive];
if (void 0 !== e) {
var i = e.call(t, r);
if ("object" != _typeof(i)) return i;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return ("string" === r ? String : Number)(t);
}
function toPropertyKey(t) {
var i = toPrimitive(t, "string");
return "symbol" == _typeof(i) ? i : i + "";
}
function _defineProperties(e, r) {
for (var t = 0; t < r.length; t++) {
var o = r[t];
o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, toPropertyKey(o.key), o);
}
}
function _createClass(e, r, t) {
return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
writable: false
}), e;
}
function _assertThisInitialized(e) {
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e;
}
function _possibleConstructorReturn(t, e) {
if (e && ("object" == _typeof(e) || "function" == typeof e)) return e;
if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
return _assertThisInitialized(t);
}
function _getPrototypeOf(t) {
return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
return t.__proto__ || Object.getPrototypeOf(t);
}, _getPrototypeOf(t);
}
function _setPrototypeOf(t, e) {
return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
return t.__proto__ = e, t;
}, _setPrototypeOf(t, e);
}
function _inherits(t, e) {
if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
t.prototype = Object.create(e && e.prototype, {
constructor: {
value: t,
writable: true,
configurable: true
}
}), Object.defineProperty(t, "prototype", {
writable: false
}), e && _setPrototypeOf(t, e);
}
function _defineProperty(e, r, t) {
return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
value: t,
enumerable: true,
configurable: true,
writable: true
}) : e[r] = t, e;
}
function _arrayLikeToArray$1(r, a) {
(null == a || a > r.length) && (a = r.length);
for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
return n;
}
function _arrayWithoutHoles(r) {
if (Array.isArray(r)) return _arrayLikeToArray$1(r);
}
function _iterableToArray(r) {
if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
}
function _unsupportedIterableToArray$1(r, a) {
if (r) {
if ("string" == typeof r) return _arrayLikeToArray$1(r, a);
var t = {}.toString.call(r).slice(8, -1);
return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0;
}
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(r) {
return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray$1(r) || _nonIterableSpread();
}
var noop = function noop() {};
var numberToArray = function numberToArray(n) {
return _toConsumableArray(Array(n).keys());
};
var cssPrefix = function cssPrefix() {
var prefix = "rec";
var space = " ";
var result = "".concat(prefix); // initial it with global prefix;
// in case of an array we add the class prefix per item;
for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
classNames[_key] = arguments[_key];
}
var chainedClasses = classNames.reduce(function (acc, current) {
if (current) {
acc += "".concat(space).concat(prefix, "-").concat(current); // we must keep spaces between class names
}
return acc;
}, "");
result += chainedClasses;
return result;
};
var pipe = function pipe() {
for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
fns[_key2] = arguments[_key2];
}
return function (x) {
return fns.reduce(function (v, f) {
return f(v);
}, x);
};
};
function _taggedTemplateLiteral(e, t) {
return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
raw: {
value: Object.freeze(t)
}
}));
}
var _templateObject$7;
var Button = styled__default.default.button.attrs(function (_ref) {
var _ref$type = _ref.type,
type = _ref$type === void 0 ? "button" : _ref$type;
return {
type: type
};
})(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n transition: all 0.3s ease;\n font-size: 1.6em;\n background-color: rgba(103, 58, 183, 0.1);\n color: ", ";\n box-shadow: 0 0 2px 0px #333;\n border-radius: 50%;\n border: none;\n padding: 0;\n width: 50px;\n height: 50px;\n min-width: 50px;\n line-height: 50px;\n align-self: center;\n cursor: pointer;\n outline: none;\n &:hover:enabled,\n &:focus:enabled {\n color: #fff;\n background-color: rgba(103, 58, 183, 1);\n box-shadow: 0 0 2px 0 #333;\n }\n &:disabled {\n cursor: not-allowed;\n }\n"])), function (props) {
return props.$disabled ? "#999" : "#333";
});
var consts = {
PREV: "PREV",
NEXT: "NEXT",
START: "flex-start",
CENTER: "center",
END: "flex-end"
};
var _templateObject$6;
var ItemWrapper = styled__default.default.div.attrs(function (_ref) {
var style = _ref.style;
return {
style: style,
className: cssPrefix("item-wrapper")
};
})(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n display: flex;\n overflow: hidden;\n user-select: none;\n justify-content: ", ";\n"])), function (_ref2) {
var $itemPosition = _ref2.$itemPosition;
return $itemPosition;
});
ItemWrapper.defaultProps = {
style: {},
$itemPosition: consts.CENTER
};
ItemWrapper.propTypes = {
children: PropTypes__default.default.element.isRequired,
style: PropTypes__default.default.object,
$itemPosition: PropTypes__default.default.oneOf([consts.START, consts.CENTER, consts.END])
};
var _templateObject$5;
var SliderContainer = styled__default.default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n overflow: hidden;\n position: relative;\n width: 100%;\n margin: 0 10px;\n"])));
var _templateObject$4;
var calcLeft = function calcLeft(_ref) {
var $isRTL = _ref.$isRTL,
$verticalMode = _ref.$verticalMode,
$isSwiping = _ref.$isSwiping,
$swipedSliderPosition = _ref.$swipedSliderPosition,
$sliderPosition = _ref.$sliderPosition;
if ($verticalMode || $isRTL) {
return "auto";
} else {
return "".concat($isSwiping ? $swipedSliderPosition : $sliderPosition, "px");
}
};
var calcRight = function calcRight(_ref2) {
var $isRTL = _ref2.$isRTL,
$verticalMode = _ref2.$verticalMode,
$isSwiping = _ref2.$isSwiping,
$swipedSliderPosition = _ref2.$swipedSliderPosition,
$sliderPosition = _ref2.$sliderPosition;
if (!$verticalMode && $isRTL) {
return "".concat($isSwiping ? $swipedSliderPosition : $sliderPosition, "px");
} else {
return "auto";
}
};
var calcTop = function calcTop(_ref3) {
var $verticalMode = _ref3.$verticalMode,
$isSwiping = _ref3.$isSwiping,
$swipedSliderPosition = _ref3.$swipedSliderPosition,
$sliderPosition = _ref3.$sliderPosition;
if (!$verticalMode) {
return "auto";
} else {
return "".concat($isSwiping ? $swipedSliderPosition : $sliderPosition, "px");
}
};
var calcTransition = function calcTransition(_ref4) {
var $isSwiping = _ref4.$isSwiping,
$transitionMs = _ref4.$transitionMs,
$easing = _ref4.$easing,
$tiltEasing = _ref4.$tiltEasing;
var duration = $isSwiping ? 0 : $transitionMs;
var effectiveEasing = $isSwiping ? $tiltEasing : $easing;
return "all ".concat(duration, "ms ").concat(effectiveEasing);
};
// We use attributes (style) to bypass multiple creation of classes (dynamic styling)
var Slider = styled__default.default.div.attrs(function (props) {
return {
style: {
transition: calcTransition(props),
left: calcLeft(props),
right: calcRight(props),
top: calcTop(props)
}
};
})(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n ", ";\n ", ";\n"])), function (_ref5) {
var $verticalMode = _ref5.$verticalMode;
return $verticalMode ? "column" : "row";
}, function (_ref6) {
var $verticalMode = _ref6.$verticalMode;
return $verticalMode ? "min-height: 100%;" : "";
}, function (_ref7) {
var $verticalMode = _ref7.$verticalMode,
$outerSpacing = _ref7.$outerSpacing;
return $verticalMode ? "" : "margin: 0 ".concat($outerSpacing, "px;");
});
var _templateObject$3;
var StyledCarousel = styled__default.default.div.attrs(function (props) {
var _props$size;
return {
style: {
height: (_props$size = props.size) === null || _props$size === void 0 ? void 0 : _props$size.height
}
};
})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n width: 100%;\n"])));
var _templateObject$2;
var CarouselWrapper = styled__default.default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n direction: ", ";\n"])), function (_ref) {
var $isRTL = _ref.$isRTL;
return $isRTL ? "rtl" : "ltr";
});
function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper$3(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$3() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct$3() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$3 = function _isNativeReflectConstruct() { return !!t; })(); }
var ItemWrapperContainer = /*#__PURE__*/function (_React$Component) {
function ItemWrapperContainer() {
var _this;
_classCallCheck(this, ItemWrapperContainer);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper$3(this, ItemWrapperContainer, [].concat(args));
_defineProperty(_this, "onClick", function () {
var _this$props = _this.props,
onClick = _this$props.onClick,
id = _this$props.id;
onClick(id);
});
return _this;
}
_inherits(ItemWrapperContainer, _React$Component);
return _createClass(ItemWrapperContainer, [{
key: "render",
value: function render() {
return /*#__PURE__*/jsxRuntime.jsx(ItemWrapper, _objectSpread$3(_objectSpread$3({}, this.props), {}, {
onClick: this.onClick
}));
}
}]);
}(React__default.default.Component);
ItemWrapperContainer.defaultProps = {
onClick: noop,
$itemPosition: consts.CENTER
};
ItemWrapperContainer.propTypes = {
id: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
onClick: PropTypes__default.default.func,
$itemPosition: PropTypes__default.default.oneOf([consts.START, consts.CENTER, consts.END])
};
function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var Track = function Track(_ref) {
var children = _ref.children,
childWidth = _ref.childWidth,
autoTabIndexVisibleItems = _ref.autoTabIndexVisibleItems,
_ref$enableSwipe = _ref.enableSwipe,
enableSwipe = _ref$enableSwipe === void 0 ? true : _ref$enableSwipe,
_ref$enableMouseSwipe = _ref.enableMouseSwipe,
enableMouseSwipe = _ref$enableMouseSwipe === void 0 ? true : _ref$enableMouseSwipe,
_ref$preventDefaultTo = _ref.preventDefaultTouchmoveEvent,
preventDefaultTouchmoveEvent = _ref$preventDefaultTo === void 0 ? false : _ref$preventDefaultTo,
itemsToShow = _ref.itemsToShow,
itemsToScroll = _ref.itemsToScroll,
currentItem = _ref.currentItem,
_ref$itemPosition = _ref.itemPosition,
itemPosition = _ref$itemPosition === void 0 ? consts.CENTER : _ref$itemPosition,
_ref$itemPadding = _ref.itemPadding,
itemPadding = _ref$itemPadding === void 0 ? [0, 0, 0, 0] : _ref$itemPadding,
onSwiped = _ref.onSwiped,
onSwiping = _ref.onSwiping,
verticalMode = _ref.verticalMode,
onItemClick = _ref.onItemClick;
var width = "".concat(childWidth, "px");
var paddingStyle = "".concat(itemPadding.join("px "), "px");
var minVisibleItem = currentItem;
var maxVisibleItem = currentItem + itemsToShow;
var prevItem = minVisibleItem - itemsToScroll;
var nextItem = maxVisibleItem + itemsToScroll;
var originalChildren = React__default.default.Children.map(children, function (child, idx) {
var isVisible = idx >= minVisibleItem && idx < maxVisibleItem;
var isPrevItem = !isVisible && idx >= prevItem && idx < currentItem;
var isNextItem = !isVisible && idx < nextItem && idx > currentItem;
var itemClass = "carousel-item";
var childToRender = autoTabIndexVisibleItems ? /*#__PURE__*/React__default.default.cloneElement(child, {
tabIndex: isVisible ? 0 : -1
}) : child;
return /*#__PURE__*/jsxRuntime.jsx("div", {
className: cssPrefix(itemClass, "".concat(itemClass, "-").concat(idx), "".concat(itemClass, "-").concat(isVisible ? "visible" : "hidden"), isPrevItem && "".concat(itemClass, "-prev"), isNextItem && "".concat(itemClass, "-next")),
children: /*#__PURE__*/jsxRuntime.jsx(ItemWrapperContainer, {
id: idx,
$itemPosition: itemPosition,
style: {
width: width,
padding: paddingStyle
},
onClick: onItemClick,
children: childToRender
}, idx)
});
});
var swipeHandler = reactSwipeable.useSwipeable({
stopPropagation: true,
preventDefaultTouchmoveEvent: preventDefaultTouchmoveEvent,
trackMouse: enableMouseSwipe,
onSwiped: onSwiped,
onSwiping: onSwiping
});
var toRender = enableSwipe ? /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$2(_objectSpread$2({
style: {
display: "flex",
flexDirection: verticalMode ? "column" : "row"
},
className: cssPrefix("swipable")
}, swipeHandler), {}, {
children: originalChildren
})) : originalChildren;
return toRender;
};
Track.propTypes = {
children: PropTypes__default.default.array.isRequired,
itemsToShow: PropTypes__default.default.number.isRequired,
noAutoTabbedItems: PropTypes__default.default.bool,
currentItem: PropTypes__default.default.number.isRequired,
itemPosition: PropTypes__default.default.string,
itemPadding: PropTypes__default.default.array,
childWidth: PropTypes__default.default.number,
verticalMode: PropTypes__default.default.bool,
enableSwipe: PropTypes__default.default.bool,
enableMouseSwipe: PropTypes__default.default.bool,
preventDefaultTouchmoveEvent: PropTypes__default.default.bool,
onSwiped: PropTypes__default.default.func,
onSwiping: PropTypes__default.default.func,
onItemClick: PropTypes__default.default.func
};
var _excluded$1 = ["direction", "onClick", "icons", "style"];
function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var directionIcons = {
left: "❮",
right: "❯",
up: "❮",
down: "❯"
};
var arrowClassname = cssPrefix("arrow");
var rotateStyle = function rotateStyle(direction) {
var rotate = {};
if (direction === Arrow.up || direction === Arrow.down) {
rotate.transform = "rotate(90deg)";
}
return rotate;
};
var Arrow = function Arrow(_ref) {
var direction = _ref.direction,
onClick = _ref.onClick,
icons = _ref.icons,
style = _ref.style,
rest = _objectWithoutProperties(_ref, _excluded$1);
var arrows = _objectSpread$1(_objectSpread$1({}, directionIcons), icons);
var styleObj = _objectSpread$1(_objectSpread$1({}, rotateStyle(direction)), style);
return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread$1(_objectSpread$1({
tabIndex: 0,
onClick: onClick,
className: cx__default.default(arrowClassname, "".concat(arrowClassname, "-").concat(direction)),
style: styleObj
}, rest), {}, {
children: arrows[direction]
}));
};
Arrow.left = "left";
Arrow.right = "right";
Arrow.up = "up";
Arrow.down = "down";
Arrow.propTypes = {
direction: PropTypes__default.default.oneOf(["left", "right", "up", "down"]).isRequired,
icons: PropTypes__default.default.object,
style: PropTypes__default.default.object,
onClick: PropTypes__default.default.func
};
var NEXT_ITEM = "NEXT_ITEM";
var PREV_ITEM = "PREV_ITEM";
var activeIndexReducer = function activeIndexReducer(state, action) {
var limit = action.limit,
itemsToScroll = action.itemsToScroll,
type = action.type;
switch (type) {
case NEXT_ITEM:
{
var optimisticNextItem = state + itemsToScroll;
var nextItem = limit >= optimisticNextItem ? optimisticNextItem : limit;
return nextItem;
}
case PREV_ITEM:
{
var optimisticPrevItem = state - itemsToScroll;
var prevItem = optimisticPrevItem >= limit ? optimisticPrevItem : limit;
return prevItem;
}
default:
return state;
}
};
var nextItemAction = function nextItemAction(limit, itemsToScroll) {
return {
type: NEXT_ITEM,
limit: limit,
itemsToScroll: itemsToScroll
};
};
var prevItemAction = function prevItemAction(limit, itemsToScroll) {
return {
type: PREV_ITEM,
limit: limit,
itemsToScroll: itemsToScroll
};
};
var _templateObject$1;
function _callSuper$2(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$2() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct$2() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$2 = function _isNativeReflectConstruct() { return !!t; })(); }
var boxShadow = "0 0 1px 2px rgba(0, 0, 0, 0.5)";
var activeBoxShadow = "0 0 1px 3px rgba(103,58,183,1)";
var hoveredBoxShadow = "0 0 1px 3px rgba(103,58,183,.5)";
var Dot = styled__default.default.button.attrs(function (_ref) {
var _ref$type = _ref.type,
type = _ref$type === void 0 ? "button" : _ref$type;
return {
type: type
};
})(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n padding: 0;\n transition: all 250ms ease;\n border: none;\n margin: 5px;\n background-color: ", ";\n font-size: 1.3em;\n content: \"\";\n height: 10px;\n width: 10px;\n box-shadow: ", ";\n border-radius: 50%;\n outline: none;\n &:hover,\n &:focus {\n cursor: pointer;\n box-shadow: ", ";\n }\n"])), function (_ref2) {
var $active = _ref2.$active;
return $active ? "rgba(103,58,183,.5)" : "transparent";
}, function (_ref3) {
var $active = _ref3.$active;
return $active ? activeBoxShadow : boxShadow;
}, function (_ref4) {
var $active = _ref4.$active;
return $active ? activeBoxShadow : hoveredBoxShadow;
});
var DotContainer = /*#__PURE__*/function (_React$Component) {
function DotContainer() {
var _this;
_classCallCheck(this, DotContainer);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper$2(this, DotContainer, [].concat(args));
_defineProperty(_this, "onClick", function () {
var _this$props = _this.props,
onClick = _this$props.onClick,
id = _this$props.id;
onClick(id);
});
return _this;
}
_inherits(DotContainer, _React$Component);
return _createClass(DotContainer, [{
key: "render",
value: function render() {
var active = this.props.active;
return /*#__PURE__*/jsxRuntime.jsx(Dot, {
tabIndex: active ? -1 : 0,
onClick: this.onClick,
$active: active,
className: "".concat(cssPrefix("dot"), " ").concat(active ? cssPrefix("dot_active") : "")
});
}
}]);
}(React__default.default.Component);
DotContainer.propTypes = {
id: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
active: PropTypes__default.default.bool,
onClick: PropTypes__default.default.func
};
var _templateObject;
function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function _isNativeReflectConstruct() { return !!t; })(); }
var Indicators = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n margin-top: 15px;\n"])));
var Pagination = /*#__PURE__*/function (_React$Component) {
function Pagination() {
_classCallCheck(this, Pagination);
return _callSuper$1(this, Pagination, arguments);
}
_inherits(Pagination, _React$Component);
return _createClass(Pagination, [{
key: "render",
value: function render() {
var _this$props = this.props,
numOfPages = _this$props.numOfPages,
activePage = _this$props.activePage,
onClick = _this$props.onClick;
var pages = numberToArray(numOfPages);
return /*#__PURE__*/jsxRuntime.jsx(Indicators, {
className: cssPrefix("pagination"),
children: pages.map(function (item, i) {
return /*#__PURE__*/jsxRuntime.jsx(DotContainer, {
id: i,
active: i === activePage,
onClick: onClick
}, i);
})
});
}
}]);
}(React__default.default.Component);
Pagination.defaultProps = {
onClick: noop
};
Pagination.propTypes = {
numOfPages: PropTypes__default.default.number.isRequired,
activePage: PropTypes__default.default.number.isRequired,
onClick: PropTypes__default.default.func
};
var _excluded = ["breakPoints"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var Carousel = /*#__PURE__*/function (_React$Component) {
function Carousel() {
var _this;
_classCallCheck(this, Carousel);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Carousel, [].concat(args));
_defineProperty(_this, "isComponentMounted", false);
_defineProperty(_this, "state", {
rootHeight: 0,
childHeight: 0,
sliderPosition: 0,
swipedSliderPosition: 0,
isSwiping: false,
transitioning: false,
transitionMs: _this.props.transitionMs,
activeIndex: _this.props.initialActiveIndex || _this.props.initialFirstItem,
// support deprecated initialFirstItem
pages: [],
activePage: 0,
sliderContainerWidth: 0
});
_defineProperty(_this, "setRef", function (name) {
return function (ref) {
return _this[name] = ref;
};
});
_defineProperty(_this, "initResizeObserver", function () {
_this.ro = new ResizeObserver__default.default(function (entries, observer) {
var _iterator = _createForOfIteratorHelper(entries),
_step;
try {
var _loop = function _loop() {
var entry = _step.value;
if (entry.target === _this.sliderContainer) {
// we are using rAF because it fixes the infinite refresh with gatsby (ssr?).
// TBH, I'm not sure i fully understand why.
// see https://github.com/sag1v/react-elastic-carousel/issues/107
window.requestAnimationFrame(function () {
_this.onContainerResize(entry);
});
}
if (entry.target === _this.slider) {
// we are using rAF because it fixes the infinite refresh with gatsby (ssr?).
// TBH, I'm not sure i fully understand why
// see https://github.com/sag1v/react-elastic-carousel/issues/107
window.requestAnimationFrame(function () {
_this.onSliderResize(entry);
});
}
};
for (_iterator.s(); !(_step = _iterator.n()).done;) {
_loop();
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
});
_this.ro.observe(_this.sliderContainer);
_this.ro.observe(_this.slider);
});
_defineProperty(_this, "unSubscribeObserver", function () {
return _this.ro.disconnect();
});
_defineProperty(_this, "setAutoPlay", function () {
var _this$getDerivedProps = _this.getDerivedPropsFromBreakPoint(),
autoPlaySpeed = _this$getDerivedProps.autoPlaySpeed;
_this.autoPlayIntervalId = setInterval(function () {
if (_this.isComponentMounted) {
var transitioning = _this.state.transitioning;
if (!transitioning) {
_this.slideNext();
}
}
}, autoPlaySpeed);
});
_defineProperty(_this, "removeAutoPlay", function () {
if (_this.autoPlayIntervalId) {
clearInterval(_this.autoPlayIntervalId);
_this.autoPlayIntervalId = null;
}
});
_defineProperty(_this, "setPages", function () {
var numOfPages = _this.getNumOfPages();
var pages = numberToArray(numOfPages);
_this.setState({
pages: pages
});
});
_defineProperty(_this, "onSliderTransitionEnd", function (fn) {
_this.slider.addEventListener("transitionend", fn);
});
_defineProperty(_this, "removeSliderTransitionHook", function (fn) {
_this.slider.removeEventListener("transitionend", fn);
});
_defineProperty(_this, "getDerivedPropsFromBreakPoint", function () {
var _this$props = _this.props,
breakPoints = _this$props.breakPoints,
restOfProps = _objectWithoutProperties(_this$props, _excluded);
var sliderContainerWidth = _this.state.sliderContainerWidth;
// default breakpoint from individual props
var currentBreakPoint;
// if breakpoints were added as props override the individual props
if (breakPoints && breakPoints.length > 0) {
currentBreakPoint = breakPoints.slice() // no mutations
.reverse() // so we can find last match
.find(function (bp) {
return bp.width <= sliderContainerWidth;
});
if (!currentBreakPoint) {
/* in case we don't have a lower width than sliderContainerWidth
* this mostly happens in initilization when sliderContainerWidth is 0
*/
currentBreakPoint = breakPoints[0];
}
}
// merge direct props with current breakpoint Props
return _objectSpread(_objectSpread({}, restOfProps), currentBreakPoint);
});
_defineProperty(_this, "updateSliderPosition", function () {
_this.setState(function (state) {
var _this$getDerivedProps2 = _this.getDerivedPropsFromBreakPoint(),
children = _this$getDerivedProps2.children,
verticalMode = _this$getDerivedProps2.verticalMode,
itemsToShow = _this$getDerivedProps2.itemsToShow,
transitionMs = _this$getDerivedProps2.transitionMs;
var childHeight = state.childHeight,
activeIndex = state.activeIndex;
var childWidth = _this.calculateChildWidth();
var totalItems = React.Children.toArray(children).length;
var hiddenSlots = totalItems - itemsToShow;
var moveBy = activeIndex * -1;
var emptySlots = itemsToShow - (totalItems - activeIndex);
if (emptySlots > 0 && hiddenSlots > 0) {
moveBy = emptySlots + activeIndex * -1;
}
var sliderPosition = (verticalMode ? childHeight : childWidth) * moveBy;
var newActiveIndex = emptySlots > 0 ? activeIndex - emptySlots : activeIndex;
// go back from 0ms to whatever set by the user
// We were at 0ms because we wanted to disable animation on resize
// see https://github.com/sag1v/react-elastic-carousel/issues/94
window.requestAnimationFrame(function () {
if (_this.isComponentMounted) {
_this.setState({
transitionMs: transitionMs
});
}
});
return {
sliderPosition: sliderPosition,
activeIndex: newActiveIndex < 0 ? 0 : newActiveIndex
};
});
});
_defineProperty(_this, "onSliderResize", function (sliderNode) {
if (!_this.isComponentMounted) {
return;
}
var _this$getDerivedProps3 = _this.getDerivedPropsFromBreakPoint(),
verticalMode = _this$getDerivedProps3.verticalMode,
children = _this$getDerivedProps3.children,
itemsToShow = _this$getDerivedProps3.itemsToShow;
var sliderHeight = sliderNode.contentRect.height;
var nextState = {};
var childrenLength = React.Children.toArray(children).length;
if (verticalMode) {
var childHeight = sliderHeight / childrenLength;
// We use Math.min because we don't want to make the child smaller
// if the number of children is smaller than itemsToShow.
// (Because we do not want "empty slots")
nextState.rootHeight = childHeight * Math.min(childrenLength, itemsToShow);
nextState.childHeight = childHeight;
} else {
nextState.rootHeight = sliderHeight;
}
_this.setState(nextState);
});
_defineProperty(_this, "calculateChildWidth", function () {
var sliderContainerWidth = _this.state.sliderContainerWidth;
var _this$getDerivedProps4 = _this.getDerivedPropsFromBreakPoint(),
verticalMode = _this$getDerivedProps4.verticalMode,
itemsToShow = _this$getDerivedProps4.itemsToShow,
showEmptySlots = _this$getDerivedProps4.showEmptySlots,
children = _this$getDerivedProps4.children;
/* based on slider container's width, get num of items to show
* and calculate child's width (and update it in state)
*/
var childrenLength = React.Children.toArray(children).length || 1;
var childWidth = 0;
if (verticalMode) {
childWidth = sliderContainerWidth;
} else {
// When "showEmptySlots" is false
// We use Math.min because we don't want to make the child smaller
// if the number of children is smaller than itemsToShow.
// (Because we do not want "empty slots")
childWidth = sliderContainerWidth / (showEmptySlots ? itemsToShow : Math.min(childrenLength, itemsToShow));
}
return childWidth;
});
_defineProperty(_this, "onContainerResize", function (sliderContainerNode) {
var newSliderContainerWidth = sliderContainerNode.contentRect.width;
// update slider container width
// disable animation on resize see https://github.com/sag1v/react-elastic-carousel/issues/94
var _this$getDerivedProps5 = _this.getDerivedPropsFromBreakPoint(),
outerSpacing = _this$getDerivedProps5.outerSpacing,
initialVerticalMode = _this$getDerivedProps5.verticalMode;
var containerWidth = newSliderContainerWidth - (initialVerticalMode ? 0 : outerSpacing * 2);
if (!_this.isComponentMounted || _this.state.sliderContainerWidth === newSliderContainerWidth) {
// prevent infinite loop
return;
}
_this.setState({
sliderContainerWidth: containerWidth,
transitionMs: 0
}, function () {
// we must get these props inside setState (get future props because its async)
var _this$getDerivedProps6 = _this.getDerivedPropsFromBreakPoint(),
onResize = _this$getDerivedProps6.onResize,
itemsToShow = _this$getDerivedProps6.itemsToShow,
children = _this$getDerivedProps6.children;
var childrenLength = React.Children.toArray(children).length || 1;
_this.setState(function (currentState) {
// We might need to change the selected index when the size of the container changes
// we are making sure the selected index is not out of boundaries and respecting itemsToShow
// This usually happens with breakpoints. see https://github.com/sag1v/react-elastic-carousel/issues/122
var activeIndex = currentState.activeIndex;
// we take the lowest, in case itemsToShow is greater than childrenLength
var maxItemsToShow = Math.min(childrenLength, itemsToShow);
var endLimit = childrenLength - maxItemsToShow;
if (activeIndex > endLimit) {
activeIndex = endLimit;
}
return {
activeIndex: activeIndex
};
}, function () {
/* Based on all of the above new data:
* update slider position
* get the new current breakpoint
* pass the current breakpoint to the consumer's callback
*/
_this.updateSliderPosition();
var currentBreakPoint = _this.getDerivedPropsFromBreakPoint();
onResize(currentBreakPoint);
});
});
});
_defineProperty(_this, "tiltMovement", function (position) {
var distance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 20;
var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 150;
_this.setState(function (state) {
return {
isSwiping: true,
swipedSliderPosition: position - distance
};
});
setTimeout(function () {
_this.setState({
isSwiping: false,
swipedSliderPosition: 0
});
}, duration);
});
_defineProperty(_this, "convertChildToCbObj", function (index) {
var _this$getDerivedProps7 = _this.getDerivedPropsFromBreakPoint(),
children = _this$getDerivedProps7.children;
// support decimal itemsToShow
var roundedIdx = Math.round(index);
var child = React.Children.toArray(children)[roundedIdx];
return {
item: child.props,
index: roundedIdx
};
});
_defineProperty(_this, "getNextItemIndex", function (currentIndex, getPrev) {
var _this$getDerivedProps8 = _this.getDerivedPropsFromBreakPoint(),
children = _this$getDerivedProps8.children,
itemsToShow = _this$getDerivedProps8.itemsToShow,
itemsToScroll = _this$getDerivedProps8.itemsToScroll;
var childrenLength = React.Children.toArray(children).length || 1;
var notEnoughItemsToShow = itemsToShow > childrenLength;
var limit = getPrev ? 0 : childrenLength - itemsToShow;
if (notEnoughItemsToShow) {
limit = 0; // basically don't move
}
var nextAction = getPrev ? prevItemAction(0, itemsToScroll) : nextItemAction(limit, itemsToScroll);
var nextItem = activeIndexReducer(currentIndex, nextAction);
return nextItem;
});
_defineProperty(_this, "getNextItemObj", function (getPrev) {
var _this$getDerivedProps9 = _this.getDerivedPropsFromBreakPoint(),
children = _this$getDerivedProps9.children;
var activeIndex = _this.state.activeIndex;
var nextItemIndex = _this.getNextItemIndex(activeIndex, getPrev);
// support decimal itemsToShow
var roundedIdx = Math.round(nextItemIndex);
var asElement = React.Children.toArray(children)[roundedIdx];
var asObj = {
item: asElement.props,
index: roundedIdx
};
return asObj;
});
_defineProperty(_this, "resetSwipe", function () {
_this.setState({
swipedSliderPosition: 0,
transitioning: false,
isSwiping: false
});
});
_defineProperty(_this, "onSwiping", function (data) {
var deltaX = data.deltaX,
absX = data.absX,
deltaY = data.deltaY,
absY = data.absY,
dir = data.dir;
_this.setState(function (state) {
var childHeight = state.childHeight,
activeIndex = state.activeIndex,
sliderPosition = state.sliderPosition;
var _this$getDerivedProps10 = _this.getDerivedPropsFromBreakPoint(),
itemsToShow = _this$getDerivedProps10.itemsToShow,
verticalMode = _this$getDerivedProps10.verticalMode,
children = _this$getDerivedProps10.children,
isRTL = _this$getDerivedProps10.isRTL;
var childWidth = _this.calculateChildWidth();
// determine how far can user swipe
var childrenLength = React.Children.toArray(children).length || 1;
var goingNext = !verticalMode && dir === "Left" && !isRTL || !verticalMode && dir === "Right" && isRTL || verticalMode && dir === "Up";
var goingBack = !verticalMode && dir === "Right" && !isRTL || !verticalMode && dir === "Left" && isRTL || verticalMode && dir === "Down";
var horizontalSwipe = dir === "Left" || dir === "Right";
var verticalSwipe = dir === "Up" || dir === "Down";
var horizontalMode = !verticalMode;
var distanceSwipe = 0;
var horizontalEdgeStoppage = childWidth / 2;
var verticalEdgeStoppage = childHeight / 2;
if (verticalMode) {
if (verticalSwipe) {
var trackSize = childrenLength * childHeight;
if (goingNext) {
distanceSwipe = trackSize - childHeight * activeIndex - itemsToShow * childHeight + verticalEdgeStoppage;
} else if (goingBack) {
distanceSwipe = childHeight * activeIndex + verticalEdgeStoppage;
}
}
} else {
if (horizontalSwipe) {
var _trackSize = childrenLength * childWidth;
if (goingNext) {
distanceSwipe = _trackSize - childWidth * activeIndex - itemsToShow * childWidth + horizontalEdgeStoppage;
} else if (goingBack) {
distanceSwipe = childWidth * activeIndex + horizontalEdgeStoppage;
}
}
}
var shouldHorizontalSkipUpdate = horizontalMode && verticalSwipe || horizontalMode && horizontalSwipe && absX > distanceSwipe;
var shouldVerticalSkipUpdate = verticalMode && horizontalSwipe || verticalMode && verticalSwipe && absY > distanceSwipe;
if (shouldHorizontalSkipUpdate || shouldVerticalSkipUpdate) {
// bail out of state update
return;
}
var swipedSliderPosition;
if (horizontalSwipe) {
if (isRTL) {
swipedSliderPosition = sliderPosition - deltaX;
} else {
swipedSliderPosition = sliderPosition + deltaX;
}
} else {
swipedSliderPosition = sliderPosition + deltaY;
}
return {
swipedSliderPosition: swipedSliderPosition,
isSwiping: true,
transitioning: true
};
});
});
_defineProperty(_this, "onSwiped", function (data) {
// we need to handle all scenarios:
// 1. Horizontal mode - swipe left or right
// 2. Horizontal mode with RTL - swipe left or right
// 3. vertical mode - swipe up or down
var absX = data.absX,
absY = data.absY,
dir = data.dir;
var _this$state = _this.state,
childHeight = _this$state.childHeight,
activeIndex = _this$state.activeIndex;
var _this$getDerivedProps11 = _this.getDerivedPropsFromBreakPoint(),
verticalMode = _this$getDerivedProps11.verticalMode,
isRTL = _this$getDerivedProps11.isRTL,
itemsToScroll = _this$getDerivedProps11.itemsToScroll;
var childWidth = _this.calculateChildWidth();
var func = _this.resetSwipe;
var minSwipeDistanceHorizontal = childWidth / 5;
var minSwipeDistanceVertical = childHeight / 5;
var swipedLeft = dir === "Left";
var swipedRight = dir === "Right";
var swipedUp = dir === "Up";
var swipedDown = dir === "Down";
var verticalGoSwipe = verticalMode && (swipedUp || swipedDown) && absY > minSwipeDistanceVertical;
var horizontalGoSwipe = !verticalMode && (swipedRight || swipedLeft) && absX > minSwipeDistanceHorizontal;
var goodToGo = false;
if (verticalGoSwipe || horizontalGoSwipe) {
goodToGo = true;
}
if (goodToGo) {
// we should go to a different item
// determine what method we need to invoke
if (verticalMode) {
// get number of slides from user's swiping
var numberOfSlidesViaSwipe = Math.ceil((absY - minSwipeDistanceVertical) / childHeight);
// if user swipes more than itemsToScroll then we want to bypass itemsToScroll for a smoother scroll
var numberOfSlidesTogo = Math.max(itemsToScroll, numberOfSlidesViaSwipe);
var backSlidesToGo = activeIndex - numberOfSlidesTogo;
var forwardSlideTtoGo = activeIndex + numberOfSlidesTogo;
// up or down
if (swipedDown) {
// func = this.onPrevStart;
func = function func() {
return _this.goTo(backSlidesToGo);
};
}
if (swipedUp) {
// func = this.onNextStart;
func = function func() {
return _this.goTo(forwardSlideTtoGo);
};
}
} else {
// get number of slides from user's swiping
var _numberOfSlidesViaSwipe = Math.ceil((absX - minSwipeDistanceHorizontal) / childWidth);
// if user swipes more than itemsToScroll then we want to bypass itemsToScroll for a smoother scroll
var _numberOfSlidesTogo = Math.max(itemsToScroll, _numberOfSlidesViaSwipe);
var _backSlidesToGo = activeIndex - _numberOfSlidesTogo;
var _forwardSlideTtoGo = activeIndex + _numberOfSlidesTogo;
// horizontal mode
if (isRTL) {
// flip sides
if (swipedLeft) {
// func = this.onPrevStart;
func = function func() {
return _this.goTo(_backSlidesToGo);
};
}
if (swipedRight) {
// func = this.onNextStart;
func = function func() {
return _this.goTo(_forwardSlideTtoGo);
};
}
} else {
// normal behavior
if (swipedLeft) {
// func = this.onNextStart;
func = function func() {
return _this.goTo(_forwardSlideTtoGo);
};
}
if (swipedRight) {
// func = this.onPrevStart;
func = function func() {
return _this.goTo(_backSlidesToGo);
};
}
}
}
}
// we are not "tilting" on edges, so we need to reset isSwiping and transitioning.
// otherwise we wont slide back to edge
_this.setState({
isSwiping: false,
transitioning: false
});
func({
skipTilt: true
});
});
_defineProperty(_this, "onNextStart", function (options) {
var _this$getDerivedProps12 = _this.getDerivedPropsFromBreakPoint(),
onNextStart = _this$getDerivedProps12.onNextStart;
var activeIndex = _this.state.activeIndex;
var nextItemObj = _this.getNextItemObj();
var prevItemObj =