@rnmapbox/maps 10.0.0-beta.39 → 10.0.0-beta.41

package/javascript/components/PointAnnotation.tsx

@@ -0,0 +1,231 @@
+import React, { SyntheticEvent, type Component } from 'react';
+import {
+  requireNativeComponent,
+  StyleSheet,
+  Platform,
+  type HostComponent,
+  type ViewProps,
+} from 'react-native';
+import { type Feature } from 'geojson';
+
+import { toJSONString, isFunction } from '../utils';
+import { makePoint } from '../utils/geoUtils';
+
+import NativeBridgeComponent, { type RNMBEvent } from './NativeBridgeComponent';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLPointAnnotation';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+});
+
+type FeaturePayload = {
+  feature: Feature;
+};
+
+type PointAnnotationProps = {
+  /**
+   * A string that uniquely identifies the annotation
+   */
+  id: string;
+
+  /**
+   * The string containing the annotation’s title. Note this is required to be set if you want to see a callout appear on iOS.
+   */
+  title?: string;
+
+  /**
+   * The string containing the annotation’s snippet(subtitle). Not displayed in the default callout.
+   */
+  snippet?: string;
+
+  /**
+   * Manually selects/deselects annotation
+   */
+  selected?: boolean;
+
+  /**
+   * Enable or disable dragging. Defaults to false.
+   */
+  draggable?: boolean;
+
+  /**
+   * The center point (specified as a map coordinate) of the annotation.
+   */
+  coordinate: [number, number];
+
+  /**
+   * Specifies the anchor being set on a particular point of the annotation.
+   * The anchor point is specified in the continuous space [0.0, 1.0] x [0.0, 1.0],
+   * where (0, 0) is the top-left corner of the image, and (1, 1) is the bottom-right corner.
+   * Note this is only for custom annotations not the default pin view.
+   * Defaults to the center of the view.
+   */
+  anchor?: {
+    /**
+     * See anchor
+     */
+    x: number;
+    /**
+     * See anchor
+     */
+    y: number;
+  };
+
+  /**
+   * This callback is fired once this annotation is selected. Returns a Feature as the first param.
+   */
+  onSelected?: (payload: FeaturePayload) => void;
+
+  /**
+   * This callback is fired once this annotation is deselected.
+   */
+  onDeselected?: (payload: FeaturePayload) => void;
+
+  /**
+   * This callback is fired once this annotation has started being dragged.
+   */
+  onDragStart?: (payload: FeaturePayload) => void;
+
+  /**
+   * This callback is fired once this annotation has stopped being dragged.
+   */
+  onDragEnd?: (payload: FeaturePayload) => void;
+
+  /**
+   * This callback is fired while this annotation is being dragged.
+   */
+  onDrag?: (payload: FeaturePayload) => void;
+
+  /**
+   * Expects one child, and an optional callout can be added as well
+   */
+  children: React.ReactElement;
+
+  style?: ViewProps['style'];
+};
+
+/**
+ * PointAnnotation represents a one-dimensional shape located at a single geographical coordinate.
+ *
+ * Consider using ShapeSource and SymbolLayer instead, if you have many points and you have static images,
+ * they'll offer much better performance.
+ *
+ * If you need interactive views please use MarkerView,
+ * as with PointAnnotation on Android child views are rendered onto a bitmap for better performance.
+ */
+class PointAnnotation extends NativeBridgeComponent(
+  React.PureComponent<PointAnnotationProps>,
+) {
+  static defaultProps = {
+    anchor: { x: 0.5, y: 0.5 },
+    draggable: false,
+  };
+
+  _nativeRef: NativePointAnnotationRef | null = null;
+
+  constructor(props: PointAnnotationProps) {
+    super(props, NATIVE_MODULE_NAME);
+    this._onSelected = this._onSelected.bind(this);
+    this._onDeselected = this._onDeselected.bind(this);
+    this._onDragStart = this._onDragStart.bind(this);
+    this._onDrag = this._onDrag.bind(this);
+    this._onDragEnd = this._onDragEnd.bind(this);
+  }
+
+  _onSelected(e: SyntheticEvent<Element, RNMBEvent<FeaturePayload>>) {
+    if (isFunction(this.props.onSelected)) {
+      this.props.onSelected(e.nativeEvent.payload);
+    }
+  }
+
+  _onDeselected(e: SyntheticEvent<Element, RNMBEvent<FeaturePayload>>) {
+    if (isFunction(this.props.onDeselected)) {
+      this.props.onDeselected(e.nativeEvent.payload);
+    }
+  }
+
+  _onDragStart(e: SyntheticEvent<Element, RNMBEvent<FeaturePayload>>) {
+    if (isFunction(this.props.onDragStart)) {
+      this.props.onDragStart(e.nativeEvent.payload);
+    }
+  }
+
+  _onDrag(e: SyntheticEvent<Element, RNMBEvent<FeaturePayload>>) {
+    if (isFunction(this.props.onDrag)) {
+      this.props.onDrag(e.nativeEvent.payload);
+    }
+  }
+
+  _onDragEnd(e: SyntheticEvent<Element, RNMBEvent<FeaturePayload>>) {
+    if (isFunction(this.props.onDragEnd)) {
+      this.props.onDragEnd(e.nativeEvent.payload);
+    }
+  }
+
+  _getCoordinate(): string | undefined {
+    if (!this.props.coordinate) {
+      return undefined;
+    }
+    return toJSONString(makePoint(this.props.coordinate));
+  }
+
+  /**
+   * On v10 and pre v10 android point annotation is rendered offscreen with a canvas into an image.
+   * To rerender the image from the current state of the view call refresh.
+   * Call this for example from Image#onLoad.
+   */
+  refresh() {
+    if (Platform.OS === 'android') {
+      this._runNativeCommand('refresh', this._nativeRef, []);
+    } else {
+      this._runNativeCommand('refresh', this._nativeRef, []);
+    }
+  }
+
+  _setNativeRef(nativeRef: NativePointAnnotationRef | null) {
+    this._nativeRef = nativeRef;
+    super._runPendingNativeCommands(nativeRef);
+  }
+
+  render() {
+    const props = {
+      ...this.props,
+      ref: (nativeRef: NativePointAnnotationRef | null) =>
+        this._setNativeRef(nativeRef),
+      id: this.props.id,
+      title: this.props.title,
+      snippet: this.props.snippet,
+      anchor: this.props.anchor,
+      selected: this.props.selected,
+      draggable: this.props.draggable,
+      style: [this.props.style, styles.container],
+      onMapboxPointAnnotationSelected: this._onSelected,
+      onMapboxPointAnnotationDeselected: this._onDeselected,
+      onMapboxPointAnnotationDragStart: this._onDragStart,
+      onMapboxPointAnnotationDrag: this._onDrag,
+      onMapboxPointAnnotationDragEnd: this._onDragEnd,
+      coordinate: this._getCoordinate(),
+    };
+    return (
+      <RCTMGLPointAnnotation {...props}>
+        {this.props.children}
+      </RCTMGLPointAnnotation>
+    );
+  }
+}
+type NativePointAnnotationProps = Omit<PointAnnotationProps, 'coordinate'> & {
+  coordinate: string | undefined;
+};
+
+type NativePointAnnotationRef = Component<NativePointAnnotationProps>;
+type NativePointAnnotation = HostComponent<NativePointAnnotationProps>;
+
+const RCTMGLPointAnnotation: NativePointAnnotation =
+  requireNativeComponent(NATIVE_MODULE_NAME);
+
+export default PointAnnotation;

package/javascript/utils/index.d.ts

@@ -1,6 +1,14 @@
 export function isAndroid(): boolean;
-export function isBoolean(_: unknown): boolean;
-export function isNumber(_: unknown): boolean;
-export function isString(_: unknown): boolean;
+export function isBoolean(_: unknown): argument is boolean;
+export function isNumber(_: unknown): argument is number;
+export function isString(_: unknown): argument is string;
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function isFunction(argument: unknown): argument is Function;
 
 export function toJSONString(_: unknown): string;
+export function runNativeCommand<RefType>(
+  module: string,
+  name: string,
+  nativeRef: RefType,
+  args: string[],
+): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.0.0-beta.39",
+  "version": "10.0.0-beta.41",
   "publishConfig": {
     "access": "public"
   },
@@ -62,17 +62,17 @@
     "deprecated-react-native-prop-types": "^2.3.0"
   },
   "devDependencies": {
-    "@babel/core": "7.17.5",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/runtime": "7.17.2",
+    "@babel/core": "7.19.1",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/runtime": "7.19.0",
     "@react-native-community/eslint-config": "^3.0.1",
     "@sinonjs/fake-timers": "^8.0.1",
     "@testing-library/react-native": "^11.0.0",
     "@types/mapbox-gl": "^2.7.5",
     "@types/react-native": ">=0.59.9",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
     "babel-jest": "^27.5.1",
     "documentation": "13.2.5",
     "ejs": "^3.1.3",
@@ -90,7 +90,7 @@
     "mapbox-gl": "^2.9.0",
     "metro-react-native-babel-preset": "0.71.1",
     "node-dir": "0.1.17",
-    "prettier": "2.6.2",
+    "prettier": "2.7.1",
     "react": "17.0.2",
     "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist",
     "react-native": "0.67.0",

package/scripts/autogenHelpers/DocJSONBuilder.js

@@ -22,6 +22,7 @@ const IGNORE_FILES = [
   'AbstractLayer',
   'AbstractSource',
   'NativeBridgeComponent',
+  'NativeBridgeComponent.tsx',
 ];
 const IGNORE_PATTERN = /\.web\./;
 
@@ -143,29 +144,77 @@ class DocJSONBuilder {
       }
     }
 
+    /**
+     * @typedef {{arguments: {type:TSType,name:string}[], return: TSType]}} TSFuncSignature
+     * @typedef {{key:string, value:TSType}[]} TSKVProperties
+     * @typedef {{properties: TSKVProperties}} TSObjectSignature
+     * @typedef {{name: 'void'}} TSVoidType
+     * @typedef {{name: string}} TSTypeType
+     * @typedef {{name: 'signature', type:'function', raw:string, signature: TSFuncSignature}} TSFunctionType
+     * @typedef {{name: 'signature', type:'object', raw:string, signature: TSObjectSignature}} TSObjectType
+     * @typedef {TSVoidType | TSFunctionType | TSTypeType | TSObjectType} TSType
+     */
+
+    /**
+     * @params {TSType} tsType
+     * @returns {tsType is TSFunctionType}
+     */
+    function tsTypeIsFunction(tsType) {
+      return tsType.type === 'function';
+    }
+
+    /**
+     * @params {TSType} tsType
+     * @returns {tsType is TSObjectType}
+     */
+    function tsTypeIsObject(tsType) {
+      return tsType.type === 'object';
+    }
+
+    /**
+     * @param {TSType} tsType
+     */
+    function tsTypeDump(tsType) {
+      if (tsTypeIsFunction(tsType)) {
+        let { signature } = tsType;
+        return `(${signature.arguments
+          .map(({ name, type }) => `${name}:${tsTypeDump(type)}`)
+          .join(', ')}) => ${tsTypeDump(signature.return)}`;
+      } else if (tsTypeIsObject(tsType)) {
+        let { signature } = tsType;
+        return `{${signature.properties
+          .map(({ key, value }) => `${key}: ${tsTypeDump(value)}`)
+          .join(', ')}}`;
+      } else {
+        return tsType.name;
+      }
+    }
+
     function tsTypeDescType(tsType) {
       if (!tsType?.name) {
         return null;
       }
 
-      if (tsType.name === 'signature') {
+      if (tsType.name === 'signature' && tsType.type === 'object') {
         const { properties } = tsType.signature;
-        const value = properties.map((kv) => {
-          return mapProp(
-            mapNestedProp({ ...kv.value, description: kv.description }),
-            kv.key,
-            false,
-          );
-        });
-        return { name: 'shape', value };
-        /*
-        if (tsType.raw.length < 200) {
+        if (properties) {
+          const value = properties.map((kv) => {
+            return mapProp(
+              mapNestedProp({ ...kv.value, description: kv.description }),
+              kv.key,
+              false,
+            );
+          });
+          return { name: 'shape', value };
+        } else if (tsType.raw.length < 200) {
           return `${tsType.raw
             .replace(/(\n|\s)/g, '')
             .replace(/(\|)/g, '\\|')}`;
         } else {
           return 'FIX ME FORMAT BIG OBJECT';
-        } */
+        }
+      } else if (tsType.name === 'signature' && tsType.type === 'function') {
+        return { name: 'func', funcSignature: tsTypeDump(tsType) };
       } else if (tsType.name === 'union') {
         if (tsType.raw) {
           // Props
@@ -194,6 +243,13 @@ class DocJSONBuilder {
             : propMeta.defaultValue.value.replace(/\n/g, ''),
           description: propMeta.description || 'FIX ME NO DESCRIPTION',
         };
+        if (
+          result.type &&
+          result.type.name === 'func' &&
+          result.type.funcSignature
+        ) {
+          result.description = `${result.description}\n*signature:*\`${result.type.funcSignature}\``;
+        }
       } else {
         if (propName) {
           result.name = propName;

package/scripts/templates/component.md.ejs

@@ -8,7 +8,7 @@
 <%_ if (component.props && component.props.length) { _%>
 ## props
 | Prop | Type | Default | Required | Description |
-| ---- | :--: | :-----: | :------: | :----------: |
+| ---- | :-- | :----- | :------ | :---------- |
 <%- propMarkdownTableRows(component) %>
 <%_ } _%>
 

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/AbstractMapFeature.java

@@ -1,15 +0,0 @@
-package com.mapbox.rctmgl.components;
-
-import android.content.Context;
-
-import com.facebook.react.views.view.ReactViewGroup;
-import com.mapbox.rctmgl.components.mapview.RCTMGLMapView ;
-
-public abstract class AbstractMapFeature extends ReactViewGroup {
-    public AbstractMapFeature(Context context) {
-        super(context);
-    }
-
-    public abstract void addToMap(RCTMGLMapView mapView);
-    public abstract void removeFromMap(RCTMGLMapView mapView);
-}

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/camera/CameraUpdateItem.java

@@ -1,167 +0,0 @@
-package com.mapbox.rctmgl.components.camera;
-
-import android.animation.Animator;
-import android.view.animation.AccelerateDecelerateInterpolator;
-import android.view.animation.LinearInterpolator;
-
-import androidx.annotation.NonNull;
-
-import com.mapbox.maps.CameraOptions;
-import com.mapbox.maps.MapboxMap;
-import com.mapbox.maps.plugin.animation.CameraAnimationsPlugin;
-import com.mapbox.maps.plugin.animation.MapAnimationOptions;
-import com.mapbox.rctmgl.components.camera.constants.CameraMode;
-
-import java.lang.ref.WeakReference;
-import java.util.concurrent.Callable;
-import java.util.concurrent.ExecutionException;
-import java.util.concurrent.ExecutorService;
-import java.util.concurrent.Future;
-import java.util.concurrent.FutureTask;
-import java.util.concurrent.RunnableFuture;
-import java.util.concurrent.TimeUnit;
-import java.util.concurrent.TimeoutException;
-
-import kotlin.jvm.functions.Function1;
-
-public class CameraUpdateItem implements RunnableFuture<Void> {
-    private int mDuration;
-    private Animator.AnimatorListener mCallback;
-    private CameraOptions mCameraUpdate;
-    private int mCameraMode;
-
-    private boolean isCameraActionFinished;
-    private boolean isCameraActionCancelled;
-
-    private WeakReference<MapboxMap> mMap;
-
-    enum CallbackMode {
-        START,
-        END,
-        CANCEL,
-        REPEAT
-    }
-
-
-    public CameraUpdateItem(MapboxMap map, CameraOptions update, int duration, Animator.AnimatorListener callback, @CameraMode.Mode int cameraMode) {
-        mCameraUpdate = update;
-        mDuration = duration;
-        mCallback = callback;
-        mCameraMode = cameraMode;
-        mMap = new WeakReference<>(map);
-    }
-
-    public int getDuration() {
-        return mDuration;
-    }
-
-    @Override
-    public void run() {
-        final Animator.AnimatorListener callback = new Animator.AnimatorListener() {
-
-            @Override
-            public void onAnimationStart(Animator animator) {
-                isCameraActionCancelled = false;
-                isCameraActionFinished = false;
-
-                if (mCallback != null) {
-                    mCallback.onAnimationStart(animator);
-                }
-            }
-
-            @Override
-            public void onAnimationEnd(Animator animator) {
-                isCameraActionCancelled = false;
-                isCameraActionFinished = true;
-
-                if (mCallback != null) {
-                    mCallback.onAnimationEnd(animator);
-                }
-            }
-
-            @Override
-            public void onAnimationCancel(Animator animator) {
-                isCameraActionCancelled = true;
-                isCameraActionFinished = false;
-
-                if (mCallback != null) {
-                    mCallback.onAnimationCancel(animator);
-                }
-            }
-
-            @Override
-            public void onAnimationRepeat(Animator animator) {
-                isCameraActionCancelled = false;
-                isCameraActionFinished = false;
-
-                if (mCallback != null) {
-                    mCallback.onAnimationRepeat(animator);
-                }
-            }
-        };
-
-        MapboxMap map = mMap.get();
-        if (map == null) {
-            isCameraActionCancelled = true;
-            return;
-        }
-
-        MapAnimationOptions.Builder optionsBuilder = new MapAnimationOptions.Builder();
-        optionsBuilder.animatorListener(callback);
-
-        map.cameraAnimationsPlugin(new Function1<CameraAnimationsPlugin, Object>() {
-
-            @Override
-            public Object invoke(CameraAnimationsPlugin cameraAnimationsPlugin) {
-
-                // animateCamera / easeCamera only allows positive duration
-                if (mDuration == 0 || mCameraMode == CameraMode.NONE) {
-                    cameraAnimationsPlugin.flyTo(
-                            mCameraUpdate,
-                            optionsBuilder.duration(0).build()
-                    );
-                }
-
-                // On iOS a duration of -1 means default or dynamic duration (based on flight-path length)
-                // On Android we can fallback to Mapbox's default duration as there is no such API
-                if (mDuration > 0) {
-                    optionsBuilder.duration(mDuration);
-                }
-
-                if (mCameraMode == CameraMode.FLIGHT) {
-                    cameraAnimationsPlugin.flyTo(mCameraUpdate, optionsBuilder.build());
-                } else if (mCameraMode == CameraMode.LINEAR) {
-                    cameraAnimationsPlugin.easeTo(mCameraUpdate, optionsBuilder.interpolator(new LinearInterpolator()).build());
-                } else if (mCameraMode == CameraMode.EASE) {
-                    cameraAnimationsPlugin.easeTo(mCameraUpdate, optionsBuilder.interpolator(new AccelerateDecelerateInterpolator()).build());
-                }
-                return null;
-            }
-        });
-    }
-
-    @Override
-    public boolean cancel(boolean mayInterruptIfRunning) {
-        return false;
-    }
-
-    @Override
-    public boolean isCancelled() {
-        return isCameraActionCancelled;
-    }
-
-    @Override
-    public boolean isDone() {
-        return isCameraActionFinished;
-    }
-
-    @Override
-    public Void get() throws InterruptedException, ExecutionException {
-        return null;
-    }
-
-    @Override
-    public Void get(long timeout, @NonNull TimeUnit unit) throws InterruptedException, ExecutionException, TimeoutException {
-        return null;
-    }
-}

package/android/rctmgl/src/main/java-v10/com/mapbox/rctmgl/components/camera/CameraUpdateQueue.java

@@ -1,73 +0,0 @@
-package com.mapbox.rctmgl.components.camera;
-
-import com.mapbox.maps.MapboxMap;
-import com.mapbox.rctmgl.components.mapview.RCTMGLMapView;
-
-import java.util.ArrayList;
-import java.util.Iterator;
-import java.util.LinkedList;
-import java.util.List;
-import java.util.Queue;
-import java.util.concurrent.ExecutorService;
-import java.util.concurrent.Executors;
-import java.util.concurrent.FutureTask;
-
-
-/**
- * Created by nickitaliano on 9/5/17.
- */
-
-public class CameraUpdateQueue {
-    private Queue<CameraStop> mQueue;
-
-    private OnCompleteAllListener mCompleteListener;
-
-    public interface OnCompleteAllListener {
-        void onCompleteAll();
-    }
-
-    public CameraUpdateQueue() {
-        mQueue = new LinkedList<>();
-    }
-
-    public void offer(CameraStop item) {
-        mQueue.offer(item);
-    }
-
-    public int size() {
-        return mQueue.size();
-    }
-
-    public boolean isEmpty() {
-        return mQueue.isEmpty();
-    }
-
-    public void flush() {
-        while (mQueue.size() > 0) {
-            mQueue.remove();
-        }
-        mQueue = new LinkedList<>();
-    }
-
-    public void setOnCompleteAllListener(OnCompleteAllListener listener) {
-        mCompleteListener = listener;
-    }
-
-    public void execute(RCTMGLMapView map) {
-        if (mQueue.isEmpty()) {
-            if (mCompleteListener != null) {
-                mCompleteListener.onCompleteAll();
-            }
-            return;
-        }
-
-        final CameraStop stop = mQueue.poll();
-        if (stop == null) {
-            return;
-        }
-
-        CameraUpdateItem item = stop.toCameraUpdate(map);
-        item.run();
-        execute(map);
-    }
-}