backpack-ui/dist/components/card/cardImage.js

Lonely Planet's Components

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _link = require("../link");

var _link2 = _interopRequireDefault(_link);

var _coverPhoto = require("../coverPhoto");

var _coverPhoto2 = _interopRequireDefault(_coverPhoto);

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

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

var styles = {
  container: {
    overflow: "hidden",
    position: "relative"
  },

  anchor: {
    display: "block"
  },

  coverPhoto: {
    transition: "transform " + _timing2.default.slow + " ease-in-out"
  }
};

var imageSizes = {
  video: {
    width: 410,
    height: 232
  },
  poster: {
    width: 300,
    height: 378
  }
};

var CardImage = function CardImage(_ref) {
  var href = _ref.href,
      onClick = _ref.onClick,
      src = _ref.src,
      aspectRatio = _ref.aspectRatio,
      children = _ref.children,
      opacity = _ref.opacity,
      style = _ref.style;
  return _react2.default.createElement(
    "div",
    {
      className: "Card-image",
      style: [styles.container, opacity && { backgroundColor: _colors2.default.bgOverlay }, style]
    },
    _react2.default.createElement(
      _link2.default,
      {
        to: href,
        onClick: onClick,
        tabIndex: -1,
        style: styles.anchor
      },
      src && _react2.default.createElement(_coverPhoto2.default, {
        src: src,
        width: imageSizes[aspectRatio].width,
        height: imageSizes[aspectRatio].height,
        style: [styles.coverPhoto, { opacity: opacity }]
      }),
      children
    )
  );
};

CardImage.propTypes = {
  href: _propTypes2.default.string,
  onClick: _propTypes2.default.func,
  src: _propTypes2.default.string.isRequired,
  aspectRatio: _propTypes2.default.oneOf(["video", "poster"]).isRequired,
  children: _propTypes2.default.node,
  opacity: _propTypes2.default.number,
  style: _propTypes4.default.style
};

CardImage.defaultProps = {
  aspectRatio: "video"
};

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