@6thquake/react-material/Carousel/Carousel.js

React components that implement Google's Material Design.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

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

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

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _CarouselItem = _interopRequireDefault(require("./CarouselItem"));

var _CarouselDots = _interopRequireDefault(require("./CarouselDots"));

var _CarouselArrow = _interopRequireDefault(require("./CarouselArrow"));

var styles = {
  root: {
    height: '100%',
    width: '100%',
    overflow: 'hidden',
    position: 'relative'
  },
  scrollwrap: {
    overflow: 'hidden',
    transition: 'all .5s',
    WebkitTransition: 'all .5s',
    width: '100%',
    height: '100%'
  },
  mask: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: '0',
    left: '0',
    background: 'rgba(0,0,0,0)'
  }
};

var Carousel =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Carousel, _React$Component);

  function Carousel(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Carousel);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Carousel).call(this, props));

    _this.vedioLeadToClearIntervalFunc = function () {
      _this.isVedioPlaying = true;

      _this.clearIntervalFunc();
    };

    _this.vedioEndLeadToResumeIntervalFunc = function () {
      _this.isVedioPlaying = false;

      _this.resumeIntervalFunc();
    };

    _this.clearIntervalFunc = function () {
      if (_this.props.pause) {
        clearInterval(_this.interval);
      }
    };

    _this.resumeIntervalFunc = function () {
      if (_this.isVedioPlaying) {
        return;
      }

      if (!_this.props.autoplay) {
        return;
      }

      if (_this.props.pause) {
        _this.start();
      }
    };

    _this.start = function () {
      clearInterval(_this.interval); // this.next();

      if (_this.justInit) {
        _this.initPic();
      }

      _this.justInit = false;
      _this.interval = setInterval(function () {
        _this.next();
      }, _this.props.delay * 1000);
    };

    _this.initPic = function () {
      _this.setActive(_this.activeIndex, false);
    };

    _this.next = function () {
      var len = _this.count;
      var activeIndex = _this.activeIndex;
      var nextActiveIndex = activeIndex < len ? activeIndex + 1 : 0;
      var self = (0, _assertThisInitialized2.default)(_this);

      _this.setActive(nextActiveIndex, true);

      if (activeIndex === len - 1) {
        setTimeout(function () {
          self.setActive(0, false);
        }, (self.props.speed || '0.5') * 1000);
      }
    };

    _this.previous = function () {
      var len = _this.count;
      var activeIndex = _this.activeIndex;
      var preActiveIndex = activeIndex >= 0 ? activeIndex - 1 : len - 1;
      var self = (0, _assertThisInitialized2.default)(_this);

      _this.setActive(preActiveIndex, true);

      if (activeIndex === 0) {
        setTimeout(function () {
          self.setActive(self.count - 1, false);
        }, (self.props.speed || '0.5') * 1000);
      }
    };

    _this.setActive = function (index, withAnimation) {
      var carouselEl = _reactDom.default.findDOMNode(_this.carouselRef.current);

      var carouselWarpEl = _reactDom.default.findDOMNode(_this.carouselWarpRef.current);

      var width = carouselEl.offsetWidth;

      if (!withAnimation) {
        carouselWarpEl.style.transition = 'none';
        carouselWarpEl.style.WebkitTransition = 'none';
      } else {
        carouselWarpEl.style.transition = "all ".concat(_this.props.speed || '0.5', "s");
        carouselWarpEl.style.WebkitTransition = "all ".concat(_this.props.speed || '0.5', "s");
      }

      carouselWarpEl.style.marginLeft = "".concat(-1 * (index + 1) * width, "px");
      _this.activeIndex = index;

      _this.setState({
        temp: new Date().getTime()
      });
    };

    _this.chengeActivedByDot = function (index, withAnimation) {
      _this.isVedioPlaying = false;

      _this.setActive(index, withAnimation);
    };

    if (props.speed) {
      styles.scrollwrap.transition = "all ".concat(props.speed, "s");
      styles.scrollwrap.WebkitTransition = "all ".concat(props.speed, "s");
    }

    _this.count = props.items.length;
    _this.activeIndex = 0;
    _this.carouselRef = _react.default.createRef();
    _this.carouselWarpRef = _react.default.createRef();
    _this.mainSize = {
      width: 0,
      height: 0
    };
    _this.isVedioPlaying = false; // 有视频正在播放

    _this.justInit = true; // 刚刚进来时候

    return _this;
  }

  (0, _createClass2.default)(Carousel, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var carouselEl = _reactDom.default.findDOMNode(this.carouselRef.current);

      var carouselWarpEl = _reactDom.default.findDOMNode(this.carouselWarpRef.current);

      var width = carouselEl.offsetWidth;
      this.mainSize = {
        width: carouselEl.offsetWidth,
        height: carouselEl.offsetHeight
      };
      carouselWarpEl.style.transition = 'none';
      carouselWarpEl.style.WebkitTransition = 'none';
      carouselWarpEl.style.minWidth = "".concat((this.count + 2) * width, "px");
      carouselWarpEl.style.marginLeft = "".concat(-1 * width, "px");
      /* if (!!this.props.speed) {
        carouselWarpEl.style.transition = 'all ' + this.props.speed + 's';
        carouselWarpEl.style.WebkitTransition = 'all ' + this.props.speed + 's';
      } */

      if (this.props.autoplay) {
        this.start();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      clearInterval(this.interval);
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props = this.props,
          items = _this$props.items,
          speed = _this$props.speed,
          delay = _this$props.delay,
          pause = _this$props.pause,
          autoplay = _this$props.autoplay,
          dots = _this$props.dots,
          arrows = _this$props.arrows,
          classes = _this$props.classes;
      var self = this;

      var _items = items.map(function (_, index) {
        return _react.default.createElement(_CarouselItem.default, {
          isCurrent: index === self.activeIndex,
          onCleanInterval: _this2.vedioLeadToClearIntervalFunc,
          onResumeInterval: _this2.vedioEndLeadToResumeIntervalFunc,
          data: _,
          size: self.mainSize,
          key: "item".concat(index),
          index: index
        });
      });

      return _react.default.createElement("div", {
        ref: this.carouselRef,
        className: classes.root
      }, _react.default.createElement("div", {
        onMouseOver: this.clearIntervalFunc,
        onMouseOut: this.resumeIntervalFunc
      }, _react.default.createElement("div", {
        ref: this.carouselWarpRef,
        className: classes.scrollwrap
      }, _react.default.createElement(_CarouselItem.default, {
        data: items[items.length - 1],
        size: self.mainSize,
        index: -1
      }), _items, _react.default.createElement(_CarouselItem.default, {
        data: items[0],
        size: self.mainSize,
        index: items.length
      })), arrows ? _react.default.createElement(_CarouselArrow.default, {
        next: function next() {
          _this2.isVedioPlaying = false;

          _this2.next();
        },
        pre: function pre() {
          _this2.isVedioPlaying = false;

          _this2.previous();
        }
      }) : null, dots ? _react.default.createElement(_CarouselDots.default, {
        count: items.length,
        speed: speed,
        activeIndex: this.activeIndex,
        onChange: this.chengeActivedByDot.bind(this)
      }) : null));
    }
  }]);
  return Carousel;
}(_react.default.Component);

Carousel.propTypes = {
  /**
   * is arrows showed
   */
  arrows: _propTypes.default.bool,

  /**
   * autoplay
   */
  autoplay: _propTypes.default.bool,

  /**
   * delay of pictrue slide，unit second
   */
  delay: _propTypes.default.number,

  /**
   * is dots showed
   */
  dots: _propTypes.default.bool,

  /**
   * item list
   * eg.
   *  [{
   *    src: '/static/images/grid-list/bike.jpg',
   *    alt: 'images-1',
   *  },
   *  {
   *    src: '/static/images/grid-list/mushroom.jpg',
   *    alt: 'images-2',
   *  },
   *  {
   *    src: '/static/images/grid-list/burgers.jpg',
   *    alt: 'images-3',
   *  }]
   */
  items: _propTypes.default.array.isRequired,

  /**
   * pause when mouseover
   */
  pause: _propTypes.default.bool,

  /**
   * speed of pictrue slide，unit second
   */
  speed: _propTypes.default.number
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMCarousel'
})(Carousel);

exports.default = _default;