react-slidy/lib/index.js

🍃 React Slidy - Minimalistic and smooth touch slider component for React ⚛️

"use strict";

var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _interopRequireWildcard2 = _interopRequireDefault(require("@babel/runtime/helpers/interopRequireWildcard"));

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

var _reactSlidySlider = _interopRequireDefault(require("./react-slidy-slider"));

var _jsxRuntime = require("react/jsx-runtime");

var __jsx = _react["default"].createElement;

function noop() {}

var CLASSNAMES = {
  contain: 'react-Slidy--contain',
  cover: 'react-Slidy--cover',
  fullHeight: 'react-Slidy--fullHeight',
  fullWidth: 'react-Slidy--fullWidth'
};

var ReactSlidy = function ReactSlidy(_ref) {
  var ArrowLeft = _ref.ArrowLeft,
      ArrowRight = _ref.ArrowRight,
      children = _ref.children,
      _ref$classNameBase = _ref.classNameBase,
      classNameBase = _ref$classNameBase === void 0 ? 'react-Slidy' : _ref$classNameBase,
      _ref$doAfterDestroy = _ref.doAfterDestroy,
      doAfterDestroy = _ref$doAfterDestroy === void 0 ? noop : _ref$doAfterDestroy,
      _ref$doAfterInit = _ref.doAfterInit,
      doAfterInit = _ref$doAfterInit === void 0 ? noop : _ref$doAfterInit,
      _ref$doAfterSlide = _ref.doAfterSlide,
      doAfterSlide = _ref$doAfterSlide === void 0 ? noop : _ref$doAfterSlide,
      _ref$doBeforeSlide = _ref.doBeforeSlide,
      doBeforeSlide = _ref$doBeforeSlide === void 0 ? noop : _ref$doBeforeSlide,
      imageObjectFit = _ref.imageObjectFit,
      _ref$infiniteLoop = _ref.infiniteLoop,
      infiniteLoop = _ref$infiniteLoop === void 0 ? false : _ref$infiniteLoop,
      _ref$itemsToPreload = _ref.itemsToPreload,
      itemsToPreload = _ref$itemsToPreload === void 0 ? 1 : _ref$itemsToPreload,
      _ref$initialSlide = _ref.initialSlide,
      initialSlide = _ref$initialSlide === void 0 ? 0 : _ref$initialSlide,
      _ref$ease = _ref.ease,
      ease = _ref$ease === void 0 ? 'ease' : _ref$ease,
      _ref$lazyLoadSlider = _ref.lazyLoadSlider,
      lazyLoadSlider = _ref$lazyLoadSlider === void 0 ? true : _ref$lazyLoadSlider,
      _ref$lazyLoadConfig = _ref.lazyLoadConfig,
      lazyLoadConfig = _ref$lazyLoadConfig === void 0 ? {
    offset: 150
  } : _ref$lazyLoadConfig,
      _ref$keyboardNavigati = _ref.keyboardNavigation,
      keyboardNavigation = _ref$keyboardNavigati === void 0 ? false : _ref$keyboardNavigati,
      _ref$numOfSlides = _ref.numOfSlides,
      numOfSlides = _ref$numOfSlides === void 0 ? 1 : _ref$numOfSlides,
      _ref$sanitize = _ref.sanitize,
      sanitize = _ref$sanitize === void 0 ? true : _ref$sanitize,
      _ref$slide = _ref.slide,
      slide = _ref$slide === void 0 ? 0 : _ref$slide,
      _ref$slideSpeed = _ref.slideSpeed,
      slideSpeed = _ref$slideSpeed === void 0 ? 500 : _ref$slideSpeed,
      _ref$showArrows = _ref.showArrows,
      showArrows = _ref$showArrows === void 0 ? true : _ref$showArrows,
      _ref$useFullHeight = _ref.useFullHeight,
      useFullHeight = _ref$useFullHeight === void 0 ? false : _ref$useFullHeight,
      _ref$useFullWidth = _ref.useFullWidth,
      useFullWidth = _ref$useFullWidth === void 0 ? true : _ref$useFullWidth;

  var _useState = (0, _react.useState)(!lazyLoadSlider),
      showSlider = _useState[0],
      setShowSlider = _useState[1];

  var nodeEl = (0, _react.useRef)(null);
  (0, _react.useEffect)(function () {
    var observer;

    if (lazyLoadSlider) {
      var initLazyLoadSlider = function initLazyLoadSlider() {
        // if we support IntersectionObserver, let's use it
        var _lazyLoadConfig$offse = lazyLoadConfig.offset,
            offset = _lazyLoadConfig$offse === void 0 ? 0 : _lazyLoadConfig$offse;
        observer = new window.IntersectionObserver(handleIntersection, {
          rootMargin: offset + "px 0px 0px"
        });
        observer.observe(nodeEl.current);
      };

      if (!('IntersectionObserver' in window)) {
        Promise.resolve().then(function () {
          return (0, _interopRequireWildcard2["default"])(require('intersection-observer'));
        }).then(initLazyLoadSlider);
      } else {
        initLazyLoadSlider();
      }
    }

    return function () {
      return observer && observer.disconnect();
    };
  }, [] // eslint-disable-line
  );

  var handleIntersection = function handleIntersection(_ref2, observer) {
    var entry = _ref2[0];

    if (entry.isIntersecting || entry.intersectionRatio > 0) {
      observer.unobserve(entry.target);
      setShowSlider(true);
    }
  };

  var numOfSlidesSanitzed = Math.min(numOfSlides, _react["default"].Children.count(children));
  var rootClassName = [classNameBase, useFullHeight && CLASSNAMES.fullHeight, useFullWidth && CLASSNAMES.fullWidth, imageObjectFit && CLASSNAMES[imageObjectFit]].filter(Boolean).join(' ');
  var reactSlidySliderProps = {
    ArrowLeft: ArrowLeft,
    ArrowRight: ArrowRight,
    children: children,
    classNameBase: classNameBase,
    doAfterDestroy: doAfterDestroy,
    doAfterInit: doAfterInit,
    doAfterSlide: doAfterSlide,
    doBeforeSlide: doBeforeSlide,
    ease: ease,
    infiniteLoop: infiniteLoop,
    initialSlide: initialSlide,
    itemsToPreload: itemsToPreload,
    keyboardNavigation: keyboardNavigation,
    numOfSlides: numOfSlides,
    showArrows: showArrows,
    slide: slide,
    slideSpeed: slideSpeed
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: rootClassName,
    ref: nodeEl,
    children: showSlider && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactSlidySlider["default"], (0, _extends2["default"])({}, reactSlidySliderProps, {
      numOfSlides: sanitize ? numOfSlidesSanitzed : numOfSlides,
      children: children
    }))
  });
};

var _default = ReactSlidy;
exports["default"] = _default;