react-flexible-carousel/es/components/Wrapper/wrapper.js

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

'use strict';

exports.__esModule = true;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

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);

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

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

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

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

    _this.state = {
      is_touched: false,
      start_x: 0,
      move_x: 0
    };
    return _this;
  }

  Wrapper.prototype._handleTouchStart = function _handleTouchStart(e) {
    this.setState({
      start_x: e.nativeEvent.changedTouches[0].clientX,
      move_x: e.nativeEvent.changedTouches[0].clientX,
      is_touched: true
    });
  };

  Wrapper.prototype._handleTouchMove = function _handleTouchMove(e) {
    this.setState({
      move_x: e.nativeEvent.changedTouches[0].clientX
    });
  };

  Wrapper.prototype._handleTouchEnd = function _handleTouchEnd() {
    var _correctX = this.state.start_x - this.state.move_x;
    if (_correctX !== 0) {
      this.props.handleTouchChangeActionID(_correctX);
    }
    this.setState({
      start_x: 0,
      move_x: 0,
      is_touched: false
    });
  };

  Wrapper.prototype.render = function render() {
    var children_count = _react2.default.Children.count(this.props.children);
    var children = _react2.default.Children.map(this.props.children, function (children_list) {
      return children_list;
    });
    var inner_wrapper_style = (0, _assign2.default)({}, {
      width: this.props.listWidth,
      height: this.props.listHeight,
      overflow: 'hidden'
    }, this.props.carouse_wrapper_style);
    var children_style = {
      width: Math.ceil(parseInt(this.props.listWidth, 10) * children_count),
      height: this.props.listHeight,
      transition: this.state.is_touched ? 'none' : 'transform .3s ' + (this.props.styleEase ? this.props.styleEase : 'ease-out'),
      transform: 'translateX(-' + (Math.ceil(parseInt(this.props.listWidth, 10) * this.props.actionID) + (this.state.start_x - this.state.move_x)) + 'px)'
    };
    var touch_bind = this.props.touch_mode ? {
      onTouchStart: this._handleTouchStart.bind(this),
      onTouchMove: this._handleTouchMove.bind(this),
      onTouchEnd: this._handleTouchEnd.bind(this)
    } : {};
    return _react2.default.createElement(
      'div',
      (0, _extends3.default)({
        style: inner_wrapper_style,
        onMouseOver: this.props.onWrapperMouseOver,
        onMouseLeave: this.props.onWrapperMouseLeave
      }, touch_bind),
      _react2.default.createElement(
        'div',
        {
          style: children_style },
        children
      )
    );
  };

  return Wrapper;
}(_react.Component);

exports.default = Wrapper;