react-slidy/lib/react-slidy-slider.js

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

"use strict";

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

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

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

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

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

var _slidy = _interopRequireDefault(require("./slidy"));

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

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

function noop(_) {}

function convertToArrayFrom(children) {
  return Array.isArray(children) ? children : [children];
}

function getItemsToRender(_ref) {
  var index = _ref.index,
      maxIndex = _ref.maxIndex,
      items = _ref.items,
      itemsToPreload = _ref.itemsToPreload,
      numOfSlides = _ref.numOfSlides;
  var preload = Math.max(itemsToPreload, numOfSlides);

  if (index >= items.length - numOfSlides) {
    var addNewItems = items.length > numOfSlides ? items.slice(0, numOfSlides - 1) : [];
    return [].concat(items.slice(0, maxIndex + preload), addNewItems);
  } else {
    return items.slice(0, maxIndex + preload);
  }
}

function destroySlider(slidyInstance, doAfterDestroy) {
  slidyInstance && slidyInstance.clean() && slidyInstance.destroy();
  doAfterDestroy();
}

var renderItem = function renderItem(numOfSlides) {
  return function (item, index) {
    var inlineStyle = numOfSlides !== 1 ? {
      width: 100 / numOfSlides + "%"
    } : {};
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
      style: inlineStyle,
      children: item
    }, index);
  };
};

function ReactSlidySlider(_ref2) {
  var ArrowLeft = _ref2.ArrowLeft,
      ArrowRight = _ref2.ArrowRight,
      children = _ref2.children,
      classNameBase = _ref2.classNameBase,
      doAfterDestroy = _ref2.doAfterDestroy,
      doAfterInit = _ref2.doAfterInit,
      doAfterSlide = _ref2.doAfterSlide,
      doBeforeSlide = _ref2.doBeforeSlide,
      ease = _ref2.ease,
      infiniteLoop = _ref2.infiniteLoop,
      initialSlide = _ref2.initialSlide,
      itemsToPreload = _ref2.itemsToPreload,
      keyboardNavigation = _ref2.keyboardNavigation,
      numOfSlides = _ref2.numOfSlides,
      showArrows = _ref2.showArrows,
      slide = _ref2.slide,
      slideSpeed = _ref2.slideSpeed;

  var _useState = (0, _react.useState)({
    goTo: noop,
    next: noop,
    prev: noop,
    updateItems: noop
  }),
      slidyInstance = _useState[0],
      setSlidyInstance = _useState[1];

  var _useState2 = (0, _react.useState)(initialSlide),
      index = _useState2[0],
      setIndex = _useState2[1];

  var _useState3 = (0, _react.useState)(initialSlide),
      maxIndex = _useState3[0],
      setMaxIndex = _useState3[1];

  var sliderContainerDOMEl = (0, _react.useRef)(null);
  var slidesDOMEl = (0, _react.useRef)(null);
  var items = convertToArrayFrom(children);
  (0, _react.useEffect)(function () {
    slide !== index && slidyInstance.goTo(slide);
  }, [slide] // eslint-disable-line
  );
  (0, _react.useEffect)(function () {
    var handleKeyboard;
    var slidyInstance = (0, _slidy["default"])(sliderContainerDOMEl.current, {
      ease: ease,
      doAfterSlide: doAfterSlide,
      doBeforeSlide: doBeforeSlide,
      numOfSlides: numOfSlides,
      slideSpeed: slideSpeed,
      infiniteLoop: infiniteLoop,
      slidesDOMEl: slidesDOMEl.current,
      initialSlide: index,
      items: items.length,
      onNext: function onNext(nextIndex) {
        setIndex(nextIndex);
        nextIndex > maxIndex && setMaxIndex(nextIndex);
        return nextIndex;
      },
      onPrev: function onPrev(nextIndex) {
        setIndex(nextIndex);
        return nextIndex;
      }
    });
    setSlidyInstance(slidyInstance);
    doAfterInit();

    if (keyboardNavigation) {
      handleKeyboard = function handleKeyboard(e) {
        if (e.keyCode === 39) slidyInstance.next(e);else if (e.keyCode === 37) slidyInstance.prev(e);
      };

      document.addEventListener('keydown', handleKeyboard);
    }

    return function () {
      destroySlider(slidyInstance, doAfterDestroy);

      if (keyboardNavigation) {
        document.removeEventListener('keydown', handleKeyboard);
      }
    };
  }, [] // eslint-disable-line
  );
  (0, _react.useEffect)(function () {
    slidyInstance && slidyInstance.updateItems(items.length);
  });
  var itemsToRender = getItemsToRender({
    index: index,
    maxIndex: maxIndex,
    items: items,
    itemsToPreload: itemsToPreload,
    numOfSlides: numOfSlides
  });

  var handlePrev = function handlePrev(e) {
    return slidyInstance.prev(e);
  };

  var handleNext = function handleNext(e) {
    return items.length > numOfSlides && slidyInstance.next(e);
  };

  var renderLeftArrow = function renderLeftArrow() {
    var disabled = index === 0 && !infiniteLoop;
    var props = {
      disabled: disabled,
      onClick: handlePrev
    };
    var leftArrowClasses = classNameBase + "-arrow " + classNameBase + "-arrowLeft";
    if (ArrowLeft) return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowLeft, (0, _extends2["default"])({}, props, {
      className: leftArrowClasses
    }));
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _extends2["default"])({
      "aria-label": "Previous",
      className: leftArrowClasses + " " + classNameBase + "-prev",
      role: "button"
    }, props));
  };

  var renderRightArrow = function renderRightArrow() {
    var disabled = (items.length <= numOfSlides || index === items.length - 1) && !infiniteLoop;
    var props = {
      disabled: disabled,
      onClick: handleNext
    };
    var rightArrowClasses = classNameBase + "-arrow " + classNameBase + "-arrowRight";
    if (ArrowRight) return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArrowRight, (0, _extends2["default"])({}, props, {
      className: rightArrowClasses
    }));
    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _extends2["default"])({
      "aria-label": "Next",
      className: rightArrowClasses + " " + classNameBase + "-next",
      role: "button"
    }, props));
  };

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [showArrows && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [renderLeftArrow(), renderRightArrow()]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ref: sliderContainerDOMEl,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
        ref: slidesDOMEl,
        children: itemsToRender.map(renderItem(numOfSlides))
      })
    })]
  });
}