react-map-gl/dist/es5/components/popup.js

A React wrapper for MapboxGL-js and overlay API.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _baseControl = _interopRequireDefault(require("./base-control"));

var _dynamicPosition = require("../utils/dynamic-position");

var propTypes = Object.assign({}, _baseControl["default"].propTypes, {
  className: _propTypes["default"].string,
  longitude: _propTypes["default"].number.isRequired,
  latitude: _propTypes["default"].number.isRequired,
  altitude: _propTypes["default"].number,
  offsetLeft: _propTypes["default"].number,
  offsetTop: _propTypes["default"].number,
  tipSize: _propTypes["default"].number,
  closeButton: _propTypes["default"].bool,
  closeOnClick: _propTypes["default"].bool,
  anchor: _propTypes["default"].oneOf(Object.keys(_dynamicPosition.ANCHOR_POSITION)),
  dynamicPosition: _propTypes["default"].bool,
  sortByDepth: _propTypes["default"].bool,
  onClose: _propTypes["default"].func
});
var defaultProps = Object.assign({}, _baseControl["default"].defaultProps, {
  className: '',
  altitude: 0,
  offsetLeft: 0,
  offsetTop: 0,
  tipSize: 10,
  anchor: 'bottom',
  dynamicPosition: true,
  sortByDepth: false,
  closeButton: true,
  closeOnClick: true,
  onClose: function onClose() {}
});

var Popup = function (_BaseControl) {
  (0, _inherits2["default"])(Popup, _BaseControl);

  function Popup() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2["default"])(this, Popup);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2["default"])(this, (_getPrototypeOf2 = (0, _getPrototypeOf3["default"])(Popup)).call.apply(_getPrototypeOf2, [this].concat(args)));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_closeOnClick", false);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_contentRef", (0, _react.createRef)());
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onClick", function (evt) {
      if (_this.props.captureClick) {
        evt.stopPropagation();
      }

      if (_this.props.closeOnClick || evt.target.className === 'mapboxgl-popup-close-button') {
        _this.props.onClose();

        var eventManager = _this._context.eventManager;

        if (eventManager) {
          eventManager.once('click', function (e) {
            return e.stopPropagation();
          }, evt.target);
        }
      }
    });
    return _this;
  }

  (0, _createClass2["default"])(Popup, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      (0, _get2["default"])((0, _getPrototypeOf3["default"])(Popup.prototype), "componentDidMount", this).call(this);
      this.forceUpdate();
    }
  }, {
    key: "_getPosition",
    value: function _getPosition(x, y) {
      var viewport = this._context.viewport;
      var _this$props = this.props,
          anchor = _this$props.anchor,
          dynamicPosition = _this$props.dynamicPosition,
          tipSize = _this$props.tipSize;
      var content = this._contentRef.current;

      if (content) {
        return dynamicPosition ? (0, _dynamicPosition.getDynamicPosition)({
          x: x,
          y: y,
          anchor: anchor,
          padding: tipSize,
          width: viewport.width,
          height: viewport.height,
          selfWidth: content.clientWidth,
          selfHeight: content.clientHeight
        }) : anchor;
      }

      return anchor;
    }
  }, {
    key: "_getContainerStyle",
    value: function _getContainerStyle(x, y, z, positionType) {
      var viewport = this._context.viewport;
      var _this$props2 = this.props,
          offsetLeft = _this$props2.offsetLeft,
          offsetTop = _this$props2.offsetTop,
          sortByDepth = _this$props2.sortByDepth;
      var anchorPosition = _dynamicPosition.ANCHOR_POSITION[positionType];
      var left = x + offsetLeft;
      var top = y + offsetTop;
      var style = {
        position: 'absolute',
        transform: "\n        translate(".concat(-anchorPosition.x * 100, "%, ").concat(-anchorPosition.y * 100, "%)\n        translate(").concat(left, "px, ").concat(top, "px)\n      "),
        display: undefined,
        zIndex: undefined
      };

      if (!sortByDepth) {
        return style;
      }

      if (z > 1 || z < -1 || x < 0 || x > viewport.width || y < 0 || y > viewport.height) {
        style.display = 'none';
      } else {
        style.zIndex = Math.floor((1 - z) / 2 * 100000);
      }

      return style;
    }
  }, {
    key: "_renderTip",
    value: function _renderTip(positionType) {
      var tipSize = this.props.tipSize;
      return _react["default"].createElement("div", {
        key: "tip",
        className: "mapboxgl-popup-tip",
        style: {
          borderWidth: tipSize
        }
      });
    }
  }, {
    key: "_renderContent",
    value: function _renderContent() {
      var _this$props3 = this.props,
          closeButton = _this$props3.closeButton,
          children = _this$props3.children;
      var onClick = this._context.eventManager ? null : this._onClick;
      return _react["default"].createElement("div", {
        key: "content",
        ref: this._contentRef,
        className: "mapboxgl-popup-content",
        onClick: onClick
      }, closeButton && _react["default"].createElement("button", {
        key: "close-button",
        className: "mapboxgl-popup-close-button",
        type: "button"
      }, "\xD7"), children);
    }
  }, {
    key: "_render",
    value: function _render() {
      var _this$props4 = this.props,
          className = _this$props4.className,
          longitude = _this$props4.longitude,
          latitude = _this$props4.latitude,
          altitude = _this$props4.altitude;

      var _this$_context$viewpo = this._context.viewport.project([longitude, latitude, altitude]),
          _this$_context$viewpo2 = (0, _slicedToArray2["default"])(_this$_context$viewpo, 3),
          x = _this$_context$viewpo2[0],
          y = _this$_context$viewpo2[1],
          z = _this$_context$viewpo2[2];

      var positionType = this._getPosition(x, y);

      var containerStyle = this._getContainerStyle(x, y, z, positionType);

      return _react["default"].createElement("div", {
        className: "mapboxgl-popup mapboxgl-popup-anchor-".concat(positionType, " ").concat(className),
        style: containerStyle,
        ref: this._containerRef
      }, this._renderTip(positionType), this._renderContent());
    }
  }]);
  return Popup;
}(_baseControl["default"]);

exports["default"] = Popup;
(0, _defineProperty2["default"])(Popup, "propTypes", propTypes);
(0, _defineProperty2["default"])(Popup, "defaultProps", defaultProps);
//# sourceMappingURL=popup.js.map