react-mapfilter/commonjs/MapView/Popup.js

These components are designed for viewing data in Mapeo. They share a common interface:

"use strict";

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

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

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");

_Object$defineProperty(exports, "__esModule", {
  value: true
});

exports.default = void 0;

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

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

var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));

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

var _reactMapboxGl = require("react-mapbox-gl");

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _clsx2 = _interopRequireDefault(require("clsx"));

var _Image = _interopRequireDefault(require("../internal/Image"));

var _styles = require("@material-ui/core/styles");

// @flow
var useStyles = (0, _styles.makeStyles)({
  wrapper: {
    width: 200,
    padding: 0,
    backgroundColor: 'black',
    cursor: 'pointer',
    position: 'absolute',
    willChange: 'transform',
    top: 0,
    left: 0,
    pointerEvents: 'none'
  },
  wrapperImage: {
    height: 200
  },
  image: {
    width: 200,
    height: 200,
    objectFit: 'cover',
    display: 'block',
    background: '#000000'
  },
  titleBox: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    backgroundColor: 'rgba(0,0,0,0.5)',
    color: 'white',
    padding: '0.25em 0.5em',
    boxSizing: 'border-box'
  },
  title: {
    color: 'white'
  },
  subheading: {
    color: 'white'
  }
});
/*:: type Props = {
  coordinates: [number, number],
  imageUrl?: string,
  title: string,
  subtitle: string
}*/

var Popup = function Popup(_ref) {
  var imageUrl = _ref.imageUrl,
      title = _ref.title,
      subtitle = _ref.subtitle,
      coordinates = _ref.coordinates;
  var map = (0, _react.useContext)(_reactMapboxGl.MapContext);
  var ref = (0, _react.useRef)(null);
  var classes = useStyles();
  var getPopupTransform = (0, _react.useCallback)(function () {
    var _context, _context2;

    if (!ref.current) return;
    var width = ref.current.offsetWidth;
    var height = ref.current.offsetHeight;
    var pos = map.project(coordinates).round();
    var anchor;

    if (pos.y < height) {
      anchor = 'top';
    } else {
      anchor = 'bottom';
    }

    if (pos.x > map.transform.width - width) {
      anchor += '-right';
    } else {
      anchor += '-left';
    }

    var anchorTranslate = {
      'top-left': 'translate(0,0)',
      'top-right': 'translate(-100%,0)',
      'bottom-left': 'translate(0,-100%)',
      'bottom-right': 'translate(-100%,-100%)'
    };
    return (0, _concat.default)(_context = (0, _concat.default)(_context2 = "".concat(anchorTranslate[anchor], " translate(")).call(_context2, pos.x, "px,")).call(_context, pos.y, "px)");
  }, [coordinates, map]);

  var _useState = (0, _react.useState)(getPopupTransform()),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      transform = _useState2[0],
      setTransform = _useState2[1];

  var update = (0, _react.useCallback)(function () {
    return setTransform(getPopupTransform());
  }, [getPopupTransform]);
  (0, _react.useLayoutEffect)(function () {
    map.on('move', update);
    update();
    return function () {
      return map.off('move', update);
    };
  }, [map, update]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx2.default)(classes.wrapper, (0, _defineProperty2.default)({}, classes.wrapperImage, imageUrl)),
    style: {
      transform: transform
    },
    ref: ref
  }, imageUrl && /*#__PURE__*/_react.default.createElement(_Image.default, {
    src: imageUrl,
    className: classes.image
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.titleBox
  }, title && /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "h6",
    className: classes.title
  }, title), subtitle && /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "caption",
    className: classes.subheading
  }, subtitle)));
};

Popup.imageSize = 200;
var _default = Popup;
exports.default = _default;
//# sourceMappingURL=Popup.js.map