@helpdice/ui 1.7.8 → 1.8.0

package/esm/carousal/index.js

@@ -1,683 +1,2 @@
-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";
-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 'react-easy-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", slideProps, _this3.props.renderItem(item, {
-          isSelected: index === _this3.state.selectedItem,
-          isPrevious: index === _this3.state.previousItem
-        }));
-      });
-    }
-  }, {
-    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: "control-dots"
-      }, Children.map(children, function (_, index) {
-        return renderIndicator && renderIndicator(_this4.changeItem(index), index === _this4.state.selectedItem, index, labels.item);
-      }));
-    }
-  }, {
-    key: "renderStatus",
-    value: function renderStatus() {
-      if (!this.props.showStatus) {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement("p", {
-        className: "carousel-status"
-      }, this.props.statusFormatter(this.state.selectedItem + 1, Children.count(this.props.children)));
-    }
-  }, {
-    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: 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,
-        className: klass.ROOT(this.props.className),
-        ref: this.setCarouselWrapperRef,
-        tabIndex: this.props.useKeyboardArrows ? 0 : undefined
-      }, /*#__PURE__*/React.createElement("div", {
-        className: klass.CAROUSEL(true),
-        style: {
-          width: this.props.width
-        }
-      }, this.renderControls(), this.props.renderArrowPrev(this.onClickPrev, hasPrev, this.props.labels.leftArrow), /*#__PURE__*/React.createElement("div", {
-        className: klass.WRAPPER(true, this.props.axis),
-        style: containerStyles
-      }, 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", {
-        className: klass.SLIDER(true, this.state.swiping),
-        ref: function ref(node) {
-          return _this5.setListRef(node);
-        },
-        style: this.state.itemListStyle || {}
-      }, this.props.infiniteLoop && lastClone, this.renderItems(), this.props.infiniteLoop && firstClone)), this.props.renderArrowNext(this.onClickNext, hasNext, this.props.labels.rightArrow), this.renderStatus()), this.renderThumbs());
-    }
-  }]);
-}(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 };
+export { default as Carousel } from './component';
+export { default as Thumbs } from './component/Thumbs';