@rnmapbox/maps 10.0.0-beta.38 → 10.0.0-beta.40

package/javascript/components/AbstractLayer.js

@@ -11,7 +11,7 @@ class AbstractLayer extends React.PureComponent {
       ...this.props,
       id: this.props.id,
       sourceID: this.props.sourceID,
-      reactStyle: this.getStyle(),
+      reactStyle: this.getStyle(this.props.style),
       minZoomLevel: this.props.minZoomLevel,
       maxZoomLevel: this.props.maxZoomLevel,
       aboveLayerID: this.props.aboveLayerID,
@@ -28,8 +28,8 @@ class AbstractLayer extends React.PureComponent {
     }
   }
 
-  getStyle() {
-    return transformStyle(this.props.style);
+  getStyle(style) {
+    return transformStyle(style);
   }
 
   setNativeProps(props) {

package/javascript/components/Light.js

@@ -34,7 +34,7 @@ class Light extends AbstractLayer {
         testID="rctmglLight"
         {...this.props}
         style={undefined}
-        reactStyle={this.getStyle()}
+        reactStyle={this.getStyle(this.props.style)}
       />
     );
   }

package/javascript/components/MarkerView.tsx

@@ -58,10 +58,21 @@ class MarkerView extends React.PureComponent<{
     anchor: { x: 0.5, y: 0.5 },
   };
 
+  static lastId = 0;
+  __idForPointAnnotation?: string;
+
+  _idForPointAnnotation(): string {
+    if (this.__idForPointAnnotation === undefined) {
+      MarkerView.lastId = MarkerView.lastId + 1;
+      this.__idForPointAnnotation = `MV-${MarkerView.lastId}`;
+    }
+    return this.__idForPointAnnotation;
+  }
+
   render() {
     const { props } = this;
     if (Platform.OS === 'ios' && !Mapbox.MapboxV10) {
-      return <PointAnnotation {...props} />;
+      return <PointAnnotation id={this._idForPointAnnotation()} {...props} />;
     }
 
     function _getCoordinate(coordinate: [number, number]): string | undefined {

package/javascript/components/{NativeBridgeComponent.js → NativeBridgeComponent.tsx}

@@ -1,27 +1,46 @@
+import React from 'react';
+
 import { runNativeCommand, isAndroid } from '../utils';
 
 let callbackIncrement = 0;
 
-const NativeBridgeComponent = (B) =>
+export type RNMBEvent<PayloadType = { [key: string]: string }> = {
+  payload: PayloadType;
+  type: string;
+};
+
+const NativeBridgeComponent = <T,>(B: React.ComponentClass<T>) =>
   class extends B {
-    constructor(props, nativeModuleName) {
+    _nativeModuleName: string;
+    _onAndroidCallback: (e: any) => void;
+    _callbackMap: Map<string, any>;
+    _preRefMapMethodQueue: Array<{
+      method: { name: string; args: Array<string> };
+      resolver: (value: unknown) => void;
+    }>;
+
+    constructor(props: T, nativeModuleName: string) {
       super(props);
 
       this._nativeModuleName = nativeModuleName;
-      this._onAndroidCallback = this._onAndroidCallback.bind(this);
+      this._onAndroidCallback = this._onAndroidCallbackO.bind(this);
       this._callbackMap = new Map();
       this._preRefMapMethodQueue = [];
     }
 
-    _addAddAndroidCallback(id, resolve, reject) {
+    _addAddAndroidCallback(
+      id: string,
+      resolve: (value: string) => void,
+      reject: (error: Error) => void,
+    ) {
       this._callbackMap.set(id, { resolve, reject });
     }
 
-    _removeAndroidCallback(id) {
-      this._callbackMap.remove(id);
+    _removeAndroidCallback(id: string) {
+      this._callbackMap.delete(id);
     }
 
-    _onAndroidCallback(e) {
+    _onAndroidCallbackO(e: React.SyntheticEvent<Element, RNMBEvent>) {
       const callbackID = e.nativeEvent.type;
       const callback = this._callbackMap.get(callbackID);
 
@@ -30,7 +49,7 @@ const NativeBridgeComponent = (B) =>
       }
 
       this._callbackMap.delete(callbackID);
-      let { payload } = e.nativeEvent;
+      const { payload } = e.nativeEvent;
       if (payload.error) {
         callback.reject.call(null, new Error(payload.error));
       } else {
@@ -38,7 +57,7 @@ const NativeBridgeComponent = (B) =>
       }
     }
 
-    async _runPendingNativeCommands(nativeRef) {
+    async _runPendingNativeCommands<RefType>(nativeRef: RefType) {
       if (nativeRef) {
         while (this._preRefMapMethodQueue.length > 0) {
           const item = this._preRefMapMethodQueue.pop();
@@ -55,7 +74,11 @@ const NativeBridgeComponent = (B) =>
       }
     }
 
-    _runNativeCommand(methodName, nativeRef, args = []) {
+    _runNativeCommand<RefType>(
+      methodName: string,
+      nativeRef: RefType,
+      args: string[] = [],
+    ) {
       if (!nativeRef) {
         return new Promise((resolve) => {
           this._preRefMapMethodQueue.push({

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/components/ShapeSource.js

@@ -285,7 +285,7 @@ class ShapeSource extends NativeBridgeComponent(AbstractSource) {
     const shallowProps = Object.assign({}, props);
 
     // Adds support for Animated
-    if (shallowProps.shape && typeof shallowProps !== 'string') {
+    if (shallowProps.shape && typeof shallowProps.shape !== 'string') {
       shallowProps.shape = JSON.stringify(shallowProps.shape);
     }
 

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.38",
+  "version": "10.0.0-beta.40",
   "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/javascript/components/PointAnnotation.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-
-export interface PointAnnotationProps {
-  coordinate: [number, number];
-  anchor: {
-    x: number;
-    y: number;
-  };
-}
-
-export default class PointAnnotation extends React.Component<PointAnnotationProps> {
-  refresh(): void;
-}