react-flexible-carousel/lib/components/carousel.js

react flexible carousel let you can easily control with style, rwd, lifecycle and dynamic path.

'use strict';

exports.__esModule = true;

var _assign = require('babel-runtime/core-js/object/assign');

var _assign2 = _interopRequireDefault(_assign);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _validateType = require('../util/validateType');

var _wrapper = require('./Wrapper/wrapper');

var _wrapper2 = _interopRequireDefault(_wrapper);

var _list = require('./Wrapper/list');

var _list2 = _interopRequireDefault(_list);

var _thumbs = require('./Thumbs/thumbs');

var _thumbs2 = _interopRequireDefault(_thumbs);

var _arrow = require('./Arrow/arrow');

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

var Carousel = function (_Component) {
  (0, _inherits3.default)(Carousel, _Component);

  function Carousel(props) {
    (0, _classCallCheck3.default)(this, Carousel);

    var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call(this, props));

    _this.state = {
      // options: {
      //   listWidth: props.options ? Math.ceil(props.options.listWidth) : 300,
      //   listHeight: props.options ? props.options.listHeight : 400
      // },
      listWidth: _this.props.listWidth || 300,
      listHeight: _this.props.listHeight || 400,
      wrapperIsHover: false,
      actionID: props.options ? _this.props.options.start_actionID : 0
    };
    return _this;
  }

  Carousel.prototype.componentDidMount = function componentDidMount() {
    this._handleBindAutoPlayTimer();
  };

  Carousel.prototype.componentWillUnmount = function componentWillUnmount() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  };

  Carousel.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
    return nextProps.urls !== this.props.urls || nextProps.auto_play !== this.props.auto_play || nextProps.use_thumbs !== this.props.use_thumbs || nextProps.custom_thumbs !== this.props.custom_thumbs || nextProps.custom_lists !== this.props.custom_lists || nextProps.use_arrow !== this.props.use_arrow || nextProps.thumbsPerPage !== this.props.thumbsPerPage || nextState.actionID !== this.state.actionID || nextState.wrapperIsHover !== this.state.wrapperIsHover || nextState.listWidth !== this.state.listWidth;
  };

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

    if (this.state.wrapperIsHover || !this.props.auto_play) return;
    if (this.state.actionID + 1 >= this.props.urls.length) {
      this.setState({
        actionID: 0
      });
    } else {
      if (this.props.beforeWrapperMouseOver) {
        if ((0, _validateType.isFunction)(this.props.beforeWrapperMouseOver, 'beforeWrapperMouseOver')) {
          this.props.beforeActionIDChange(this.state.actionID);
        }
      }
      this.setState({
        actionID: this.state.actionID + 1
      }, function () {
        if (_this2.props.afterWrapperMouseOver) {
          if ((0, _validateType.isFunction)(_this2.props.afterWrapperMouseOver, 'afterWrapperMouseOver')) {
            _this2.props.afterActionIDChange(_this2.state.actionID);
          }
        }
      });
    }
  };

  Carousel.prototype._handleBindAutoPlayTimer = function _handleBindAutoPlayTimer() {
    var auto_play_speed = this.props.auto_play_speed || 1000;
    this.timer = setInterval(this._handleAutoPlay.bind(this), auto_play_speed);
  };

  Carousel.prototype._handleWrapperMouseOver = function _handleWrapperMouseOver() {
    var _this3 = this;

    var actionUrl = this.props.urls[this.state.actionID];
    if (this.props.beforeWrapperMouseOver) {
      if ((0, _validateType.isFunction)(this.props.beforeWrapperMouseOver, 'beforeWrapperMouseOver')) {
        this.props.beforeWrapperMouseOver(this.state.actionID, actionUrl);
      }
    }
    this.setState({
      wrapperIsHover: true
    }, function () {
      if (_this3.props.afterWrapperMouseOver) {
        if ((0, _validateType.isFunction)(_this3.props.afterWrapperMouseOver, 'afterWrapperMouseOver')) {
          _this3.props.afterWrapperMouseOver(_this3.state.actionID, actionUrl);
        }
      }
    });
  };

  Carousel.prototype._handleWrapperMouseLeave = function _handleWrapperMouseLeave() {
    var _this4 = this;

    var actionUrl = this.props.urls[this.state.actionID];
    if (this.props.beforeWrapperMouseLeave) {
      if ((0, _validateType.isFunction)(this.props.beforeWrapperMouseLeave, 'beforeWrapperMouseLeave')) {
        this.props.beforeWrapperMouseLeave(this.state.actionID, actionUrl);
      }
    }
    this.setState({
      wrapperIsHover: false
    }, function () {
      if (_this4.props.afterWrapperMouseLeave) {
        if ((0, _validateType.isFunction)(_this4.props.afterWrapperMouseLeave, 'afterWrapperMouseLeave')) {
          _this4.props.afterWrapperMouseLeave(_this4.state.actionID, actionUrl);
        }
      }
    });
  };

  Carousel.prototype._handleArrowLeft = function _handleArrowLeft() {
    if (this.state.actionID - 1 < 0) {
      this._handleChangeThumbsID(this.props.urls.length - 1);
    } else {
      this._handleChangeThumbsID(this.state.actionID - 1);
    }
  };

  Carousel.prototype._handleArrowRight = function _handleArrowRight() {
    if (this.state.actionID + 1 >= this.props.urls.length) {
      this._handleChangeThumbsID(0);
    } else {
      this._handleChangeThumbsID(this.state.actionID + 1);
    }
  };

  Carousel.prototype._handleTouchChangeActionID = function _handleTouchChangeActionID(correctX) {
    correctX > 0 ? this._handleArrowRight() : this._handleArrowLeft();
  };

  Carousel.prototype._handleChangeThumbsID = function _handleChangeThumbsID(id) {
    var _this5 = this;

    if (this.timer) {
      clearInterval(this.timer);
      this._handleBindAutoPlayTimer();
    }
    if (this.props.beforeActionIDChange) {
      if ((0, _validateType.isFunction)(this.props.beforeActionIDChange, 'beforeActionIDChange')) {
        this.props.beforeActionIDChange(this.state.actionID);
      }
    }
    this.setState({
      actionID: id
    }, function () {
      if (_this5.props.afterActionIDChange) {
        if ((0, _validateType.isFunction)(_this5.props.afterActionIDChange, 'beforeActionIDChange')) {
          _this5.props.afterActionIDChange(_this5.state.actionID);
        }
      }
    });
  };

  Carousel.prototype._renderList = function _renderList(carousel_list_style) {
    var _this6 = this;

    var custom_lists = this.props.custom_lists;

    var _use_lazy_load = this.props.lazy_load;

    if (!custom_lists) {
      return this.props.urls.map(function (url, idx) {
        return _react2.default.createElement(_list2.default, {
          width: Math.ceil(_this6.state.listWidth),
          height: _this6.state.listHeight,
          carousel_list_style: carousel_list_style,
          key: 'cm-carousel-list-' + url + '-' + idx,
          idx: idx,
          url: _use_lazy_load ? idx === _this6.state.actionID - 1 || idx === _this6.state.actionID + 1 || idx === _this6.state.actionID ? url : '' : url });
      } /* eslint no-nested-ternary: 0 */
      );
    }
    if (custom_lists) {
      var reactElement = (0, _validateType.isReactElement)(custom_lists);
      var functionElement = (0, _validateType.isFunction)(custom_lists);
      if (reactElement) {
        return _react2.default.createElement(custom_lists, {
          setting: {
            urls: this.props.urls,
            width: Math.ceil(this.state.listWidth),
            height: this.state.listHeight
          }
        });
      }
      if (functionElement) {
        return _react2.default.cloneElement(this.props.custom_lists({
          urls: this.props.urls,
          width: Math.ceil(this.state.listWidth),
          height: this.state.listHeight
        }));
      }
      throw new Error('custom thumbs must be react component or function.');
    }
    return false;
  };

  Carousel.prototype._render_thumbs = function _render_thumbs(thumbs_style, thumbs_item_style) {
    var custom_thumbs = this.props.custom_thumbs;


    if (this.props.use_thumbs && !custom_thumbs) {
      return _react2.default.createElement(_thumbs2.default, {
        thumbsPerPage: this.props.thumbsPerPage || 5,
        thumbs_style: thumbs_style,
        thumbs_item_style: thumbs_item_style,
        actionID: this.state.actionID,
        listWidth: Math.ceil(this.state.listWidth),
        urls: this.props.urls,
        handleChangeThumbsID: this._handleChangeThumbsID.bind(this) });
    }
    if (custom_thumbs) {
      var reactElement = (0, _validateType.isReactElement)(custom_thumbs);
      var functionElement = (0, _validateType.isFunction)(custom_thumbs);
      if (reactElement) {
        return _react2.default.createElement(custom_thumbs, {
          setting: {
            actionID: this.state.actionID,
            urls: this.props.urls
          },
          handler: {
            handleChangeThumbsID: this._handleChangeThumbsID.bind(this)
          }
        });
      }
      if (functionElement) {
        return custom_thumbs({
          actionID: this.state.actionID,
          urls: this.props.urls
        }, { handleChangeThumbsID: this._handleChangeThumbsID.bind(this) });
      }
      throw new Error('custom thumbs must be react component or function.');
    }
    return false;
  };

  Carousel.prototype._render_arrow = function _render_arrow() {
    if (this.props.use_arrow) {
      return [_react2.default.createElement(_arrow.ArrowLeft, {
        key: 'arrow-left',
        wrapperIsHover: this.state.wrapperIsHover,
        handleArrowLeft: this._handleArrowLeft.bind(this),
        useLeftArrow: this.props.use_left_arrow,
        wrapperHeight: this.state.listHeight }), _react2.default.createElement(_arrow.ArrowRight, {
        key: 'arrow-right',
        wrapperIsHover: this.state.wrapperIsHover,
        handleArrowRight: this._handleArrowRight.bind(this),
        useRightArrow: this.props.use_right_arrow,
        wrapperHeight: this.state.listHeight })];
    }
    return false;
  };

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

    var custom_styles = this.props.custom_styles;

    var _wrapper_style = {
      width: Math.ceil(this.state.listWidth),
      position: 'relative'
    };
    var _carousel_wrapper_style = (0, _assign2.default)({}, custom_styles ? custom_styles.wrapper : {});
    var _carousel_list_style = (0, _assign2.default)({}, custom_styles ? custom_styles.list : {});
    var _thumbs_style = (0, _assign2.default)({}, custom_styles ? custom_styles.thumbs : {});
    var _thumbs_item_style = (0, _assign2.default)({}, custom_styles ? custom_styles.thumbs_item : {});

    return _react2.default.createElement(
      'div',
      {
        style: _wrapper_style },
      _react2.default.createElement(
        _wrapper2.default,
        {
          ref: function ref(node) {
            return _this7.wrapper = node;
          } /* eslint no-return-assign: 0 */
          , listWidth: Math.ceil(this.state.listWidth),
          listHeight: this.state.listHeight,
          actionID: this.state.actionID,
          carouse_wrapper_style: _carousel_wrapper_style,
          styleEase: this.props.styleEase,
          touch_mode: this.props.touch_mode,
          onWrapperMouseOver: this._handleWrapperMouseOver.bind(this),
          onWrapperMouseLeave: this._handleWrapperMouseLeave.bind(this),
          handleTouchChangeActionID: this._handleTouchChangeActionID.bind(this) },
        this._renderList.call(this, _carousel_list_style)
      ),
      this._render_arrow.call(this),
      this._render_thumbs.call(this, _thumbs_style, _thumbs_item_style)
    );
  };

  return Carousel;
}(_react.Component);

/* eslint react/forbid-prop-types: 0  */


Carousel.propTypes = {
  urls: _react.PropTypes.array.isRequired,
  options: _react.PropTypes.object,

  use_arrow: _react.PropTypes.bool,
  auto_play: _react.PropTypes.bool,
  use_thumbs: _react.PropTypes.bool,
  touch_mode: _react.PropTypes.bool,
  lazy_load: _react.PropTypes.bool,

  custom_styles: _react.PropTypes.object,
  styleEase: _react.PropTypes.string,

  custom_thumbs: _react.PropTypes.func,
  custom_lists: _react.PropTypes.func,

  use_left_arrow: _react.PropTypes.element,
  use_right_arrow: _react.PropTypes.element,

  beforeWrapperMouseOver: _react.PropTypes.func,
  afterWrapperMouseOver: _react.PropTypes.func,
  beforeWrapperMouseLeave: _react.PropTypes.func,
  afterWrapperMouseLeave: _react.PropTypes.func,
  beforeActionIDChange: _react.PropTypes.func,
  afterActionIDChange: _react.PropTypes.func
};

exports.default = Carousel;