backpack-ui/dist/components/listItemImage/index.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 _imageLoader = require("../imageLoader");

var _imageLoader2 = _interopRequireDefault(_imageLoader);

var _placeholder = require("../placeholder");

var _placeholder2 = _interopRequireDefault(_placeholder);

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

function ListItemImage(_ref) {
  var image = _ref.image,
      title = _ref.title;

  var renderPlaceholder = function renderPlaceholder() {
    return _react2.default.createElement(_placeholder2.default, {
      title: title,
      fontSize: 50,
      aspectRatio: 5 / 4
    });
  };

  return _react2.default.createElement(
    _imageLoader2.default,
    {
      src: image.path,
      preloader: function preloader() {
        return renderPlaceholder(title);
      }
    },
    renderPlaceholder(title)
  );
}

ListItemImage.propTypes = {
  /**
   * The name of the POI
   * key: name
   */
  title: _propTypes2.default.string.isRequired,

  /**
   * Image src for the POI; required keys are path and orientation
   * partner-activities key: links.image
   */
  image: _propTypes2.default.shape({
    path: _propTypes2.default.string,
    orientation: _propTypes2.default.oneOf(["", "portrait", "landscape"])
  })
};

exports.default = ListItemImage;