react-bkoi-gl 1.0.6 → 2.0.0

package/src/components/popup.ts

@@ -1,116 +1,113 @@
+/* eslint-disable @typescript-eslint/no-floating-promises */
 /* global document */
-import * as React from 'react';
-import {createPortal} from 'react-dom';
-import {useImperativeHandle, useEffect, useMemo, useRef, useContext, forwardRef, memo} from 'react';
-import {applyReactStyle} from '../utils/apply-react-style';
-
-import type {PopupEvent, PopupInstance} from '../types';
-
-import {MapContext} from './map';
-import {deepEqual} from '../utils/deep-equal';
-
-export type PopupProps<OptionsT, PopupT extends PopupInstance> = OptionsT & {
+import * as React from "react";
+import { createPortal } from "react-dom";
+import {
+  useImperativeHandle,
+  useEffect,
+  useMemo,
+  useRef,
+  useContext,
+  forwardRef,
+  memo,
+} from "react";
+import { applyReactStyle } from "../utils/apply-react-style";
+
+import type { Popup as PopupInstance, PopupOptions } from "../types/lib";
+import type { PopupEvent } from "../types/events";
+
+import { MapContext } from "./map";
+import { deepEqual } from "../utils/deep-equal";
+import { compareClassNames } from "../utils/compare-class-names";
+
+export type PopupProps = PopupOptions & {
   /** Longitude of the anchor location */
   longitude: number;
   /** Latitude of the anchor location */
   latitude: number;
 
-  // These types will be further constraint by OptionsT
-  anchor?: string;
-  offset?: any;
-  className?: string;
-  maxWidth?: string;
-
   /** CSS style override, applied to the control's container */
   style?: React.CSSProperties;
 
-  onOpen?: (e: PopupEvent<PopupT>) => void;
-  onClose?: (e: PopupEvent<PopupT>) => void;
+  onOpen?: (e: PopupEvent) => void;
+  onClose?: (e: PopupEvent) => void;
   children?: React.ReactNode;
 };
 
-// Adapted from https://github.com/mapbox/mapbox-gl-js/blob/v1.13.0/src/ui/popup.js
-function getClassList(className: string) {
-  return new Set(className ? className.trim().split(/\s+/) : []);
-}
-
 /* eslint-disable complexity,max-statements */
-function Popup<PopupOptions, PopupT extends PopupInstance>(
-  props: PopupProps<PopupOptions, PopupT>,
-  ref: React.Ref<PopupT>
-) {
-  const {map, mapLib} = useContext(MapContext);
-  const container = useMemo(() => {
-    return document.createElement('div');
-  }, []);
-  const thisRef = useRef({props});
-  thisRef.current.props = props;
-
-  const popup: PopupT = useMemo(() => {
-    const options = {...props};
-    const pp = new mapLib.Popup(options) as PopupT;
-    pp.setLngLat([props.longitude, props.latitude]);
-    pp.once('open', e => {
-      thisRef.current.props.onOpen?.(e as PopupEvent<PopupT>);
-    });
-    return pp;
-  }, []);
-
-  useEffect(() => {
-    const onClose = e => {
-      thisRef.current.props.onClose?.(e as PopupEvent<PopupT>);
-    };
-    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()) {
-    if (popup.getLngLat().lng !== props.longitude || popup.getLngLat().lat !== props.latitude) {
-      popup.setLngLat([props.longitude, props.latitude]);
-    }
-    if (props.offset && !deepEqual(popup.options.offset, props.offset)) {
-      popup.setOffset(props.offset);
-    }
-    if (popup.options.anchor !== props.anchor || popup.options.maxWidth !== props.maxWidth) {
-      popup.options.anchor = props.anchor;
-      popup.setMaxWidth(props.maxWidth);
-    }
-    if (popup.options.className !== props.className) {
-      const prevClassList = getClassList(popup.options.className);
-      const nextClassList = getClassList(props.className);
-
-      for (const c of prevClassList) {
-        if (!nextClassList.has(c)) {
-          popup.removeClassName(c);
+export const Popup: React.FC<PopupProps> = memo(
+  forwardRef((props: PopupProps, ref: React.Ref<PopupInstance>) => {
+    const { map, mapLib } = useContext(MapContext);
+    const container = useMemo(() => {
+      return document.createElement("div");
+    }, []);
+    const thisRef = useRef({ props });
+
+    const popup: PopupInstance = 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 as PopupEvent);
+      });
+      return pp;
+    }, []);
+
+    useEffect(() => {
+      const onClose = (e) => {
+        thisRef.current.props.onClose?.(e as PopupEvent);
+      };
+      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.setOffset(props.offset);
       }
-      for (const c of nextClassList) {
-        if (!prevClassList.has(c)) {
-          popup.addClassName(c);
+      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);
         }
       }
-      popup.options.className = props.className;
+      thisRef.current.props = props;
     }
-  }
-
-  return createPortal(props.children, container);
-}
 
-export default memo(forwardRef(Popup));
+    return createPortal(props.children, container);
+  }),
+);

package/src/components/scale-control.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import {useEffect, useRef, memo} from 'react';
-import {applyReactStyle} from '../utils/apply-react-style';
-import useControl from './use-control';
+import * as React from "react";
+import { useEffect, useRef, memo } from "react";
+import { applyReactStyle } from "../utils/apply-react-style";
+import { useControl } from "./use-control";
 
-import type {ControlPosition, ScaleControlInstance} from '../types';
+import type { ControlPosition, ScaleControlOptions } from "../types/lib";
 
-export type ScaleControlProps<OptionsT> = OptionsT & {
+export type ScaleControlProps = ScaleControlOptions & {
   // These props will be further constraint by OptionsT
   unit?: string;
   maxWidth?: number;
@@ -16,18 +16,16 @@ export type ScaleControlProps<OptionsT> = OptionsT & {
   style?: React.CSSProperties;
 };
 
-function ScaleControl<ScaleControlOptions, ControlT extends ScaleControlInstance>(
-  props: ScaleControlProps<ScaleControlOptions>
-): null {
-  const ctrl = useControl<ControlT>(({mapLib}) => new mapLib.ScaleControl(props) as ControlT, {
-    position: props.position
+function _ScaleControl(props: ScaleControlProps) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.ScaleControl(props), {
+    position: props.position,
   });
-  const propsRef = useRef<ScaleControlProps<ScaleControlOptions>>(props);
+  const propsRef = useRef<ScaleControlProps>(props);
 
   const prevProps = propsRef.current;
   propsRef.current = props;
 
-  const {style} = props;
+  const { style } = props;
 
   if (props.maxWidth !== undefined && props.maxWidth !== prevProps.maxWidth) {
     ctrl.options.maxWidth = props.maxWidth;
@@ -43,4 +41,4 @@ function ScaleControl<ScaleControlOptions, ControlT extends ScaleControlInstance
   return null;
 }
 
-export default memo(ScaleControl);
+export const ScaleControl: React.FC<ScaleControlProps> = memo(_ScaleControl);

package/src/components/source.ts

@@ -1,35 +1,35 @@
-import * as React from 'react';
-import {useContext, useEffect, useMemo, useState, useRef} from 'react';
-import {cloneElement} from 'react';
-import {MapContext} from './map';
-import assert from '../utils/assert';
-import {deepEqual} from '../utils/deep-equal';
+import * as React from "react";
+import {
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+  cloneElement,
+} from "react";
+import { MapContext } from "./map";
+import assert from "../utils/assert";
+import { deepEqual } from "../utils/deep-equal";
 
 import type {
-  MapInstance,
-  ISource,
-  CustomSource,
   GeoJSONSourceImplementation,
-  ImageSourceImplemtation,
-  AnySourceImplementation
-} from '../types';
-import type {GeoJSONSourceRaw, ImageSourceRaw, VectorSourceRaw} from '../types/style-spec-bkoi-gl';
+  ImageSourceImplementation,
+  AnySourceImplementation,
+} from "../types/internal";
+import type { SourceSpecification } from "../types/style-spec";
+import type { Map as MapInstance } from "../types/lib";
 
-export type SourceProps<SourceT> = (SourceT | CustomSource) & {
+export type SourceProps = SourceSpecification & {
   id?: string;
   children?: any;
 };
 
 let sourceCounter = 0;
 
-function createSource<SourceT extends ISource>(
-  map: MapInstance,
-  id: string,
-  props: SourceProps<SourceT>
-) {
+function createSource(map: MapInstance, id: string, props: SourceProps) {
   // @ts-ignore
   if (map.style && map.style._loaded) {
-    const options = {...props};
+    const options = { ...props };
     delete options.id;
     delete options.children;
     // @ts-ignore
@@ -40,19 +40,23 @@ function createSource<SourceT extends ISource>(
 }
 
 /* eslint-disable complexity */
-function updateSource<SourceT extends ISource>(
+function updateSource(
   source: AnySourceImplementation,
-  props: SourceProps<SourceT>,
-  prevProps: SourceProps<SourceT>
+  props: SourceProps,
+  prevProps: SourceProps,
 ) {
-  assert(props.id === prevProps.id, 'source id changed');
-  assert(props.type === prevProps.type, 'source type changed');
+  assert(props.id === prevProps.id, "source id changed");
+  assert(props.type === prevProps.type, "source type changed");
 
-  let changedKey = '';
+  let changedKey = "";
   let changedKeyCount = 0;
 
   for (const key in props) {
-    if (key !== 'children' && key !== 'id' && !deepEqual(prevProps[key], props[key])) {
+    if (
+      key !== "children" &&
+      key !== "id" &&
+      !deepEqual(prevProps[key], props[key])
+    ) {
       changedKey = key;
       changedKeyCount++;
     }
@@ -64,38 +68,36 @@ function updateSource<SourceT extends ISource>(
 
   const type = props.type;
 
-  if (type === 'geojson') {
-    (source as GeoJSONSourceImplementation).setData(
-      (props as unknown as GeoJSONSourceRaw).data as any
-    );
-  } else if (type === 'image') {
-    (source as ImageSourceImplemtation).updateImage({
-      url: (props as unknown as ImageSourceRaw).url,
-      coordinates: (props as unknown as ImageSourceRaw).coordinates
+  if (type === "geojson") {
+    (source as GeoJSONSourceImplementation).setData(props.data);
+  } else if (type === "image") {
+    (source as ImageSourceImplementation).updateImage({
+      url: props.url,
+      coordinates: props.coordinates,
     });
-  } else if ('setCoordinates' in source && changedKeyCount === 1 && changedKey === 'coordinates') {
-    source.setCoordinates((props as ImageSourceRaw).coordinates);
-  } else if ('setUrl' in source) {
-    // Added in 1.12.0:
-    // vectorTileSource.setTiles
-    // vectorTileSource.setUrl
+  } else {
     switch (changedKey) {
-      case 'url':
-        source.setUrl((props as VectorSourceRaw).url);
+      case "coordinates":
+        // @ts-ignore
+        source.setCoordinates?.(props.coordinates);
+        break;
+      case "url":
+        // @ts-ignore
+        source.setUrl?.(props.url);
         break;
-      case 'tiles':
-        source.setTiles((props as VectorSourceRaw).tiles);
+      case "tiles":
+        // @ts-ignore
+        source.setTiles?.(props.tiles);
         break;
       default:
+        // eslint-disable-next-line
+        console.warn(`Unable to update <Source> prop: ${changedKey}`);
     }
-  } else {
-    // eslint-disable-next-line
-    console.warn(`Unable to update <Source> prop: ${changedKey}`);
   }
 }
 /* eslint-enable complexity */
 
-function Source<SourceT extends ISource>(props: SourceProps<SourceT>) {
+export function Source(props: SourceProps) {
   const map = useContext(MapContext).map.getMap();
   const propsRef = useRef(props);
   const [, setStyleLoaded] = useState(0);
@@ -105,12 +107,13 @@ function Source<SourceT extends ISource>(props: SourceProps<SourceT>) {
   useEffect(() => {
     if (map) {
       /* global setTimeout */
-      const forceUpdate = () => setTimeout(() => setStyleLoaded(version => version + 1), 0);
-      map.on('styledata', forceUpdate);
+      const forceUpdate = () =>
+        setTimeout(() => setStyleLoaded((version) => version + 1), 0);
+      map.on("styledata", forceUpdate);
       forceUpdate();
 
       return () => {
-        map.off('styledata', forceUpdate);
+        map.off("styledata", forceUpdate);
         // @ts-ignore
         if (map.style && map.style._loaded && map.getSource(id)) {
           // Parent effects are destroyed before child ones, see
@@ -145,14 +148,12 @@ function Source<SourceT extends ISource>(props: SourceProps<SourceT>) {
     (source &&
       React.Children.map(
         props.children,
-        child =>
+        (child) =>
           child &&
           cloneElement(child, {
-            source: id
-          })
+            source: id,
+          }),
       )) ||
     null
   );
 }
-
-export default Source;

package/src/components/terrain-control.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { useEffect, memo } from "react";
+import { applyReactStyle } from "../utils/apply-react-style";
+import { useControl } from "./use-control";
+
+import type { ControlPosition } from "../types/lib";
+import type { TerrainSpecification } from "../types/style-spec";
+
+export type TerrainControlProps = TerrainSpecification & {
+  /** Placement of the control relative to the map. */
+  position?: ControlPosition;
+  /** CSS style override, applied to the control's container */
+  style?: React.CSSProperties;
+};
+
+function _TerrainControl(props: TerrainControlProps) {
+  const ctrl = useControl(({ mapLib }) => new mapLib.TerrainControl(props), {
+    position: props.position,
+  });
+
+  useEffect(() => {
+    applyReactStyle(ctrl._container, props.style);
+  }, [props.style]);
+
+  return null;
+}
+
+export const TerrainControl: React.FC<TerrainControlProps> =
+  memo(_TerrainControl);

package/src/components/use-control.ts

@@ -1,45 +1,51 @@
-import {useContext, useMemo, useEffect} from 'react';
-import type {IControl, ControlPosition} from '../types';
-import {MapContext} from './map';
-import type {MapContextValue} from './map';
+import { useContext, useMemo, useEffect } from "react";
+import type { IControl, ControlPosition } from "../types/lib";
+import { MapContext } from "./map";
+import type { MapContextValue } from "./map";
 
 type ControlOptions = {
   position?: ControlPosition;
 };
 
-function useControl<T extends IControl>(
+export function useControl<T extends IControl>(
   onCreate: (context: MapContextValue) => T,
-  opts?: ControlOptions
+  opts?: ControlOptions,
 ): T;
 
-function useControl<T extends IControl>(
+export function useControl<T extends IControl>(
   onCreate: (context: MapContextValue) => T,
   onRemove: (context: MapContextValue) => void,
-  opts?: ControlOptions
+  opts?: ControlOptions,
 ): T;
 
-function useControl<T extends IControl>(
+export function useControl<T extends IControl>(
   onCreate: (context: MapContextValue) => T,
   onAdd: (context: MapContextValue) => void,
   onRemove: (context: MapContextValue) => void,
-  opts?: ControlOptions
+  opts?: ControlOptions,
 ): T;
 
-function useControl<T extends IControl>(
+export function useControl<T extends IControl>(
   onCreate: (context: MapContextValue) => T,
   arg1?: ((context: MapContextValue) => void) | ControlOptions,
   arg2?: ((context: MapContextValue) => void) | ControlOptions,
-  arg3?: ControlOptions
+  arg3?: ControlOptions,
 ): T {
   const context = useContext(MapContext);
   const ctrl = useMemo(() => onCreate(context), []);
 
   useEffect(() => {
     const opts = (arg3 || arg2 || arg1) as ControlOptions;
-    const onAdd = typeof arg1 === 'function' && typeof arg2 === 'function' ? arg1 : null;
-    const onRemove = typeof arg2 === 'function' ? arg2 : typeof arg1 === 'function' ? arg1 : null;
+    const onAdd =
+      typeof arg1 === "function" && typeof arg2 === "function" ? arg1 : null;
+    const onRemove =
+      typeof arg2 === "function"
+        ? arg2
+        : typeof arg1 === "function"
+        ? arg1
+        : null;
 
-    const {map} = context;
+    const { map } = context;
     if (!map.hasControl(ctrl)) {
       map.addControl(ctrl, opts?.position);
       if (onAdd) {
@@ -60,5 +66,3 @@ function useControl<T extends IControl>(
 
   return ctrl;
 }
-
-export default useControl;

package/src/components/use-map.tsx

@@ -1,37 +1,39 @@
-import * as React from 'react';
-import {useState, useCallback, useMemo, useContext} from 'react';
+import * as React from "react";
+import { useState, useCallback, useMemo, useContext } from "react";
 
-import {MapRef} from '../mapbox/create-ref';
-import {MapContext} from './map';
-import {MapInstance} from '../types';
+import { MapRef } from "../maplibre/create-ref";
+import { MapContext } from "./map";
 
 type MountedMapsContextValue = {
-  maps: {[id: string]: MapRef<MapInstance>};
-  onMapMount: (map: MapRef<MapInstance>, id: string) => void;
+  maps: { [id: string]: MapRef };
+  onMapMount: (map: MapRef, id: string) => void;
   onMapUnmount: (id: string) => void;
 };
 
-export const MountedMapsContext = React.createContext<MountedMapsContextValue>(null);
+export const MountedMapsContext =
+  React.createContext<MountedMapsContextValue>(null);
 
-export const MapProvider: React.FC<{children?: React.ReactNode}> = props => {
-  const [maps, setMaps] = useState<{[id: string]: MapRef<MapInstance>}>({});
+export const MapProvider: React.FC<{ children?: React.ReactNode }> = (
+  props,
+) => {
+  const [maps, setMaps] = useState<{ [id: string]: MapRef }>({});
 
-  const onMapMount = useCallback((map: MapRef<MapInstance>, id: string = 'default') => {
-    setMaps(currMaps => {
-      if (id === 'current') {
+  const onMapMount = useCallback((map: MapRef, id: string = "default") => {
+    setMaps((currMaps) => {
+      if (id === "current") {
         throw new Error("'current' cannot be used as map id");
       }
       if (currMaps[id]) {
         throw new Error(`Multiple maps with the same id: ${id}`);
       }
-      return {...currMaps, [id]: map};
+      return { ...currMaps, [id]: map };
     });
   }, []);
 
-  const onMapUnmount = useCallback((id: string = 'default') => {
-    setMaps(currMaps => {
+  const onMapUnmount = useCallback((id: string = "default") => {
+    setMaps((currMaps) => {
       if (currMaps[id]) {
-        const nextMaps = {...currMaps};
+        const nextMaps = { ...currMaps };
         delete nextMaps[id];
         return nextMaps;
       }
@@ -44,7 +46,7 @@ export const MapProvider: React.FC<{children?: React.ReactNode}> = props => {
       value={{
         maps,
         onMapMount,
-        onMapUnmount
+        onMapUnmount,
       }}
     >
       {props.children}
@@ -52,18 +54,18 @@ export const MapProvider: React.FC<{children?: React.ReactNode}> = props => {
   );
 };
 
-export type MapCollection<MapT extends MapInstance> = {
-  [id: string]: MapRef<MapT> | undefined;
-  current?: MapRef<MapT>;
+export type MapCollection = {
+  [id: string]: MapRef | undefined;
+  current?: MapRef;
 };
 
-export function useMap<MapT extends MapInstance>(): MapCollection<MapT> {
+export function useMap(): MapCollection {
   const maps = useContext(MountedMapsContext)?.maps;
   const currentMap = useContext(MapContext);
 
   const mapsWithCurrent = useMemo(() => {
-    return {...maps, current: currentMap?.map};
+    return { ...maps, current: currentMap?.map };
   }, [maps, currentMap]);
 
-  return mapsWithCurrent as MapCollection<MapT>;
+  return mapsWithCurrent as MapCollection;
 }