ac-react-simple-image-slider/dist/Slider.js

A simple image slider built with React, emotion and hooks

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

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

var _range = _interopRequireDefault(require("lodash/range"));

var _Slider = require("./Slider.styles");

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(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"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var SliderContext = _react.default.createContext();

var useSliderContext = function useSliderContext() {
  var context = (0, _react.useContext)(SliderContext);

  if (!context) {
    throw new Error("Slider compound components cannot be rendered outside the Slider component");
  }

  return context;
};

var buildImages = function buildImages(data, currentIndex, itemStyle) {
  if (Array.isArray(data) && data.length > 0) {
    return data.map(function (slide, index) {
      return _react.default.createElement(_Slider.SlideImage, {
        style: itemStyle,
        className: "slideImage",
        isActive: currentIndex === index,
        key: index,
        src: slide.src,
        alt: slide.title,
        "data-qa-node": "SlideImage"
      });
    });
  }

  return null;
};

var Slider = function Slider(_ref) {
  var slides = _ref.slides,
      initialIndex = _ref.initialIndex,
      infinite = _ref.infinite,
      autoPlay = _ref.autoPlay,
      duration = _ref.duration,
      showArrows = _ref.showArrows,
      showDots = _ref.showDots,
      elementWrapperStyles = _ref.elementWrapperStyles,
      itemStyles = _ref.itemStyles,
      rest = _objectWithoutProperties(_ref, ["slides", "initialIndex", "infinite", "autoPlay", "duration", "showArrows", "showDots", "elementWrapperStyles", "itemStyles"]);

  // Declare a new variable to count slides
  var slideCount = slides ? slides.length : 0; // Check if there is any slide

  if (!slideCount) {
    return _react.default.createElement("div", {
      "data-qa-node": "div"
    }, "No slides");
  } // Declare a new state variable, which we'll call "currentIndex"


  var _useState = (0, _react.useState)(initialIndex),
      _useState2 = _slicedToArray(_useState, 2),
      currentIndex = _useState2[0],
      setIndex = _useState2[1]; // Set autoplay


  (0, _react.useEffect)(function () {
    if (autoPlay) {
      setInterval(function () {
        nextSlide();
      }, duration * 1000);
    }
  }, [slides]); // Next slide callback

  var nextSlide = function nextSlide() {
    setIndex(function (oldIndex) {
      return oldIndex === slideCount - 1 ? 0 : oldIndex + 1;
    });
  }; // Previous slide callback


  var prevSlide = function prevSlide() {
    setIndex(function (oldIndex) {
      return currentIndex > 0 ? oldIndex - 1 : infinite ? slideCount - 1 : 0;
    });
  };

  return _react.default.createElement(SliderContext.Provider, {
    value: {
      currentIndex: currentIndex,
      slideCount: slideCount,
      slides: slides,
      autoPlay: autoPlay,
      duration: duration,
      nav: {
        showDots: showDots,
        showArrows: showArrows,
        onNext: nextSlide,
        onPrev: prevSlide,
        setIndex: setIndex
      },
      styles: {
        wrapper: elementWrapperStyles,
        item: itemStyles
      }
    }
  }, rest.children);
};

Slider.LeftArrow = function (_ref2) {
  var children = _ref2.children;

  var _useSliderContext = useSliderContext(),
      nav = _useSliderContext.nav;

  return nav.showArrows ? _react.default.createElement(_Slider.ArrowLeft, {
    onClick: nav.onPrev,
    "data-qa-node": "ArrowLeft"
  }, children) : null;
};

Slider.RightArrow = function (_ref3) {
  var children = _ref3.children;

  var _useSliderContext2 = useSliderContext(),
      nav = _useSliderContext2.nav;

  return nav.showArrows ? _react.default.createElement(_Slider.ArrowRight, {
    onClick: nav.onNext,
    "data-qa-node": "ArrowRight"
  }, children) : null;
};

Slider.Content = function () {
  var _useSliderContext3 = useSliderContext(),
      currentIndex = _useSliderContext3.currentIndex,
      autoPlay = _useSliderContext3.autoPlay,
      duration = _useSliderContext3.duration,
      slideCount = _useSliderContext3.slideCount,
      slides = _useSliderContext3.slides,
      styles = _useSliderContext3.styles;

  return slideCount ? _react.default.createElement(_Slider.ElementWrapper, {
    style: styles.wrapper,
    isAutoPlay: autoPlay,
    duration: duration,
    "data-qa-node": "ElementWrapper"
  }, buildImages(slides, currentIndex, styles.item)) : null;
};

Slider.Dots = function () {
  var _useSliderContext4 = useSliderContext(),
      nav = _useSliderContext4.nav,
      slideCount = _useSliderContext4.slideCount,
      currentIndex = _useSliderContext4.currentIndex;

  return nav.showDots ? _react.default.createElement(_Slider.SliderFooter, {
    "data-qa-node": "SliderFooter"
  }, (0, _range.default)(slideCount).map(function (item) {
    return _react.default.createElement(_Slider.Dot, {
      key: item,
      selected: item === currentIndex,
      onClick: function onClick() {
        return nav.setIndex(item);
      },
      "data-qa-node": "Dot"
    });
  })) : null;
};

Slider.propTypes = {
  initialIndex: _propTypes.default.number,
  slides: _propTypes.default.arrayOf(_propTypes.default.object),
  data: _propTypes.default.arrayOf(_propTypes.default.object),
  showArrows: _propTypes.default.bool,
  showDots: _propTypes.default.bool,
  infinite: _propTypes.default.bool,
  autoPlay: _propTypes.default.bool,
  duration: _propTypes.default.number,
  elementWrapperStyles: _propTypes.default.oneOfType([_propTypes.default.object]),
  itemStyles: _propTypes.default.oneOfType([_propTypes.default.object])
};
Slider.defaultProps = {
  initialIndex: 0,
  data: null,
  showArrows: true,
  showDots: true,
  infinite: false,
  autoPlay: true,
  duration: 3
};
var _default = Slider;
exports.default = _default;