@maplibre/maplibre-react-native 10.0.0-alpha.8 → 10.0.0-alpha.9

package/javascript/components/ShapeSource.tsx

@@ -1,34 +1,34 @@
-import useNativeBridge from '../hooks/useNativeBridge';
-import BaseProps from '../types/BaseProps';
-import OnPressEvent from '../types/OnPressEvent';
-import {
-  cloneReactChildrenWithProps,
-  isAndroid,
-  isFunction,
-  toJSONString,
-} from '../utils';
-import {ExpressionField, FilterExpression} from '../utils/MaplibreStyles';
-import {copyPropertiesAsDeprecated} from '../utils/deprecation';
-import {getFilter} from '../utils/filterUtils';
-
-import {
-  NativeMethods,
-  NativeModules,
-  NativeSyntheticEvent,
-  requireNativeComponent,
-} from 'react-native';
+import { Feature, FeatureCollection } from "@turf/helpers";
 import React, {
   Component,
   ReactElement,
   memo,
   useImperativeHandle,
   useRef,
-} from 'react';
-import {Feature, FeatureCollection} from '@turf/helpers';
+} from "react";
+import {
+  NativeMethods,
+  NativeModules,
+  NativeSyntheticEvent,
+  requireNativeComponent,
+} from "react-native";
+
+import useNativeBridge from "../hooks/useNativeBridge";
+import BaseProps from "../types/BaseProps";
+import OnPressEvent from "../types/OnPressEvent";
+import {
+  cloneReactChildrenWithProps,
+  isAndroid,
+  isFunction,
+  toJSONString,
+} from "../utils";
+import { ExpressionField, FilterExpression } from "../utils/MaplibreStyles";
+import { copyPropertiesAsDeprecated } from "../utils/deprecation";
+import { getFilter } from "../utils/filterUtils";
 
 const MapLibreGL = NativeModules.MLNModule;
-export const NATIVE_MODULE_NAME = 'RCTMLNShapeSource';
-export const SHAPE_SOURCE_NATIVE_ASSETS_KEY = 'assets';
+export const NATIVE_MODULE_NAME = "RCTMLNShapeSource";
+export const SHAPE_SOURCE_NATIVE_ASSETS_KEY = "assets";
 
 interface NativeProps {
   shape?: string;
@@ -82,7 +82,7 @@ export interface ShapeSourceProps extends BaseProps {
    * Example: `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
    *
    */
-  clusterProperties?: {[propertyName: string]: ExpressionField};
+  clusterProperties?: { [propertyName: string]: ExpressionField };
   /**
    * Specifies the maximum zoom level at which to create vector tiles.
    * A greater value produces greater detail at high zoom levels.
@@ -146,7 +146,7 @@ export interface ShapeSourceRef {
   ): Promise<FeatureCollection>;
   getClusterChildren(feature: Feature): Promise<FeatureCollection>;
   setNativeProps: (props: NativeProps) => void;
-  onPress: (event: NativeSyntheticEvent<{payload: OnPressEvent}>) => void;
+  onPress: (event: NativeSyntheticEvent<{ payload: OnPressEvent }>) => void;
 
   // this was required by existing test __tests__/utils/animated/AnimatedCoordinatesArray.test.js
   _nativeRef: RCTMLNShapeSourceRefType | undefined;
@@ -157,7 +157,7 @@ export interface ShapeSourceRef {
  * The shape may be a url or a GeoJSON object
  */
 const ShapeSource = memo(
-  React.forwardRef(
+  React.forwardRef<ShapeSourceRef, ShapeSourceProps>(
     (
       {
         id: shapeId = MapLibreGL.StyleSource.DefaultSourceID,
@@ -219,8 +219,11 @@ const ShapeSource = memo(
 
       const _nativeRef = useRef<RCTMLNShapeSourceRefType>();
 
-      const {_runNativeCommand, _runPendingNativeCommands, _onAndroidCallback} =
-        useNativeBridge(NATIVE_MODULE_NAME);
+      const {
+        _runNativeCommand,
+        _runPendingNativeCommands,
+        _onAndroidCallback,
+      } = useNativeBridge(NATIVE_MODULE_NAME);
 
       const _setNativeRef = (nativeRef: RCTMLNShapeSourceRefType): void => {
         _nativeRef.current = nativeRef;
@@ -230,11 +233,10 @@ const ShapeSource = memo(
       async function features(
         filter?: FilterExpression,
       ): Promise<FeatureCollection> {
-        const res: {data: string | FeatureCollection} = await _runNativeCommand(
-          'features',
-          _nativeRef.current,
-          [getFilter(filter)],
-        );
+        const res: { data: string | FeatureCollection } =
+          await _runNativeCommand("features", _nativeRef.current, [
+            getFilter(filter),
+          ]);
 
         if (isAndroid()) {
           return JSON.parse(res.data as string);
@@ -246,20 +248,20 @@ const ShapeSource = memo(
       async function getClusterExpansionZoom(
         feature: Feature,
       ): Promise<number> {
-        if (typeof feature === 'number') {
+        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.',
+            "Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.",
           );
-          const res: {data: number} = await _runNativeCommand(
-            'getClusterExpansionZoomById',
+          const res: { data: number } = await _runNativeCommand(
+            "getClusterExpansionZoomById",
             _nativeRef.current,
             [feature],
           );
           return res.data;
         }
 
-        const res: {data: number} = await _runNativeCommand(
-          'getClusterExpansionZoom',
+        const res: { data: number } = await _runNativeCommand(
+          "getClusterExpansionZoom",
           _nativeRef.current,
           [JSON.stringify(feature)],
         );
@@ -271,13 +273,13 @@ const ShapeSource = memo(
         limit: number,
         offset: number,
       ): Promise<FeatureCollection> {
-        if (typeof feature === 'number') {
+        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.',
+            "Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.",
           );
-          const res: {data: string | FeatureCollection} =
+          const res: { data: string | FeatureCollection } =
             await _runNativeCommand(
-              'getClusterLeavesById',
+              "getClusterLeavesById",
               _nativeRef.current,
               [feature, limit, offset],
             );
@@ -289,11 +291,12 @@ const ShapeSource = memo(
           return res.data as FeatureCollection;
         }
 
-        const res: {data: string | FeatureCollection} = await _runNativeCommand(
-          'getClusterLeaves',
-          _nativeRef.current,
-          [JSON.stringify(feature), limit, offset],
-        );
+        const res: { data: string | FeatureCollection } =
+          await _runNativeCommand("getClusterLeaves", _nativeRef.current, [
+            JSON.stringify(feature),
+            limit,
+            offset,
+          ]);
 
         if (isAndroid()) {
           return JSON.parse(res.data as string);
@@ -305,13 +308,13 @@ const ShapeSource = memo(
       async function getClusterChildren(
         feature: Feature,
       ): Promise<FeatureCollection> {
-        if (typeof feature === 'number') {
+        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.',
+            "Using cluster_id is deprecated and will be removed from the future releases. Please use cluster as an argument instead.",
           );
-          const res: {data: string | FeatureCollection} =
+          const res: { data: string | FeatureCollection } =
             await _runNativeCommand(
-              'getClusterChildrenById',
+              "getClusterChildrenById",
               _nativeRef.current,
               [feature],
             );
@@ -323,11 +326,10 @@ const ShapeSource = memo(
           return res.data as FeatureCollection;
         }
 
-        const res: {data: string | FeatureCollection} = await _runNativeCommand(
-          'getClusterChildren',
-          _nativeRef.current,
-          [JSON.stringify(feature)],
-        );
+        const res: { data: string | FeatureCollection } =
+          await _runNativeCommand("getClusterChildren", _nativeRef.current, [
+            JSON.stringify(feature),
+          ]);
 
         if (isAndroid()) {
           return JSON.parse(res.data as string);
@@ -344,7 +346,7 @@ const ShapeSource = memo(
         const shallowProps = Object.assign({}, nativeProps);
 
         // Adds support for Animated
-        if (shallowProps.shape && typeof shallowProps !== 'string') {
+        if (shallowProps.shape && typeof shallowProps !== "string") {
           shallowProps.shape = JSON.stringify(shallowProps.shape);
         }
 
@@ -359,11 +361,11 @@ const ShapeSource = memo(
       }
 
       function onPress(
-        event: NativeSyntheticEvent<{payload: OnPressEvent}>,
+        event: NativeSyntheticEvent<{ payload: OnPressEvent }>,
       ): void {
         const {
           nativeEvent: {
-            payload: {features, coordinates, point},
+            payload: { features, coordinates, point },
           },
         } = event;
         let newEvent = {
@@ -381,7 +383,7 @@ const ShapeSource = memo(
           },
           {
             nativeEvent: (
-              origNativeEvent: NativeSyntheticEvent<{payload: OnPressEvent}>,
+              origNativeEvent: NativeSyntheticEvent<{ payload: OnPressEvent }>,
             ) => ({
               ...origNativeEvent,
               payload: features[0],

package/javascript/components/Style.tsx

@@ -1,30 +1,30 @@
-import {ExpressionField, FilterExpression} from '../utils/MaplibreStyles';
-import {BaseLayerProps} from '../hooks/useAbstractLayer';
-
-import CircleLayer from './CircleLayer';
-import RasterLayer from './RasterLayer';
-import SymbolLayer from './SymbolLayer';
-import LineLayer from './LineLayer';
-import FillLayer from './FillLayer';
-import FillExtrusionLayer from './FillExtrusionLayer';
-import BackgroundLayer from './BackgroundLayer';
-import HeatmapLayer from './HeatmapLayer';
-import VectorSource from './VectorSource';
-import RasterSource from './RasterSource';
-import ImageSource from './ImageSource';
-import ShapeSource from './ShapeSource';
-
 import React, {
   useMemo,
   useState,
   useEffect,
   ReactElement,
   ComponentType,
-} from 'react';
+} from "react";
+
+import BackgroundLayer, { BackgroundLayerProps } from "./BackgroundLayer";
+import CircleLayer, { CircleLayerProps } from "./CircleLayer";
+import FillExtrusionLayer, {
+  FillExtrusionLayerProps,
+} from "./FillExtrusionLayer";
+import FillLayer, { FillLayerProps } from "./FillLayer";
+import HeatmapLayer, { HeatmapLayerProps } from "./HeatmapLayer";
+import ImageSource from "./ImageSource";
+import LineLayer, { LineLayerProps } from "./LineLayer";
+import RasterLayer, { RasterLayerProps } from "./RasterLayer";
+import RasterSource from "./RasterSource";
+import ShapeSource from "./ShapeSource";
+import SymbolLayer, { SymbolLayerProps } from "./SymbolLayer";
+import VectorSource from "./VectorSource";
+import { ExpressionField, FilterExpression } from "../utils/MaplibreStyles";
 
 function toCamelCase(s: string): string {
-  return s.replace(/([-_][a-z])/gi, $1 => {
-    return $1.toUpperCase().replace('-', '').replace('_', '');
+  return s.replace(/([-_][a-z])/gi, ($1) => {
+    return $1.toUpperCase().replace("-", "").replace("_", "");
   });
 }
 
@@ -37,9 +37,9 @@ function toCamelCaseKeys(
     return {};
   }
   const newObj: Record<string, unknown> = {};
-  Object.keys(oldObj).forEach(key => {
+  Object.keys(oldObj).forEach((key) => {
     const value = oldObj[key];
-    if (key.includes('-')) {
+    if (key.includes("-")) {
       newObj[toCamelCase(key)] = value;
     } else {
       newObj[key] = value;
@@ -48,27 +48,37 @@ function toCamelCaseKeys(
   return newObj;
 }
 
+type LayerProps =
+  | CircleLayerProps
+  | SymbolLayerProps
+  | RasterLayerProps
+  | LineLayerProps
+  | FillLayerProps
+  | FillExtrusionLayerProps
+  | BackgroundLayerProps
+  | HeatmapLayerProps;
+
 function getLayerComponentType(
   layer: MaplibreJSONLayer,
-): ComponentType<BaseLayerProps> | null {
-  const {type} = layer;
+): ComponentType<LayerProps> | null {
+  const { type } = layer;
 
   switch (type) {
-    case 'circle':
+    case "circle":
       return CircleLayer;
-    case 'symbol':
+    case "symbol":
       return SymbolLayer;
-    case 'raster':
+    case "raster":
       return RasterLayer;
-    case 'line':
+    case "line":
       return LineLayer;
-    case 'fill':
+    case "fill":
       return FillLayer;
-    case 'fill-extrusion':
+    case "fill-extrusion":
       return FillExtrusionLayer;
-    case 'background':
+    case "background":
       return BackgroundLayer;
-    case 'heatmap':
+    case "heatmap":
       return HeatmapLayer;
   }
 
@@ -79,10 +89,10 @@ function getLayerComponentType(
 
 interface MaplibreJSONLayer {
   type: string;
-  paint: {[k: string]: unknown};
-  layout: {[k: string]: unknown};
+  paint: { [k: string]: unknown };
+  layout: { [k: string]: unknown };
   source?: string;
-  'source-layer'?: string;
+  "source-layer"?: string;
   minzoom?: number;
   maxzoom?: number;
   filter?: FilterExpression;
@@ -91,7 +101,7 @@ interface MaplibreJSONLayer {
 
 function asLayerComponent(
   layer: MaplibreJSONLayer,
-): ReactElement<BaseLayerProps> | null {
+): ReactElement<LayerProps> | null {
   const LayerComponent = getLayerComponentType(layer);
 
   if (!LayerComponent) {
@@ -103,13 +113,13 @@ function asLayerComponent(
     ...toCamelCaseKeys(layer.layout),
   };
 
-  const layerProps: Partial<BaseLayerProps> = {};
+  const layerProps: Partial<LayerProps> = {};
 
   if (layer.source) {
     layerProps.sourceID = layer.source;
   }
-  if (layer['source-layer']) {
-    layerProps.sourceLayerID = layer['source-layer'];
+  if (layer["source-layer"]) {
+    layerProps.sourceLayerID = layer["source-layer"];
   }
   if (layer.minzoom) {
     layerProps.minZoomLevel = layer.minzoom;
@@ -134,7 +144,7 @@ interface MaplibreJSONSource {
   minzoom?: number;
   maxzoom?: number;
   attribution?: string;
-  scheme?: 'xyz' | 'tms';
+  scheme?: "xyz" | "tms";
   bounds?: number[];
   buffer?: number;
   tileSize?: number;
@@ -148,7 +158,7 @@ interface MaplibreJSONSource {
   clusterMaxZoom?: number;
   clusterMinPoints?: number;
   clusterRadius?: number;
-  clusterProperties?: {[propertyName: string]: ExpressionField};
+  clusterProperties?: { [propertyName: string]: ExpressionField };
   data?: string | object;
   filter?: FilterExpression;
   generateId?: boolean;
@@ -182,19 +192,19 @@ function getTileSourceProps(source: MaplibreJSONSource): SourceProps {
   if (source.attribution) {
     sourceProps.attribution = source.attribution;
   }
-  if (source.scheme && source.scheme === 'tms') {
+  if (source.scheme && source.scheme === "tms") {
     sourceProps.tms = true;
   }
   return sourceProps;
 }
 
 function getVectorSource(id: string, source: MaplibreJSONSource): ReactElement {
-  const sourceProps = {...getTileSourceProps(source)};
+  const sourceProps = { ...getTileSourceProps(source) };
   return <VectorSource key={id} id={id} {...sourceProps} />;
 }
 
 function getRasterSource(id: string, source: MaplibreJSONSource): ReactElement {
-  const sourceProps: SourceProps & {tileSize?: number} = {
+  const sourceProps: SourceProps & { tileSize?: number } = {
     ...getTileSourceProps(source),
   };
   if (source.tileSize) {
@@ -211,7 +221,7 @@ function getImageSource(id: string, source: MaplibreJSONSource): ReactElement {
   return <ImageSource key={id} id={id} {...sourceProps} />;
 }
 
-type ShapeSourceShape = (typeof ShapeSource.prototype.props)['shape'];
+type ShapeSourceShape = (typeof ShapeSource.prototype.props)["shape"];
 
 function getShapeSource(id: string, source: MaplibreJSONSource): ReactElement {
   const sourceProps: SourceProps & {
@@ -219,14 +229,14 @@ function getShapeSource(id: string, source: MaplibreJSONSource): ReactElement {
     cluster?: boolean;
     clusterRadius?: number;
     clusterMaxZoomLevel?: number;
-    clusterProperties?: {[propertyName: string]: ExpressionField};
+    clusterProperties?: { [propertyName: string]: ExpressionField };
     buffer?: number;
     tolerance?: number;
     lineMetrics?: boolean;
   } = {};
-  if (source.data && typeof source.data === 'string') {
+  if (source.data && typeof source.data === "string") {
     sourceProps.url = source.data;
-  } else if (source.data && typeof source.data === 'object') {
+  } else if (source.data && typeof source.data === "object") {
     sourceProps.shape = source.data as ShapeSourceShape;
   }
   if (source.cluster !== undefined) {
@@ -261,13 +271,13 @@ function asSourceComponent(
   source: MaplibreJSONSource,
 ): ReactElement | null {
   switch (source.type) {
-    case 'vector':
+    case "vector":
       return getVectorSource(id, source);
-    case 'raster':
+    case "raster":
       return getRasterSource(id, source);
-    case 'image':
+    case "image":
       return getImageSource(id, source);
-    case 'geojson':
+    case "geojson":
       return getShapeSource(id, source);
   }
 
@@ -278,7 +288,7 @@ function asSourceComponent(
 
 interface MaplibreJSON {
   layers?: MaplibreJSONLayer[];
-  sources?: {[key: string]: MaplibreJSONSource};
+  sources?: { [key: string]: MaplibreJSONSource };
 }
 
 interface StyleProps {
@@ -298,7 +308,7 @@ interface StyleProps {
 const Style = (props: StyleProps): ReactElement => {
   const [fetchedJson, setFetchedJson] = useState({});
   const json: MaplibreJSON =
-    typeof props.json === 'object' ? props.json : fetchedJson;
+    typeof props.json === "object" ? props.json : fetchedJson;
 
   // Fetch style when props.json is a URL
   useEffect(() => {
@@ -311,14 +321,14 @@ const Style = (props: StyleProps): ReactElement => {
         const responseJson = await response.json();
         setFetchedJson(responseJson);
       } catch (error: unknown) {
-        const e = error as {name?: string};
-        if (e.name === 'AbortError') {
+        const e = error as { name?: string };
+        if (e.name === "AbortError") {
           return;
         }
         throw e;
       }
     };
-    if (typeof props.json === 'string') {
+    if (typeof props.json === "string") {
       fetchStyleJson(props.json);
     }
     return function cleanup(): void {
@@ -338,13 +348,13 @@ const Style = (props: StyleProps): ReactElement => {
 
   // Extract source components from json
   const sourceComponents = useMemo(() => {
-    const {sources} = json;
+    const { sources } = json;
     if (!sources || !Object.keys(sources)) {
       return [];
     }
     return Object.keys(sources)
-      .map(id => asSourceComponent(id, sources[id]))
-      .filter(x => !!x);
+      .map((id) => asSourceComponent(id, sources[id]))
+      .filter((x) => !!x);
   }, [json]);
 
   return (

package/javascript/components/SymbolLayer.tsx

@@ -1,16 +1,16 @@
-import {type SymbolLayerStyleProps} from '../utils/MaplibreStyles';
-import BaseProps from '../types/BaseProps';
+import React, { ReactElement } from "react";
+import { View, NativeModules, requireNativeComponent } from "react-native";
+
 import useAbstractLayer, {
   BaseLayerProps,
   NativeBaseProps,
-} from '../hooks/useAbstractLayer';
-
-import React, {ReactElement} from 'react';
-import {View, NativeModules, requireNativeComponent} from 'react-native';
+} from "../hooks/useAbstractLayer";
+import BaseProps from "../types/BaseProps";
+import { type SymbolLayerStyleProps } from "../utils/MaplibreStyles";
 
 const MapLibreGL = NativeModules.MLNModule;
 
-export const NATIVE_MODULE_NAME = 'RCTMLNSymbolLayer';
+export const NATIVE_MODULE_NAME = "RCTMLNSymbolLayer";
 
 export interface SymbolLayerProps extends BaseProps, BaseLayerProps {
   /**
@@ -25,7 +25,7 @@ export interface SymbolLayerProps extends BaseProps, BaseLayerProps {
   children?: ReactElement | ReactElement[];
 }
 
-interface NativeProps extends Omit<SymbolLayerProps, 'style'>, NativeBaseProps {
+interface NativeProps extends Omit<SymbolLayerProps, "style">, NativeBaseProps {
   snapshot: boolean;
 }
 
@@ -39,7 +39,7 @@ const SymbolLayer: React.FC<SymbolLayerProps> = ({
   sourceID = MapLibreGL.StyleSource.DefaultSourceID,
   ...props
 }: SymbolLayerProps) => {
-  const {baseProps, setNativeLayer} = useAbstractLayer<
+  const { baseProps, setNativeLayer } = useAbstractLayer<
     SymbolLayerProps,
     NativeBaseProps
   >({
@@ -54,7 +54,7 @@ const SymbolLayer: React.FC<SymbolLayerProps> = ({
       return isSnapshot;
     }
 
-    React.Children.forEach(props.children, child => {
+    React.Children.forEach(props.children, (child) => {
       if (child?.type === View) {
         isSnapshot = true;
       }