@rnmapbox/maps 10.0.0-beta.75 → 10.0.0-beta.76

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

@@ -1,18 +1,19 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactElement } from 'react';
 
 import locationManager from '../modules/location/locationManager';
+import { type Location } from '../modules/location/locationManager';
+import { CircleLayerStyle } from '../Mapbox';
 
-import Annotation from './annotations/Annotation';
+import Annotation from './Annotation';
 import CircleLayer from './CircleLayer';
 import HeadingIndicator from './HeadingIndicator';
 import NativeUserLocation from './NativeUserLocation';
 
 const mapboxBlue = 'rgba(51, 181, 229, 100)';
 
-const layerStyles = {
+const layerStyles: Record<'normal', Record<string, CircleLayerStyle>> = {
   normal: {
-    pluse: {
+    pulse: {
       circleRadius: 15,
       circleColor: mapboxBlue,
       circleOpacity: 0.2,
@@ -31,11 +32,14 @@ const layerStyles = {
   },
 };
 
-export const normalIcon = (showsUserHeadingIndicator, heading) => [
+const normalIcon = (
+  showsUserHeadingIndicator?: boolean,
+  heading?: number | null,
+): ReactElement[] => [
   <CircleLayer
-    key="mapboxUserLocationPluseCircle"
-    id="mapboxUserLocationPluseCircle"
-    style={layerStyles.normal.pluse}
+    key="mapboxUserLocationPulseCircle"
+    id="mapboxUserLocationPulseCircle"
+    style={layerStyles.normal.pulse}
   />,
   <CircleLayer
     key="mapboxUserLocationWhiteCircle"
@@ -43,93 +47,98 @@ export const normalIcon = (showsUserHeadingIndicator, heading) => [
     style={layerStyles.normal.background}
   />,
   <CircleLayer
-    key="mapboxUserLocationBlueCicle"
-    id="mapboxUserLocationBlueCicle"
+    key="mapboxUserLocationBlueCircle"
+    id="mapboxUserLocationBlueCircle"
     aboveLayerID="mapboxUserLocationWhiteCircle"
     style={layerStyles.normal.foreground}
   />,
-  ...(showsUserHeadingIndicator && heading !== null
+  ...(showsUserHeadingIndicator && typeof heading === 'number'
     ? [HeadingIndicator({ heading })]
     : []),
 ];
 
-class UserLocation extends React.Component {
-  static propTypes = {
-    /**
-     * Whether location icon is animated between updates
-     */
-    animated: PropTypes.bool,
-
-    /**
-     * Which render mode to use.
-     * Can either be `normal` or `native`
-     */
-    renderMode: PropTypes.oneOf(['normal', 'native']),
-
-    /**
-     * native/android only render mode
-     *
-     *  - normal: just a circle
-     *  - compass: triangle with heading
-     *  - gps: large arrow
-     *
-     * @platform android
-     */
-    androidRenderMode: PropTypes.oneOf(['normal', 'compass', 'gps']),
-
-    /**
-     * Whether location icon is visible
-     */
-    visible: PropTypes.bool,
-
-    /**
-     * Callback that is triggered on location icon press
-     */
-    onPress: PropTypes.func,
-
-    /**
-     * Callback that is triggered on location update
-     */
-    onUpdate: PropTypes.func,
-
-    /**
-     * Show or hide small arrow which indicates direction the device is pointing relative to north.
-     */
-    showsUserHeadingIndicator: PropTypes.bool,
-
-    /**
-     * Request the always location permission, and listen to the location even when the app is in background
-     *
-     * @platform ios
-     */
-    requestsAlwaysUse: PropTypes.bool,
-
-    /**
-     * Minimum amount of movement before GPS location is updated in meters
-     */
-    minDisplacement: PropTypes.number,
-
-    /**
-     * Custom location icon of type mapbox-gl-native components
-     */
-    children: PropTypes.any,
-  };
+export enum UserLocationRenderMode {
+  Native = 'native',
+  Normal = 'normal',
+}
+
+type Props = {
+  /**
+   * native/android only render mode
+   *
+   *  - normal: just a circle
+   *  - compass: triangle with heading
+   *  - gps: large arrow
+   *
+   * @platform android
+   */
+  androidRenderMode?: 'normal' | 'compass' | 'gps';
+
+  /**
+   * Whether location icon is animated between updates
+   */
+  animated?: boolean;
+
+  /**
+   * Custom location icon of type mapbox-gl-native components
+   */
+  children?: ReactElement;
+
+  /**
+   * Minimum amount of movement before GPS location is updated in meters
+   */
+  minDisplacement?: number;
+
+  /**
+   * Callback that is triggered on location icon press
+   */
+  onPress?: () => void;
+
+  /**
+   * Callback that is triggered on location update
+   */
+  onUpdate?: (location: Location) => void;
+
+  /**
+   * Which render mode to use.
+   */
+  renderMode?: UserLocationRenderMode;
+
+  /**
+   * Request the always location permission, and listen to the location even when the app is in background
+   *
+   * @platform ios
+   */
+  requestsAlwaysUse?: boolean;
+
+  /**
+   * Show or hide small arrow which indicates direction the device is pointing relative to north.
+   */
+  showsUserHeadingIndicator?: boolean;
 
+  /**
+   * Whether location icon is visible
+   */
+  visible?: boolean;
+};
+
+type UserLocationState = {
+  shouldShowUserLocation: false;
+  coordinates: number[] | null;
+  heading: number | null;
+};
+
+class UserLocation extends React.Component<Props, UserLocationState> {
   static defaultProps = {
     animated: true,
     visible: true,
     showsUserHeadingIndicator: false,
     requestsAlwaysUse: false,
     minDisplacement: 0,
-    renderMode: 'normal',
-  };
-
-  static RenderMode = {
-    Native: 'native',
-    Normal: 'normal',
+    renderMode: UserLocationRenderMode.Normal,
   };
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -143,34 +152,36 @@ class UserLocation extends React.Component {
 
   // required as #setLocationManager attempts to setState
   // after component unmount
-  _isMounted = null;
+  _isMounted?: boolean = undefined;
 
-  locationManagerRunning = false;
+  locationManagerRunning?: boolean = false;
 
   async componentDidMount() {
     this._isMounted = true;
 
-    locationManager.setMinDisplacement(this.props.minDisplacement);
+    locationManager.setMinDisplacement(this.props.minDisplacement || 0);
 
     await this.setLocationManager({
       running: this.needsLocationManagerRunning(),
     });
 
-    if (this.renderMode === UserLocation.RenderMode.Native) {
+    if (this.props.renderMode === UserLocationRenderMode.Native) {
       return;
     }
   }
 
-  async componentDidUpdate(prevProps) {
+  async componentDidUpdate(prevProps: Props) {
     await this.setLocationManager({
       running: this.needsLocationManagerRunning(),
     });
 
     if (this.props.minDisplacement !== prevProps.minDisplacement) {
-      locationManager.setMinDisplacement(this.props.minDisplacement);
+      locationManager.setMinDisplacement(this.props.minDisplacement || 0);
     }
     if (this.props.requestsAlwaysUse !== prevProps.requestsAlwaysUse) {
-      locationManager.setRequestsAlwaysUse(this.props.requestsAlwaysUse);
+      locationManager.setRequestsAlwaysUse(
+        this.props.requestsAlwaysUse || false,
+      );
     }
   }
 
@@ -189,7 +200,7 @@ class UserLocation extends React.Component {
    * @param {Object} running - Object with key `running` and `boolean` value
    * @return {Promise<void>}
    */
-  async setLocationManager({ running }) {
+  async setLocationManager({ running }: { running?: boolean }) {
     if (this.locationManagerRunning !== running) {
       this.locationManagerRunning = running;
       if (running) {
@@ -211,12 +222,12 @@ class UserLocation extends React.Component {
   needsLocationManagerRunning() {
     return (
       !!this.props.onUpdate ||
-      (this.props.renderMode === UserLocation.RenderMode.Normal &&
+      (this.props.renderMode === UserLocationRenderMode.Normal &&
         this.props.visible)
     );
   }
 
-  _onLocationUpdate(location) {
+  _onLocationUpdate(location: Location | null) {
     if (!this._isMounted || !location) {
       return;
     }
@@ -231,7 +242,7 @@ class UserLocation extends React.Component {
 
     this.setState({
       coordinates,
-      heading,
+      heading: heading ?? null,
     });
 
     if (this.props.onUpdate) {
@@ -242,7 +253,7 @@ class UserLocation extends React.Component {
   _renderNative() {
     const { androidRenderMode, showsUserHeadingIndicator } = this.props;
 
-    let props = {
+    const props = {
       androidRenderMode,
       iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
     };
@@ -258,7 +269,7 @@ class UserLocation extends React.Component {
       return null;
     }
 
-    if (this.props.renderMode === UserLocation.RenderMode.Native) {
+    if (this.props.renderMode === UserLocationRenderMode.Native) {
       return this._renderNative();
     }
 
@@ -268,8 +279,8 @@ class UserLocation extends React.Component {
 
     return (
       <Annotation
-        animated={animated}
         id="mapboxUserLocation"
+        animated={animated}
         onPress={onPress}
         coordinates={coordinates}
         style={{

package/javascript/components/VectorSource.tsx

@@ -85,7 +85,7 @@ interface Props {
     height: number;
   };
 
-  children: React.ReactElement | React.ReactElement[];
+  children?: React.ReactElement | React.ReactElement[];
 }
 
 //interface NativeProps extends Omit<Props, 'children'> {}

package/javascript/index.ts

@@ -0,0 +1,4 @@
+export * from './Mapbox';
+import * as Mapbox from './Mapbox';
+
+export default Mapbox;

package/javascript/modules/offline/offlineManager.ts

@@ -6,8 +6,12 @@ import {
 
 import { isUndefined, isFunction, isAndroid } from '../../utils';
 
+export {
+  default as OfflineCreatePackOptions,
+  type OfflineCreatePackOptionsArgs,
+} from './OfflineCreatePackOptions';
 import OfflineCreatePackOptions, {
-  OfflineCreatePackOptionsArgs,
+  type OfflineCreatePackOptionsArgs,
 } from './OfflineCreatePackOptions';
 import OfflinePack from './OfflinePack';
 

package/javascript/modules/snapshot/snapshotManager.ts

@@ -1,5 +1,6 @@
 import { NativeModules } from 'react-native';
 
+export type { default as SnapshotOptions } from './SnapshotOptions';
 import SnapshotOptions from './SnapshotOptions';
 
 const MapboxGLSnapshotManger = NativeModules.MGLSnapshotModule;

package/javascript/types/Position.ts

@@ -0,0 +1 @@
+export type Position = [number, number] | number[];

package/javascript/utils/Logger.ts

@@ -5,7 +5,7 @@ import {
 } from 'react-native';
 const { MGLLogging } = NativeModules;
 
-type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose';
+export type LogLevel = 'error' | 'warning' | 'info' | 'debug' | 'verbose';
 
 export interface LogObject {
   level: LogLevel;

package/javascript/utils/geoUtils.ts

@@ -14,9 +14,6 @@ import {
 } from '@turf/helpers';
 import distance from '@turf/distance';
 import along from '@turf/along';
-import geoViewport from '@mapbox/geo-viewport';
-
-const VECTOR_TILE_SIZE = 512;
 
 export const makePoint = point;
 
@@ -57,35 +54,3 @@ export function addToFeatureCollection(
 export const calculateDistance = distance;
 
 export const pointAlongLine = along;
-
-export function getOrCalculateVisibleRegion(
-  coord: [number, number],
-  zoomLevel: number,
-  width: number,
-  height: number,
-  nativeRegion: {
-    properties: {
-      visibleBounds: number[][];
-    };
-  },
-) {
-  const region = {
-    ne: [0, 0],
-    sw: [0, 0],
-  };
-
-  if (!nativeRegion || !Array.isArray(nativeRegion.properties.visibleBounds)) {
-    const bounds = geoViewport.bounds(
-      coord,
-      zoomLevel,
-      [width, height],
-      VECTOR_TILE_SIZE,
-    );
-    region.ne = [bounds[3], bounds[2]];
-    region.sw = [bounds[1], bounds[0]];
-  } else {
-    [region.ne, region.sw] = nativeRegion.properties.visibleBounds;
-  }
-
-  return region;
-}

package/lib/commonjs/MGLModule.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setWellKnownTileServer = exports.setTelemetryEnabled = exports.setConnected = exports.setAccessToken = exports.removeCustomHeader = exports.getAccessToken = exports.addCustomHeader = exports.TileServers = exports.StyleURL = exports.StyleSource = exports.OfflinePackDownloadState = exports.LineJoin = void 0;
+var _reactNative = require("react-native");
+const MGLModule = {
+  ..._reactNative.NativeModules.MGLModule
+};
+const {
+  StyleURL,
+  OfflinePackDownloadState,
+  LineJoin,
+  StyleSource,
+  TileServers,
+  removeCustomHeader,
+  addCustomHeader,
+  setAccessToken,
+  setWellKnownTileServer,
+  getAccessToken,
+  setTelemetryEnabled,
+  setConnected
+} = MGLModule;
+exports.setConnected = setConnected;
+exports.setTelemetryEnabled = setTelemetryEnabled;
+exports.getAccessToken = getAccessToken;
+exports.setWellKnownTileServer = setWellKnownTileServer;
+exports.setAccessToken = setAccessToken;
+exports.addCustomHeader = addCustomHeader;
+exports.removeCustomHeader = removeCustomHeader;
+exports.TileServers = TileServers;
+exports.StyleSource = StyleSource;
+exports.LineJoin = LineJoin;
+exports.OfflinePackDownloadState = OfflinePackDownloadState;
+exports.StyleURL = StyleURL;
+//# sourceMappingURL=MGLModule.js.map

package/lib/commonjs/MGLModule.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","MGLModule","NativeModules","StyleURL","OfflinePackDownloadState","LineJoin","StyleSource","TileServers","removeCustomHeader","addCustomHeader","setAccessToken","setWellKnownTileServer","getAccessToken","setTelemetryEnabled","setConnected","exports"],"sourceRoot":"../../javascript","sources":["MGLModule.ts"],"mappings":";;;;;;AAAA,IAAAA,YAAA,GAAAC,OAAA;AAsCA,MAAMC,SAAoB,GAAG;EAAE,GAAGC,0BAAa,CAACD;AAAU,CAAC;AAEpD,MAAM;EACXE,QAAQ;EACRC,wBAAwB;EACxBC,QAAQ;EACRC,WAAW;EACXC,WAAW;EACXC,kBAAkB;EAClBC,eAAe;EACfC,cAAc;EACdC,sBAAsB;EACtBC,cAAc;EACdC,mBAAmB;EACnBC;AACF,CAAC,GAAGb,SAAS;AAACc,OAAA,CAAAD,YAAA,GAAAA,YAAA;AAAAC,OAAA,CAAAF,mBAAA,GAAAA,mBAAA;AAAAE,OAAA,CAAAH,cAAA,GAAAA,cAAA;AAAAG,OAAA,CAAAJ,sBAAA,GAAAA,sBAAA;AAAAI,OAAA,CAAAL,cAAA,GAAAA,cAAA;AAAAK,OAAA,CAAAN,eAAA,GAAAA,eAAA;AAAAM,OAAA,CAAAP,kBAAA,GAAAA,kBAAA;AAAAO,OAAA,CAAAR,WAAA,GAAAA,WAAA;AAAAQ,OAAA,CAAAT,WAAA,GAAAA,WAAA;AAAAS,OAAA,CAAAV,QAAA,GAAAA,QAAA;AAAAU,OAAA,CAAAX,wBAAA,GAAAA,wBAAA;AAAAW,OAAA,CAAAZ,QAAA,GAAAA,QAAA"}