react-carousel-query
Version:
A infinite carousel component made with react that handles the pagination for you.
80 lines (79 loc) • 3.18 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _flexContainer = _interopRequireDefault(require("../../primitives/flexContainer"));
var _arrow = _interopRequireDefault(require("../arrow"));
var _badgeIndex = _interopRequireDefault(require("../badgeIndex"));
var _useSlider = _interopRequireDefault(require("../../hooks/useSlider"));
var _useRerenderOnWindowResize = _interopRequireDefault(require("../../hooks/useRerenderOnWindowResize"));
var _carouselItemsContainerModule = _interopRequireDefault(require("./carouselItemsContainer.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const CarouselItemsContainer = ({
renderArrow,
renderBadge,
hideIndex,
showArrows,
currentIndex,
total,
next,
previous,
children
}) => {
(0, _useRerenderOnWindowResize.default)();
const containerRef = _react.default.useRef(null);
const {
events,
onNext,
onPrevious,
offset,
transitionDuration
} = (0, _useSlider.default)({
containerRef,
next,
previous,
currentIndex,
total
});
const shouldRenderArrows = showArrows || renderArrow;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !hideIndex && /*#__PURE__*/_react.default.createElement(_badgeIndex.default, {
renderBadge: renderBadge,
className: (0, _classnames.default)(_carouselItemsContainerModule.default.badgeIndex),
currentIndex: currentIndex + 1,
total: total
}), shouldRenderArrows && /*#__PURE__*/_react.default.createElement(_arrow.default, {
renderArrow: renderArrow,
variant: "left",
onClick: onPrevious
}), /*#__PURE__*/_react.default.createElement(_flexContainer.default, _extends({}, events, {
ref: containerRef,
fullHeight: true,
alignCenter: true,
className: _carouselItemsContainerModule.default.container,
style: {
transform: `translateX(${offset * -1}px)`,
transitionDuration
}
}), children), shouldRenderArrows && /*#__PURE__*/_react.default.createElement(_arrow.default, {
renderArrow: renderArrow,
variant: "right",
onClick: onNext
}));
};
CarouselItemsContainer.propTypes = {
renderArrow: _propTypes.default.func,
renderBadge: _propTypes.default.func,
hideIndex: _propTypes.default.bool,
showArrows: _propTypes.default.bool,
currentIndex: _propTypes.default.number.isRequired,
total: _propTypes.default.number.isRequired,
next: _propTypes.default.func.isRequired,
previous: _propTypes.default.func.isRequired,
children: _propTypes.default.arrayOf(_propTypes.default.node).isRequired
};
var _default = exports.default = CarouselItemsContainer;