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

Merchant Labs React component library.

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']);

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

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay, virtualize } from 'react-swipeable-views-utils';
import { mod } from 'react-swipeable-views-core';

var SwipeableView = autoPlay(virtualize(SwipeableViews));

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: 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: mod(infiniteIndex - 1, slides.length)
      });
    }, _this._moveRight = function () {
      var infiniteIndex = _this.state.infiniteIndex;
      var slides = _this.props.slides;

      _this.setState({
        infiniteIndex: infiniteIndex + 1,
        activeIndex: 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[mod(index, slides.length)];
      return React.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 React.createElement(
      CarouselContainer,
      { innerRef: innerRef },
      React.createElement(
        SlideContainer,
        null,
        React.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 && React.createElement(
        ButtonContainer,
        null,
        React.createElement(Button, { onClick: this._moveLeft, left: true }),
        React.createElement(Button, { onClick: this._moveRight, right: true })
      ),
      Dot && slides.length > 1 && React.createElement(
        DotsContainer,
        null,
        slides.map(function (slide, i) {
          var isActive = i === activeIndex;
          return React.createElement(Dot, {
            key: i,
            isActive: isActive,
            onClick: function onClick() {
              return _this2._slideToIndex(i);
            }
          });
        })
      )
    );
  };

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


var CarouselContainer = styled.div(_templateObject);
var DotsContainer = styled.ul(_templateObject2);
var ButtonContainer = styled.div(_templateObject3);
var SlideContainer = styled.div(_templateObject4);