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

Merchant Labs React component library.

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

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

import React, { useState, useEffect, forwardRef } 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 Slider = 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 = useState(true),
      auto = _useState[0],
      setAuto = _useState[1];

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

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

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

  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(mod(index, indexLatest));
    setInfiniteIndex(index);
  }

  function onMouseEnter() {
    setAuto(false);
  }

  function onMouseLeave() {
    setAuto(true);
  }

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

  function moveRight() {
    setActiveIndex(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[mod(index, slides.length)];
    return React.createElement(
      'div',
      { key: key, className: className },
      slideRenderer(slideData)
    );
  }

  return React.createElement(
    CarouselContainer,
    { ref: ref },
    React.createElement(
      SlideContainer,
      null,
      React.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 && React.createElement(
      ButtonContainer,
      null,
      React.createElement(Button, { onClick: moveLeft, left: true }),
      React.createElement(Button, { onClick: 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 slideToIndex(i);
          }
        });
      })
    )
  );
});

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

Slider.defaultProps = {
  interval: 5000
};

export default Slider;

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