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

Lonely Planet's Components

"use strict";

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

var _base, _base3, _base5, _image, _description;

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _truncate = require("truncate");

var _truncate2 = _interopRequireDefault(_truncate);

var _moment = require("moment");

var _moment2 = _interopRequireDefault(_moment);

var _reactRouter = require("react-router");

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

var _bookmark = require("../bookmark");

var _bookmark2 = _interopRequireDefault(_bookmark);

var _moreLink = require("../moreLink");

var _moreLink2 = _interopRequireDefault(_moreLink);

var _grid = require("../../utils/grid");

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var containerWidth = (0, _grid.span)(8, "static");
var imageWidth = (0, _grid.span)(2, "static");
var contentWidth = (0, _grid.span)(6, "static");

var styles = {
  image: {
    base: (_base = {
      position: "relative",
      width: (0, _grid.percentage)("78px", "335px")

    }, _defineProperty(_base, "@media (max-width: " + _settings.media.max["768"] + ")", {
      float: "right",
      marginTop: ".9rem"
    }), _defineProperty(_base, "@media (min-width: " + _settings.media.min["768"] + ")", {
      position: "absolute",
      right: 0,
      top: 0,
      width: (0, _grid.percentage)(imageWidth, containerWidth)
    }), _base),

    img: {
      display: "block",
      float: "right"
    }
  },

  content: {
    base: {
      position: "relative"
    }
  },

  info: {
    base: {
      overflow: "hidden"
    }
  },

  header: {
    base: _defineProperty({
      overflow: "hidden"

    }, "@media (min-width: " + _settings.media.min["768"] + ")", {
      marginRight: (0, _grid.percentage)((0, _grid.gutter)("static"), containerWidth),
      width: (0, _grid.percentage)(contentWidth, containerWidth)
    })
  },

  category: {
    base: (_base3 = {
      color: _settings.color.detailHeaderSmall,
      fontSize: "1rem",
      lineHeight: 1,
      marginBottom: ".5rem",
      textTransform: "uppercase"

    }, _defineProperty(_base3, "@media (max-width: " + _settings.media.max["768"] + ")", {
      letterSpacing: ".4px",
      marginTop: ".1rem"
    }), _defineProperty(_base3, "@media (min-width: " + _settings.media.min["768"] + ")", {
      fontSize: "1.2rem",
      marginBottom: "1rem"
    }), _base3),

    sponsored: {
      color: _settings.color.orange,
      fontWeight: 600
    },

    topChoice: {
      color: _settings.color.red,
      fontWeight: 600
    },

    location: _defineProperty({}, "@media (max-width: " + _settings.media.max["768"] + ")", {
      display: "none"
    })
  },

  title: {
    base: _defineProperty({
      color: _settings.color.darkGray,
      float: "left",
      fontSize: "2rem",
      fontWeight: 600,
      letterSpacing: "-1px",
      lineHeight: 24 / 20,
      margin: 0,
      maxWidth: "76%"

    }, "@media (min-width: " + _settings.media.min["768"] + ")", {
      fontSize: "2.8rem",
      lineHeight: 34 / 28,
      maxWidth: "100%",
      textOverflow: "ellipsis",
      overflow: "hidden",
      whiteSpace: "nowrap"
    })
  },

  bookmark: {
    base: (_base5 = {}, _defineProperty(_base5, "@media (max-width: " + _settings.media.max["768"] + ")", {
      bottom: "-2rem",
      position: "absolute",
      right: "-.4rem"
    }), _defineProperty(_base5, "@media (min-width: " + _settings.media.min["768"] + ")", {
      display: "inline-block",
      marginLeft: ".5rem",
      marginTop: ".3rem"
    }), _base5)
  },

  description: {
    base: _defineProperty({
      color: _settings.color.titleGray,
      float: "left",
      fontSize: "1.4rem",
      lineHeight: 24 / 14,
      marginTop: ".9rem",
      width: (0, _grid.percentage)("242px", "335px"),
      fontWeight: 300

    }, "@media (min-width: " + _settings.media.min["768"] + ")", {
      fontSize: "1.8rem",
      lineHeight: 32 / 18,
      marginRight: (0, _grid.percentage)((0, _grid.gutter)("static"), containerWidth),
      marginTop: "1.4rem",
      width: (0, _grid.percentage)(contentWidth, containerWidth)
    }),

    clamp: {
      display: "-webkit-box",
      overflow: "hidden",
      textOverflow: "ellipsis",
      WebkitBoxOrient: "vertical",
      WebkitLineClamp: 2
    }
  },

  link: {
    image: (_image = {}, _defineProperty(_image, "@media (max-width: " + _settings.media.max["1024"] + ")", {
      display: "none"
    }), _defineProperty(_image, "@media (min-width: " + _settings.media.min["1024"] + ")", {
      marginTop: "2rem"
    }), _image),

    description: (_description = {}, _defineProperty(_description, "@media (max-width: " + _settings.media.max["768"] + ")", {
      marginTop: "1.2rem"
    }), _defineProperty(_description, "@media (min-width: " + _settings.media.min["768"] + ") and (max-width: " + _settings.media.max["1024"] + ")", {
      marginTop: "1.9rem"
    }), _defineProperty(_description, "@media (min-width: " + _settings.media.min["1024"] + ")", {
      display: "none"
    }), _description)
  }
};

function ListItem(_ref) {
  var title = _ref.title;
  var slug = _ref.slug;
  var subtype = _ref.subtype;
  var place = _ref.place;
  var image = _ref.image;
  var link = _ref.link;
  var description = _ref.description;
  var sponsored = _ref.sponsored;
  var topChoice = _ref.topChoice;
  var bookmark = _ref.bookmark;
  var bookmarkSize = _ref.bookmarkSize;
  var ad = _ref.ad;
  var date = _ref.date;
  var id = _ref.id;

  var shortDescription = typeof description === "string" && (0, _truncate2.default)(description.replace(/(<([^>]+)>)/ig, ""), 215);

  var showLink = link.title && link.url;

  var ListItemLink = showLink && _react2.default.createElement(
    "div",
    { className: "ListItem-link", style: styles.link.image },
    _react2.default.createElement(
      _moreLink2.default,
      { href: link.url, caps: true },
      link.title
    )
  );

  return _react2.default.createElement(
    "div",
    { className: "ListItem", id: id },
    _react2.default.createElement(
      "div",
      { className: "ListItem-content", style: styles.content.base },
      _react2.default.createElement(
        "header",
        { className: "ListItem-header", style: styles.header.base },
        _react2.default.createElement(
          "div",
          { className: "ListItem-category", style: styles.category.base },
          date && _react2.default.createElement(
            "time",
            { dateTime: (0, _moment2.default)(date).format("YYYY-MM-DD") },
            (0, _moment2.default)(date).format("D MMMM YYYY")
          ),
          !date && sponsored && ad && _react2.default.createElement(
            "span",
            { style: styles.category.sponsored },
            "Sponsored",
            ad
          ),
          " ",
          !date && topChoice && _react2.default.createElement(
            "span",
            { style: styles.category.topChoice },
            "Top Choice"
          ),
          " ",
          !date && subtype,
          " ",
          !date && place.name && _react2.default.createElement(
            "span",
            { style: styles.category.location },
            " in ",
            place.name
          )
        ),
        _react2.default.createElement(
          "h2",
          { className: "ListItem-title", style: styles.title.base },
          _react2.default.createElement(
            _reactRouter.Link,
            { to: "" + slug, style: { color: "currentColor" } },
            title
          )
        ),
        bookmark && _react2.default.createElement(
          "div",
          { className: "ListItem-bookmark", style: styles.bookmark.base },
          _react2.default.createElement(_bookmark2.default, {
            onClick: null,
            size: bookmarkSize
          })
        )
      ),
      description && _react2.default.createElement(
        "div",
        { className: "ListItem-info", style: styles.info.base },
        _react2.default.createElement(
          "div",
          { className: "ListItem-description", style: styles.description.base },
          _react2.default.createElement("div", {
            style: styles.description.clamp,
            dangerouslySetInnerHTML: { __html: shortDescription }
          }),
          showLink && _react2.default.createElement(
            "div",
            { className: "ListItem-link", style: styles.link.description },
            _react2.default.createElement(
              _moreLink2.default,
              { href: link.url, caps: true },
              link.title
            )
          )
        ),
        image.path && showLink && _react2.default.createElement(
          "div",
          { className: "ListItem-image", style: styles.image.base },
          _react2.default.createElement(
            "div",
            { style: styles.image.img },
            _react2.default.createElement(
              _reactRouter.Link,
              { to: "" + slug, style: { display: "block" } },
              _react2.default.createElement("img", {
                src: image.path,
                alt: ""
              })
            ),
            ListItemLink
          )
        ),
        image.path && !showLink && _react2.default.createElement(
          "div",
          { className: "ListItem-image", style: styles.image.base },
          _react2.default.createElement(
            _reactRouter.Link,
            { to: "" + slug, style: styles.image.img },
            _react2.default.createElement("img", { src: image.path, alt: "" })
          )
        ),
        !image.path && showLink && _react2.default.createElement(
          "div",
          {
            className: "ListItem-image",
            style: [styles.image.base, { paddingLeft: "20px" }]
          },
          ListItemLink
        )
      )
    )
  );
}

ListItem.propTypes = {
  /**
   * The name of the POI
   */
  title: _react2.default.PropTypes.string.isRequired,

  /**
   * The URL slug of the POI
   */
  slug: _react2.default.PropTypes.string.isRequired,

  /**
   * The subtype of POI; i.e. Museum
   */
  subtype: _react2.default.PropTypes.string.isRequired,

  /**
   * The place data for the POI; required keys are name and type
   */
  place: _react2.default.PropTypes.shape({
    name: _react2.default.PropTypes.string,
    type: _react2.default.PropTypes.string
  }).isRequired,

  /**
   * Image src for the POI; required keys are path and orientation
   */
  image: _react2.default.PropTypes.shape({
    path: _react2.default.PropTypes.string,
    orientation: _react2.default.PropTypes.oneOf(["", "portrait", "landscape"])
  }),

  /**
   * Link to display under image; required keys are title and url
   */
  link: _react2.default.PropTypes.shape({
    title: _react2.default.PropTypes.string,
    url: _react2.default.PropTypes.string
  }),

  /**
   * Description for POI
   */
  description: _react2.default.PropTypes.string,

  /**
   * Add a "sponsored" label
   */
  sponsored: _react2.default.PropTypes.bool,

  /**
   * Add a "top choice" label
   */
  topChoice: _react2.default.PropTypes.bool,

  /**
   * If list item is able to be bookmarked
   */
  bookmark: _react2.default.PropTypes.bool,

  /**
   * Size of bookmark component
   */
  bookmarkSize: _react2.default.PropTypes.oneOf(["small", "large"]),

  /**
   * Google DFP ad; sponsored must be true
   */
  ad: _react2.default.PropTypes.string,

  /**
   * Publish date for news article
   */
  date: _react2.default.PropTypes.string,

  /**
   * Unique ID for item
   */
  id: _react2.default.PropTypes.string
};

ListItem.defaultProps = {
  title: "",

  slug: "",

  type: "",

  subtype: "",

  place: {},

  image: {},

  link: {},

  description: "",

  sponsored: false,

  topChoice: false,

  bookmark: false,

  bookmarkSize: "small",

  ad: "",

  date: "",

  id: ""
};

ListItem.styles = styles;

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