backpack-ui/dist/components/mapMarker/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 _color = require("../../utils/color");

var _icon = require("../icon");

var _icon2 = _interopRequireDefault(_icon);

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

function mapMarker(_ref) {
  var poiType = _ref.poiType;
  var size = _ref.size;
  var hideShadow = _ref.hideShadow;
  var inverse = _ref.inverse;

  var types = {
    sleeping: {
      icon: "Sleep",
      color: _settings.color.poiSleep
    },
    drinking_nightlife: {
      icon: "Drink",
      color: _settings.color.poiDrink
    },
    transport: {
      icon: "Transport",
      color: _settings.color.poiTransport
    },
    activities: {
      icon: "See",
      color: _settings.color.poiSee
    },
    tours: {
      icon: "See",
      color: _settings.color.poiSee
    },
    entertainment: {
      icon: "Play",
      color: _settings.color.poiPlay
    },
    shopping: {
      icon: "Shop",
      color: _settings.color.poiShop
    },
    eating: {
      icon: "Eat",
      color: _settings.color.poiEat
    },
    restaurants: {
      icon: "Eat",
      color: _settings.color.poiEat
    },
    sights: {
      icon: "See",
      color: _settings.color.poiSee
    },
    info: {
      icon: "Default",
      color: _settings.color.poiDefault
    },
    festivals_events: {
      icon: "Play",
      color: _settings.color.poiPlay
    }
  };

  /**
   * Get a size (in pixels) to use in the CSS. A ratio is created by dividing a
   * given number by the default icon size (20). That ratio is then multiplied
   * by the size recieved in the component’s props to create a value that is
   * proportional to the size of the marker.
   * @param  {Number} number Pixel value of desired size
   * @return {Number}        Calculated pixel value
   */
  var getSize = function getSize(number) {
    return Math.ceil(size * (number / 20));
  };

  /**
   * Calculate the font size from the size (height, width). The ratio is
   * calculated by dividing 11 (which is the font size for a 20x20 icon) by 20
   * (which has been defined as the default size).
   */
  var fontSize = getSize(11);

  /**
   * Calculate the border width from the size (height, width). The ratio is
   * calculated by dividing 1 (which is the lowest posible width) by 20 (which
   * has been defined as the default size and is the smallest size that a 1px
   * border should be applied to).
   */
  var borderWidth = getSize(1);

  var styles = {
    container: {
      base: {
        borderRadius: "100%",
        backgroundColor: poiType === "center" ? _settings.color.blue : types[poiType].color,
        color: _settings.color.white,
        borderColor: "rgba(" + (0, _color.rgb)(_settings.color.black) + ", .12)",
        borderStyle: "solid",
        borderWidth: borderWidth / fontSize + "em",
        display: "inline-block",
        fontSize: fontSize + "px",
        height: size / fontSize + "em",
        lineHeight: 1,
        textAlign: "center",
        width: size / fontSize + "em"
      },

      shadow: {
        boxShadow: "0 " + getSize(1) / fontSize + "em\n          " + getSize(5) / fontSize + "em\n          rgba(" + (0, _color.rgb)(_settings.color.black) + ", .25)"
      },

      inverse: {
        backgroundColor: _settings.color.white,
        borderColor: "transparent",
        borderWidth: 0,
        boxShadow: "0 0 " + getSize(5) / fontSize + "em\n          rgba(" + (0, _color.rgb)(_settings.color.black) + ", .25)",
        color: poiType === "center" ? _settings.color.blue : types[poiType].color
      }
    },

    icon: {
      base: {
        position: "relative",
        top: "50%",
        transform: "translateY(-50%)",
        verticalAlign: "top"
      }
    }
  };

  var MarkerIcon = _react2.default.createElement(_icon2.default["Map" + types[poiType].icon], {
    style: styles.icon.base,
    fill: inverse ? types[poiType].color : _settings.color.white
  });

  return _react2.default.createElement(
    "div",
    {
      className: "MapMarker",
      style: [styles.container.base, !hideShadow && styles.container.shadow, inverse && styles.container.inverse]
    },
    poiType === "center" ? _react2.default.createElement(_icon2.default.MapDefault, null) : MarkerIcon
  );
}

mapMarker.propTypes = {
  /**
   * A pre-defined POI type that maps to an icon; "center" is a custom value
   * that can be used to create an LP Blue marker that uses the default icon
   */
  poiType: _react2.default.PropTypes.oneOf(["center", "activities", "drinking_nightlife", "eating", "entertainment", "festivals_events", "info", "restaurants", "shopping", "sights", "sleeping", "tours", "transport"]),

  /**
   * Number to define width and height
   */
  size: _react2.default.PropTypes.number,

  /**
   * Whether or not to hide the shadow on the marker; note that the "inverse"
   * marker always has a shadow, regardless of the value of this prop
   */
  hideShadow: _react2.default.PropTypes.bool,

  /**
   * Reverse the colors; the background becomes white and the icon a color
   */
  inverse: _react2.default.PropTypes.bool
};

mapMarker.defaultProps = {
  poiType: "center",

  size: 20,

  hideShadow: false,

  inverse: false
};

// mapMarker.styles = styles;

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