@merchantlabs/react-carousel/lib/Carousel.js

Merchant Labs React component library.

'use strict';

exports.__esModule = true;
exports.default = undefined;

var _templateObject = _taggedTemplateLiteralLoose(['\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  bottom: 5%;\n  width: 100%;\n'], ['\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  bottom: 5%;\n  width: 100%;\n']),
    _templateObject2 = _taggedTemplateLiteralLoose(['\n  position: absolute;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n'], ['\n  position: absolute;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 100%;\n']);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _reactSwipeableViews = require('react-swipeable-views');

var _reactSwipeableViews2 = _interopRequireDefault(_reactSwipeableViews);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Carousel = function (_Component) {
  _inherits(Carousel, _Component);

  function Carousel() {
    var _temp, _this, _ret;

    _classCallCheck(this, Carousel);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = { activeIndex: 0 }, _this.onChangeIndex = function (index, indexLatest, meta) {
      _this.setState({
        activeIndex: index
      });
    }, _this._moveLeft = function () {
      var activeIndex = _this.state.activeIndex;

      var nextIndex = activeIndex - 1;
      _this.setState({
        activeIndex: nextIndex < 0 ? activeIndex : nextIndex
      });
    }, _this._moveRight = function () {
      var activeIndex = _this.state.activeIndex;
      var children = _this.props.children;

      var nextIndex = activeIndex + 1;
      var length = _react.Children.count(children);
      _this.setState({
        activeIndex: nextIndex + 1 > length ? activeIndex : nextIndex
      });
    }, _this._slideToIndex = function (index) {
      _this.setState({
        activeIndex: index
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

  Carousel.prototype.render = function render() {
    var _this2 = this;

    var activeIndex = this.state.activeIndex;
    var _props = this.props,
        Dot = _props.dotComponent,
        Button = _props.buttonComponent,
        innerRef = _props.innerRef,
        children = _props.children;


    var slides = _react.Children.toArray(children);

    return _react2.default.createElement(
      'div',
      { ref: innerRef, style: { position: 'relative' } },
      _react2.default.createElement(
        _reactSwipeableViews2.default,
        {
          onChangeIndex: this.onChangeIndex,
          index: activeIndex,
          springConfig: {
            duration: '.8s',
            easeFunction: 'cubic-bezier(0.15, 0.3, 0.25, 1)',
            delay: '0s'
          }
        },
        children
      ),
      Button && slides.length !== 1 && _react2.default.createElement(
        ButtonContainer,
        null,
        _react2.default.createElement(Button, { onClick: this._moveLeft, left: true }),
        _react2.default.createElement(Button, { onClick: this._moveRight, right: true })
      ),
      Dot && slides.length > 1 && _react2.default.createElement(
        DotsContainer,
        null,
        slides.map(function (slide, i) {
          var isActive = i === activeIndex;
          return _react2.default.createElement(Dot, {
            key: i,
            isActive: isActive,
            onClick: function onClick() {
              return _this2._slideToIndex(i);
            }
          });
        })
      )
    );
  };

  return Carousel;
}(_react.Component);

exports.default = Carousel;
Carousel.propTypes = process.env.NODE_ENV !== "production" ? {
  dotComponent: _propTypes2.default.func,
  buttonComponent: _propTypes2.default.func,
  className: _propTypes2.default.string
} : {};


var DotsContainer = _styledComponents2.default.ul(_templateObject);
var ButtonContainer = _styledComponents2.default.div(_templateObject2);
module.exports = exports['default'];