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

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/deprecation.ts

@@ -0,0 +1,39 @@
+/**
+ * deprecatedClass: creates a subclass of the class, which prints deprecated warning when called
+ */
+export function deprecatedClass<C extends new (...args: any[]) => object>(
+  origClass: C,
+  deprecationMessage: string,
+): C {
+  const result = class extends origClass {
+    constructor(...args: any[]) {
+      console.log(`Deprecated: ${deprecationMessage}`);
+      super(...args);
+    }
+  };
+  return result;
+}
+
+/**
+ * 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 },
+  onDeprecatedCalled: (key: string) => void,
+  accessors: { [key: string]: (value: unknown) => unknown } = {},
+): { [key: string]: unknown } {
+  const result = newObject;
+  for (const [key, value] of Object.entries(origObject)) {
+    if (!newObject[key]) {
+      Object.defineProperty(result, key, {
+        get() {
+          onDeprecatedCalled(key);
+          return accessors[key] ? accessors[key](value) : value;
+        },
+      });
+    }
+  }
+  return result;
+}

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

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

package/javascript/utils/styleMap.ts

@@ -1671,6 +1671,28 @@ export const AtmosphereLayerStyleProp = PropTypes.shape({
   }),
 });
 
+export const TerrainLayerStyleProp = PropTypes.shape({
+  /**
+   * Name of a source of `raster_dem` type to be used for terrain elevation.
+   */
+  source: PropTypes.string,
+
+  /**
+   * Exaggerates the elevation of the terrain by multiplying the data from the DEM with this value.
+   *
+   * @requires source
+   */
+  exaggeration: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
+
+  /**
+   * The transition affecting any changes to this layer’s exaggeration property.
+   */
+  exaggerationTransition: PropTypes.shape({
+    duration: PropTypes.number,
+    delay: PropTypes.number,
+  }),
+});
+
 const styleMap = {
   fillSortKey: StyleTypes.Constant,
   fillAntialias: StyleTypes.Constant,
@@ -1891,6 +1913,10 @@ const styleMap = {
   starIntensity: StyleTypes.Constant,
   starIntensityTransition: StyleTypes.Transition,
 
+  source: StyleTypes.Constant,
+  exaggeration: StyleTypes.Constant,
+  exaggerationTransition: StyleTypes.Transition,
+
   color: StyleTypes.Color,
   colorTransition: StyleTypes.Transition,
   visibility: StyleTypes.Constant,

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.41",
+  "version": "10.0.0-beta.43",
   "publishConfig": {
     "access": "public"
   },
@@ -29,9 +29,9 @@
     "unittest:single": "jest --testNamePattern",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
-    "type:check": "tsc --noEmit",
+    "type:check": "npx tsc --noEmit",
     "test:plugin": "expo-module test plugin",
-    "build:plugin": "tsc --build plugin",
+    "build:plugin": "npx tsc --build plugin",
     "lint:plugin": "eslint plugin/src/*",
     "prepare": "husky install"
   },
@@ -73,8 +73,8 @@
     "@types/react-native": ">=0.59.9",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
     "@typescript-eslint/parser": "^5.37.0",
-    "babel-jest": "^27.5.1",
-    "documentation": "13.2.5",
+    "babel-jest": "^29.0.3",
+    "documentation": "14.0.0",
     "ejs": "^3.1.3",
     "ejs-lint": "^1.1.0",
     "eslint": "^8.23.0",
@@ -95,7 +95,7 @@
     "react-docgen": "rnmapbox/react-docgen#rnmapbox-dist",
     "react-native": "0.67.0",
     "react-test-renderer": "17.0.2",
-    "typescript": "^4.8.0"
+    "typescript": "4.8.3"
   },
   "jest": {
     "preset": "react-native",

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

@@ -107,6 +107,8 @@ global.getLayerType = function (layer, platform) {
       return isIOS ? 'MGLSkyLayer' : 'SkyLayer';
     case 'atmosphere':
       return isIOS ? 'MGLAtmosphere' : 'Atmosphere';
+    case 'terrain':
+      return isIOS ? 'MGLTerrain' : 'Terrain';
     default:
       throw new Error(
         `Is ${layer.name} a new layer? We should add support for it!`,
@@ -290,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/autogenerate.js

@@ -155,6 +155,19 @@ layers.push({
   support: { gl: false, v10: true },
 });
 
+// add terrain as a layer
+layers.push({
+  name: 'terrain',
+  properties: getPropertiesFor('terrain'),
+  props: {
+    gl: getPropertiesFor('terrain', 'gl'),
+    v10: getPropertiesFor('terrain', 'v10')
+      .filter(({ name }) => name !== 'source')
+      .map((i) => ({ ...i, transition: false })),
+  },
+  support: { gl: false, v10: true },
+});
+
 function getPropertiesFor(kind, only) {
   const attributes = styleSpecJSON[kind];
 

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,8 +49,10 @@ 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
-type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
+export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
   | T
   | Expression;
 
@@ -59,9 +63,10 @@ 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/scripts/templates/RCTMGLStyleFactoryv10.java.ejs

@@ -20,6 +20,7 @@ import com.mapbox.maps.extension.style.layers.generated.SymbolLayer;
 import com.mapbox.maps.extension.style.layers.generated.HeatmapLayer;
 import com.mapbox.maps.extension.style.layers.generated.HillshadeLayer;
 import com.mapbox.maps.extension.style.atmosphere.generated.Atmosphere;
+import com.mapbox.maps.extension.style.terrain.generated.Terrain;
 // import com.mapbox.maps.extension.style.layers.properties.generated.Visibility;
 import com.mapbox.maps.extension.style.layers.properties.generated.*;
 import com.mapbox.maps.extension.style.types.StyleTransition;

package/.eslintignore

@@ -1 +0,0 @@
-/plugin/build

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/SymbolLayer.js

@@ -1,120 +0,0 @@
-import React from 'react';
-import { View, NativeModules, requireNativeComponent } from 'react-native';
-import PropTypes from 'prop-types';
-
-import { viewPropTypes } from '../utils';
-import { SymbolLayerStyleProp } from '../utils/styleMap';
-
-import AbstractLayer from './AbstractLayer';
-
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLSymbolLayer';
-
-/**
- * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
- */
-class SymbolLayer extends AbstractLayer {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * A string that uniquely identifies the source in the style to which it is added.
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * The source from which to obtain the data to style.
-     * If the source has not yet been added to the current style, the behavior is undefined.
-     * Inferred from parent source only if the layer is a direct child to it.
-     */
-    sourceID: PropTypes.string,
-
-    /**
-     * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
-     */
-    sourceLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer above aboveLayerID.
-     */
-    aboveLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer below belowLayerID
-     */
-    belowLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer at a specified index
-     */
-    layerIndex: PropTypes.number,
-
-    /**
-     *  Filter only the features in the source layer that satisfy a condition that you define
-     */
-    filter: PropTypes.array,
-
-    /**
-     * The minimum zoom level at which the layer gets parsed and appears.
-     */
-    minZoomLevel: PropTypes.number,
-
-    /**
-     * The maximum zoom level at which the layer gets parsed and appears.
-     */
-    maxZoomLevel: PropTypes.number,
-
-    /**
-     * Customizable style attributes
-     */
-    style: PropTypes.oneOfType([
-      SymbolLayerStyleProp,
-      PropTypes.arrayOf(SymbolLayerStyleProp),
-    ]),
-  };
-
-  static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
-  };
-
-  _shouldSnapshot() {
-    let isSnapshot = false;
-
-    if (React.Children.count(this.props.children) <= 0) {
-      return isSnapshot;
-    }
-
-    React.Children.forEach(this.props.children, (child) => {
-      if (child.type === View) {
-        isSnapshot = true;
-      }
-    });
-
-    return isSnapshot;
-  }
-
-  render() {
-    const props = {
-      ...this.baseProps,
-      snapshot: this._shouldSnapshot(),
-      sourceLayerID: this.props.sourceLayerID,
-    };
-
-    return (
-      <RCTMGLSymbolLayer ref="nativeLayer" {...props}>
-        {this.props.children}
-      </RCTMGLSymbolLayer>
-    );
-  }
-}
-
-const RCTMGLSymbolLayer = requireNativeComponent(
-  NATIVE_MODULE_NAME,
-  SymbolLayer,
-  {
-    nativeOnly: { reactStyle: true, snapshot: true },
-  },
-);
-
-export default SymbolLayer;

package/javascript/components/Terrain.js

@@ -1,56 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { NativeModules, requireNativeComponent } from 'react-native';
-
-import { viewPropTypes } from '../utils';
-
-import AbstractLayer from './AbstractLayer';
-
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLTerrain';
-
-/**
- * A global modifier that elevates layers and markers based on a DEM data source.
- */
-class Terrain extends React.PureComponent {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * Name of a source of raster_dem type to be used for terrain elevation.
-     */
-    sourceID: PropTypes.string,
-
-    /**
-     * Optional number between 0 and 1000 inclusive. Defaults to 1. Supports interpolateexpressions. Transitionable.
-     * Exaggerates the elevation of the terrain by multiplying the data from the DEM with this value.
-     */
-    exaggeration: PropTypes.oneOfType([PropTypes.number, PropTypes.array]),
-  };
-
-  static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
-  };
-
-  get baseProps() {
-    return {
-      ...this.props,
-      sourceID: this.props.sourceID,
-    };
-  }
-
-  render() {
-    const props = {
-      ...this.baseProps,
-      sourceID: this.props.sourceID,
-    };
-    return <RCTMGLTerrain ref="nativeLayer" {...props} />;
-  }
-}
-
-const RCTMGLTerrain = requireNativeComponent(NATIVE_MODULE_NAME, Terrain, {
-  nativeOnly: { reactStyle: true },
-});
-
-export default Terrain;

package/javascript/utils/deprecation.js

@@ -1,24 +0,0 @@
-/**
- * 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,
-  newObject,
-  onDeprecatedCalled,
-  accessors = {},
-) {
-  const result = newObject;
-  for (const [key, value] of Object.entries(origObject)) {
-    if (!newObject[key]) {
-      Object.defineProperty(result, key, {
-        get() {
-          onDeprecatedCalled(key);
-          return accessors[key] ? accessors[key](value) : value;
-        },
-      });
-    }
-  }
-  return result;
-}