@helpdice/ui 1.7.8 → 1.7.9

package/esm/carousal/component/index.js

@@ -0,0 +1,698 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _JSXStyle from "../styled-jsx.es.js";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React, { Children } from 'react';
+// @ts-ignore
+import Swipe from '../../swipe';
+import klass from '../cssClasses';
+import Thumbs from './Thumbs';
+import getDocument from '../shims/document';
+import getWindow from '../shims/window';
+import { noop, defaultStatusFormatter, isKeyboardEvent } from './utils';
+import Arrow from './Arrow';
+import Indicator from './Indicator';
+import { slideAnimationHandler, slideSwipeAnimationHandler, slideStopSwipingHandler, fadeAnimationHandler } from './animations';
+var Carousel = /*#__PURE__*/function (_React$Component) {
+  function Carousel(props) {
+    var _this;
+    _classCallCheck(this, Carousel);
+    _this = _callSuper(this, Carousel, [props]);
+    _defineProperty(_this, "setThumbsRef", function (node) {
+      _this.thumbsRef = node;
+    });
+    _defineProperty(_this, "setCarouselWrapperRef", function (node) {
+      _this.carouselWrapperRef = node;
+    });
+    _defineProperty(_this, "setListRef", function (node) {
+      _this.listRef = node;
+    });
+    _defineProperty(_this, "setItemsRef", function (node, index) {
+      if (!_this.itemsRef) {
+        _this.itemsRef = [];
+      }
+      _this.itemsRef[index] = node;
+    });
+    _defineProperty(_this, "autoPlay", function () {
+      if (Children.count(_this.props.children) <= 1) {
+        return;
+      }
+      _this.clearAutoPlay();
+      if (!_this.props.autoPlay) {
+        return;
+      }
+      _this.timer = setTimeout(function () {
+        _this.increment();
+      }, _this.props.interval);
+    });
+    _defineProperty(_this, "clearAutoPlay", function () {
+      if (_this.timer) clearTimeout(_this.timer);
+    });
+    _defineProperty(_this, "resetAutoPlay", function () {
+      _this.clearAutoPlay();
+      _this.autoPlay();
+    });
+    _defineProperty(_this, "stopOnHover", function () {
+      _this.setState({
+        isMouseEntered: true
+      }, _this.clearAutoPlay);
+    });
+    _defineProperty(_this, "startOnLeave", function () {
+      _this.setState({
+        isMouseEntered: false
+      }, _this.autoPlay);
+    });
+    _defineProperty(_this, "isFocusWithinTheCarousel", function () {
+      if (!_this.carouselWrapperRef) {
+        return false;
+      }
+      if (getDocument().activeElement === _this.carouselWrapperRef || _this.carouselWrapperRef.contains(getDocument().activeElement)) {
+        return true;
+      }
+      return false;
+    });
+    _defineProperty(_this, "navigateWithKeyboard", function (e) {
+      if (!_this.isFocusWithinTheCarousel()) {
+        return;
+      }
+      var axis = _this.props.axis;
+      var isHorizontal = axis === 'horizontal';
+      var keyNames = {
+        ArrowUp: 38,
+        ArrowRight: 39,
+        ArrowDown: 40,
+        ArrowLeft: 37
+      };
+      var nextKey = isHorizontal ? keyNames.ArrowRight : keyNames.ArrowDown;
+      var prevKey = isHorizontal ? keyNames.ArrowLeft : keyNames.ArrowUp;
+      if (nextKey === e.keyCode) {
+        _this.increment();
+      } else if (prevKey === e.keyCode) {
+        _this.decrement();
+      }
+    });
+    _defineProperty(_this, "updateSizes", function () {
+      if (!_this.state.initialized || !_this.itemsRef || _this.itemsRef.length === 0) {
+        return;
+      }
+      var isHorizontal = _this.props.axis === 'horizontal';
+      var firstItem = _this.itemsRef[0];
+      if (!firstItem) {
+        return;
+      }
+      var itemSize = isHorizontal ? firstItem.clientWidth : firstItem.clientHeight;
+      _this.setState({
+        itemSize: itemSize
+      });
+      if (_this.thumbsRef) {
+        _this.thumbsRef.updateSizes();
+      }
+    });
+    _defineProperty(_this, "setMountState", function () {
+      _this.setState({
+        hasMount: true
+      });
+      _this.updateSizes();
+    });
+    _defineProperty(_this, "handleClickItem", function (index, item) {
+      if (Children.count(_this.props.children) === 0) {
+        return;
+      }
+      if (_this.state.cancelClick) {
+        _this.setState({
+          cancelClick: false
+        });
+        return;
+      }
+      _this.props.onClickItem(index, item);
+      if (index !== _this.state.selectedItem) {
+        _this.setState({
+          selectedItem: index
+        });
+      }
+    });
+    /**
+     * On Change handler, Passes the index and React node to the supplied onChange prop
+     * @param index of the carousel item
+     * @param item React node of the item being changed
+     */
+    _defineProperty(_this, "handleOnChange", function (index, item) {
+      if (Children.count(_this.props.children) <= 1) {
+        return;
+      }
+      _this.props.onChange(index, item);
+    });
+    _defineProperty(_this, "handleClickThumb", function (index, item) {
+      _this.props.onClickThumb(index, item);
+      _this.moveTo(index);
+    });
+    _defineProperty(_this, "onSwipeStart", function (event) {
+      _this.setState({
+        swiping: true
+      });
+      _this.props.onSwipeStart(event);
+    });
+    _defineProperty(_this, "onSwipeEnd", function (event) {
+      _this.setState({
+        swiping: false,
+        cancelClick: false,
+        swipeMovementStarted: false
+      });
+      _this.props.onSwipeEnd(event);
+      _this.clearAutoPlay();
+      if (_this.state.autoPlay) {
+        _this.autoPlay();
+      }
+    });
+    _defineProperty(_this, "onSwipeMove", function (delta, event) {
+      _this.props.onSwipeMove(event);
+      var animationHandlerResponse = _this.props.swipeAnimationHandler(delta, _this.props, _this.state, _this.setState.bind(_this));
+      _this.setState(_extends({}, animationHandlerResponse));
+
+      // If we have not moved, we should have an empty object returned
+      // Return false to allow scrolling when not swiping
+      return !!Object.keys(animationHandlerResponse).length;
+    });
+    /**
+     * Decrements the selectedItem index a number of positions through the children list
+     * @param positions
+     * @param fromSwipe
+     */
+    _defineProperty(_this, "decrement", function () {
+      var positions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      _this.moveTo(_this.state.selectedItem - (typeof positions === 'number' ? positions : 1));
+    });
+    /**
+     * Increments the selectedItem index a number of positions through the children list
+     * @param positions
+     * @param fromSwipe
+     */
+    _defineProperty(_this, "increment", function () {
+      var positions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+      _this.moveTo(_this.state.selectedItem + (typeof positions === 'number' ? positions : 1));
+    });
+    /**
+     * Moves the selected item to the position provided
+     * @param position
+     * @param fromSwipe
+     */
+    _defineProperty(_this, "moveTo", function (position) {
+      if (typeof position !== 'number') {
+        return;
+      }
+      var lastPosition = Children.count(_this.props.children) - 1;
+      if (position < 0) {
+        position = _this.props.infiniteLoop ? lastPosition : 0;
+      }
+      if (position > lastPosition) {
+        position = _this.props.infiniteLoop ? 0 : lastPosition;
+      }
+      _this.selectItem({
+        // if it's not a slider, we don't need to set position here
+        selectedItem: position
+      });
+
+      // don't reset auto play when stop on hover is enabled, doing so will trigger a call to auto play more than once
+      // and will result in the interval function not being cleared correctly.
+      if (_this.state.autoPlay && _this.state.isMouseEntered === false) {
+        _this.resetAutoPlay();
+      }
+    });
+    _defineProperty(_this, "onClickNext", function () {
+      _this.increment(1);
+    });
+    _defineProperty(_this, "onClickPrev", function () {
+      _this.decrement(1);
+    });
+    _defineProperty(_this, "onSwipeForward", function () {
+      _this.increment(1);
+      if (_this.props.emulateTouch) {
+        _this.setState({
+          cancelClick: true
+        });
+      }
+    });
+    _defineProperty(_this, "onSwipeBackwards", function () {
+      _this.decrement(1);
+      if (_this.props.emulateTouch) {
+        _this.setState({
+          cancelClick: true
+        });
+      }
+    });
+    _defineProperty(_this, "changeItem", function (newIndex) {
+      return function (e) {
+        if (!isKeyboardEvent(e) || e.key === 'Enter') {
+          _this.moveTo(newIndex);
+        }
+      };
+    });
+    /**
+     * This function is called when you want to 'select' a new item, or rather move to a 'selected' item
+     * It also handles the onChange callback wrapper
+     * @param state state object with updated selected item, and swiping bool if relevant
+     */
+    _defineProperty(_this, "selectItem", function (state) {
+      // Merge in the new state while updating updating previous item
+      _this.setState(_extends({
+        previousItem: _this.state.selectedItem
+      }, state), function () {
+        // Run animation handler and update styles based on it
+        _this.setState(_this.animationHandler(_this.props, _this.state));
+      });
+      _this.handleOnChange(state.selectedItem, Children.toArray(_this.props.children)[state.selectedItem]);
+    });
+    _defineProperty(_this, "getInitialImage", function () {
+      var selectedItem = _this.props.selectedItem;
+      var item = _this.itemsRef && _this.itemsRef[selectedItem];
+      var images = item && item.getElementsByTagName('img') || [];
+      return images[0];
+    });
+    _defineProperty(_this, "getVariableItemHeight", function (position) {
+      var item = _this.itemsRef && _this.itemsRef[position];
+      if (_this.state.hasMount && item && item.children.length) {
+        var slideImages = item.children[0].getElementsByTagName('img') || [];
+        if (slideImages.length > 0) {
+          var image = slideImages[0];
+          if (!image.complete) {
+            // if the image is still loading, the size won't be available so we trigger a new render after it's done
+            var _onImageLoad = function onImageLoad() {
+              _this.forceUpdate();
+              image.removeEventListener('load', _onImageLoad);
+            };
+            image.addEventListener('load', _onImageLoad);
+          }
+        }
+
+        // try to get img first, if img not there find first display tag
+        var displayItem = slideImages[0] || item.children[0];
+        var height = displayItem.clientHeight;
+        return height > 0 ? height : null;
+      }
+      return null;
+    });
+    var initState = {
+      initialized: false,
+      previousItem: props.selectedItem,
+      selectedItem: props.selectedItem,
+      hasMount: false,
+      isMouseEntered: false,
+      autoPlay: props.autoPlay,
+      swiping: false,
+      swipeMovementStarted: false,
+      cancelClick: false,
+      itemSize: 1,
+      itemListStyle: {},
+      slideStyle: {},
+      selectedStyle: {},
+      prevStyle: {}
+    };
+    _this.animationHandler = typeof props.animationHandler === 'function' && props.animationHandler || props.animationHandler === 'fade' && fadeAnimationHandler || slideAnimationHandler;
+    _this.state = _extends({}, initState, _this.animationHandler(props, initState));
+    return _this;
+  }
+  _inherits(Carousel, _React$Component);
+  return _createClass(Carousel, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (!this.props.children) {
+        return;
+      }
+      this.setupCarousel();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (!prevProps.children && this.props.children && !this.state.initialized) {
+        this.setupCarousel();
+      }
+      if (!prevProps.autoFocus && this.props.autoFocus) {
+        this.forceFocus();
+      }
+      if (prevState.swiping && !this.state.swiping) {
+        // We stopped swiping, ensure we are heading to the new/current slide and not stuck
+
+        this.setState(_extends({}, this.props.stopSwipingHandler(this.props, this.state)));
+      }
+      if (prevProps.selectedItem !== this.props.selectedItem || prevProps.centerMode !== this.props.centerMode) {
+        this.updateSizes();
+        this.moveTo(this.props.selectedItem);
+      }
+      if (prevProps.autoPlay !== this.props.autoPlay) {
+        if (this.props.autoPlay) {
+          this.setupAutoPlay();
+        } else {
+          this.destroyAutoPlay();
+        }
+        this.setState({
+          autoPlay: this.props.autoPlay
+        });
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.destroyCarousel();
+    }
+  }, {
+    key: "setupCarousel",
+    value: function setupCarousel() {
+      var _this2 = this;
+      this.bindEvents();
+      if (this.state.autoPlay && Children.count(this.props.children) > 1) {
+        this.setupAutoPlay();
+      }
+      if (this.props.autoFocus) {
+        this.forceFocus();
+      }
+      this.setState({
+        initialized: true
+      }, function () {
+        var initialImage = _this2.getInitialImage();
+        if (initialImage && !initialImage.complete) {
+          // if it's a carousel of images, we set the mount state after the first image is loaded
+          initialImage.addEventListener('load', _this2.setMountState);
+        } else {
+          _this2.setMountState();
+        }
+      });
+    }
+  }, {
+    key: "destroyCarousel",
+    value: function destroyCarousel() {
+      if (this.state.initialized) {
+        this.unbindEvents();
+        this.destroyAutoPlay();
+      }
+    }
+  }, {
+    key: "setupAutoPlay",
+    value: function setupAutoPlay() {
+      this.autoPlay();
+      var carouselWrapper = this.carouselWrapperRef;
+      if (this.props.stopOnHover && carouselWrapper) {
+        carouselWrapper.addEventListener('mouseenter', this.stopOnHover);
+        carouselWrapper.addEventListener('mouseleave', this.startOnLeave);
+      }
+    }
+  }, {
+    key: "destroyAutoPlay",
+    value: function destroyAutoPlay() {
+      this.clearAutoPlay();
+      var carouselWrapper = this.carouselWrapperRef;
+      if (this.props.stopOnHover && carouselWrapper) {
+        carouselWrapper.removeEventListener('mouseenter', this.stopOnHover);
+        carouselWrapper.removeEventListener('mouseleave', this.startOnLeave);
+      }
+    }
+  }, {
+    key: "bindEvents",
+    value: function bindEvents() {
+      // as the widths are calculated, we need to resize
+      // the carousel when the window is resized
+      getWindow().addEventListener('resize', this.updateSizes);
+      // issue #2 - image loading smaller
+      getWindow().addEventListener('DOMContentLoaded', this.updateSizes);
+      if (this.props.useKeyboardArrows) {
+        getDocument().addEventListener('keydown', this.navigateWithKeyboard);
+      }
+    }
+  }, {
+    key: "unbindEvents",
+    value: function unbindEvents() {
+      // removing listeners
+      getWindow().removeEventListener('resize', this.updateSizes);
+      getWindow().removeEventListener('DOMContentLoaded', this.updateSizes);
+      var initialImage = this.getInitialImage();
+      if (initialImage) {
+        initialImage.removeEventListener('load', this.setMountState);
+      }
+      if (this.props.useKeyboardArrows) {
+        getDocument().removeEventListener('keydown', this.navigateWithKeyboard);
+      }
+    }
+  }, {
+    key: "forceFocus",
+    value: function forceFocus() {
+      var _this$carouselWrapper;
+      (_this$carouselWrapper = this.carouselWrapperRef) === null || _this$carouselWrapper === void 0 || _this$carouselWrapper.focus();
+    }
+  }, {
+    key: "renderItems",
+    value: function renderItems(isClone) {
+      var _this3 = this;
+      if (!this.props.children) {
+        return [];
+      }
+      return Children.map(this.props.children, function (item, index) {
+        var isSelected = index === _this3.state.selectedItem;
+        var isPrevious = index === _this3.state.previousItem;
+        var style = isSelected && _this3.state.selectedStyle || isPrevious && _this3.state.prevStyle || _this3.state.slideStyle || {};
+        if (_this3.props.centerMode && _this3.props.axis === 'horizontal') {
+          style = _extends({}, style, {
+            minWidth: _this3.props.centerSlidePercentage + '%'
+          });
+        }
+        if (_this3.state.swiping && _this3.state.swipeMovementStarted) {
+          style = _extends({}, style, {
+            pointerEvents: 'none'
+          });
+        }
+        var slideProps = {
+          ref: function ref(e) {
+            return _this3.setItemsRef(e, index);
+          },
+          key: 'itemKey' + index + (isClone ? 'clone' : ''),
+          className: klass.ITEM(true, index === _this3.state.selectedItem, index === _this3.state.previousItem),
+          onClick: _this3.handleClickItem.bind(_this3, index, item),
+          style: style
+        };
+        return /*#__PURE__*/React.createElement("li", _extends({}, slideProps, {
+          className: "jsx-2755164558" + " " + (slideProps && slideProps.className != null && slideProps.className || "")
+        }), _this3.props.renderItem(item, {
+          isSelected: index === _this3.state.selectedItem,
+          isPrevious: index === _this3.state.previousItem
+        }), /*#__PURE__*/React.createElement(_JSXStyle, {
+          id: "2755164558"
+        }, ".slide.jsx-2755164558{min-width:100%;margin:0;position:relative;text-align:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}img.jsx-2755164558{width:100%;vertical-align:top;border:0;}iframe.jsx-2755164558{display:inline-block;width:calc(100% - 80px);margin:0 40px 40px;border:0;}.legend.jsx-2755164558{-webkit-transition:opacity 0.35s ease-in-out;transition:opacity 0.35s ease-in-out;position:absolute;bottom:40px;left:50%;margin-left:-45%;width:90%;border-radius:10px;background:#000;color:#fff;padding:10px;font-size:12px;text-align:center;opacity:0.25;}.slide.jsx-2755164558 .legend.jsx-2755164558{opacity:1;}"));
+      });
+    }
+  }, {
+    key: "renderControls",
+    value: function renderControls() {
+      var _this4 = this;
+      var _this$props = this.props,
+        showIndicators = _this$props.showIndicators,
+        labels = _this$props.labels,
+        renderIndicator = _this$props.renderIndicator,
+        children = _this$props.children;
+      if (!showIndicators) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("ul", {
+        className: "jsx-4140983776" + " " + "control-dots"
+      }, Children.map(children, function (_, index) {
+        return renderIndicator && renderIndicator(_this4.changeItem(index), index === _this4.state.selectedItem, index, labels.item);
+      }), /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "4140983776"
+      }, ".control-dots.jsx-4140983776{position:absolute;bottom:0;margin:10px 0;padding:0;text-align:center;width:100%;z-index:1;}"));
+    }
+  }, {
+    key: "renderStatus",
+    value: function renderStatus() {
+      if (!this.props.showStatus) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement("p", {
+        className: "jsx-2959489890" + " " + "carousel-status"
+      }, this.props.statusFormatter(this.state.selectedItem + 1, Children.count(this.props.children)), /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "2959489890"
+      }, ".carousel-status.jsx-2959489890{position:absolute;top:0;right:0;padding:5px;font-size:10px;text-shadow:1px 1px 1px rgba(0,0,0,0.9);color:#fff;}"));
+    }
+  }, {
+    key: "renderThumbs",
+    value: function renderThumbs() {
+      if (!this.props.showThumbs || !this.props.children || Children.count(this.props.children) === 0) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(Thumbs, {
+        ref: this.setThumbsRef,
+        onSelectItem: this.handleClickThumb,
+        selectedItem: this.state.selectedItem,
+        transitionTime: this.props.transitionTime,
+        thumbWidth: this.props.thumbWidth,
+        labels: this.props.labels,
+        emulateTouch: this.props.emulateTouch
+      }, this.props.renderThumbs(this.props.children));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this5 = this;
+      if (!this.props.children || Children.count(this.props.children) === 0) {
+        return null;
+      }
+      var isSwipeable = this.props.swipeable && Children.count(this.props.children) > 1;
+      var isHorizontal = this.props.axis === 'horizontal';
+      var canShowArrows = this.props.showArrows && Children.count(this.props.children) > 1;
+
+      // show left arrow?
+      var hasPrev = canShowArrows && (this.state.selectedItem > 0 || this.props.infiniteLoop) || false;
+      // show right arrow
+      var hasNext = canShowArrows && (this.state.selectedItem < Children.count(this.props.children) - 1 || this.props.infiniteLoop) || false;
+      var itemsClone = this.renderItems(true);
+      var firstClone = itemsClone.shift();
+      var lastClone = itemsClone.pop();
+      var swiperProps = {
+        className: klass.SLIDER(true, this.state.swiping),
+        onSwipeMove: this.onSwipeMove,
+        onSwipeStart: this.onSwipeStart,
+        onSwipeEnd: this.onSwipeEnd,
+        style: _extends({
+          margin: 0,
+          display: this.props.axis === 'horizontal' ? 'flex' : 'unset',
+          flexDirection: this.props.axis === 'horizontal' ? 'row' : 'column'
+        }, this.state.itemListStyle),
+        tolerance: this.props.swipeScrollTolerance
+      };
+      var containerStyles = {};
+      if (isHorizontal) {
+        swiperProps.onSwipeLeft = this.onSwipeForward;
+        swiperProps.onSwipeRight = this.onSwipeBackwards;
+        if (this.props.dynamicHeight) {
+          var itemHeight = this.getVariableItemHeight(this.state.selectedItem);
+          // swiperProps.style.height = itemHeight || 'auto';
+          containerStyles.height = itemHeight || 'auto';
+        }
+      } else {
+        swiperProps.onSwipeUp = this.props.verticalSwipe === 'natural' ? this.onSwipeBackwards : this.onSwipeForward;
+        swiperProps.onSwipeDown = this.props.verticalSwipe === 'natural' ? this.onSwipeForward : this.onSwipeBackwards;
+        swiperProps.style = _extends({}, swiperProps.style, {
+          height: this.state.itemSize
+        });
+        containerStyles.height = this.state.itemSize;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        "aria-label": this.props.ariaLabel,
+        ref: this.setCarouselWrapperRef,
+        tabIndex: this.props.useKeyboardArrows ? 0 : undefined,
+        className: "jsx-535322850" + " " + (klass.ROOT(this.props.className) || "")
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: this.props.width
+        },
+        className: "jsx-535322850" + " " + (klass.CAROUSEL(true) || "")
+      }, this.renderControls(), this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow), /*#__PURE__*/React.createElement("div", {
+        style: containerStyles,
+        className: "jsx-535322850" + " " + (klass.WRAPPER(true, this.props.axis) || "")
+      }, isSwipeable ? /*#__PURE__*/React.createElement(Swipe, _extends({
+        tagName: "ul",
+        innerRef: this.setListRef
+      }, swiperProps, {
+        allowMouseEvents: this.props.emulateTouch
+      }), this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone) : /*#__PURE__*/React.createElement("ul", {
+        ref: function ref(node) {
+          return _this5.setListRef(node);
+        },
+        style: this.state.itemListStyle || {},
+        className: "jsx-535322850" + " " + (klass.SLIDER(true, this.state.swiping) || "")
+      }, this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone)), this.props.renderArrowNext(this.onClickNext, hasNext, this.props.labels.rightArrow), this.renderStatus()), this.renderThumbs(), /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "535322850"
+      }, ".carousel-root.jsx-535322850{outline:none;}.slider.jsx-535322850{margin:0 !important;padding:0;position:relative;list-style:none;width:100%;}.slider.jsx-535322850 .animated.jsx-535322850{-webkit-transition:all 0.35s ease-in-out;transition:all 0.35s ease-in-out;}.carousel.jsx-535322850{position:relative;width:100%;}.carousel.jsx-535322850 img.jsx-535322850{width:100%;display:inline-block;pointer-events:none;}.carousel.jsx-535322850 .carousel.jsx-535322850{position:relative;}.carousel-slider.jsx-535322850{position:relative;margin:0;overflow:hidden;}.slider-wrapper.jsx-535322850{overflow:hidden;margin:auto;width:100%;-webkit-transition:height 0.15s ease-in;transition:height 0.15s ease-in;}"));
+    }
+  }]);
+}(React.Component);
+// @ts-ignore
+_defineProperty(Carousel, "displayName", 'Carousel');
+_defineProperty(Carousel, "defaultProps", {
+  ariaLabel: undefined,
+  axis: 'horizontal',
+  centerSlidePercentage: 80,
+  interval: 3000,
+  labels: {
+    leftArrow: 'previous slide / item',
+    rightArrow: 'next slide / item',
+    item: 'slide item'
+  },
+  onClickItem: noop,
+  onClickThumb: noop,
+  onChange: noop,
+  onSwipeStart: function onSwipeStart() {},
+  onSwipeEnd: function onSwipeEnd() {},
+  onSwipeMove: function onSwipeMove() {
+    return false;
+  },
+  preventMovementUntilSwipeScrollTolerance: false,
+  renderArrowPrev: function renderArrowPrev(onClickHandler, hasPrev, label) {
+    return /*#__PURE__*/React.createElement(Arrow, {
+      direction: "prev",
+      onClickHandler: onClickHandler,
+      enabled: hasPrev,
+      label: label
+    });
+  },
+  renderArrowNext: function renderArrowNext(onClickHandler, hasNext, label) {
+    return /*#__PURE__*/React.createElement(Arrow, {
+      direction: "next",
+      onClickHandler: onClickHandler,
+      enabled: hasNext,
+      label: label
+    });
+  },
+  renderIndicator: function renderIndicator(onClickHandler, isSelected, index, label) {
+    return /*#__PURE__*/React.createElement(Indicator, {
+      onClickHandler: onClickHandler,
+      isSelected: isSelected,
+      index: index,
+      label: label
+    });
+  },
+  renderItem: function renderItem(item) {
+    return item;
+  },
+  renderThumbs: function renderThumbs(children) {
+    var images = Children.map(children, function (item) {
+      var img = item;
+
+      // if the item is not an image, try to find the first image in the item's children.
+      if (item.type !== 'img') {
+        img = Children.toArray(item.props.children).find(function (children) {
+          return children.type === 'img';
+        });
+      }
+      if (!img) {
+        return undefined;
+      }
+      return img;
+    });
+    if (images.filter(function (image) {
+      return image;
+    }).length === 0) {
+      console.warn("No images found! Can't build the thumb list without images. If you don't need thumbs, set showThumbs={false} in the Carousel. Note that it's not possible to get images rendered inside custom components. More info at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md");
+      return [];
+    }
+    return images;
+  },
+  statusFormatter: defaultStatusFormatter,
+  selectedItem: 0,
+  showArrows: true,
+  showIndicators: true,
+  showStatus: true,
+  showThumbs: true,
+  stopOnHover: true,
+  swipeScrollTolerance: 5,
+  swipeable: true,
+  transitionTime: 350,
+  verticalSwipe: 'standard',
+  width: '100%',
+  animationHandler: 'slide',
+  swipeAnimationHandler: slideSwipeAnimationHandler,
+  stopSwipingHandler: slideStopSwipingHandler
+});
+export { Carousel as default };