react-bkoi-gl/dist/components/popup.js

React components for Barikoi GL JS

import { createPortal } from "react-dom";
import { useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo } from "react";
import { applyReactStyle } from "../utils/apply-react-style.js";
import { MapContext } from "./map.js";
import { deepEqual } from "../utils/deep-equal.js";
import { compareClassNames } from "../utils/compare-class-names.js";
export const Popup = memo(forwardRef((props, ref) => {
  const {
    map,
    mapLib
  } = useContext(MapContext);
  const container = useMemo(() => {
    return document.createElement("div");
  }, []);
  const thisRef = useRef({
    props
  });
  const popup = useMemo(() => {
    const options = {
      ...props
    };
    const pp = new mapLib.Popup(options);
    pp.setLngLat([props.longitude, props.latitude]);
    pp.once("open", e => {
      thisRef.current.props.onOpen?.(e);
    });
    return pp;
  }, []);
  useEffect(() => {
    const onClose = e => {
      thisRef.current.props.onClose?.(e);
    };
    popup.on("close", onClose);
    popup.setDOMContent(container).addTo(map.getMap());
    return () => {
      popup.off("close", onClose);
      if (popup.isOpen()) {
        popup.remove();
      }
    };
  }, []);
  useEffect(() => {
    applyReactStyle(popup.getElement(), props.style);
  }, [props.style]);
  useImperativeHandle(ref, () => popup, []);
  if (popup.isOpen()) {
    const oldProps = thisRef.current.props;
    if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {
      popup.setLngLat([props.longitude, props.latitude]);
    }
    if (props.offset && !deepEqual(oldProps.offset, props.offset)) {
      popup.setOffset(props.offset);
    }
    if (oldProps.anchor !== props.anchor || oldProps.maxWidth !== props.maxWidth) {
      popup.options.anchor = props.anchor;
      popup.setMaxWidth(props.maxWidth);
    }
    const classNameDiff = compareClassNames(oldProps.className, props.className);
    if (classNameDiff) {
      for (const c of classNameDiff) {
        popup.toggleClassName(c);
      }
    }
    thisRef.current.props = props;
  }
  return createPortal(props.children, container);
}));
//# sourceMappingURL=popup.js.map