@rnmapbox/maps 10.0.0-beta.74 → 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/{OfflineCreatePackOptions.js → OfflineCreatePackOptions.ts}

@@ -1,8 +1,24 @@
 import { makeLatLngBounds } from '../../utils/geoUtils';
 import { toJSONString } from '../../utils';
 
+export type OfflineCreatePackOptionsArgs = {
+  name: string;
+  styleURL: string;
+  bounds: [GeoJSON.Position, GeoJSON.Position];
+  minZoom?: number;
+  maxZoom?: number;
+  metadata?: Record<string, unknown>;
+};
+
 class OfflineCreatePackOptions {
-  constructor(options = {}) {
+  public readonly name: string;
+  public readonly styleURL: string;
+  public readonly bounds: string;
+  public readonly minZoom: number | undefined;
+  public readonly maxZoom: number | undefined;
+  public readonly metadata: string | undefined;
+
+  constructor(options: OfflineCreatePackOptionsArgs) {
     this._assert(options);
 
     this.name = options.name;
@@ -13,7 +29,7 @@ class OfflineCreatePackOptions {
     this.metadata = this._makeMetadata(options.metadata);
   }
 
-  _assert(options) {
+  _assert(options: OfflineCreatePackOptionsArgs) {
     if (!options.styleURL) {
       throw new Error(
         'Style URL must be provided for creating an offline pack',
@@ -29,13 +45,12 @@ class OfflineCreatePackOptions {
     }
   }
 
-  _makeLatLngBounds(bounds) {
-    const ne = bounds[0];
-    const sw = bounds[1];
+  _makeLatLngBounds(bounds: [GeoJSON.Position, GeoJSON.Position]): string {
+    const [ne, sw] = bounds;
     return toJSONString(makeLatLngBounds(ne, sw));
   }
 
-  _makeMetadata(metadata) {
+  _makeMetadata(metadata: Record<string, unknown> | undefined) {
     return JSON.stringify({
       ...metadata,
       name: this.name,

package/javascript/modules/offline/{OfflinePack.js → OfflinePack.ts}

@@ -1,9 +1,24 @@
 import { NativeModules } from 'react-native';
 
+import OfflineCreatePackOptions from './OfflineCreatePackOptions';
+
 const MapboxGLOfflineManager = NativeModules.MGLOfflineModule;
 
+type OfflinePackStatus = {
+  name: string;
+  state: number;
+  percentage: number;
+  completedResourceCount: number;
+  completedResourceSize: number;
+  completedTileSize: number;
+  completedTileCount: number;
+  requiredResourceCount: number;
+};
+
 class OfflinePack {
-  constructor(pack) {
+  private pack: OfflineCreatePackOptions;
+  private _metadata: any;
+  constructor(pack: OfflineCreatePackOptions) {
     this.pack = pack;
     this._metadata = null;
   }
@@ -24,15 +39,15 @@ class OfflinePack {
     return this._metadata;
   }
 
-  status() {
+  status(): Promise<OfflinePackStatus> {
     return MapboxGLOfflineManager.getPackStatus(this.name);
   }
 
-  resume() {
+  resume(): Promise<void> {
     return MapboxGLOfflineManager.resumePackDownload(this.name);
   }
 
-  pause() {
+  pause(): Promise<void> {
     return MapboxGLOfflineManager.pausePackDownload(this.name);
   }
 }

package/javascript/modules/offline/{offlineManager.js → offlineManager.ts}

@@ -1,8 +1,18 @@
-import { NativeModules, NativeEventEmitter } from 'react-native';
+import {
+  NativeModules,
+  NativeEventEmitter,
+  EventSubscription,
+} from 'react-native';
 
 import { isUndefined, isFunction, isAndroid } from '../../utils';
 
-import OfflineCreatePackOptions from './OfflineCreatePackOptions';
+export {
+  default as OfflineCreatePackOptions,
+  type OfflineCreatePackOptionsArgs,
+} from './OfflineCreatePackOptions';
+import OfflineCreatePackOptions, {
+  type OfflineCreatePackOptionsArgs,
+} from './OfflineCreatePackOptions';
 import OfflinePack from './OfflinePack';
 
 const MapboxGL = NativeModules.MGLModule;
@@ -11,12 +21,49 @@ export const OfflineModuleEventEmitter = new NativeEventEmitter(
   MapboxGLOfflineManager,
 );
 
+export type OfflineProgressStatus = {
+  name: string;
+  state: number;
+  percentage: number;
+  completedResourceSize: number;
+  completedTileCount: number;
+  completedResourceCount: number;
+  requiredResourceCount: number;
+  completedTileSize: number;
+};
+
+export type OfflinePackError = {
+  name: string;
+  message: string;
+};
+
+type ErrorEvent = {
+  payload: OfflinePackError;
+};
+
+type ProgressEvent = {
+  payload: OfflineProgressStatus;
+};
+
+type ProgressListener = (
+  pack: OfflinePack,
+  status: OfflineProgressStatus,
+) => void;
+type ErrorListener = (pack: OfflinePack, err: OfflinePackError) => void;
+
 /**
  * OfflineManager implements a singleton (shared object) that manages offline packs.
  * All of this class’s instance methods are asynchronous, reflecting the fact that offline resources are stored in a database.
  * The shared object maintains a canonical collection of offline packs.
  */
 class OfflineManager {
+  private _hasInitialized: boolean;
+  private _offlinePacks: Record<string, OfflinePack>;
+  private _progressListeners: Record<string, ProgressListener>;
+  private _errorListeners: Record<string, ErrorListener>;
+  public subscriptionProgress: EventSubscription | null;
+  public subscriptionError: EventSubscription | null;
+
   constructor() {
     this._hasInitialized = false;
     this._offlinePacks = {};
@@ -52,7 +99,11 @@ class OfflineManager {
    * @param  {Callback=} errorListener Callback that listens for status events while downloading the offline resource.
    * @return {void}
    */
-  async createPack(options, progressListener, errorListener) {
+  async createPack(
+    options: OfflineCreatePackOptionsArgs,
+    progressListener: ProgressListener,
+    errorListener?: ErrorListener,
+  ): Promise<void> {
     await this._initialize();
 
     const packOptions = new OfflineCreatePackOptions(options);
@@ -81,7 +132,7 @@ class OfflineManager {
    * @param  {String}  name  Name of the offline pack.
    * @return {void}
    */
-  async invalidatePack(name) {
+  async invalidatePack(name: string): Promise<void> {
     if (!name) {
       return;
     }
@@ -103,7 +154,7 @@ class OfflineManager {
    * @param  {String}  name  Name of the offline pack.
    * @return {void}
    */
-  async deletePack(name) {
+  async deletePack(name: string): Promise<void> {
     if (!name) {
       return;
     }
@@ -128,7 +179,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async invalidateAmbientCache() {
+  async invalidateAmbientCache(): Promise<void> {
     await this._initialize();
     await MapboxGLOfflineManager.invalidateAmbientCache();
   }
@@ -142,7 +193,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async clearAmbientCache() {
+  async clearAmbientCache(): Promise<void> {
     await this._initialize();
     await MapboxGLOfflineManager.clearAmbientCache();
   }
@@ -155,7 +206,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async migrateOfflineCache() {
+  async migrateOfflineCache(): Promise<void> {
     await this._initialize();
     await MapboxGLOfflineManager.migrateOfflineCache();
   }
@@ -170,7 +221,7 @@ class OfflineManager {
    * @param  {Number}  size  Size of ambient cache.
    * @return {void}
    */
-  async setMaximumAmbientCacheSize(size) {
+  async setMaximumAmbientCacheSize(size: number): Promise<void> {
     await this._initialize();
     await MapboxGLOfflineManager.setMaximumAmbientCacheSize(size);
   }
@@ -183,7 +234,7 @@ class OfflineManager {
    *
    * @return {void}
    */
-  async resetDatabase() {
+  async resetDatabase(): Promise<void> {
     await this._initialize();
     await MapboxGLOfflineManager.resetDatabase();
   }
@@ -196,7 +247,7 @@ class OfflineManager {
    *
    * @return {Array<OfflinePack>}
    */
-  async getPacks() {
+  async getPacks(): Promise<OfflinePack[]> {
     await this._initialize();
     return Object.keys(this._offlinePacks).map(
       (name) => this._offlinePacks[name],
@@ -212,7 +263,7 @@ class OfflineManager {
    * @param  {String}  name  Name of the offline pack.
    * @return {OfflinePack}
    */
-  async getPack(name) {
+  async getPack(name: string): Promise<OfflinePack | undefined> {
     await this._initialize();
     return this._offlinePacks[name];
   }
@@ -226,7 +277,7 @@ class OfflineManager {
    * @param {String} path Path to offline tile db on file system.
    * @return {void}
    */
-  async mergeOfflineRegions(path) {
+  async mergeOfflineRegions(path: string): Promise<void> {
     await this._initialize();
     return MapboxGLOfflineManager.mergeOfflineRegions(path);
   }
@@ -241,7 +292,7 @@ class OfflineManager {
    * @param {Number} limit Map tile limit count.
    * @return {void}
    */
-  setTileCountLimit(limit) {
+  setTileCountLimit(limit: number): void {
     MapboxGLOfflineManager.setTileCountLimit(limit);
   }
 
@@ -255,7 +306,7 @@ class OfflineManager {
    * @param {Number} throttleValue event throttle value in ms.
    * @return {void}
    */
-  setProgressEventThrottle(throttleValue) {
+  setProgressEventThrottle(throttleValue: number): void {
     MapboxGLOfflineManager.setProgressEventThrottle(throttleValue);
   }
 
@@ -273,7 +324,11 @@ class OfflineManager {
    * @param  {Callback} errorListener      Callback that listens for status events while downloading the offline resource.
    * @return {void}
    */
-  async subscribe(packName, progressListener, errorListener) {
+  async subscribe(
+    packName: string,
+    progressListener: ProgressListener,
+    errorListener?: ErrorListener,
+  ): Promise<void> {
     const totalProgressListeners = Object.keys(this._progressListeners).length;
     if (isFunction(progressListener)) {
       if (totalProgressListeners === 0) {
@@ -318,7 +373,7 @@ class OfflineManager {
    * @param  {String} packName Name of the offline pack.
    * @return {void}
    */
-  unsubscribe(packName) {
+  unsubscribe(packName: string): void {
     delete this._progressListeners[packName];
     delete this._errorListeners[packName];
 
@@ -337,7 +392,7 @@ class OfflineManager {
     }
   }
 
-  async _initialize() {
+  async _initialize(): Promise<boolean> {
     if (this._hasInitialized) {
       return true;
     }
@@ -353,7 +408,7 @@ class OfflineManager {
     return true;
   }
 
-  _onProgress(e) {
+  _onProgress(e: ProgressEvent): void {
     const { name, state } = e.payload;
 
     if (!this._hasListeners(name, this._progressListeners)) {
@@ -369,7 +424,7 @@ class OfflineManager {
     }
   }
 
-  _onError(e) {
+  _onError(e: ErrorEvent): void {
     const { name } = e.payload;
 
     if (!this._hasListeners(name, this._errorListeners)) {
@@ -380,7 +435,12 @@ class OfflineManager {
     this._errorListeners[name](pack, e.payload);
   }
 
-  _hasListeners(name, listenerMap) {
+  _hasListeners(
+    name: string,
+    listenerMap:
+      | Record<string, ProgressListener>
+      | Record<string, ErrorListener>,
+  ): boolean {
     return (
       !isUndefined(this._offlinePacks[name]) && isFunction(listenerMap[name])
     );