UNPKG

backpack-ui

Version:

Lonely Planet's Components

199 lines (163 loc) 3.87 kB
"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"); var _heading = require("../heading"); var _heading2 = _interopRequireDefault(_heading); var _strapline = require("../strapline"); var _strapline2 = _interopRequireDefault(_strapline); var _paginatorButton = require("../paginatorButton"); var _paginatorButton2 = _interopRequireDefault(_paginatorButton); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } var styles = { container: { base: { marginLeft: "auto", marginRight: "auto", textAlign: "center" } }, title: { base: { color: _settings.color.blue, fontWeight: "inherit" } }, strapline: { base: { marginTop: ".7rem" } }, button: { base: { marginTop: "2.7rem" } } }; /** * PoiPaginator component */ function PoiPaginator(_ref) { var title = _ref.title; var topChoice = _ref.topChoice; var type = _ref.type; var neighborhood = _ref.neighborhood; var place = _ref.place; var onClick = _ref.onClick; var TopChoiceText = void 0; var PlaceText = void 0; if (topChoice) { TopChoiceText = _react2.default.createElement( "em", { style: styles.topChoice }, "Top choice ", type.toLowerCase() ); } else { TopChoiceText = "" + type.toLowerCase(); } if (neighborhood) { PlaceText = "located in the " + neighborhood + " neighbourhood"; } else if (place) { PlaceText = "located in " + place; } return _react2.default.createElement( "div", { className: "PoiPaginator", style: [styles.container.base, onClick && { cursor: "pointer" }], onClick: onClick }, _react2.default.createElement( _heading2.default, { level: 4, size: "medium", weight: "thin", importance: "high", override: { lineHeight: 34 / 26 } }, "You might also like ", _react2.default.createElement( "strong", { style: styles.title.base }, title ) ), type && _react2.default.createElement( "div", { className: "PoiPaginator-strapline", style: styles.strapline.base }, _react2.default.createElement( _strapline2.default, { size: "tiny", color: "gray" }, TopChoiceText, " ", PlaceText ) ), _react2.default.createElement( "div", { className: "PoiPaginator-button", style: styles.button.base }, _react2.default.createElement(_paginatorButton2.default, { direction: "down", color: "blue", shadow: "tight", size: "small", arrow: "triangle", onClick: onClick }) ) ); } PoiPaginator.propTypes = { /** * Name of the POI */ title: _react2.default.PropTypes.string.isRequired, /** * Show the top choice text */ topChoice: _react2.default.PropTypes.bool, /** * Type of POI */ type: _react2.default.PropTypes.string, /** * Neighborhood where the POI is located */ neighborhood: _react2.default.PropTypes.string, /** * Where the POI is located, if neighborhood is null */ place: _react2.default.PropTypes.string, /** * Function to run on button click */ onClick: _react2.default.PropTypes.func }; PoiPaginator.defaultProps = { title: "", topChoice: false, type: "", neighborhood: "", place: "", onClick: null }; PoiPaginator.styles = styles; exports.default = (0, _radium2.default)(PoiPaginator);