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

package/javascript/components/Terrain.tsx

@@ -0,0 +1,112 @@
+/*
+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;
+*/
+
+import React, { memo, useMemo } from 'react';
+import { HostComponent, requireNativeComponent } from 'react-native';
+
+import type { TerrainLayerStyleProps, Value } from '../utils/MapboxStyles';
+import { StyleValue, transformStyle } from '../utils/StyleValue';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLTerrain';
+
+type Props = {
+  /**
+   * Name of a source of raster_dem type to be used for terrain elevation.
+   */
+  sourceID: string;
+
+  /**
+   * Deprecated, use exaggeration in style instead
+   */
+  exaggeration?: Value<number, ['zoom']>;
+
+  /**
+   * Customizable style attributes
+   */
+  style: TerrainLayerStyleProps;
+};
+
+export const Terrain = memo((props: Props) => {
+  let { style = {} } = props;
+
+  if (props.exaggeration) {
+    console.warn(
+      `Tarrain: exaggeration property is deprecated pls use style.exaggeration instead!`,
+    );
+    style = { exaggeration: props.exaggeration, ...style };
+  }
+
+  console.log('STYLE:', style);
+  const baseProps = useMemo(() => {
+    return {
+      ...props,
+      reactStyle: transformStyle(style),
+      style: undefined,
+    };
+  }, [props, style]);
+  console.log('BASE PROPS', baseProps);
+
+  return <RCTMGLTerrain {...baseProps} />;
+});
+
+const RCTMGLTerrain: HostComponent<{
+  sourceID: string;
+  reactStyle?: { [key: string]: StyleValue };
+  style?: undefined;
+}> = requireNativeComponent(NATIVE_MODULE_NAME);

package/javascript/index.js

@@ -1,6 +1,6 @@
 import { NativeModules } from 'react-native';
 
-import { Camera } from './components/Camera';
+import { Camera, UserTrackingModes } from './components/Camera';
 import { Atmosphere } from './components/Atmosphere';
 import MapView from './components/MapView';
 import Light from './components/Light';
@@ -23,7 +23,7 @@ import SkyLayer from './components/SkyLayer';
 import SymbolLayer from './components/SymbolLayer';
 import RasterLayer from './components/RasterLayer';
 import BackgroundLayer from './components/BackgroundLayer';
-import Terrain from './components/Terrain';
+import { Terrain } from './components/Terrain';
 import locationManager from './modules/location/locationManager';
 import offlineManager from './modules/offline/offlineManager';
 import snapshotManager from './modules/snapshot/snapshotManager';
@@ -38,13 +38,14 @@ import {
 } from './classes';
 import Style from './components/Style';
 import Logger from './utils/Logger';
+import { deprecatedClass } from './utils/deprecation';
 import { requestAndroidLocationPermissions } from './requestAndroidLocationPermissions';
 
 const MapboxGL = { ...NativeModules.MGLModule };
 
 // static methods
 MapboxGL.requestAndroidLocationPermissions = requestAndroidLocationPermissions;
-MapboxGL.UserTrackingModes = Camera.UserTrackingModes;
+MapboxGL.UserTrackingModes = UserTrackingModes;
 
 // components
 MapboxGL.MapView = MapView;
@@ -57,7 +58,10 @@ MapboxGL.Style = Style;
 
 // classes
 MapboxGL.AnimatedPoint = AnimatedPoint;
-MapboxGL.AnimatedMapPoint = AnimatedPoint; // For backwards compatibiilty.
+MapboxGL.AnimatedMapPoint = deprecatedClass(
+  AnimatedPoint,
+  'AnimatedMapPoint is deprecated please use AnimatedPoint',
+);
 MapboxGL.AnimatedShape = AnimatedShape;
 MapboxGL.AnimatedCoordinatesArray = AnimatedCoordinatesArray;
 MapboxGL.AnimatedExtractCoordinateFromArray =

package/javascript/types/index.ts

@@ -10,20 +10,6 @@ export type MapboxGLEvent<
   V = Element,
 > = SyntheticEvent<V, { type: T; payload: P }>;
 
-// Camera.
-
-export type UserTrackingMode = 'normal' | 'compass' | 'course';
-
-export type UserTrackingModeChangeCallback = (
-  event: MapboxGLEvent<
-    'usertrackingmodechange',
-    {
-      followUserLocation: boolean;
-      followUserMode: UserTrackingMode | null;
-    }
-  >,
-) => void;
-
 // Animated.
 
 export interface AnimatedPoint extends GeoJsonObject {

package/javascript/utils/MapboxStyles.ts

@@ -121,7 +121,7 @@ type ExpressionParameters =
   | 'heatmap-density';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
+export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
   | T
   | Expression;
 
@@ -1468,6 +1468,23 @@ export interface AtmosphereLayerStyleProps {
    */
   starIntensityTransition?: Transition;
 }
+export interface TerrainLayerStyleProps {
+  /**
+   * Name of a source of `raster_dem` type to be used for terrain elevation.
+   */
+  source?: string;
+  /**
+   * Exaggerates the elevation of the terrain by multiplying the data from the DEM with this value.
+   *
+   * @requires source
+   */
+  exaggeration?: Value<number, ['zoom']>;
+
+  /**
+   * The transition affecting any changes to this layer’s exaggeration property.
+   */
+  exaggerationTransition?: Transition;
+}
 
 export type AllLayerStyleProps =
   | FillLayerStyleProps
@@ -1481,4 +1498,5 @@ export type AllLayerStyleProps =
   | BackgroundLayerStyleProps
   | SkyLayerStyleProps
   | LightLayerStyleProps
-  | AtmosphereLayerStyleProps;
+  | AtmosphereLayerStyleProps
+  | TerrainLayerStyleProps;

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/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.42",
   "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/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!`,

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

@@ -48,7 +48,7 @@ export type Expression = [ExpressionName, ...ExpressionField[]];
 type ExpressionParameters = 'zoom' | 'feature' | 'feature-state' | 'sky-radial-progress' | 'line-progress' | 'heatmap-density';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
+export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
   | T
   | Expression;
 

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/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;
-}