@vis.gl/react-mapbox/dist/components/popup.js

React components for Mapbox 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";
/* eslint-disable complexity,max-statements */
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 () => {
            // https://github.com/visgl/react-map-gl/issues/1825
            // onClose should not be fired if the popup is removed by unmounting
            // When using React strict mode, the component is mounted twice.
            // Firing the onClose callback here would be a false signal to remove the component.
            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.options.anchor = props.anchor;
            popup.setOffset(props.offset);
        }
        if (oldProps.anchor !== props.anchor || oldProps.maxWidth !== props.maxWidth) {
            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