@pansy/react-mapbox-gl
Version:
🌍 基于 Mapbox GL 封装的 React 组件库
81 lines (80 loc) • 2.47 kB
JavaScript
// src/components/Popup/Popup.tsx
import React, { forwardRef, useEffect, useImperativeHandle } from "react";
import { usePortal, useGetState } from "@rcuse/core";
import Mapbox from "mapbox-gl";
import { useMap } from "../../hooks/useMap";
import { useEvents } from "../../hooks/useEvents";
import { usePropsReactive } from "../../hooks/usePropsReactive";
import { applyReactStyle } from "../../utils/applyReactStyle";
import { allProps, setterMap, converterMap } from "./config";
import { MarkerEventMap, MarkerEventList } from "./constant";
var Popup = forwardRef(
(props, ref) => {
const { map } = useMap();
const { Portal, container } = usePortal();
const [popup, setPopup, getPopup] = useGetState();
const { onInstanceCreated } = usePropsReactive(props, popup, {
setterMap,
converterMap
});
useEvents(popup, props, {
eventMap: MarkerEventMap,
eventList: MarkerEventList
});
useImperativeHandle(ref, () => popup, [popup]);
useEffect(
() => {
if (map) {
createInstance().then((popup2) => {
setPopup(popup2);
popup2.addTo(map);
onInstanceCreated();
});
}
},
[map]
);
useEffect(
() => {
const popupElement = popup == null ? void 0 : popup.getElement();
if (popupElement) {
applyReactStyle(popupElement, props.style);
}
},
[props.style, popup]
);
const createInstance = () => {
const options = getCreateOptions(props);
const popup2 = new Mapbox.Popup(options);
popup2.setDOMContent(container);
if (options.lngLat) {
popup2.setLngLat(options.lngLat);
}
return Promise.resolve(popup2);
};
const getCreateOptions = (props2) => {
const options = {};
allProps.forEach((key) => {
if (key in props2) {
options[key] = getSetterValue(key, props2);
}
});
return options;
};
const getSetterValue = (key, props2) => {
var _a, _b;
let value = props2[key];
if (key in converterMap) {
try {
value = (_b = (_a = converterMap)[key]) == null ? void 0 : _b.call(_a, props2[key]);
} catch (error) {
}
}
return value;
};
return /* @__PURE__ */ React.createElement(React.Fragment, null, popup && /* @__PURE__ */ React.createElement(Portal, null, props.children));
}
);
export {
Popup
};