react-intro-slider/dist/Controller.js

`Simple and configurable app introduction slider for react`

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var Controller = function Controller(props) {
  var activeSlide = props.activeSlide,
      slides = props.slides,
      controllerIconActiveStyle = props.controllerIconActiveStyle,
      controllerIconInactiveStyle = props.controllerIconInactiveStyle,
      nextButton = props.nextButton,
      nextButtonStyle = props.nextButtonStyle,
      nextSlide = props.nextSlide,
      skipSlider = props.skipSlider,
      skipButton = props.skipButton,
      skipButtonStyle = props.skipButtonStyle,
      orientation = props.orientation,
      nextLabel = props.nextLabel,
      skipLabel = props.skipLabel,
      doneLabel = props.doneLabel,
      controllerIconActive = props.controllerIconActive,
      controllerIconInactive = props.controllerIconInactive;

  var controllerIcons = [];
  var nextDefaultLabel = activeSlide === slides - 1 ? doneLabel || "DONE" : "NEXT";
  var skipDefaultLabel = "SKIP";
  for (var i = 0; i < slides; i += 1) {
    if (activeSlide === i) {
      controllerIcons.push(controllerIconActive || _react2.default.createElement("div", {
        key: i,
        style: controllerIconActiveStyle,
        className: "ris-bullet ris-bullet-active"
      }));
    } else {
      controllerIcons.push(controllerIconInactive || _react2.default.createElement("div", {
        key: i,
        style: controllerIconInactiveStyle,
        className: "ris-bullet ris-bullet-inactive"
      }));
    }
  }
  var renderVerticalController = function renderVerticalController() {
    return _react2.default.createElement(
      "div",
      { className: "ris-controller-container ris-controller-vertical" },
      _react2.default.createElement(
        "div",
        { className: "ris-slide-icons-container" },
        controllerIcons
      ),
      nextButton && _react2.default.createElement(
        "button",
        {
          type: "button",
          className: "ris-control-button ris-button-vertical",
          onClick: nextSlide,
          style: nextButtonStyle
        },
        nextLabel || nextDefaultLabel
      ),
      skipButton && _react2.default.createElement(
        "button",
        {
          type: "button",
          className: "ris-control-button ris-button-vertical",
          onClick: skipSlider,
          style: skipButtonStyle
        },
        skipLabel || skipDefaultLabel
      )
    );
  };
  var renderHorizontalController = function renderHorizontalController() {
    return _react2.default.createElement(
      "div",
      { className: "ris-controller-container ris-controller-horizontal" },
      _react2.default.createElement(
        "div",
        { className: "ris-slide-icons-container" },
        controllerIcons
      ),
      skipButton && _react2.default.createElement(
        "button",
        {
          type: "button",
          className: "ris-control-button ris-button-horizontal",
          onClick: skipSlider,
          style: skipButtonStyle
        },
        skipLabel || skipDefaultLabel
      ),
      nextButton && _react2.default.createElement(
        "button",
        {
          type: "button",
          className: "ris-control-button ris-button-horizontal",
          onClick: nextSlide,
          style: nextButtonStyle
        },
        nextLabel || nextDefaultLabel
      )
    );
  };

  return orientation === "vertical" ? renderVerticalController() : renderHorizontalController();
};

Controller.propTypes = {
  activeSlide: _propTypes2.default.number,
  slides: _propTypes2.default.number,
  nextButton: _propTypes2.default.bool,
  nextSlide: _propTypes2.default.func,
  skipButton: _propTypes2.default.bool,
  skipSlider: _propTypes2.default.func,
  skipButtonStyle: _propTypes2.default.object,
  nextButtonStyle: _propTypes2.default.object,
  orientation: _propTypes2.default.string,
  controllerIconActiveStyle: _propTypes2.default.object,
  controllerIconInactiveStyle: _propTypes2.default.object,
  skilLabel: _propTypes2.default.string,
  nextLabel: _propTypes2.default.string,
  doneLabel: _propTypes2.default.string,
  controllerIconActive: _propTypes2.default.node,
  controllerIconInactive: _propTypes2.default.node
};

exports.default = Controller;