@6thquake/react-material/Carousel/CarouselArrow.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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

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

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

var _icons = require("@material-ui/icons");

/**
 * @ignore - internal component.
 */
var styles = {
  root: {
    width: '100%',
    height: '0',
    top: '50%',
    position: 'absolute',
    transform: 'translateY(-50%)'
  },
  arrow: {
    position: 'relative',
    top: '-15px',
    height: '30px',
    width: '30px',
    cursor: 'pointer',
    color: 'rgba(0,0,0,0.5)',
    '@global svg': {
      width: '100%',
      height: 'auto'
    }
  },
  pre: {
    float: 'left'
  },
  next: {
    float: 'right'
  }
};

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

  function CarouselArrow(props) {
    (0, _classCallCheck2.default)(this, CarouselArrow);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CarouselArrow).call(this, props));
  }

  (0, _createClass2.default)(CarouselArrow, [{
    key: "componentDidMount",
    value: function componentDidMount() {}
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          pre = _this$props.pre,
          next = _this$props.next,
          classes = _this$props.classes;
      return _react.default.createElement("div", {
        className: classes.root
      }, _react.default.createElement("div", {
        className: "".concat(classes.pre, " ").concat(classes.arrow),
        onClick: pre
      }, _react.default.createElement(_icons.ChevronLeft, null)), _react.default.createElement("div", {
        className: "".concat(classes.next, " ").concat(classes.arrow),
        onClick: next
      }, _react.default.createElement(_icons.ChevronRight, null)));
    }
  }]);
  return CarouselArrow;
}(_react.default.Component);

CarouselArrow.propTypes = {};

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

exports.default = _default;