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

Merchant Labs React component library.

'use strict';

exports.__esModule = true;

var _templateObject = _taggedTemplateLiteralLoose(['\n  margin: 0 auto;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n'], ['\n  margin: 0 auto;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n']),
    _templateObject2 = _taggedTemplateLiteralLoose(['\n  margin: 0 auto;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n'], ['\n  margin: 0 auto;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n']),
    _templateObject3 = _taggedTemplateLiteralLoose(['\n  margin: 0 auto;\n  padding: 25px 0 0;\n  position: relative;\n'], ['\n  margin: 0 auto;\n  padding: 25px 0 0;\n  position: relative;\n']),
    _templateObject4 = _taggedTemplateLiteralLoose(['\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: absolute;\n  top: 40%;\n'], ['\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: absolute;\n  top: 40%;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _reactSwipeableViews = require('react-swipeable-views');

var _reactSwipeableViews2 = _interopRequireDefault(_reactSwipeableViews);

var _reactSwipeableViewsUtils = require('react-swipeable-views-utils');

var _reactSwipeableViewsCore = require('react-swipeable-views-core');

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

function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }

var SwipeableView = (0, _reactSwipeableViewsUtils.autoPlay)((0, _reactSwipeableViewsUtils.virtualize)(_reactSwipeableViews2.default));

var Slider = (0, _react.forwardRef)(function (_ref, ref) {
  var slides = _ref.slides,
      interval = _ref.interval,
      slideRenderer = _ref.slideRenderer,
      Dot = _ref.dotComponent,
      Button = _ref.buttonComponent,
      className = _ref.className;

  var _useState = (0, _react.useState)(true),
      auto = _useState[0],
      setAuto = _useState[1];

  var _useState2 = (0, _react.useState)(0),
      activeIndex = _useState2[0],
      setActiveIndex = _useState2[1];

  var _useState3 = (0, _react.useState)(0),
      infiniteIndex = _useState3[0],
      setInfiniteIndex = _useState3[1];

  var _useState4 = (0, _react.useState)(true),
      pageIsVisible = _useState4[0],
      setPageIsVisible = _useState4[1];

  (0, _react.useEffect)(function () {
    if (typeof window === 'undefined') return;
    function handlePageVisibilityChange() {
      setPageIsVisible(document.visibilityState === 'visible');
    }
    document.addEventListener('visibilitychange', handlePageVisibilityChange);
    return function () {
      document.removeEventListener('visibilitychange', handlePageVisibilityChange);
    };
  });

  function onChangeIndex(index, indexLatest, meta) {
    setActiveIndex((0, _reactSwipeableViewsCore.mod)(index, indexLatest));
    setInfiniteIndex(index);
  }

  function onMouseEnter() {
    setAuto(false);
  }

  function onMouseLeave() {
    setAuto(true);
  }

  function moveLeft() {
    setActiveIndex((0, _reactSwipeableViewsCore.mod)(infiniteIndex - 1, slides.length));
    setInfiniteIndex(infiniteIndex - 1);
  }

  function moveRight() {
    setActiveIndex((0, _reactSwipeableViewsCore.mod)(infiniteIndex + 1, slides.length));
    setInfiniteIndex(infiniteIndex + 1);
  }

  function slideToIndex(index) {
    setActiveIndex(index);
    setInfiniteIndex(infiniteIndex + (index - activeIndex));
  }

  function renderSlides(_ref2) {
    var index = _ref2.index,
        key = _ref2.key;

    var slideData = slides[(0, _reactSwipeableViewsCore.mod)(index, slides.length)];
    return _react2.default.createElement(
      'div',
      { key: key, className: className },
      slideRenderer(slideData)
    );
  }

  return _react2.default.createElement(
    CarouselContainer,
    { ref: ref },
    _react2.default.createElement(
      SlideContainer,
      null,
      _react2.default.createElement(SwipeableView, {
        onMouseEnter: onMouseEnter,
        onMouseLeave: onMouseLeave,
        onChangeIndex: onChangeIndex,
        index: infiniteIndex,
        autoplay: auto && slides.length > 1 && pageIsVisible,
        interval: interval,
        springConfig: {
          duration: '.8s',
          easeFunction: 'cubic-bezier(0.15, 0.3, 0.25, 1)',
          delay: '0s'
        },
        slideRenderer: renderSlides
      })
    ),
    Button && slides.length !== 1 && _react2.default.createElement(
      ButtonContainer,
      null,
      _react2.default.createElement(Button, { onClick: moveLeft, left: true }),
      _react2.default.createElement(Button, { onClick: moveRight, right: true })
    ),
    Dot && slides.length > 1 && _react2.default.createElement(
      DotsContainer,
      null,
      slides.map(function (slide, i) {
        var isActive = i === activeIndex;
        return _react2.default.createElement(Dot, {
          key: i,
          isActive: isActive,
          onClick: function onClick() {
            return slideToIndex(i);
          }
        });
      })
    )
  );
});

Slider.propTypes = process.env.NODE_ENV !== "production" ? {
  slides: _propTypes2.default.array.isRequired,
  slideRenderer: _propTypes2.default.func.isRequired,
  dotComponent: _propTypes2.default.object,
  buttonComponent: _propTypes2.default.object,
  interval: _propTypes2.default.number,
  className: _propTypes2.default.string,
  autoPlay: _propTypes2.default.bool
} : {};

Slider.defaultProps = {
  interval: 5000
};

exports.default = Slider;


var CarouselContainer = _styledComponents2.default.div(_templateObject);
var SlideContainer = _styledComponents2.default.div(_templateObject2);
var DotsContainer = _styledComponents2.default.ul(_templateObject3);
var ButtonContainer = _styledComponents2.default.div(_templateObject4);
module.exports = exports['default'];