backpack-ui
Version:
Lonely Planet's Components
461 lines (392 loc) • 12.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
var _defineProperty2 = require("babel-runtime/helpers/defineProperty");
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _base, _base3, _base5, _image, _description;
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 _truncate = require("truncate");
var _truncate2 = _interopRequireDefault(_truncate);
var _moment = require("moment");
var _moment2 = _interopRequireDefault(_moment);
var _reactRouter = require("react-router");
var _colors = require("../../styles/colors");
var _colors2 = _interopRequireDefault(_colors);
var _mq = require("../../styles/mq");
var _mq2 = _interopRequireDefault(_mq);
var _grid = require("../../utils/grid");
var _bookmarkButton = require("../bookmarkButton");
var _bookmarkButton2 = _interopRequireDefault(_bookmarkButton);
var _moreLink = require("../moreLink");
var _moreLink2 = _interopRequireDefault(_moreLink);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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")
}, (0, _defineProperty3.default)(_base, "@media (max-width: " + _mq2.default.max[768] + ")", {
float: "right",
marginTop: ".9rem"
}), (0, _defineProperty3.default)(_base, "@media (min-width: " + _mq2.default.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: (0, _defineProperty3.default)({
overflow: "hidden"
}, "@media (min-width: " + _mq2.default.min[768] + ")", {
marginRight: (0, _grid.percentage)((0, _grid.gutter)("static"), containerWidth),
width: (0, _grid.percentage)(contentWidth, containerWidth)
})
},
category: {
base: (_base3 = {
color: _colors2.default.accentGray,
fontSize: "1rem",
lineHeight: 1,
marginBottom: ".5rem",
textTransform: "uppercase"
}, (0, _defineProperty3.default)(_base3, "@media (max-width: " + _mq2.default.max[768] + ")", {
letterSpacing: ".4px",
marginTop: ".1rem"
}), (0, _defineProperty3.default)(_base3, "@media (min-width: " + _mq2.default.min[768] + ")", {
fontSize: "1.2rem",
marginBottom: "1rem"
}), _base3),
sponsored: {
color: _colors2.default.accentYellow,
fontWeight: 600
},
topChoice: {
color: _colors2.default.accentRed,
fontWeight: 600
},
location: (0, _defineProperty3.default)({}, "@media (max-width: " + _mq2.default.max[768] + ")", {
display: "none"
})
},
title: {
base: (0, _defineProperty3.default)({
color: _colors2.default.textPrimary,
float: "left",
fontSize: "2rem",
fontWeight: 600,
letterSpacing: "-1px",
lineHeight: 24 / 20,
margin: 0,
maxWidth: "76%"
}, "@media (min-width: " + _mq2.default.min[768] + ")", {
fontSize: "2.8rem",
lineHeight: 34 / 28,
maxWidth: "100%",
textOverflow: "ellipsis",
overflow: "hidden",
whiteSpace: "nowrap"
})
},
bookmark: {
base: (_base5 = {}, (0, _defineProperty3.default)(_base5, "@media (max-width: " + _mq2.default.max[768] + ")", {
bottom: "-2rem",
position: "absolute",
right: "-.4rem"
}), (0, _defineProperty3.default)(_base5, "@media (min-width: " + _mq2.default.min[768] + ")", {
display: "inline-block",
marginLeft: ".5rem",
marginTop: ".3rem"
}), _base5)
},
description: {
base: (0, _defineProperty3.default)({
color: _colors2.default.textPrimary,
float: "left",
fontSize: "1.4rem",
lineHeight: 24 / 14,
marginTop: ".9rem",
width: (0, _grid.percentage)("242px", "335px"),
fontWeight: 300
}, "@media (min-width: " + _mq2.default.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 = {}, (0, _defineProperty3.default)(_image, "@media (max-width: " + _mq2.default.max[1024] + ")", {
display: "none"
}), (0, _defineProperty3.default)(_image, "@media (min-width: " + _mq2.default.min[1024] + ")", {
marginTop: "2rem"
}), _image),
description: (_description = {}, (0, _defineProperty3.default)(_description, "@media (max-width: " + _mq2.default.max[768] + ")", {
marginTop: "1.2rem"
}), (0, _defineProperty3.default)(_description, "@media (min-width: " + _mq2.default.min[768] + ") and (max-width: " + _mq2.default.max[1024] + ")", {
marginTop: "1.9rem"
}), (0, _defineProperty3.default)(_description, "@media (min-width: " + _mq2.default.min[1024] + ")", {
display: "none"
}), _description)
}
};
function ListItem(_ref) {
var title = _ref.title,
slug = _ref.slug,
subtype = _ref.subtype,
place = _ref.place,
image = _ref.image,
link = _ref.link,
description = _ref.description,
sponsored = _ref.sponsored,
topChoice = _ref.topChoice,
bookmark = _ref.bookmark,
bookmarkSize = _ref.bookmarkSize,
ad = _ref.ad,
date = _ref.date,
id = _ref.id,
onClick = _ref.onClick;
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, onClick: onClick, style: { color: "currentColor" } },
title
)
),
bookmark && _react2.default.createElement(
"div",
{ className: "ListItem-bookmark", style: styles.bookmark.base },
_react2.default.createElement(_bookmarkButton2.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, onClick: onClick, 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, onClick: onClick, 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: _propTypes2.default.string.isRequired,
/**
* The URL slug of the POI
*/
slug: _propTypes2.default.string.isRequired,
/**
* The subtype of POI; i.e. Museum
*/
subtype: _propTypes2.default.string.isRequired,
/**
* The place data for the POI; required keys are name and type
*/
place: _propTypes2.default.shape({
name: _propTypes2.default.string,
type: _propTypes2.default.string
}).isRequired,
/**
* Image src for the POI; required keys are path and orientation
*/
image: _propTypes2.default.shape({
path: _propTypes2.default.string,
orientation: _propTypes2.default.oneOf(["", "portrait", "landscape"])
}),
/**
* Link to display under image; required keys are title and url
*/
link: _propTypes2.default.shape({
title: _propTypes2.default.string,
url: _propTypes2.default.string
}),
/**
* Description for POI
*/
description: _propTypes2.default.string,
/**
* Add a "sponsored" label
*/
sponsored: _propTypes2.default.bool,
/**
* Add a "top choice" label
*/
topChoice: _propTypes2.default.bool,
/**
* If list item is able to be bookmarked
*/
bookmark: _propTypes2.default.bool,
/**
* Size of bookmark component
*/
bookmarkSize: _propTypes2.default.oneOf(["small", "large"]),
/**
* Google DFP ad; sponsored must be true
*/
ad: _propTypes2.default.string,
/**
* Publish date for news article
*/
date: _propTypes2.default.string,
/**
* Unique ID for item
*/
id: _propTypes2.default.string,
onClick: _propTypes2.default.func
};
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);