react-flexible-carousel/es/components/Arrow/arrow.js

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

'use strict';

exports.__esModule = true;
exports.ArrowRight = exports.ArrowLeft = undefined;

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

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

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

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

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

    _this.state = {
      isArrowHover: false
    };
    return _this;
  }

  ArrowLeft.prototype.handleArrowMouseOver = function handleArrowMouseOver() {
    this.setState({ isArrowHover: true });
  };

  ArrowLeft.prototype.handleArrowMouseLeave = function handleArrowMouseLeave() {
    this.setState({ isArrowHover: false });
  };

  ArrowLeft.prototype.render = function render() {
    var _left_arrow_style = {
      left: 0,
      fontSize: 30,
      color: 'black',
      position: 'absolute',
      top: this.props.wrapperHeight / 2,
      cursor: 'default',
      userSelect: 'none',
      transition: 'opacity .3s',
      opacity: this.props.wrapperIsHover || this.state.isArrowHover ? 1 : 0
    };
    if (this.props.useLeftArrow) {
      if ((0, _validateType.isReactElement)(this.props.useLeftArrow, 'useLeftArrow')) {
        var cloneProps = {
          style: _left_arrow_style,
          onClick: this.props.handleArrowLeft,
          onMouseOver: this.handleArrowMouseOver.bind(this),
          onMouseLeave: this.handleArrowMouseLeave.bind(this)
        };
        return _react2.default.cloneElement(this.props.useLeftArrow, cloneProps);
      }
    }
    return _react2.default.createElement(
      'div',
      {
        style: _left_arrow_style,
        onClick: this.props.handleArrowLeft,
        onMouseOver: this.handleArrowMouseOver.bind(this),
        onMouseLeave: this.handleArrowMouseLeave.bind(this) },
      _react2.default.createElement('img', { role: 'presentation', src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAA8klEQVRoQ+3XQQrCQBQE0c7J1JOrN5MB1zFCV30CmXUIeV3ZzJaTn+3k358LMF3QKnBP8tzBvpOsZ/4+FuCV5LbzdY8k65m/jwHA1l9aA4CtbwDQ9Q0Auj4NwNenAfj6JEBZnwQo61MAbX0KoK1PANT1CYC6fhugr98G6Os3ASPrNwEj67cAY+u3AGPrX4DvBfbXL7QKrTsvclpXyrHfqAUYq9ACrN9jpEITMFKhCRip0AboFdoAvQIBUCsQALUCBdAqUACtAglQKpAApQINwCvQALyCAUArGAC0ggXAKlgA5DrZutRjH3fkxVeBIyuRz3wAEydQMTmQm2EAAAAASUVORK5CYII=', width: '48', height: '48' })
    );
  };

  return ArrowLeft;
}(_react.Component);

var ArrowRight = function (_Component2) {
  (0, _inherits3.default)(ArrowRight, _Component2);

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

    var _this2 = (0, _possibleConstructorReturn3.default)(this, _Component2.call(this, props));

    _this2.state = {
      isArrowHover: false
    };
    return _this2;
  }

  ArrowRight.prototype.handleArrowMouseOver = function handleArrowMouseOver() {
    this.setState({ isArrowHover: true });
  };

  ArrowRight.prototype.handleArrowMouseLeave = function handleArrowMouseLeave() {
    this.setState({ isArrowHover: false });
  };

  ArrowRight.prototype.render = function render() {
    var _right_arrow_style = {
      right: 0,
      fontSize: 30,
      color: 'black',
      position: 'absolute',
      top: this.props.wrapperHeight / 2,
      cursor: 'default',
      userSelect: 'none',
      transition: 'opacity .3s',
      opacity: this.props.wrapperIsHover || this.state.isArrowHover ? 1 : 0
    };
    if (this.props.useRightArrow) {
      if ((0, _validateType.isReactElement)(this.props.useRightArrow, 'useRightArrow')) {
        var cloneProps = {
          style: _right_arrow_style,
          onClick: this.props.handleArrowRight,
          onMouseOver: this.handleArrowMouseOver.bind(this),
          onMouseLeave: this.handleArrowMouseLeave.bind(this)
        };
        return _react2.default.cloneElement(this.props.useRightArrow, cloneProps);
      }
    }
    return _react2.default.createElement(
      'div',
      {
        style: _right_arrow_style,
        onClick: this.props.handleArrowRight,
        onMouseOver: this.handleArrowMouseOver.bind(this),
        onMouseLeave: this.handleArrowMouseLeave.bind(this) },
      _react2.default.createElement('img', { role: 'presentation', src: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAA9ElEQVRoQ+3XSwrCQBgE4c7J1JOrN5NZC/FBV/0GnLWG+bqyyZaDn+3g988fMF2wUeCW5LQDuSRZv0FOA3BOct253br8QiCnAVgXG6vQAoxVaAHGKjQBIxWagJEKbYBeoQ3QKxAAtQIBUCtQAK0CBdAqkAClAglQKtAAvAINwCsYALSCAUArWACswq8A7kkW8uNjAbBPTgPw6vX5ev2VywBg6xsAdH0DgK5PA/D1aQC+PglQ1icByvoUQFufAmjrEwB1fQKgrt8G6Ou3Afr6TcDI+k3AyPotwNj6LcDY+i3Ax9+xzT8YX2TN+z496w9A533j4Q8TJ1AxjLrO4wAAAABJRU5ErkJggg==', width: '48', height: '48' })
    );
  };

  return ArrowRight;
}(_react.Component);

exports.ArrowLeft = ArrowLeft;
exports.ArrowRight = ArrowRight;