| 48 | (typeof ControlPosition)[keyof typeof ControlPosition]; |
| 49 | |
| 50 | export const MapControl: FunctionComponent<MapControlProps> = ({ |
| 51 | children, |
| 52 | position, |
| 53 | className |
| 54 | }) => { |
| 55 | const controlContainer = useMemo(() => document.createElement('div'), []); |
| 56 | const map = useMap(); |
| 57 | |
| 58 | useEffect(() => { |
| 59 | // eslint-disable-next-line react-hooks/immutability -- the control container DOM node is intentionally mutated from effects |
| 60 | controlContainer.className = className ?? ''; |
| 61 | }, [controlContainer, className]); |
| 62 | |
| 63 | useEffect(() => { |
| 64 | if (!map) return; |
| 65 | |
| 66 | const controls = map.controls[position]; |
| 67 | |
| 68 | controls.push(controlContainer); |
| 69 | |
| 70 | return () => { |
| 71 | const controlsArray = controls.getArray(); |
| 72 | // controlsArray could be undefined if the map is in an undefined state (e.g. invalid API-key, see #276 |
| 73 | if (!controlsArray) return; |
| 74 | |
| 75 | const index = controlsArray.indexOf(controlContainer); |
| 76 | controls.removeAt(index); |
| 77 | }; |
| 78 | }, [controlContainer, map, position]); |
| 79 | |
| 80 | return createPortal(children, controlContainer); |
| 81 | }; |