backpack-ui/dist/components/imageHero/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _settings = require("../../../settings.json");

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

var propTypes = {
  /**
   * Image path
   */
  image: _react.PropTypes.string.isRequired,

  /**
   * Width and height of the image
   */
  imageSize: _react.PropTypes.arrayOf(_react2.default.PropTypes.number).isRequired
};

var defaultProps = {
  images: "",

  imageSize: []
};

var styles = {
  container: {
    base: {
      backgroundColor: _settings.color.gray,
      backgroundSize: "cover",
      position: "relative"
    }
  }
};

function ImageHero(_ref) {
  var image = _ref.image;
  var imageSize = _ref.imageSize;

  return _react2.default.createElement("div", {
    className: "ImageHero",
    style: [styles.container.base, {
      backgroundImage: "url(" + image + ")",
      paddingBottom: imageSize[1] / imageSize[0] * 100 + "%"
    }]
  });
}

ImageHero.propTypes = propTypes;
ImageHero.defaultProps = defaultProps;

exports.default = (0, _radium2.default)(ImageHero);