react-bkoi-gl 1.0.7 → 2.0.1

package/src/components/map.tsx

@@ -1,155 +0,0 @@
-import * as React from 'react';
-import {useState, useRef, useEffect, useContext, useMemo, useImperativeHandle} from 'react';
-
-import {MountedMapsContext} from './use-map';
-import Mapbox, {MapboxProps} from '../mapbox/mapbox';
-import createRef, {MapRef} from '../mapbox/create-ref';
-
-import type {CSSProperties} from 'react';
-import useIsomorphicLayoutEffect from '../utils/use-isomorphic-layout-effect';
-import setGlobals, {GlobalSettings} from '../utils/set-globals';
-import type {MapLib, MapInstance, MapStyle, Callbacks} from '../types';
-
-export type MapContextValue<MapT extends MapInstance = MapInstance> = {
-  mapLib: MapLib<MapT>;
-  map: MapRef<MapT>;
-};
-
-export const MapContext = React.createContext<MapContextValue>(null);
-
-type MapInitOptions<MapOptions> = Omit<
-  MapOptions,
-  'style' | 'container' | 'bounds' | 'fitBoundsOptions' | 'center'
->;
-
-export type MapProps<
-  MapOptions,
-  StyleT extends MapStyle,
-  CallbacksT extends Callbacks,
-  MapT extends MapInstance
-> = MapInitOptions<MapOptions> &
-  MapboxProps<StyleT, CallbacksT> &
-  GlobalSettings & {
-    mapLib?: MapLib<MapT> | Promise<MapLib<MapT>>;
-    reuseMaps?: boolean;
-    /** Map container id */
-    id?: string;
-    /** Map container CSS style */
-    style?: CSSProperties;
-    children?: any;
-  };
-
-export default function Map<
-  MapOptions,
-  StyleT extends MapStyle,
-  CallbacksT extends Callbacks,
-  MapT extends MapInstance
->(
-  props: MapProps<MapOptions, StyleT, CallbacksT, MapT>,
-  ref: React.Ref<MapRef<MapT>>,
-  defaultLib: MapLib<MapT> | Promise<MapLib<MapT>>
-) {
-  const mountedMapsContext = useContext(MountedMapsContext);
-  const [mapInstance, setMapInstance] = useState<Mapbox<StyleT, CallbacksT, MapT>>(null);
-  const containerRef = useRef();
-
-  const {current: contextValue} = useRef<MapContextValue<MapT>>({mapLib: null, map: null});
-
-  useEffect(() => {
-    const mapLib = props.mapLib;
-    let isMounted = true;
-    let mapbox: Mapbox<StyleT, CallbacksT, MapT>;
-
-    Promise.resolve(mapLib || defaultLib)
-      .then((module: MapLib<MapT> | {default: MapLib<MapT>}) => {
-        if (!isMounted) {
-          return;
-        }
-        if (!module) {
-          throw new Error('Invalid mapLib');
-        }
-        const mapboxgl = 'Map' in module ? module : module.default;
-        if (!mapboxgl.Map) {
-          throw new Error('Invalid mapLib');
-        }
-
-        // workerUrl & workerClass may change the result of supported()
-        // https://github.com/visgl/react-map-gl/discussions/2027
-        setGlobals(mapboxgl, props);
-        if (!mapboxgl.supported || mapboxgl.supported(props)) {
-          if (props.reuseMaps) {
-            mapbox = Mapbox.reuse(props, containerRef.current);
-          }
-          if (!mapbox) {
-            mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current);
-          }
-          contextValue.map = createRef(mapbox);
-          contextValue.mapLib = mapboxgl;
-
-          setMapInstance(mapbox);
-          mountedMapsContext?.onMapMount(contextValue.map, props.id);
-        } else {
-          throw new Error('Map is not supported by this browser');
-        }
-      })
-      .catch(error => {
-        const {onError} = props;
-        if (onError) {
-          onError({
-            type: 'error',
-            target: null,
-            originalEvent: null,
-            error
-          });
-        } else {
-          console.error(error); // eslint-disable-line
-        }
-      });
-
-    return () => {
-      isMounted = false;
-      if (mapbox) {
-        mountedMapsContext?.onMapUnmount(props.id);
-        if (props.reuseMaps) {
-          mapbox.recycle();
-        } else {
-          mapbox.destroy();
-        }
-      }
-    };
-  }, []);
-
-  useIsomorphicLayoutEffect(() => {
-    if (mapInstance) {
-      mapInstance.setProps(props);
-    }
-  });
-
-  useImperativeHandle(ref, () => contextValue.map, [mapInstance]);
-
-  const style: CSSProperties = useMemo(
-    () => ({
-      position: 'relative',
-      width: '100%',
-      height: '100%',
-      ...props.style
-    }),
-    [props.style]
-  );
-
-  const CHILD_CONTAINER_STYLE = {
-    height: '100%'
-  };
-
-  return (
-    <div id={props.id} ref={containerRef} style={style}>
-      {mapInstance && (
-        <MapContext.Provider value={contextValue}>
-          <div mapboxgl-children="" style={CHILD_CONTAINER_STYLE}>
-            {props.children}
-          </div>
-        </MapContext.Provider>
-      )}
-    </div>
-  );
-}

package/src/components/marker.ts

@@ -1,137 +0,0 @@
-/* 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 {MarkerEvent, MarkerDragEvent, PointLike, MarkerInstance} from '../types';
-
-import {MapContext} from './map';
-import {arePointsEqual} from '../utils/deep-equal';
-
-export type MarkerProps<OptionsT, MarkerT extends MarkerInstance> = OptionsT & {
-  /** Longitude of the anchor location */
-  longitude: number;
-  /** Latitude of the anchor location */
-  latitude: number;
-
-  // These types will be further constraint by OptionsT
-  draggable?: boolean;
-  offset?: PointLike;
-  pitchAlignment?: string;
-  rotation?: number;
-  rotationAlignment?: string;
-  popup?: any;
-
-  /** CSS style override, applied to the control's container */
-  style?: React.CSSProperties;
-  onClick?: (e: MarkerEvent<MarkerT, MouseEvent>) => void;
-  onDragStart?: (e: MarkerDragEvent<MarkerT>) => void;
-  onDrag?: (e: MarkerDragEvent<MarkerT>) => void;
-  onDragEnd?: (e: MarkerDragEvent<MarkerT>) => void;
-  children?: React.ReactNode;
-};
-
-/* eslint-disable complexity,max-statements */
-function Marker<MarkerOptions, MarkerT extends MarkerInstance>(
-  props: MarkerProps<MarkerOptions, MarkerT>,
-  ref: React.Ref<MarkerT>
-) {
-  const {map, mapLib} = useContext(MapContext);
-  const thisRef = useRef({props});
-  thisRef.current.props = props;
-
-  const marker: MarkerT = useMemo(() => {
-    let hasChildren = false;
-    React.Children.forEach(props.children, el => {
-      if (el) {
-        hasChildren = true;
-      }
-    });
-    const options = {
-      ...props,
-      element: hasChildren ? document.createElement('div') : null
-    };
-
-    const mk = new mapLib.Marker(options) as MarkerT;
-    mk.setLngLat([props.longitude, props.latitude]);
-
-    mk.getElement().addEventListener('click', (e: MouseEvent) => {
-      thisRef.current.props.onClick?.({
-        type: 'click',
-        target: mk,
-        originalEvent: e
-      });
-    });
-
-    mk.on('dragstart', e => {
-      const evt = e as MarkerDragEvent<MarkerT>;
-      evt.lngLat = marker.getLngLat();
-      thisRef.current.props.onDragStart?.(evt);
-    });
-    mk.on('drag', e => {
-      const evt = e as MarkerDragEvent<MarkerT>;
-      evt.lngLat = marker.getLngLat();
-      thisRef.current.props.onDrag?.(evt);
-    });
-    mk.on('dragend', e => {
-      const evt = e as MarkerDragEvent<MarkerT>;
-      evt.lngLat = marker.getLngLat();
-      thisRef.current.props.onDragEnd?.(evt);
-    });
-
-    return mk;
-  }, []);
-
-  useEffect(() => {
-    marker.addTo(map.getMap());
-
-    return () => {
-      marker.remove();
-    };
-  }, []);
-
-  const {
-    longitude,
-    latitude,
-    offset,
-    style,
-    draggable = false,
-    popup = null,
-    rotation = 0,
-    rotationAlignment = 'auto',
-    pitchAlignment = 'auto'
-  } = props;
-
-  useEffect(() => {
-    applyReactStyle(marker.getElement(), style);
-  }, [style]);
-
-  useImperativeHandle(ref, () => marker, []);
-
-  if (marker.getLngLat().lng !== longitude || marker.getLngLat().lat !== latitude) {
-    marker.setLngLat([longitude, latitude]);
-  }
-  if (offset && !arePointsEqual(marker.getOffset(), offset)) {
-    marker.setOffset(offset);
-  }
-  if (marker.isDraggable() !== draggable) {
-    marker.setDraggable(draggable);
-  }
-  if (marker.getRotation() !== rotation) {
-    marker.setRotation(rotation);
-  }
-  if (marker.getRotationAlignment() !== rotationAlignment) {
-    marker.setRotationAlignment(rotationAlignment);
-  }
-  if (marker.getPitchAlignment() !== pitchAlignment) {
-    marker.setPitchAlignment(pitchAlignment);
-  }
-  if (marker.getPopup() !== popup) {
-    marker.setPopup(popup);
-  }
-
-  return createPortal(props.children, marker.getElement());
-}
-
-export default memo(forwardRef(Marker));

package/src/components/navigation-control.ts

@@ -1,29 +0,0 @@
-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, NavigationControlInstance} from '../types';
-
-export type NavigationControlProps<OptionsT> = OptionsT & {
-  /** Placement of the control relative to the map. */
-  position?: ControlPosition;
-  /** CSS style override, applied to the control's container */
-  style?: React.CSSProperties;
-};
-
-function NavigationControl<NavigationControlOptions, ControlT extends NavigationControlInstance>(
-  props: NavigationControlProps<NavigationControlOptions>
-): null {
-  const ctrl = useControl<ControlT>(({mapLib}) => new mapLib.NavigationControl(props) as ControlT, {
-    position: props.position
-  });
-
-  useEffect(() => {
-    applyReactStyle(ctrl._container, props.style);
-  }, [props.style]);
-
-  return null;
-}
-
-export default memo(NavigationControl);

package/src/components/popup.ts

@@ -1,116 +0,0 @@
-/* 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 & {
-  /** 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;
-  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);
-        }
-      }
-      for (const c of nextClassList) {
-        if (!prevClassList.has(c)) {
-          popup.addClassName(c);
-        }
-      }
-      popup.options.className = props.className;
-    }
-  }
-
-  return createPortal(props.children, container);
-}
-
-export default memo(forwardRef(Popup));

package/src/components/scale-control.ts

@@ -1,46 +0,0 @@
-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';
-
-export type ScaleControlProps<OptionsT> = OptionsT & {
-  // These props will be further constraint by OptionsT
-  unit?: string;
-  maxWidth?: number;
-
-  /** Placement of the control relative to the map. */
-  position?: ControlPosition;
-  /** CSS style override, applied to the control's container */
-  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
-  });
-  const propsRef = useRef<ScaleControlProps<ScaleControlOptions>>(props);
-
-  const prevProps = propsRef.current;
-  propsRef.current = props;
-
-  const {style} = props;
-
-  if (props.maxWidth !== undefined && props.maxWidth !== prevProps.maxWidth) {
-    ctrl.options.maxWidth = props.maxWidth;
-  }
-  if (props.unit !== undefined && props.unit !== prevProps.unit) {
-    ctrl.setUnit(props.unit);
-  }
-
-  useEffect(() => {
-    applyReactStyle(ctrl._container, style);
-  }, [style]);
-
-  return null;
-}
-
-export default memo(ScaleControl);

package/src/components/source.ts

@@ -1,158 +0,0 @@
-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 type {
-  MapInstance,
-  ISource,
-  CustomSource,
-  GeoJSONSourceImplementation,
-  ImageSourceImplemtation,
-  AnySourceImplementation
-} from '../types';
-import type {GeoJSONSourceRaw, ImageSourceRaw, VectorSourceRaw} from '../types/style-spec-bkoi-gl';
-
-export type SourceProps<SourceT> = (SourceT | CustomSource) & {
-  id?: string;
-  children?: any;
-};
-
-let sourceCounter = 0;
-
-function createSource<SourceT extends ISource>(
-  map: MapInstance,
-  id: string,
-  props: SourceProps<SourceT>
-) {
-  // @ts-ignore
-  if (map.style && map.style._loaded) {
-    const options = {...props};
-    delete options.id;
-    delete options.children;
-    // @ts-ignore
-    map.addSource(id, options);
-    return map.getSource(id);
-  }
-  return null;
-}
-
-/* eslint-disable complexity */
-function updateSource<SourceT extends ISource>(
-  source: AnySourceImplementation,
-  props: SourceProps<SourceT>,
-  prevProps: SourceProps<SourceT>
-) {
-  assert(props.id === prevProps.id, 'source id changed');
-  assert(props.type === prevProps.type, 'source type changed');
-
-  let changedKey = '';
-  let changedKeyCount = 0;
-
-  for (const key in props) {
-    if (key !== 'children' && key !== 'id' && !deepEqual(prevProps[key], props[key])) {
-      changedKey = key;
-      changedKeyCount++;
-    }
-  }
-
-  if (!changedKeyCount) {
-    return;
-  }
-
-  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
-    });
-  } 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
-    switch (changedKey) {
-      case 'url':
-        source.setUrl((props as VectorSourceRaw).url);
-        break;
-      case 'tiles':
-        source.setTiles((props as VectorSourceRaw).tiles);
-        break;
-      default:
-    }
-  } else {
-    // eslint-disable-next-line
-    console.warn(`Unable to update <Source> prop: ${changedKey}`);
-  }
-}
-/* eslint-enable complexity */
-
-function Source<SourceT extends ISource>(props: SourceProps<SourceT>) {
-  const map = useContext(MapContext).map.getMap();
-  const propsRef = useRef(props);
-  const [, setStyleLoaded] = useState(0);
-
-  const id = useMemo(() => props.id || `jsx-source-${sourceCounter++}`, []);
-
-  useEffect(() => {
-    if (map) {
-      /* global setTimeout */
-      const forceUpdate = () => setTimeout(() => setStyleLoaded(version => version + 1), 0);
-      map.on('styledata', forceUpdate);
-      forceUpdate();
-
-      return () => {
-        map.off('styledata', forceUpdate);
-        // @ts-ignore
-        if (map.style && map.style._loaded && map.getSource(id)) {
-          // Parent effects are destroyed before child ones, see
-          // https://github.com/facebook/react/issues/16728
-          // Source can only be removed after all child layers are removed
-          const allLayers = map.getStyle()?.layers;
-          if (allLayers) {
-            for (const layer of allLayers) {
-              // @ts-ignore (2339) source does not exist on all layer types
-              if (layer.source === id) {
-                map.removeLayer(layer.id);
-              }
-            }
-          }
-          map.removeSource(id);
-        }
-      };
-    }
-    return undefined;
-  }, [map]);
-
-  // @ts-ignore
-  let source = map && map.style && map.getSource(id);
-  if (source) {
-    updateSource(source, props, propsRef.current);
-  } else {
-    source = createSource(map, id, props);
-  }
-  propsRef.current = props;
-
-  return (
-    (source &&
-      React.Children.map(
-        props.children,
-        child =>
-          child &&
-          cloneElement(child, {
-            source: id
-          })
-      )) ||
-    null
-  );
-}
-
-export default Source;

package/src/components/use-control.ts

@@ -1,64 +0,0 @@
-import {useContext, useMemo, useEffect} from 'react';
-import type {IControl, ControlPosition} from '../types';
-import {MapContext} from './map';
-import type {MapContextValue} from './map';
-
-type ControlOptions = {
-  position?: ControlPosition;
-};
-
-function useControl<T extends IControl>(
-  onCreate: (context: MapContextValue) => T,
-  opts?: ControlOptions
-): T;
-
-function useControl<T extends IControl>(
-  onCreate: (context: MapContextValue) => T,
-  onRemove: (context: MapContextValue) => void,
-  opts?: ControlOptions
-): T;
-
-function useControl<T extends IControl>(
-  onCreate: (context: MapContextValue) => T,
-  onAdd: (context: MapContextValue) => void,
-  onRemove: (context: MapContextValue) => void,
-  opts?: ControlOptions
-): T;
-
-function useControl<T extends IControl>(
-  onCreate: (context: MapContextValue) => T,
-  arg1?: ((context: MapContextValue) => void) | ControlOptions,
-  arg2?: ((context: MapContextValue) => void) | 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 {map} = context;
-    if (!map.hasControl(ctrl)) {
-      map.addControl(ctrl, opts?.position);
-      if (onAdd) {
-        onAdd(context);
-      }
-    }
-
-    return () => {
-      if (onRemove) {
-        onRemove(context);
-      }
-      // Map might have been removed (parent effects are destroyed before child ones)
-      if (map.hasControl(ctrl)) {
-        map.removeControl(ctrl);
-      }
-    };
-  }, []);
-
-  return ctrl;
-}
-
-export default useControl;