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

Merchant Labs React component library.

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _class, _temp2;

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  padding: 25px 0 0;\n  position: relative;\n'], ['\n  margin: 0 auto;\n  padding: 25px 0 0;\n  position: relative;\n']),
    _templateObject3 = _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']),
    _templateObject4 = _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']);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

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

var InfiniteCarousel = (_temp2 = _class = function (_Component) {
  _inherits(InfiniteCarousel, _Component);

  function InfiniteCarousel() {
    var _temp, _this, _ret;

    _classCallCheck(this, InfiniteCarousel);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
      auto: true,
      activeIndex: 0,
      infiniteIndex: 0,
      pageVisibility: 'visible'
    }, _this.onChangeIndex = function (index, indexLatest, meta) {
      var slides = _this.props.slides;

      _this.setState({
        activeIndex: (0, _reactSwipeableViewsCore.mod)(index, slides.length),
        infiniteIndex: index
      });
    }, _this.onMouseEnter = function () {
      return _this.setState({ auto: false });
    }, _this.onMouseLeave = function () {
      return _this.setState({ auto: true });
    }, _this._moveLeft = function () {
      var infiniteIndex = _this.state.infiniteIndex;
      var slides = _this.props.slides;

      _this.setState({
        infiniteIndex: infiniteIndex - 1,
        activeIndex: (0, _reactSwipeableViewsCore.mod)(infiniteIndex - 1, slides.length)
      });
    }, _this._moveRight = function () {
      var infiniteIndex = _this.state.infiniteIndex;
      var slides = _this.props.slides;

      _this.setState({
        infiniteIndex: infiniteIndex + 1,
        activeIndex: (0, _reactSwipeableViewsCore.mod)(infiniteIndex + 1, slides.length)
      });
    }, _this._slideToIndex = function (index) {
      var _this$state = _this.state,
          activeIndex = _this$state.activeIndex,
          infiniteIndex = _this$state.infiniteIndex;

      _this.setState({
        infiniteIndex: infiniteIndex + (index - activeIndex),
        activeIndex: index
      });
    }, _this._onPageVisibilityChange = function () {
      _this.setState({
        pageVisibility: document.visibilityState
      });
    }, _this._renderSlides = function (_ref) {
      var index = _ref.index,
          key = _ref.key;
      var _this$props = _this.props,
          slideRenderer = _this$props.slideRenderer,
          slides = _this$props.slides,
          className = _this$props.className;

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

  InfiniteCarousel.prototype.componentDidMount = function componentDidMount() {
    if (typeof window !== 'undefined') {
      document.addEventListener('visibilitychange', this._onPageVisibilityChange);
    }
  };

  InfiniteCarousel.prototype.componentWillUnmount = function componentWillUnmount() {
    if (typeof window !== 'undefined') {
      document.removeEventListener('visibilitychange', this._onPageVisibilityChange);
    }
  };

  InfiniteCarousel.prototype.render = function render() {
    var _this2 = this;

    var _state = this.state,
        auto = _state.auto,
        activeIndex = _state.activeIndex,
        infiniteIndex = _state.infiniteIndex,
        pageVisibility = _state.pageVisibility;
    var _props = this.props,
        slides = _props.slides,
        interval = _props.interval,
        Dot = _props.dotComponent,
        Button = _props.buttonComponent,
        innerRef = _props.innerRef;


    return _react2.default.createElement(
      CarouselContainer,
      { innerRef: innerRef },
      _react2.default.createElement(
        SlideContainer,
        null,
        _react2.default.createElement(SwipeableView, {
          onMouseEnter: this.onMouseEnter,
          onMouseLeave: this.onMouseLeave,
          onChangeIndex: this.onChangeIndex,
          index: infiniteIndex,
          autoplay: auto && slides.length > 1 && pageVisibility === 'visible',
          interval: interval,
          springConfig: {
            duration: '.8s',
            easeFunction: 'cubic-bezier(0.15, 0.3, 0.25, 1)',
            delay: '0s'
          },
          slideRenderer: this._renderSlides
        })
      ),
      Button && slides.length !== 1 && _react2.default.createElement(
        ButtonContainer,
        null,
        _react2.default.createElement(Button, { onClick: this._moveLeft, left: true }),
        _react2.default.createElement(Button, { onClick: this._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 _this2._slideToIndex(i);
            }
          });
        })
      )
    );
  };

  return InfiniteCarousel;
}(_react.Component), _class.defaultProps = {
  interval: 5000
}, _temp2);
exports.default = InfiniteCarousel;
InfiniteCarousel.propTypes = process.env.NODE_ENV !== "production" ? {
  slides: _propTypes2.default.array.isRequired,
  slideRenderer: _propTypes2.default.func.isRequired,
  dotComponent: _propTypes2.default.func,
  buttonComponent: _propTypes2.default.func,
  interval: _propTypes2.default.number,
  className: _propTypes2.default.string,
  autoPlay: _propTypes2.default.bool
} : {};


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