react-intro-slider/dist/IntroSlider.js

`Simple and configurable app introduction slider for react`

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

require("./styles.css");

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactSwipeable = require("react-swipeable");

var _Slide = require("./Slide");

var _Slide2 = _interopRequireDefault(_Slide);

var _Controller = require("./Controller");

var _Controller2 = _interopRequireDefault(_Controller);

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

var IntroSlider = function IntroSlider(_ref) {
  var sliderIsOpen = _ref.sliderIsOpen,
      slides = _ref.slides,
      imageStyle = _ref.imageStyle,
      titleStyle = _ref.titleStyle,
      descriptionStyle = _ref.descriptionStyle,
      nextButton = _ref.nextButton,
      skipButton = _ref.skipButton,
      skipButtonStyle = _ref.skipButtonStyle,
      nextButtonStyle = _ref.nextButtonStyle,
      controllerOrientation = _ref.controllerOrientation,
      controllerIconActiveStyle = _ref.controllerIconActiveStyle,
      controllerIconInactiveStyle = _ref.controllerIconInactiveStyle,
      sliderOverlayStyle = _ref.sliderOverlayStyle,
      closeOnOverlayClick = _ref.closeOnOverlayClick,
      sliderStyle = _ref.sliderStyle,
      handeCloseFunction = _ref.handleClose,
      handleDone = _ref.handleDone,
      nextLabel = _ref.nextLabel,
      skipLabel = _ref.skipLabel,
      doneLabel = _ref.doneLabel,
      controllerIconActive = _ref.controllerIconActive,
      controllerIconInactive = _ref.controllerIconInactive,
      slideStyle = _ref.slideStyle,
      size = _ref.size;

  var _useState = (0, _react.useState)(0),
      _useState2 = _slicedToArray(_useState, 2),
      activeSlide = _useState2[0],
      useActiveSlide = _useState2[1];

  var sliderRef = (0, _react.useRef)();
  var handleClose = handeCloseFunction || function () {};
  var documentClicked = function documentClicked(e) {
    if (sliderRef.current && (e.target === sliderRef.current || sliderRef.current.contains(e.target))) return;

    if (!closeOnOverlayClick) return;
    handleClose();
  };

  (0, _react.useEffect)(function () {
    document.addEventListener("click", documentClicked, false);
    return function () {
      document.removeEventListener("click", documentClicked, false);
    };
  }, []);

  var handleLeftSwipe = function handleLeftSwipe() {
    var newSlide = activeSlide + 1;
    if (newSlide >= slides.length) {
      newSlide = 0;
    }
    useActiveSlide(newSlide);
  };

  var handleRightSwipe = function handleRightSwipe() {
    var newSlide = activeSlide - 1;
    if (newSlide < 0) {
      newSlide = slides.length - 1;
    }
    useActiveSlide(newSlide);
  };

  var nextSlide = function nextSlide() {
    var newSlide = activeSlide + 1;
    if (newSlide === slides.length) {
      if (handleDone) {
        handleDone();
      }
      handleClose();
    } else {
      useActiveSlide(newSlide);
    }
  };

  var renderedSlides = slides.map(function (slide, index) {
    var title = slide.title,
        description = slide.description,
        image = slide.image,
        background = slide.background;

    return _react2.default.createElement(_Slide2.default, {
      active: index === activeSlide,
      key: title,
      title: title,
      description: description,
      image: image,
      imageStyle: imageStyle,
      titleStyle: titleStyle,
      descriptionStyle: descriptionStyle,
      background: background,
      slideStyle: slideStyle
    });
  });
  var containerSize = window.innerWidth < 400 ? "fullscreen" : size;
  return sliderIsOpen && _react2.default.createElement(
    _reactSwipeable.Swipeable,
    {
      onSwipedLeft: handleLeftSwipe,
      onSwipedRight: handleRightSwipe
    },
    _react2.default.createElement(
      "div",
      { className: "ris-slider-overlay", style: sliderOverlayStyle },
      _react2.default.createElement(
        "div",
        { className: "ris-slider-container" },
        _react2.default.createElement(
          "div",
          {
            className: "ris-slider ris-" + containerSize,
            style: sliderStyle,
            ref: sliderRef
          },
          renderedSlides,
          _react2.default.createElement(_Controller2.default, {
            slides: slides.length,
            activeSlide: activeSlide,
            nextButton: nextButton,
            skipButton: skipButton,
            skipButtonStyle: skipButtonStyle,
            nextButtonStyle: nextButtonStyle,
            nextSlide: nextSlide,
            skipSlider: handleClose,
            orientation: controllerOrientation,
            controllerIconActiveStyle: controllerIconActiveStyle,
            controllerIconInactiveStyle: controllerIconInactiveStyle,
            nextLabel: nextLabel,
            doneLabel: doneLabel,
            skipLabel: skipLabel,
            controllerIconActive: controllerIconActive,
            controllerIconInactive: controllerIconInactive
          })
        )
      )
    )
  );
};

IntroSlider.propTypes = {
  sliderIsOpen: _propTypes2.default.bool,
  descriptionStyle: _propTypes2.default.object,
  titleStyle: _propTypes2.default.object,
  imageStyle: _propTypes2.default.object,
  slides: _propTypes2.default.array,
  size: _propTypes2.default.string,
  nextButton: _propTypes2.default.bool,
  skipButton: _propTypes2.default.bool,
  handleDone: _propTypes2.default.func,
  skipButtonStyle: _propTypes2.default.object,
  nextButtonStyle: _propTypes2.default.object,
  controllerOrientation: _propTypes2.default.string,
  sliderOverlayStyle: _propTypes2.default.object,
  sliderStyle: _propTypes2.default.object,
  handleClose: _propTypes2.default.func,
  closeOnOverlayClick: _propTypes2.default.bool,
  controllerIconActiveStyle: _propTypes2.default.object,
  controllerIconInactiveStyle: _propTypes2.default.object,
  nextLabel: _propTypes2.default.string,
  skipLabel: _propTypes2.default.string,
  doneLabel: _propTypes2.default.string,
  controllerIconActive: _propTypes2.default.node,
  contollerIconInactive: _propTypes2.default.node,
  slideStyle: _propTypes2.default.object
};

IntroSlider.defaultProps = {
  sliderIsOpen: false,
  size: "medium",
  slides: [],
  sliderOverlayStyle: null,
  sliderStyle: null,
  slideStyle: null,
  closeOnOverlayClick: true,
  activeSlide: 0,
  nextButton: true,
  skipButton: false,
  skipButtonStyle: null,
  nextButtonStyle: null,
  controllerOrientation: "vertical",
  controllerIconActiveStyle: null,
  controllerIconInactiveStyle: null,
  descriptionStyle: null,
  titleStyle: null,
  imageStyle: null
};

exports.default = IntroSlider;