react-stacked-center-carousel/dist/index.modern.js

A responsive, performant, well animated, swipeable, center mode carousel that stacks its slide

import React from 'react';
import { useResizeDetector } from 'react-resize-detector';

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;

  _setPrototypeOf(subClass, superClass);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _createForOfIteratorHelperLoose(o, allowArrayLike) {
  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
  if (it) return (it = it.call(o)).next.bind(it);

  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
    if (it) o = it;
    var i = 0;
    return function () {
      if (i >= o.length) return {
        done: true
      };
      return {
        done: false,
        value: o[i++]
      };
    };
  }

  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

var StackedCarousel = /*#__PURE__*/function (_React$PureComponent) {
  _inheritsLoose(StackedCarousel, _React$PureComponent);

  function StackedCarousel(props) {
    var _this;

    _this = _React$PureComponent.call(this, props) || this;

    _this.validateProps = function () {
      var _this$props = _this.props,
          swipeSpeed = _this$props.swipeSpeed,
          currentVisibleSlide = _this$props.currentVisibleSlide,
          maxVisibleSlide = _this$props.maxVisibleSlide,
          fadeDistance = _this$props.fadeDistance,
          customScales = _this$props.customScales,
          data = _this$props.data;

      if (data.length < (maxVisibleSlide + 1) / 2) {
        throw Error('you must have more than (maxVisibleSlide + 1) / 2 data item');
      }

      if (currentVisibleSlide && currentVisibleSlide % 2 !== 1 || maxVisibleSlide % 2 !== 1) {
        throw Error('currentVisibleSlide or maxVisibleSlide must be an odd number');
      }

      if (currentVisibleSlide && currentVisibleSlide > maxVisibleSlide) {
        throw Error('currentVisibleSlide must be smaller than maxVisibleSlide');
      }

      if (fadeDistance !== undefined) {
        if (fadeDistance > 1 || fadeDistance < 0) {
          throw Error('fadeDistance is a percentage value in the range of 0 - 1');
        }
      }

      if (customScales && customScales.length !== (maxVisibleSlide + 3) / 2) {
        throw Error('customScales must have lengh (maxVisibleSlide + 3) / 2');
      }

      if (swipeSpeed && (swipeSpeed > 0.99 || swipeSpeed < 0.01)) {
        throw Error('swipeSpeed must have a value between 0.01 and 0.99');
      }
    };

    _this.initializeProperties = function (constructor) {
      if (constructor === void 0) {
        constructor = false;
      }

      _this.validateProps();

      var _this$props2 = _this.props,
          carouselWidth = _this$props2.carouselWidth,
          slideWidth = _this$props2.slideWidth,
          currentVisibleDisplaySlide = _this$props2.currentVisibleSlide,
          maxVisibleSlide = _this$props2.maxVisibleSlide;
      var currentVisibleSlides = currentVisibleDisplaySlide || maxVisibleSlide;
      var visibleSlidePerSide = (currentVisibleSlides - 1) / 2;
      var slidePerSide = Math.max(visibleSlidePerSide + 1, 1);
      var totalRenderCount = maxVisibleSlide + 2;
      var renderedSlidePerSide = (maxVisibleSlide + 1) / 2;

      var _this$calculateScaleA = _this.calculateScaleAndOffsets(slidePerSide),
          offsets = _this$calculateScaleA.offsets,
          scaledOffsets = _this$calculateScaleA.scaledOffsets,
          scales = _this$calculateScaleA.scales;

      var newRenderedSlides = constructor ? Array(totalRenderCount).fill(null) : _this.state.renderedSlides.filter(function (_ref) {
        var slideIndex = _ref.slideIndex,
            dataIndex = _ref.dataIndex;
        return dataIndex === -1 || Math.abs(slideIndex) <= _this.slidePerSide;
      });
      var slideInfoMap = {};
      var newCenterSlideRelativeIndex = constructor ? (totalRenderCount - 1) / 2 : newRenderedSlides.findIndex(function (_ref2) {
        var slideIndex = _ref2.slideIndex;
        return slideIndex === 0;
      });
      var newCenterDataIndex = constructor ? 0 : newRenderedSlides[newCenterSlideRelativeIndex].dataIndex;
      var filledWidth = 0;
      var centerPosition = carouselWidth / 2 - slideWidth / 2;

      var _loop = function _loop(absIndex) {
        var offset = offsets[absIndex];
        var slideScale = scales[absIndex];
        var currentOffSet = filledWidth + offset;
        [-absIndex, absIndex].forEach(function (slideIndex) {
          var relativeIndex = newCenterSlideRelativeIndex + slideIndex;
          var position = slideIndex >= 0 ? currentOffSet : -currentOffSet;
          var opacity = absIndex === slidePerSide ? 0 : 1;

          var dataIndex = _this.modDataRange(newCenterDataIndex + slideIndex);

          newRenderedSlides[relativeIndex] = {
            dataIndex: dataIndex,
            scale: slideScale,
            position: position,
            slideIndex: slideIndex,
            opacity: opacity,
            zIndex: renderedSlidePerSide - Math.abs(slideIndex),
            key: constructor ? slideIndex : newRenderedSlides[relativeIndex].key
          };
          slideInfoMap[slideIndex] = {
            position: position,
            scale: slideScale,
            opacity: opacity
          };
        });
        if (absIndex !== 0) filledWidth += scaledOffsets[absIndex];
      };

      for (var absIndex = 0; absIndex <= slidePerSide; absIndex++) {
        _loop(absIndex);
      }

      for (var i = -slidePerSide; i <= slidePerSide; i++) {
        slideInfoMap[i].maxTransformDistance = {};
        slideInfoMap[i].maxTransformScale = {};
        slideInfoMap[i].maxTransformOpacity = {
          left: i === -slidePerSide + 1 || i === slidePerSide ? 1 : 0,
          right: i === -slidePerSide || i === slidePerSide - 1 ? 1 : 0
        };
        slideInfoMap[i].slideIndex = i;

        if (i === -slidePerSide) {
          slideInfoMap[i].maxTransformDistance.left = 0;
          slideInfoMap[i].maxTransformScale.left = 0;
        } else {
          slideInfoMap[i].maxTransformDistance.left = slideInfoMap[i].position - slideInfoMap[i - 1].position;
          slideInfoMap[i].maxTransformScale.left = Math.abs(slideInfoMap[i].scale - slideInfoMap[i - 1].scale);
        }

        if (i === slidePerSide) {
          slideInfoMap[i].maxTransformDistance.right = 0;
          slideInfoMap[i].maxTransformScale.right = 0;
        } else {
          slideInfoMap[i].maxTransformDistance.right = slideInfoMap[i + 1].position - slideInfoMap[i].position;
          slideInfoMap[i].maxTransformScale.right = Math.abs(slideInfoMap[i + 1].scale - slideInfoMap[i].scale);
        }
      }

      if (maxVisibleSlide > currentVisibleSlides) {
        var maxRenderedSlidePerSide = (maxVisibleSlide + 1) / 2;
        var currentSlidePerSide = slidePerSide;

        for (var _i = currentSlidePerSide + 1; _i <= maxRenderedSlidePerSide; _i++) {
          for (var direct = 1; direct >= 0; direct--) {
            var insertIndex = newCenterSlideRelativeIndex + (direct === 1 ? _i : -_i);
            var prevIndex = insertIndex + (direct === 1 ? -1 : 1);
            var slideIndex = direct === 1 ? _i : -_i;
            var scalePositionIndex = constructor ? prevIndex : insertIndex;
            newRenderedSlides[insertIndex] = {
              scale: newRenderedSlides[scalePositionIndex].scale,
              position: newRenderedSlides[scalePositionIndex].position,
              key: constructor ? -slideIndex : newRenderedSlides[insertIndex].key,
              dataIndex: -1,
              slideIndex: slideIndex,
              opacity: 0,
              zIndex: 0
            };
          }
        }
      }

      var sortedSlideInfo = Object.values(slideInfoMap);
      sortedSlideInfo.sort(function (slide1, slide2) {
        return slide1.position - slide2.position;
      });
      return {
        renderedSlides: newRenderedSlides,
        centerSlideRelativeIndex: newCenterSlideRelativeIndex,
        slideInfoMap: slideInfoMap,
        slidePerSide: slidePerSide,
        newRenderedSlides: newRenderedSlides,
        sortedSlideInfo: sortedSlideInfo,
        centerPosition: centerPosition,
        renderedSlidePerSide: renderedSlidePerSide
      };
    };

    _this.calculateScaleAndOffsets = function (slidePerSide) {
      var _this$props3 = _this.props,
          carouselWidth = _this$props3.carouselWidth,
          slideWidth = _this$props3.slideWidth,
          customScales = _this$props3.customScales,
          fadeDistance = _this$props3.fadeDistance;
      var availableSpace = carouselWidth / 2 - slideWidth / 2;
      var scales = [1];
      var scaledSlideWidths = [slideWidth];

      for (var slide = 1; slide <= slidePerSide; slide++) {
        var scale = customScales ? customScales[slide] : Math.pow(StackedCarousel.defaultScaleFactor, slide);
        scales.push(scale);
        scaledSlideWidths.push(slideWidth * scale);
      }

      var includedSlideWidths = scaledSlideWidths.slice(1);
      var fillingSpace = availableSpace;

      if (fadeDistance !== undefined) {
        includedSlideWidths = scaledSlideWidths.slice(1, slidePerSide);
        fillingSpace = availableSpace * (1 - fadeDistance);
      }

      var totalSlideWidth = includedSlideWidths.reduce(function (a, b) {
        return a + b;
      }, 0);
      var offSetPercentage = totalSlideWidth ? fillingSpace / totalSlideWidth : 0;
      var scaledOffsets = [0];
      var offsets = [0];

      for (var _slide = 1; _slide <= slidePerSide; _slide++) {
        var isCustomFade = fadeDistance !== undefined && _slide === slidePerSide;
        var _scale = scales[_slide];
        scaledOffsets[_slide] = isCustomFade ? fadeDistance * availableSpace : slideWidth * _scale * offSetPercentage;
        offsets[_slide] = scaledOffsets[_slide] + slideWidth * ((1 - _scale) / 2);
      }

      return {
        offsets: offsets,
        scaledOffsets: scaledOffsets,
        scales: scales
      };
    };

    _this.getZIndex = function (slideIndex) {
      return _this.renderedSlidePerSide - Math.abs(slideIndex);
    };

    _this.updateHeight = function () {
      var height = _this.props.height;
      if (height) return;

      var _this$getSlideDOMInfo = _this.getSlideDOMInfo(0),
          slideDOM = _this$getSlideDOMInfo.slideDOM;

      var parsedHeight = parseInt(window.getComputedStyle(slideDOM).height);

      if (parsedHeight !== _this.height) {
        _this.height = parsedHeight;

        _this.forceUpdate();
      }
    };

    _this.modDataRange = function (n) {
      var data = _this.props.data;
      var m = data.length;
      return (n % m + m) % m;
    };

    _this.debouncedClearInvisibleSlide = function () {
      var transitionTime = _this.props.transitionTime;
      clearTimeout(_this.clearSlideTimeout);
      _this.clearSlideTimeout = setTimeout(_this.clearUselessSlide, transitionTime !== undefined ? transitionTime : StackedCarousel.defaultTransitionTime);
    };

    _this.clearUselessSlide = function () {
      _this.addedSlide = 0;
      var renderedSlides = _this.state.renderedSlides;
      var newRenderedSlides = renderedSlides.filter(function (_ref3) {
        var slideIndex = _ref3.slideIndex,
            dataIndex = _ref3.dataIndex;
        var absoluteSlideIndex = Math.abs(slideIndex);

        if (absoluteSlideIndex <= _this.slidePerSide || dataIndex === -1) {
          return true;
        }

        return false;
      });

      _this.setState({
        renderedSlides: newRenderedSlides
      });
    };

    _this.safeGetSlideInfo = function (slideIndex) {
      var positionIndex = slideIndex;

      if (positionIndex > _this.slidePerSide) {
        positionIndex = _this.slidePerSide;
      } else if (positionIndex < -_this.slidePerSide) {
        positionIndex = -_this.slidePerSide;
      }

      return _this.slideInfoMap[positionIndex];
    };

    _this.getInsertionInfo = function (steps) {
      var newAddedSlideIndex = steps > 0 ? _this.slidePerSide - steps + 1 : -_this.slidePerSide - steps - 1;
      var targetSlideIndex = steps > 0 ? _this.slidePerSide : -_this.slidePerSide;

      var requireMoreSlide = function requireMoreSlide(current, target) {
        return steps > 0 ? current <= target : current >= target;
      };

      var updateCount = steps > 0 ? 1 : -1;
      return {
        newAddedSlideIndex: newAddedSlideIndex,
        targetSlideIndex: targetSlideIndex,
        requireMoreSlide: requireMoreSlide,
        updateCount: updateCount
      };
    };

    _this.moveCarousel = function (steps, disableSwipeRightState) {
      if (disableSwipeRightState === void 0) {
        disableSwipeRightState = false;
      }

      var renderedSlides = _this.state.renderedSlides;
      var onActiveSlideChange = _this.props.onActiveSlideChange;
      var newCenterDataIndex = 0;
      var newSlides = renderedSlides.map(function (oldSlide) {
        var slideIndex = oldSlide.slideIndex,
            dataIndex = oldSlide.dataIndex;
        if (dataIndex === -1) return oldSlide;
        if (slideIndex === 0) newCenterDataIndex = _this.modDataRange(dataIndex + steps);
        var newSlideIndex = slideIndex + -steps;

        var slideInfo = _this.safeGetSlideInfo(newSlideIndex);

        return _extends({}, oldSlide, {
          slideIndex: newSlideIndex,
          position: slideInfo.position,
          scale: slideInfo.scale,
          opacity: slideInfo.opacity,
          zIndex: _this.getZIndex(newSlideIndex)
        });
      });

      if (steps !== 0) {
        (function () {
          var maxSlideIndex = steps > 0 ? _this.slidePerSide : -_this.slidePerSide;
          _this.addedSlide += Math.abs(steps);

          var insertionInfo = _this.getInsertionInfo(steps);

          var newAddedSlideIndex = insertionInfo.newAddedSlideIndex;
          var requireMoreSlide = insertionInfo.requireMoreSlide,
              updateCount = insertionInfo.updateCount,
              targetSlideIndex = insertionInfo.targetSlideIndex;

          while (requireMoreSlide(newAddedSlideIndex, targetSlideIndex)) {
            var slideAlreadyExist = newSlides.find(function (_ref4) {
              var slideIndex = _ref4.slideIndex;
              return slideIndex === newAddedSlideIndex;
            });

            if (!slideAlreadyExist) {
              var insertPosition = newSlides.findIndex(function (_ref5) {
                var slideIndex = _ref5.slideIndex,
                    dataIndex = _ref5.dataIndex;
                return slideIndex === newAddedSlideIndex - updateCount && dataIndex !== -1;
              });
              var _this$slideInfoMap$ma = _this.slideInfoMap[maxSlideIndex],
                  scale = _this$slideInfoMap$ma.scale,
                  position = _this$slideInfoMap$ma.position;

              var insertDataIndex = _this.modDataRange(newSlides[insertPosition].dataIndex + updateCount);

              _this.keyCount += 1;

              var zIndex = _this.getZIndex(newAddedSlideIndex);

              var insertSlide = {
                scale: scale,
                position: position,
                opacity: 0,
                zIndex: zIndex - _this.addedSlide,
                slideIndex: newAddedSlideIndex,
                dataIndex: insertDataIndex,
                key: _this.keyCount
              };
              newSlides.splice(steps > 0 ? insertPosition + 1 : insertPosition, 0, insertSlide);
            }

            newAddedSlideIndex += updateCount;
          }
        })();
      }

      if (steps !== 0 && onActiveSlideChange) {
        onActiveSlideChange(newCenterDataIndex);
      }

      _this.setState(function () {
        return {
          swipeStarted: false,
          renderedSlides: newSlides,
          swipRight: disableSwipeRightState ? false : steps < 0 ? true : false
        };
      }, function () {
        setTimeout(function () {
          _this.resetSlides();
        }, 0);
      });
    };

    _this.getSlideDOMInfo = function (slideIndex) {
      var slideWidth = _this.props.slideWidth;
      var listRef = _this.listRef.current;
      var slideDOM = listRef.getElementsByClassName("react-stacked-center-carousel-slide-" + slideIndex)[0];
      var slideRect = slideDOM.getBoundingClientRect();

      var _listRef$getBoundingC = listRef.getBoundingClientRect(),
          carouselLeft = _listRef$getBoundingC.left;

      var scale = slideRect.width / slideWidth;
      var additionalOffset = slideWidth * 0.5 * (1 - scale);
      var slideOffsetLeft = slideRect.left - carouselLeft - additionalOffset;
      var slideCenterOffset = slideOffsetLeft - _this.centerPosition;
      return {
        scale: scale,
        slideDOM: slideDOM,
        slideCenterOffset: slideCenterOffset
      };
    };

    _this.getSlideScaleAndOpacity = function (centerOffset) {
      var targetSlide = _this.sortedSlideInfo.find(function (_ref6) {
        var position = _ref6.position;
        return Math.ceil(position) >= centerOffset;
      }) || _this.sortedSlideInfo[_this.sortedSlideInfo.length - 1];

      var position = targetSlide.position,
          slideIndex = targetSlide.slideIndex,
          scale = targetSlide.scale,
          maxTransformDistance = targetSlide.maxTransformDistance,
          maxTransformScale = targetSlide.maxTransformScale,
          maxTransformOpacity = targetSlide.maxTransformOpacity,
          opacity = targetSlide.opacity;
      var offset = Math.ceil(position) - centerOffset;
      var offsetPercentage = maxTransformDistance.left === 0 ? 0 : offset / maxTransformDistance.left * (slideIndex <= 0 ? -1 : 1);
      return {
        scale: scale + maxTransformScale.left * offsetPercentage,
        opacity: opacity + maxTransformOpacity.left * offsetPercentage
      };
    };

    _this.centerOffset = function (slideIndex) {
      var _this$getSlideDOMInfo2 = _this.getSlideDOMInfo(slideIndex),
          slideCenterOffset = _this$getSlideDOMInfo2.slideCenterOffset;

      return Math.abs(_this.slideInfoMap[0].position - slideCenterOffset);
    };

    _this.onSwipeStart = function (e) {
      var _this$props4 = _this.props,
          onActiveSlideChange = _this$props4.onActiveSlideChange,
          disableSwipe = _this$props4.disableSwipe;
      if (disableSwipe) return;

      var initalSwipeX = _this.getSwipeX(e);

      var renderedSlides = _this.state.renderedSlides;
      clearTimeout(_this.clearSlideTimeout);
      var shiftDirection = 0;
      var centerDataIndex = 0;
      if (_this.centerOffset(-1) < _this.centerOffset(0)) shiftDirection = 1;else if (_this.centerOffset(1) < _this.centerOffset(0)) shiftDirection = -1;
      var newRenderedSlides = [];
      var swipePositionInfo = [];

      for (var _iterator = _createForOfIteratorHelperLoose(renderedSlides), _step; !(_step = _iterator()).done;) {
        var slide = _step.value;
        var slideIndex = slide.slideIndex,
            dataIndex = slide.dataIndex;

        if (dataIndex === -1) {
          newRenderedSlides.push(slide);
          swipePositionInfo.push({
            slideIndex: slideIndex,
            maxLeft: 0,
            maxRight: 0
          });
          continue;
        }

        var newSlideIndex = slideIndex + shiftDirection;
        if (Math.abs(newSlideIndex) > _this.slidePerSide) continue;
        if (newSlideIndex === 0) centerDataIndex = dataIndex;

        var _this$getSlideDOMInfo3 = _this.getSlideDOMInfo(slideIndex),
            slideCenterOffset = _this$getSlideDOMInfo3.slideCenterOffset,
            scale = _this$getSlideDOMInfo3.scale;

        var _this$getSlideScaleAn = _this.getSlideScaleAndOpacity(slideCenterOffset),
            opacity = _this$getSlideScaleAn.opacity;

        var _this$safeGetSlideInf = _this.safeGetSlideInfo(newSlideIndex),
            maxTransformDistance = _this$safeGetSlideInf.maxTransformDistance,
            position = _this$safeGetSlideInf.position;

        swipePositionInfo.push({
          slideIndex: newSlideIndex,
          maxLeft: slideCenterOffset - position + maxTransformDistance.left,
          maxRight: position + maxTransformDistance.right - slideCenterOffset
        });
        newRenderedSlides.push(_extends({}, slide, {
          scale: scale,
          opacity: opacity,
          position: slideCenterOffset,
          slideIndex: newSlideIndex,
          zIndex: _this.getZIndex(newSlideIndex)
        }));
      }

      if (onActiveSlideChange && shiftDirection !== 0) {
        onActiveSlideChange(centerDataIndex);
      }

      _this.setState({
        swipeStarted: true,
        initalSwipeX: initalSwipeX,
        renderedSlides: newRenderedSlides,
        prevRenderedSlides: [].concat(newRenderedSlides),
        swipePositionInfo: swipePositionInfo
      });
    };

    _this.onSwipe = function (e) {
      var swipeStarted = _this.state.swipeStarted;

      if (!swipeStarted) {
        return;
      }

      var _this$state = _this.state,
          initalSwipeX = _this$state.initalSwipeX,
          prevRenderedSlides = _this$state.prevRenderedSlides,
          swipePositionInfo = _this$state.swipePositionInfo;
      var slideWidth = _this.props.slideWidth;
      var tempShift = false;

      var currentSwipeX = _this.getSwipeX(e);

      var swipeDistance = initalSwipeX - currentSwipeX;
      var delta = Math.abs(swipeDistance);
      var swipeLeft = swipeDistance > 0;
      var transformFactor = 10 / slideWidth * delta;
      var transformPercentage = 1 - Math.pow(1 - (_this.props.swipeSpeed || 0.5), transformFactor);
      var newRenderedSlides = prevRenderedSlides.map(function (slide, index) {
        var position = slide.position,
            slideIndex = slide.slideIndex,
            dataIndex = slide.dataIndex;
        if (dataIndex === -1) return slide;
        var maxDeltaX = swipePositionInfo[index][swipeLeft ? 'maxLeft' : 'maxRight'];
        var targetPosition = position + (swipeLeft ? -1 : 1) * maxDeltaX * transformPercentage;

        var _this$getSlideScaleAn2 = _this.getSlideScaleAndOpacity(targetPosition),
            scale = _this$getSlideScaleAn2.scale,
            opacity = _this$getSlideScaleAn2.opacity;

        var zIndex = slide.zIndex;

        if (Math.abs(slideIndex) === 1) {
          if (_this.centerOffset(slideIndex) < _this.centerOffset(0)) {
            zIndex = _this.maxZIndex;
            tempShift = true;
          }
        }

        return _extends({}, slide, {
          position: targetPosition,
          scale: scale,
          opacity: opacity,
          zIndex: zIndex
        });
      });

      _this.setState({
        renderedSlides: newRenderedSlides,
        tempShift: tempShift
      });
    };

    _this.resetSlides = function () {
      var renderedSlides = _this.state.renderedSlides;
      var newDefault = renderedSlides.map(function (slide) {
        var _this$safeGetSlideInf2 = _this.safeGetSlideInfo(slide.slideIndex),
            opacity = _this$safeGetSlideInf2.opacity,
            scale = _this$safeGetSlideInf2.scale,
            position = _this$safeGetSlideInf2.position;

        return _extends({}, slide, {
          zIndex: _this.getZIndex(slide.slideIndex),
          opacity: opacity,
          scale: scale,
          position: position
        });
      });

      _this.setState(function () {
        return {
          renderedSlides: newDefault,
          swipRight: false
        };
      }, _this.debouncedClearInvisibleSlide);
    };

    _this.onSwipeEnd = function () {
      var swipeStarted = _this.state.swipeStarted;
      if (!swipeStarted) return;
      var renderedSlides = _this.state.renderedSlides;
      var newCenterSlide = renderedSlides.find(function (_ref7) {
        var zIndex = _ref7.zIndex;
        return zIndex === _this.maxZIndex;
      });

      _this.moveCarousel((newCenterSlide === null || newCenterSlide === void 0 ? void 0 : newCenterSlide.slideIndex) || 0);

      _this.setState({
        tempShift: false
      });
    };

    _this.goNext = function () {
      _this.moveCarousel(1);
    };

    _this.goBack = function () {
      _this.moveCarousel(-1);
    };

    _this.swipeTo = function (steps) {
      _this.moveCarousel(steps);
    };

    var _this$initializePrope = _this.initializeProperties(true),
        renderedSlides = _this$initializePrope.renderedSlides,
        slideInfoMap = _this$initializePrope.slideInfoMap,
        slidePerSide = _this$initializePrope.slidePerSide,
        sortedSlideInfo = _this$initializePrope.sortedSlideInfo,
        centerPosition = _this$initializePrope.centerPosition,
        renderedSlidePerSide = _this$initializePrope.renderedSlidePerSide;

    var onActiveSlideChange = _this.props.onActiveSlideChange;
    _this.slideInfoMap = slideInfoMap;
    _this.sortedSlideInfo = sortedSlideInfo;
    _this.slidePerSide = slidePerSide;
    _this.height = _this.props.height || 0;
    _this.listRef = React.createRef();
    _this.clearSlideTimeout = null;
    _this.keyCount = props.data.length;
    _this.addedSlide = 0;
    _this.centerPosition = centerPosition;
    _this.maxZIndex = 100;
    _this.renderedSlidePerSide = renderedSlidePerSide;

    if (onActiveSlideChange) {
      onActiveSlideChange(0);
    }

    _this.state = {
      initalSwipeX: 0,
      swipeStarted: false,
      renderedSlides: renderedSlides,
      prevRenderedSlides: [].concat(renderedSlides),
      swipePositionInfo: [],
      swipRight: false,
      tempShift: false
    };
    return _this;
  }

  var _proto = StackedCarousel.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this.updateHeight();
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    clearTimeout(this.clearSlideTimeout);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (!shouldRecaclculate(this.props, prevProps)) return;

    var _this$initializePrope2 = this.initializeProperties(this.props.maxVisibleSlide !== prevProps.maxVisibleSlide),
        slideInfoMap = _this$initializePrope2.slideInfoMap,
        slidePerSide = _this$initializePrope2.slidePerSide,
        newRenderedSlides = _this$initializePrope2.newRenderedSlides,
        sortedSlideInfo = _this$initializePrope2.sortedSlideInfo,
        centerPosition = _this$initializePrope2.centerPosition;

    this.slideInfoMap = slideInfoMap;
    this.sortedSlideInfo = sortedSlideInfo;
    this.slidePerSide = slidePerSide;
    this.centerPosition = centerPosition;
    this.setState(function () {
      return {
        initalSwipeX: 0,
        renderedSlides: newRenderedSlides,
        prevRenderedSlides: [].concat(newRenderedSlides),
        swipRight: false
      };
    }, this.updateHeight);
  };

  _proto.getSwipeX = function getSwipeX(e) {
    if (e.type[0] === 'm') return e.clientX;

    try {
      var _e$touches$, _e$changedTouches$;

      return ((_e$touches$ = e.touches[0]) === null || _e$touches$ === void 0 ? void 0 : _e$touches$.clientX) || ((_e$changedTouches$ = e.changedTouches[0]) === null || _e$changedTouches$ === void 0 ? void 0 : _e$changedTouches$.clientX);
    } catch (_unused) {
      throw Error('Something went wrong with getting mouse position');
    }
  };

  _proto.render = function render() {
    var _this2 = this;

    var _this$state2 = this.state,
        swipeStarted = _this$state2.swipeStarted,
        renderedSlides = _this$state2.renderedSlides,
        swipRight = _this$state2.swipRight,
        tempShift = _this$state2.tempShift;
    var _this$props5 = this.props,
        Component = _this$props5.slideComponent,
        _this$props5$transiti = _this$props5.transitionTime,
        transitionTime = _this$props5$transiti === void 0 ? StackedCarousel.defaultTransitionTime : _this$props5$transiti,
        className = _this$props5.className,
        data = _this$props5.data,
        slideWidth = _this$props5.slideWidth,
        customTransition = _this$props5.customTransition,
        carouselWidth = _this$props5.carouselWidth,
        useGrabCursor = _this$props5.useGrabCursor,
        height = _this$props5.height;
    var cursor = useGrabCursor && (swipeStarted ? 'grabbing' : 'grab') || 'default';
    return React.createElement("div", {
      className: "react-stacked-center-carousel " + (className || ''),
      onMouseDown: this.onSwipeStart,
      onMouseUp: this.onSwipeEnd,
      onMouseMove: this.onSwipe,
      onMouseLeave: this.onSwipeEnd,
      onTouchStart: this.onSwipeStart,
      onTouchMove: this.onSwipe,
      onTouchEnd: this.onSwipeEnd,
      ref: this.listRef,
      style: {
        width: carouselWidth,
        height: height || this.height,
        position: 'relative',
        overflow: 'hidden',
        cursor: cursor
      }
    }, renderedSlides.map(function (_ref8) {
      var opacity = _ref8.opacity,
          slideIndex = _ref8.slideIndex,
          dataIndex = _ref8.dataIndex,
          position = _ref8.position,
          scale = _ref8.scale,
          key = _ref8.key,
          zIndex = _ref8.zIndex;
      var ID = dataIndex === -1 ? "hidden-" + key : slideIndex;
      var zDuration = transitionTime * (swipRight ? 0.6 : 1);
      var transition = swipeStarted ? 'none' : customTransition || "all " + transitionTime + "ms ease, z-index " + zDuration + "ms ease";
      var isCenterSlide = tempShift ? zIndex === _this2.maxZIndex : slideIndex === 0;
      return React.createElement("div", {
        key: key,
        className: "react-stacked-center-carousel-slide-" + ID,
        draggable: false,
        style: {
          position: 'absolute',
          display: 'flex',
          left: "calc(50% - " + slideWidth / 2 + "px)",
          transform: "translateX(" + position + "px) scale(" + scale + ")",
          width: slideWidth,
          transition: transition,
          opacity: opacity,
          zIndex: zIndex
        }
      }, dataIndex !== -1 && React.createElement(Component, {
        dataIndex: dataIndex,
        data: data,
        slideIndex: slideIndex,
        isCenterSlide: isCenterSlide,
        swipeTo: _this2.swipeTo
      }));
    }));
  };

  return StackedCarousel;
}(React.PureComponent);
StackedCarousel.defaultScaleFactor = 0.85;
StackedCarousel.defaultTransitionTime = 450;

function shouldRecaclculate(prop1, prop2) {
  var _prop1$customScales, _prop2$customScales;

  if (prop1.slideWidth !== prop2.slideWidth || prop1.carouselWidth !== prop2.carouselWidth || prop1.maxVisibleSlide !== prop2.maxVisibleSlide || prop1.currentVisibleSlide !== prop2.currentVisibleSlide || prop1.fadeDistance !== prop2.fadeDistance || ((_prop1$customScales = prop1.customScales) === null || _prop1$customScales === void 0 ? void 0 : _prop1$customScales.join('')) !== ((_prop2$customScales = prop2.customScales) === null || _prop2$customScales === void 0 ? void 0 : _prop2$customScales.join(''))) return true;
  return false;
}

function ResponsiveContainer(props) {
  var render = props.render,
      carouselRef = props.carouselRef;

  var _useResizeDetector = useResizeDetector(),
      width = _useResizeDetector.width,
      ref = _useResizeDetector.ref;

  return React.createElement("div", {
    ref: ref,
    className: 'stacked-carousel-responsive-container',
    style: {
      width: '100%'
    }
  }, width && render(width, carouselRef));
}

export { ResponsiveContainer, StackedCarousel };
//# sourceMappingURL=index.modern.js.map