@maplibre/maplibre-react-native 11.0.0-alpha.2 → 11.0.0-alpha.21

package/src/components/ShapeSource.tsx

@@ -1,368 +0,0 @@
-import {
-  Component,
-  forwardRef,
-  memo,
-  type ReactNode,
-  useImperativeHandle,
-  useRef,
-} from "react";
-import {
-  type NativeMethods,
-  NativeModules,
-  type NativeSyntheticEvent,
-  requireNativeComponent,
-} from "react-native";
-
-import { useNativeBridge } from "../hooks/useNativeBridge";
-import { type BaseProps } from "../types/BaseProps";
-import {
-  type ExpressionField,
-  type FilterExpression,
-} from "../types/MapLibreRNStyles";
-import { type OnPressEvent } from "../types/OnPressEvent";
-import {
-  cloneReactChildrenWithProps,
-  isAndroid,
-  isFunction,
-  toJSONString,
-} from "../utils";
-import { getFilter } from "../utils/filterUtils";
-
-const MLRNModule = NativeModules.MLRNModule;
-export const NATIVE_MODULE_NAME = "MLRNShapeSource";
-
-interface NativeProps {
-  shape?: object | string;
-}
-
-type MLRNShapeSourceRefType = Component<NativeProps> & Readonly<NativeMethods>;
-
-export interface ShapeSourceProps extends BaseProps {
-  /**
-   * A string that uniquely identifies the source.
-   */
-  id: string;
-  /**
-   * An HTTP(S) URL, absolute file URL, or local file URL relative to the current application’s resource bundle.
-   */
-  url?: string;
-  /**
-   * The contents of the source. A shape can represent a GeoJSON geometry, a feature, or a feature colllection.
-   */
-  shape?:
-    | GeoJSON.GeometryCollection
-    | GeoJSON.Feature
-    | GeoJSON.FeatureCollection
-    | GeoJSON.Geometry;
-  /**
-   * Enables clustering on the source for point shapes.
-   */
-  cluster?: boolean;
-  /**
-   * Specifies the radius of each cluster if clustering is enabled.
-   * A value of 512 produces a radius equal to the width of a tile.
-   * The default value is 50.
-   */
-  clusterRadius?: number;
-  /**
-   * Specifies the maximum zoom level at which to cluster points if clustering is enabled.
-   * Defaults to one zoom level less than the value of maxZoomLevel so that, at the maximum zoom level,
-   * the shapes are not clustered.
-   */
-  clusterMaxZoomLevel?: number;
-  /**
-   * Specifies custom properties on the generated clusters if clustering
-   * is enabled, aggregating values from clustered points.
-   *
-   * Has the form `{ "property_name": [operator, map_expression]}`, where
-   *  `operator` is a custom reduce expression that references a special `["accumulated"]` value -
-   *   it accumulates the property value from clusters/points the cluster contains
-   *  `map_expression` produces the value of a single point
-   *
-   * @example `{ "resultingSum": [["+", ["accumulated"], ["get", "resultingSum"]], ["get", "scalerank"]] }`
-   *
-   */
-  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.
-   * The default value is 18.
-   */
-  maxZoomLevel?: number;
-  /**
-   * Specifies the size of the tile buffer on each side.
-   * A value of 0 produces no buffer. A value of 512 produces a buffer as wide as the tile itself.
-   * Larger values produce fewer rendering artifacts near tile edges and slower performance.
-   * The default value is 128.
-   */
-  buffer?: number;
-  /**
-   * Specifies the Douglas-Peucker simplification tolerance.
-   * A greater value produces simpler geometries and improves performance.
-   * The default value is 0.375.
-   */
-  tolerance?: number;
-  /**
-   * Whether to calculate line distance metrics.
-   * This is required for line layers that specify lineGradient values.
-   * The default value is false.
-   */
-  lineMetrics?: boolean;
-  /**
-   * Source press listener, gets called when a user presses one of the children layers only if that layer has a higher z-index than another source layers.
-   */
-  onPress?: (event: OnPressEvent) => void;
-  /**
-   * Overrides the default touch hitbox (44x44 pixels) for the source layers
-   */
-  hitbox?: {
-    /**
-     * `width` of hitbox
-     */
-    width: number;
-    /**
-     * `height` of hitbox
-     */
-    height: number;
-  };
-
-  children?: ReactNode;
-}
-
-export interface ShapeSourceRef {
-  features(filter?: FilterExpression): Promise<GeoJSON.FeatureCollection>;
-
-  getClusterExpansionZoom(feature: GeoJSON.Feature): Promise<number>;
-
-  getClusterLeaves(
-    feature: GeoJSON.Feature,
-    limit: number,
-    offset: number,
-  ): Promise<GeoJSON.FeatureCollection>;
-
-  getClusterChildren(
-    feature: GeoJSON.Feature,
-  ): Promise<GeoJSON.FeatureCollection>;
-
-  setNativeProps: (props: NativeProps) => void;
-  onPress: (event: NativeSyntheticEvent<{ payload: OnPressEvent }>) => void;
-
-  // this was required by existing test __tests__/utils/animated/AnimatedCoordinatesArray.test.js
-  _nativeRef: MLRNShapeSourceRefType | null;
-}
-
-/**
- * ShapeSource is a map content source that supplies vector shapes to be shown on the map.
- * The shape may be a url or a GeoJSON object
- */
-export const ShapeSource = memo(
-  forwardRef<ShapeSourceRef, ShapeSourceProps>(
-    (
-      {
-        id: shapeId = MLRNModule.StyleSource.DefaultSourceID,
-        ...props
-      }: ShapeSourceProps,
-      ref,
-    ) => {
-      useImperativeHandle(ref, () => ({
-        ..._nativeRef.current,
-
-        /**
-         * Returns all features from the source that match the query parameters regardless of whether or not the feature is
-         * currently rendered on the map.
-         *
-         * @example
-         * shapeSource.features()
-         *
-         * @param  {Array=} filter - an optional filter statement to filter the returned Features.
-         * @return {GeoJSON.FeatureCollection}
-         */
-        features,
-
-        /**
-         * Returns the zoom needed to expand the cluster.
-         *
-         * @example
-         * const zoom = await shapeSource.getClusterExpansionZoom(clusterId);
-         *
-         * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
-         * @return {number}
-         */
-        getClusterExpansionZoom,
-
-        /**
-         * Returns the FeatureCollection from the cluster.
-         *
-         * @example
-         * const collection = await shapeSource.getClusterLeaves(clusterId, limit, offset);
-         *
-         * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
-         * @param  {number} limit - The number of points to return.
-         * @param  {number} offset - The amount of points to skip (for pagination).
-         * @return {GeoJSON.FeatureCollection}
-         */
-        getClusterLeaves,
-
-        /**
-         * Returns the FeatureCollection from the cluster (on the next zoom level).
-         *
-         * @example
-         * const collection = await shapeSource.getClusterChildren(clusterId);
-         *
-         * @param  {GeoJSON.Feature} feature - The feature cluster to expand.
-         * @return {GeoJSON.FeatureCollection}
-         */
-        getClusterChildren,
-
-        setNativeProps,
-
-        onPress,
-
-        _nativeRef: _nativeRef.current,
-      }));
-
-      const _nativeRef = useRef<MLRNShapeSourceRefType>(null);
-
-      const {
-        _runNativeCommand,
-        _runPendingNativeCommands,
-        _onAndroidCallback,
-      } = useNativeBridge(NATIVE_MODULE_NAME);
-
-      const _setNativeRef = (nativeRef: MLRNShapeSourceRefType): void => {
-        _nativeRef.current = nativeRef;
-        _runPendingNativeCommands(nativeRef);
-      };
-
-      async function features(
-        filter?: FilterExpression,
-      ): Promise<GeoJSON.FeatureCollection> {
-        const res: { data: string | GeoJSON.FeatureCollection } =
-          await _runNativeCommand("features", _nativeRef.current, [
-            getFilter(filter),
-          ]);
-
-        if (isAndroid()) {
-          return JSON.parse(res.data as string);
-        }
-
-        return res.data as GeoJSON.FeatureCollection;
-      }
-
-      async function getClusterExpansionZoom(
-        feature: GeoJSON.Feature,
-      ): Promise<number> {
-        const res: { data: number } = await _runNativeCommand(
-          "getClusterExpansionZoom",
-          _nativeRef.current,
-          [JSON.stringify(feature)],
-        );
-        return res.data;
-      }
-
-      async function getClusterLeaves(
-        feature: GeoJSON.Feature,
-        limit: number,
-        offset: number,
-      ): Promise<GeoJSON.FeatureCollection> {
-        const res: { data: string | GeoJSON.FeatureCollection } =
-          await _runNativeCommand("getClusterLeaves", _nativeRef.current, [
-            JSON.stringify(feature),
-            limit,
-            offset,
-          ]);
-
-        if (isAndroid()) {
-          return JSON.parse(res.data as string);
-        }
-
-        return res.data as GeoJSON.FeatureCollection;
-      }
-
-      async function getClusterChildren(
-        feature: GeoJSON.Feature,
-      ): Promise<GeoJSON.FeatureCollection> {
-        const res: { data: string | GeoJSON.FeatureCollection } =
-          await _runNativeCommand("getClusterChildren", _nativeRef.current, [
-            JSON.stringify(feature),
-          ]);
-
-        if (isAndroid()) {
-          return JSON.parse(res.data as string);
-        }
-
-        return res.data as GeoJSON.FeatureCollection;
-      }
-
-      function setNativeProps(nativeProps: NativeProps): void {
-        if (!_nativeRef.current) {
-          return;
-        }
-
-        const shallowProps = Object.assign({}, nativeProps);
-
-        // Adds support for Animated
-        if (shallowProps.shape && typeof shallowProps.shape !== "string") {
-          shallowProps.shape = JSON.stringify(shallowProps.shape);
-        }
-
-        _nativeRef.current.setNativeProps(shallowProps);
-      }
-
-      function _getShape(): string | undefined {
-        if (!props.shape) {
-          return undefined;
-        }
-        return toJSONString(props.shape);
-      }
-
-      function onPress(
-        event: NativeSyntheticEvent<{ payload: OnPressEvent }>,
-      ): void {
-        const {
-          nativeEvent: {
-            payload: { features, coordinates, point },
-          },
-        } = event;
-
-        if (props.onPress) {
-          props.onPress({
-            features,
-            coordinates,
-            point,
-          });
-        }
-      }
-
-      const shapeProps = {
-        id: shapeId,
-        url: props.url,
-        shape: _getShape(),
-        hitbox: props.hitbox,
-        hasPressListener: isFunction(props.onPress),
-        onMapboxShapeSourcePress: onPress.bind(this),
-        cluster: props.cluster ? 1 : 0,
-        clusterRadius: props.clusterRadius,
-        clusterMaxZoomLevel: props.clusterMaxZoomLevel,
-        clusterProperties: props.clusterProperties,
-        maxZoomLevel: props.maxZoomLevel,
-        buffer: props.buffer,
-        tolerance: props.tolerance,
-        lineMetrics: props.lineMetrics,
-        onPress: undefined,
-        ref: _setNativeRef,
-        onAndroidCallback: isAndroid() ? _onAndroidCallback : undefined,
-      };
-
-      return (
-        <MLRNShapeSource {...shapeProps}>
-          {cloneReactChildrenWithProps(props.children, {
-            sourceID: shapeId,
-          })}
-        </MLRNShapeSource>
-      );
-    },
-  ),
-);
-
-const MLRNShapeSource = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);

package/src/components/SymbolLayer.tsx

@@ -1,48 +0,0 @@
-import { NativeModules, requireNativeComponent } from "react-native";
-
-import {
-  useAbstractLayer,
-  type BaseLayerProps,
-  type NativeBaseProps,
-} from "../hooks/useAbstractLayer";
-import { type BaseProps } from "../types/BaseProps";
-import { type SymbolLayerStyle } from "../types/MapLibreRNStyles";
-
-const MLRNModule = NativeModules.MLRNModule;
-
-export const NATIVE_MODULE_NAME = "MLRNSymbolLayer";
-
-export interface SymbolLayerProps extends BaseProps, BaseLayerProps {
-  /**
-   * Customizable style attributes
-   */
-  style?: SymbolLayerStyle;
-}
-
-interface NativeProps
-  extends Omit<SymbolLayerProps, "style">,
-    NativeBaseProps {}
-
-const MLRNSymbolLayer = requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
-
-/**
- * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
- */
-export const SymbolLayer = ({
-  sourceID = MLRNModule.StyleSource.DefaultSourceID,
-  ...props
-}: SymbolLayerProps) => {
-  const { baseProps, setNativeLayer } = useAbstractLayer<
-    SymbolLayerProps,
-    NativeBaseProps
-  >({
-    ...props,
-    sourceID,
-  });
-
-  const updatedProps = {
-    ...baseProps,
-  };
-
-  return <MLRNSymbolLayer ref={setNativeLayer} {...updatedProps} />;
-};

package/src/components/UserLocation.tsx

@@ -1,268 +0,0 @@
-import {
-  forwardRef,
-  memo,
-  type ReactNode,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-} from "react";
-
-import { Annotation } from "./Annotation";
-import { NativeUserLocation } from "./NativeUserLocation";
-import { UserLocationPuck } from "./UserLocationPuck";
-import {
-  type Location,
-  LocationManager,
-} from "../modules/location/LocationManager";
-
-const USER_LOCATION_SOURCE_ID = "mlrn-user-location";
-
-interface UserLocationProps {
-  /**
-   * Whether location icon is animated between updates
-   */
-  animated?: boolean;
-  /**
-   * Which render mode to use.
-   * Can either be `normal` or `native`
-   */
-  renderMode?: "normal" | "native";
-  /**
-   * 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 visible
-   */
-  visible?: boolean;
-  /**
-   * Callback that is triggered on location icon press
-   */
-  onPress?: () => void;
-  /**
-   * Callback that is triggered on location update
-   */
-  onUpdate?: (location: Location) => void;
-  /**
-   * Show or hide small arrow which indicates direction the device is pointing relative to north.
-   */
-  showsUserHeadingIndicator?: boolean;
-  /**
-   * Minimum amount of movement before GPS location is updated in meters
-   */
-  minDisplacement?: number;
-  /**
-   * Android only. Set max FPS at which location animators can output updates. Use this setting to limit animation rate of the location puck on higher zoom levels to decrease the stress on the device's CPU which can directly improve battery life, without sacrificing UX.
-   *
-   * @platform android
-   */
-  androidPreferredFramesPerSecond?: number;
-  /**
-   * Custom location icon of type mapbox-gl-native components
-   *
-   * NOTE: Forking maintainer does not understand the above comment.
-   */
-  children?: ReactNode;
-}
-
-interface UserLocationState {
-  shouldShowUserLocation: boolean;
-  coordinates?: number[];
-  heading?: number;
-}
-
-export enum UserLocationRenderMode {
-  Native = "native",
-  Normal = "normal",
-}
-
-export interface UserLocationRef {
-  setLocationManager: (props: { running: boolean }) => Promise<void>;
-  needsLocationManagerRunning: () => boolean;
-  _onLocationUpdate: (location: Location | null) => void;
-}
-
-export const UserLocation = memo(
-  forwardRef<UserLocationRef, UserLocationProps>(
-    (
-      {
-        animated = true,
-        visible = true,
-        showsUserHeadingIndicator = false,
-        minDisplacement = 0,
-        renderMode = "normal",
-        androidRenderMode,
-        androidPreferredFramesPerSecond,
-        children,
-        onUpdate,
-        onPress,
-      }: UserLocationProps,
-      ref,
-    ) => {
-      const _isMounted = useRef<boolean | null>(null);
-      const locationManagerRunning = useRef<boolean>(false);
-
-      const [userLocationState, setUserLocationState] =
-        useState<UserLocationState>({
-          shouldShowUserLocation: false,
-        });
-
-      useImperativeHandle(
-        ref,
-        (): UserLocationRef => ({
-          /**
-           * Whether to start or stop listening to the LocationManager
-           *
-           * Notice, that listening will start automatically when
-           * either `onUpdate` or `visible` are set
-           *
-           * @async
-           * @param {{running: boolean}} running - Object with key `running` and `boolean` value
-           * @return {Promise<void>}
-           */
-          setLocationManager,
-          /**
-           *
-           * If LocationManager should be running
-           *
-           * @return {boolean}
-           */
-          needsLocationManagerRunning,
-          _onLocationUpdate,
-        }),
-      );
-
-      useEffect(() => {
-        _isMounted.current = true;
-
-        setLocationManager({
-          running: needsLocationManagerRunning(),
-        }).then(() => {
-          if (renderMode === UserLocationRenderMode.Native) {
-            return;
-          }
-
-          LocationManager.setMinDisplacement(minDisplacement ?? 0);
-        });
-
-        return (): void => {
-          _isMounted.current = false;
-          setLocationManager({ running: false });
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, []);
-
-      useEffect(() => {
-        LocationManager.setMinDisplacement(minDisplacement ?? 0);
-      }, [minDisplacement]);
-
-      useEffect(() => {
-        if (!_isMounted.current) {
-          return;
-        }
-
-        setLocationManager({
-          running: needsLocationManagerRunning(),
-        });
-      });
-
-      async function setLocationManager({
-        running,
-      }: {
-        running: boolean;
-      }): Promise<void> {
-        if (locationManagerRunning.current !== running) {
-          locationManagerRunning.current = running;
-
-          if (running) {
-            LocationManager.addListener(_onLocationUpdate);
-            const location = await LocationManager.getLastKnownLocation();
-            _onLocationUpdate(location);
-          } else {
-            LocationManager.removeListener(_onLocationUpdate);
-          }
-        }
-      }
-
-      function needsLocationManagerRunning(): boolean {
-        return !!(
-          !!onUpdate ||
-          (renderMode === UserLocationRenderMode.Normal && visible)
-        );
-      }
-
-      function _onLocationUpdate(location: Location | null): void {
-        if (!_isMounted.current || !location) {
-          return;
-        }
-
-        let coordinates;
-        let heading;
-
-        if (location && location.coords) {
-          const { longitude, latitude } = location.coords;
-          heading = location.coords.heading;
-          coordinates = [longitude, latitude];
-        }
-
-        setUserLocationState({
-          ...userLocationState,
-          coordinates,
-          heading,
-        });
-
-        if (onUpdate) {
-          onUpdate(location);
-        }
-      }
-
-      if (!visible) {
-        return null;
-      }
-
-      if (renderMode === UserLocationRenderMode.Native) {
-        const props = {
-          androidRenderMode,
-          iosShowsUserHeadingIndicator: showsUserHeadingIndicator,
-          androidPreferredFramesPerSecond,
-        };
-
-        return <NativeUserLocation {...props} />;
-      }
-
-      if (!userLocationState.coordinates) {
-        return null;
-      }
-
-      return (
-        <Annotation
-          animated={animated}
-          id={USER_LOCATION_SOURCE_ID}
-          onPress={onPress}
-          coordinates={userLocationState.coordinates}
-          style={{
-            iconRotate: userLocationState.heading,
-          }}
-        >
-          {children || (
-            <UserLocationPuck
-              sourceID={USER_LOCATION_SOURCE_ID}
-              heading={
-                showsUserHeadingIndicator
-                  ? userLocationState.heading
-                  : undefined
-              }
-            />
-          )}
-        </Annotation>
-      );
-    },
-  ),
-);