@merchantlabs/react-carousel/lib/ResponsiveCarousel.js

Merchant Labs React component library.

'use strict';

exports.__esModule = true;

var _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; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _Carousel = require('./Carousel');

var _Carousel2 = _interopRequireDefault(_Carousel);

var _useContentRect2 = require('./useContentRect');

var _useContentRect3 = _interopRequireDefault(_useContentRect2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

var ResponsiveCarousel = function ResponsiveCarousel(_ref) {
  var breakpoints = _ref.breakpoints,
      slides = _ref.slides,
      restProps = _objectWithoutProperties(_ref, ['breakpoints', 'slides']);

  var ref = (0, _react.useRef)(null);

  var _useContentRect = (0, _useContentRect3.default)(ref),
      width = _useContentRect.width;

  var count = breakpoints.reduce(function (acc, breakpoint) {
    return width > breakpoint.width ? breakpoint.items : acc;
  }, 1);

  var chunkedSlides = slides.reduce(function (acc, slide, index, arr) {
    return index % count === 0 ? acc.concat([arr.slice(index, index + count)]) : acc;
  }, []);

  return _react2.default.createElement(_Carousel2.default, _extends({
    ref: ref,
    slides: chunkedSlides
  }, restProps));
};

ResponsiveCarousel.propTypes = process.env.NODE_ENV !== "production" ? _extends({
  slides: _propTypes2.default.array.isRequired,
  breakpoints: _propTypes2.default.arrayOf(_propTypes2.default.shape({
    width: _propTypes2.default.number,
    items: _propTypes2.default.number
  })).isRequired
}, _Carousel2.default.propTypes) : {};

exports.default = ResponsiveCarousel;
module.exports = exports['default'];