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

Merchant Labs React component library.

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

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

import React, { useRef } from 'react';
import PropTypes from 'prop-types';

import Carousel from './Carousel';
import useContentRect from './useContentRect';

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

  var ref = useRef(null);

  var _useContentRect = useContentRect(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 React.createElement(Carousel, _extends({
    ref: ref,
    slides: chunkedSlides
  }, restProps));
};

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

export default ResponsiveCarousel;