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

Lonely Planet's Components

"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 _moreLink = require("../moreLink");

var _moreLink2 = _interopRequireDefault(_moreLink);

var _staticMap = require("../staticMap");

var _staticMap2 = _interopRequireDefault(_staticMap);

var _mixins = require("../../utils/mixins");

var _schema = require("../../utils/schema");

var _schema2 = _interopRequireDefault(_schema);

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

function Location(_ref) {
  var name = _ref.name;
  var street = _ref.street;
  var place = _ref.place;
  var coordinates = _ref.coordinates;
  var mobile = _ref.mobile;

  var styles = {
    container: {
      base: {}
    },

    address: {
      base: {}
    },

    directionsLink: {
      base: {
        borderTop: "1px solid " + _settings.color.gray,
        display: "inline-block",
        marginTop: "10px",
        paddingRight: "13px",
        paddingTop: "13px"
      }
    },

    map: {
      base: {}
    }
  };

  var schemaProps = (0, _schema2.default)({
    itemProp: "address",
    itemType: "PostalAddress"
  });

  return _react2.default.createElement(
    "div",
    { className: "Location clearfix", style: styles.container.base },
    (street || place && place.length > 0 || coordinates) && _react2.default.createElement(
      "div",
      { className: "Location-address", style: [mobile && { float: "left" }] },
      (street || place && place.length > 0) && _react2.default.createElement(
        "div",
        schemaProps,
        street && _react2.default.createElement(
          "div",
          { itemProp: "streetAddress" },
          street
        ),
        place && place.length > 0 && _react2.default.createElement(
          "div",
          null,
          place.map(function (placeItem, i) {
            return _react2.default.createElement(
              "span",
              { key: placeItem.title + " span" },
              _react2.default.createElement(
                "a",
                { key: placeItem.title, style: (0, _mixins.blueLink)(), href: placeItem.href },
                _react2.default.createElement(
                  "span",
                  { itemProp: placeItem.type === "city" ? "addressLocality" : "addressCountry" },
                  placeItem.title
                )
              ),
              i !== place.length - 1 && ", "
            );
          })
        )
      ),
      coordinates && mobile && _react2.default.createElement(
        "div",
        { style: styles.directionsLink.base },
        _react2.default.createElement(
          _moreLink2.default,
          {
            href: "https://www.google.com/maps/place/" + (name.split(" ").join("+") + ",") + (coordinates[1] + "," + coordinates[0]),
            size: "small"
          },
          "Get directions"
        )
      )
    ),
    coordinates && _react2.default.createElement(
      "div",
      {
        className: "Location-map",
        style: [mobile && { float: "right", marginTop: "-26px" }]
      },
      _react2.default.createElement(_staticMap2.default, {
        location: coordinates.join(","),
        size: mobile ? "88x88" : "278x90",
        sidebar: !mobile,
        hideAttribution: mobile,
        name: name,
        url: mobile ? "https://www.google.com/maps/place/" + (name.split(" ").join("+") + ",") + (coordinates[1] + "," + coordinates[0]) : ""
      })
    )
  );
}

Location.propTypes = {
  /**
   * Name of the location; used for the static map and in the Google URL with
   * the coordinates
   */
  name: _react2.default.PropTypes.string.isRequired,

  /**
   * Street address of the location
   */
  street: _react2.default.PropTypes.string.isRequired,

  /**
   * An array of containing places, usually city and country
   */
  place: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape({
    href: _react2.default.PropTypes.string,
    title: _react2.default.PropTypes.string,
    type: _react2.default.PropTypes.string
  })).isRequired,

  /**
   * An array of latitude and longitude coordinates; used in the Google URL
   */
  coordinates: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.number).isRequired,

  /**
   * Should mobile-specific styles and props be used
   */
  mobile: _react2.default.PropTypes.bool.isRequired
};

Location.defaultProps = {
  name: "",

  street: "",

  place: null,

  coordinates: null,

  mobile: false
};

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