@rnmapbox/maps 10.0.0-beta.42 → 10.0.0-beta.44

package/javascript/utils/StyleValue.ts

@@ -28,7 +28,7 @@ export function transformStyle(
   const styleProps = Object.keys(style) as Array<keyof typeof style>;
   for (const styleProp of styleProps) {
     const styleType = getStyleType(styleProp);
-    let rawStyle: RawValueType = style[styleProp];
+    let rawStyle: RawValueType | undefined = style[styleProp];
 
     if (styleType === 'color' && typeof rawStyle === 'string') {
       const color = processColor(rawStyle);
@@ -43,11 +43,13 @@ export function transformStyle(
         (Image.resolveAssetSource(rawStyle) as unknown as RawValueType) || {};
     }
 
-    const bridgeValue = new BridgeValue(rawStyle);
-    nativeStyle[styleProp] = {
-      styletype: styleType,
-      stylevalue: bridgeValue.toJSON(),
-    };
+    if (rawStyle !== undefined) {
+      const bridgeValue = new BridgeValue(rawStyle);
+      nativeStyle[styleProp] = {
+        styletype: styleType,
+        stylevalue: bridgeValue.toJSON(),
+      };
+    }
   }
 
   return nativeStyle;

package/javascript/utils/animated/Animated.js

@@ -1,12 +1,12 @@
 import { Animated as RNAnimated } from 'react-native';
 
-import ShapeSource from '../../components/ShapeSource';
+import { ShapeSource } from '../../components/ShapeSource';
 import ImageSource from '../../components/ImageSource';
 import FillLayer from '../../components/FillLayer';
 import FillExtrusionLayer from '../../components/FillExtrusionLayer';
 import LineLayer from '../../components/LineLayer';
 import CircleLayer from '../../components/CircleLayer';
-import SymbolLayer from '../../components/SymbolLayer';
+import { SymbolLayer } from '../../components/SymbolLayer';
 import RasterLayer from '../../components/RasterLayer';
 import BackgroundLayer from '../../components/BackgroundLayer';
 

package/javascript/utils/deprecation.ts

@@ -18,12 +18,15 @@ export function deprecatedClass<C extends new (...args: any[]) => object>(
  * Copy properties from origObject to newObject, which not exists in newObject,
  * calls onDeprecatedCalled callback in case a copied property is invoked.
  */
-export function copyPropertiesAsDeprecated(
-  origObject: { [key: string]: unknown },
-  newObject: { [key: string]: unknown },
+export function copyPropertiesAsDeprecated<
+  DeprecatedType extends Record<string, unknown>,
+  WithDeprecatedType extends Record<string, unknown>,
+>(
+  origObject: DeprecatedType,
+  newObject: WithDeprecatedType,
   onDeprecatedCalled: (key: string) => void,
   accessors: { [key: string]: (value: unknown) => unknown } = {},
-): { [key: string]: unknown } {
+): WithDeprecatedType {
   const result = newObject;
   for (const [key, value] of Object.entries(origObject)) {
     if (!newObject[key]) {

package/javascript/utils/{filterUtils.js → filterUtils.tsx}

@@ -1,4 +1,4 @@
-export function getFilter(filter) {
+export function getFilter(filter: string[] | unknown): string[] {
   if (!Array.isArray(filter) || filter.length === 0) {
     return [];
   }

package/javascript/utils/index.d.ts

@@ -1,3 +1,11 @@
+import React from 'react';
+
+export type NativeArg =
+  | string
+  | number
+  | { [k: string]: NativeArg }
+  | NativeArg[];
+
 export function isAndroid(): boolean;
 export function isBoolean(_: unknown): argument is boolean;
 export function isNumber(_: unknown): argument is number;
@@ -6,9 +14,14 @@ export function isString(_: unknown): argument is string;
 export function isFunction(argument: unknown): argument is Function;
 
 export function toJSONString(_: unknown): string;
-export function runNativeCommand<RefType>(
+export function runNativeCommand<RefType, ReturnType = NativeArg>(
   module: string,
   name: string,
   nativeRef: RefType,
-  args: string[],
-): void;
+  args: NativeArg[],
+): Promise<ReturnType>;
+
+export function cloneReactChildrenWithProps(
+  children: React.ReactElement | React.ReactElement[],
+  propsToAdd: { [key: string]: string } = {},
+): React.ReactElement | React.ReactElement[];

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.42",
+  "version": "10.0.0-beta.44",
   "publishConfig": {
     "access": "public"
   },

package/scripts/autogenHelpers/DocJSONBuilder.js

@@ -22,7 +22,6 @@ const IGNORE_FILES = [
   'AbstractLayer',
   'AbstractSource',
   'NativeBridgeComponent',
-  'NativeBridgeComponent.tsx',
 ];
 const IGNORE_PATTERN = /\.web\./;
 
@@ -359,7 +358,7 @@ class DocJSONBuilder {
             return reject(err);
           }
 
-          let fileName = fileNameWithExt.replace(/.(js)/, '');
+          let fileName = fileNameWithExt.replace(/\.(js|tsx|ts$)/, '');
           if (
             IGNORE_FILES.includes(fileName) ||
             fileName.match(IGNORE_PATTERN)
@@ -370,7 +369,7 @@ class DocJSONBuilder {
 
           let parsedComponents = docgen.parse(content, {
             babelOptions: {
-              filename: fileName,
+              filename: fileNameWithExt,
             },
           });
           let [parsed] = parsedComponents;

package/scripts/autogenHelpers/globals.js

@@ -292,20 +292,31 @@ global.dtsInterfaceType = function (prop) {
         propTypes.push('string[]');
         break;
       case 'enum':
-        propTypes.push(`Enum<${pascelCase(prop.name)}Enum>[]`);
+        propTypes.push(
+          `Enum<${pascelCase(prop.name)}Enum, ${pascelCase(
+            prop.name,
+          )}EnumValues>[]`,
+        );
         break;
     }
     // propTypes.push('ConstantPropType');
   } else if (prop.type === 'number') {
     propTypes.push('number');
   } else if (prop.type === 'enum') {
-    propTypes.push(`Enum<${pascelCase(prop.name)}Enum>`);
-  } else {
-    // images can be required which result in a number
-    if (prop.image) {
-      propTypes.push('number');
-    }
+    propTypes.push(
+      `Enum<${pascelCase(prop.name)}Enum, ${pascelCase(prop.name)}EnumValues>`,
+    );
+  } else if (prop.type === 'boolean') {
+    propTypes.push('boolean');
+  } else if (prop.type === 'resolvedImage') {
+    propTypes.push('ResolvedImageType');
+  } else if (prop.type === 'formatted') {
+    propTypes.push('FormattedString');
+  } else if (prop.type === 'string') {
     propTypes.push('string');
+  } else {
+    console.error('Unexpected type:', prop.type);
+    throw new Error(`Unexpected type: ${prop.type} for ${prop.name}`);
   }
 
   /*

package/scripts/templates/MapboxStyles.ts.ejs

@@ -2,7 +2,7 @@
   const layers = locals.layers;
 -%>
 /* This file was generated from MapboxStyle.ts.ejs do not modify */
-
+import { type ImageSourcePropType } from 'react-native';
 
 export type Translation = { x: number; y: number } | [number, number];
 
@@ -11,6 +11,8 @@ export interface Transition {
   delay: number;
 }
 
+export type FormattedString = string; /* TODO */
+
 type ExpressionName =
   // Types
   | 'array' | 'boolean' | 'collator' | 'format' | 'image' | 'literal' | 'number' | 'number-format' | 'object' | 'string'
@@ -47,6 +49,8 @@ export type Expression = [ExpressionName, ...ExpressionField[]];
 
 type ExpressionParameters = 'zoom' | 'feature' | 'feature-state' | 'sky-radial-progress' | 'line-progress' | 'heatmap-density';
 
+type ResolvedImageType = ImageSourcePropType;
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
   | T
@@ -59,9 +63,10 @@ export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
       <%- pascelCase(k) %> = '<%- k %>',
     <%_ } _%>
   }
+  type <%- pascelCase(enumInfo.name) %>EnumValues = <%- Object.keys(enumInfo.values).map(k => `'${k}'`).join(' | ') %>; 
 <%_ } _%>
 
-type Enum<EnumType> = EnumType | keyof EnumType;
+type Enum<EnumType, EnumValues> = EnumType | EnumValues;
 
 <%_ for (let layer of layers) { _%>
   export interface <%- pascelCase(layer.name) %>LayerStyleProps {

package/javascript/components/AbstractLayer.js

@@ -1,46 +0,0 @@
-/* eslint react/prop-types:0  */
-import React from 'react';
-import { processColor } from 'react-native';
-
-import { getFilter } from '../utils/filterUtils';
-import { transformStyle } from '../utils/StyleValue';
-
-class AbstractLayer extends React.PureComponent {
-  get baseProps() {
-    return {
-      ...this.props,
-      id: this.props.id,
-      sourceID: this.props.sourceID,
-      reactStyle: this.getStyle(this.props.style),
-      minZoomLevel: this.props.minZoomLevel,
-      maxZoomLevel: this.props.maxZoomLevel,
-      aboveLayerID: this.props.aboveLayerID,
-      belowLayerID: this.props.belowLayerID,
-      layerIndex: this.props.layerIndex,
-      filter: getFilter(this.props.filter),
-      style: undefined,
-    };
-  }
-
-  getStyleTypeFormatter(styleType) {
-    if (styleType === 'color') {
-      return processColor;
-    }
-  }
-
-  getStyle(style) {
-    return transformStyle(style);
-  }
-
-  setNativeProps(props) {
-    if (this.refs.nativeLayer) {
-      let propsToPass = props;
-      if (props.style) {
-        propsToPass = { ...props, reactStyle: this.getStyle(props.style) };
-      }
-      this.refs.nativeLayer.setNativeProps(propsToPass);
-    }
-  }
-}
-
-export default AbstractLayer;

package/javascript/components/AbstractSource.js

@@ -1,15 +0,0 @@
-import React from 'react';
-
-class AbstractSource extends React.PureComponent {
-  setNativeProps(props) {
-    if (this._nativeRef) {
-      this._nativeRef.setNativeProps(props);
-    } else {
-      if (this.refs.nativeSource) {
-        this.refs.nativeSource.setNativeProps(props);
-      }
-    }
-  }
-}
-
-export default AbstractSource;

package/javascript/components/ShapeSource.js

@@ -1,373 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { NativeModules, requireNativeComponent } from 'react-native';
-
-import { getFilter } from '../utils/filterUtils';
-import {
-  toJSONString,
-  cloneReactChildrenWithProps,
-  viewPropTypes,
-  isFunction,
-  isAndroid,
-} from '../utils';
-import { copyPropertiesAsDeprecated } from '../utils/deprecation';
-
-import AbstractSource from './AbstractSource';
-import NativeBridgeComponent from './NativeBridgeComponent';
-
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLShapeSource';
-
-/**
- * ShapeSource is a map content source that supplies vector shapes to be shown on the map.
- * The shape may be an url or a GeoJSON object
- */
-class ShapeSource extends NativeBridgeComponent(AbstractSource) {
-  static NATIVE_ASSETS_KEY = 'assets';
-
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * A string that uniquely identifies the source.
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle.
-     */
-    url: PropTypes.string,
-
-    /**
-     * The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature collection.
-     */
-    shape: PropTypes.object,
-
-    /**
-     * Enables clustering on the source for point shapes.
-     */
-    cluster: PropTypes.bool,
-
-    /**
-     * Specifies the radius of each cluster if clustering is enabled.
-     * A value of 512 produces a radius equal to the width of a tile.
-     * The default value is 50.
-     */
-    clusterRadius: PropTypes.number,
-
-    /**
-     * Specifies the maximum zoom level at which to cluster points if clustering is enabled.
-     * Defaults to one zoom level less than the value of maxZoomLevel so that, at the maximum zoom level,
-     * the shapes are not clustered.
-     */
-    clusterMaxZoomLevel: PropTypes.number,
-
-    /**
-     * [`mapbox-gl` (v8) implementation only]
-     * Specifies custom properties on the generated clusters if clustering
-     * is enabled, aggregating values from clustered points.
-     *
-     * Has the form `{ "property_name": [operator, map_expression]}`, where
-     *  `operator` is a custom reduce expression that references a special `["accumulated"]` value -
-     *   it accumulates the property value from clusters/points the cluster contains
-     *  `map_expression` produces the value of a single point
-     *
-     * Example: `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
-     *
-     */
-    clusterProperties: PropTypes.object,
-
-    /**
-     * Specifies the maximum zoom level at which to create vector tiles.
-     * A greater value produces greater detail at high zoom levels.
-     * The default value is 18.
-     */
-    maxZoomLevel: PropTypes.number,
-
-    /**
-     * Specifies the size of the tile buffer on each side.
-     * A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.
-     * Larger values produce fewer rendering artifacts near tile edges and slower performance.
-     * The default value is 128.
-     */
-    buffer: PropTypes.number,
-
-    /**
-     * Specifies the Douglas-Peucker simplification tolerance.
-     * A greater value produces simpler geometries and improves performance.
-     * The default value is 0.375.
-     */
-    tolerance: PropTypes.number,
-
-    /**
-     * Whether to calculate line distance metrics.
-     * This is required for line layers that specify lineGradient values.
-     * The default value is false.
-     */
-    lineMetrics: PropTypes.bool,
-
-    /**
-     * Source press listener, gets called when a user presses one of the children layers only
-     * if that layer has a higher z-index than another source layers
-     *
-     * @param {Object} event
-     * @param {Object[]} event.features - the geojson features that have hit by the press (might be multiple)
-     * @param {Object} event.coordinates - the coordinates of the click
-     * @param {Object} event.point - the point of the click
-     * @return void
-     */
-    onPress: PropTypes.func,
-
-    /**
-     * Overrides the default touch hitbox(44x44 pixels) for the source layers
-     */
-    hitbox: PropTypes.shape({
-      /**
-       * `width` of hitbox
-       */
-      width: PropTypes.number.isRequired,
-      /**
-       * `height` of hitbox
-       */
-      height: PropTypes.number.isRequired,
-    }),
-  };
-
-  static defaultProps = {
-    id: MapboxGL.StyleSource.DefaultSourceID,
-  };
-
-  constructor(props) {
-    super(props, NATIVE_MODULE_NAME);
-  }
-
-  _setNativeRef(nativeRef) {
-    this._nativeRef = nativeRef;
-    super._runPendingNativeCommands(nativeRef);
-  }
-
-  /**
-   * Returns all features from the source that match the query parameters whether the feature is currently
-   * rendered on the map.
-   *
-   * @example
-   * shapeSource.features()
-   *
-   * @param  {Array=} filter - an optional filter statement to filter the returned Features.
-   * @return {FeatureCollection}
-   */
-  async features(filter = []) {
-    const res = await this._runNativeCommand('features', this._nativeRef, [
-      getFilter(filter),
-    ]);
-
-    if (isAndroid()) {
-      return JSON.parse(res.data);
-    }
-
-    return res.data;
-  }
-
-  /**
-   * Returns the zoom needed to expand the cluster.
-   *
-   * @example
-   * const zoom = await shapeSource.getClusterExpansionZoom(clusterId);
-   *
-   * @param  {Feature} feature - The feature cluster to expand.
-   * @return {number}
-   */
-  async getClusterExpansionZoom(feature) {
-    if (typeof feature === 'number') {
-      console.warn(
-        'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
-      );
-      const res = await this._runNativeCommand(
-        'getClusterExpansionZoomById',
-        this._nativeRef,
-        [feature],
-      );
-      return res.data;
-    }
-
-    const res = await this._runNativeCommand(
-      'getClusterExpansionZoom',
-      this._nativeRef,
-      [JSON.stringify(feature)],
-    );
-    return res.data;
-  }
-
-  /**
-   * Returns the FeatureCollection from the cluster.
-   *
-   * @example
-   * const collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);
-   *
-   * @param  {Feature} feature - The feature cluster to expand.
-   * @param  {number} limit - The number of points to return.
-   * @param  {number} offset - The amount of points to skip (for pagination).
-   * @return {FeatureCollection}
-   */
-  async getClusterLeaves(feature, limit, offset) {
-    if (typeof feature === 'number') {
-      console.warn(
-        'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
-      );
-      const res = await this._runNativeCommand(
-        'getClusterLeavesById',
-        this._nativeRef,
-        [feature, limit, offset],
-      );
-
-      if (isAndroid()) {
-        return JSON.parse(res.data);
-      }
-
-      return res.data;
-    }
-
-    const res = await this._runNativeCommand(
-      'getClusterLeaves',
-      this._nativeRef,
-      [JSON.stringify(feature), limit, offset],
-    );
-
-    if (isAndroid()) {
-      return JSON.parse(res.data);
-    }
-
-    return res.data;
-  }
-
-  /**
-   * Returns the FeatureCollection from the cluster (on the next zoom level).
-   *
-   * @example
-   * const collection = await shapeSource.getClusterChildren(clusterId);
-   *
-   * @param  {Feature} feature - The feature cluster to expand.
-   * @return {FeatureCollection}
-   */
-  async getClusterChildren(feature) {
-    if (typeof feature === 'number') {
-      console.warn(
-        'Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.',
-      );
-      const res = await this._runNativeCommand(
-        'getClusterChildrenById',
-        this._nativeRef,
-        [feature],
-      );
-
-      if (isAndroid()) {
-        return JSON.parse(res.data);
-      }
-
-      return res.data;
-    }
-
-    const res = await this._runNativeCommand(
-      'getClusterChildren',
-      this._nativeRef,
-      [JSON.stringify(feature)],
-    );
-
-    if (isAndroid()) {
-      return JSON.parse(res.data);
-    }
-
-    return res.data;
-  }
-
-  setNativeProps(props) {
-    const shallowProps = Object.assign({}, props);
-
-    // Adds support for Animated
-    if (shallowProps.shape && typeof shallowProps.shape !== 'string') {
-      shallowProps.shape = JSON.stringify(shallowProps.shape);
-    }
-
-    super.setNativeProps(shallowProps);
-  }
-
-  _getShape() {
-    if (!this.props.shape) {
-      return;
-    }
-    return toJSONString(this.props.shape);
-  }
-
-  onPress(event) {
-    const {
-      nativeEvent: {
-        payload: { features, coordinates, point },
-      },
-    } = event;
-    let newEvent = {
-      features,
-      coordinates,
-      point,
-    };
-    newEvent = copyPropertiesAsDeprecated(
-      event,
-      newEvent,
-      (key) => {
-        console.warn(
-          `event.${key} is deprecated on ShapeSource#onPress, please use event.features`,
-        );
-      },
-      {
-        nativeEvent: (origNativeEvent) => ({
-          ...origNativeEvent,
-          payload: features[0],
-        }),
-      },
-    );
-    this.props.onPress(newEvent);
-  }
-
-  render() {
-    const props = {
-      id: this.props.id,
-      url: this.props.url,
-      shape: this._getShape(),
-      hitbox: this.props.hitbox,
-      hasPressListener: isFunction(this.props.onPress),
-      onMapboxShapeSourcePress: this.onPress.bind(this),
-      cluster: this.props.cluster ? 1 : 0,
-      clusterRadius: this.props.clusterRadius,
-      clusterMaxZoomLevel: this.props.clusterMaxZoomLevel,
-      clusterProperties: this.props.clusterProperties,
-      maxZoomLevel: this.props.maxZoomLevel,
-      buffer: this.props.buffer,
-      tolerance: this.props.tolerance,
-      lineMetrics: this.props.lineMetrics,
-      onPress: undefined,
-      ref: (nativeRef) => this._setNativeRef(nativeRef),
-      onAndroidCallback: isAndroid() ? this._onAndroidCallback : undefined,
-    };
-
-    return (
-      <RCTMGLShapeSource {...props}>
-        {cloneReactChildrenWithProps(this.props.children, {
-          sourceID: this.props.id,
-        })}
-      </RCTMGLShapeSource>
-    );
-  }
-}
-
-const RCTMGLShapeSource = requireNativeComponent(
-  NATIVE_MODULE_NAME,
-  ShapeSource,
-  {
-    nativeOnly: {
-      hasPressListener: true,
-      onMapboxShapeSourcePress: true,
-    },
-  },
-);
-
-export default ShapeSource;