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

package/javascript/components/Annotation.tsx

@@ -0,0 +1,141 @@
+import React, { ReactElement } from 'react';
+import { Animated as RNAnimated, Easing } from 'react-native';
+import { Point } from 'geojson';
+
+import Animated from '../utils/animated/Animated';
+import { AnimatedPoint } from '../classes';
+import { OnPressEvent } from '../types/OnPressEvent';
+import { SymbolLayerStyle } from '../Mapbox';
+
+import { SymbolLayer } from './SymbolLayer';
+
+type Props = {
+  id: string;
+  animated?: boolean;
+  animationDuration?: number;
+  animationEasingFunction?: (x: number) => number;
+  coordinates: number[];
+  onPress?: (event: OnPressEvent) => void;
+  children: ReactElement | ReactElement[];
+  style?: object;
+  icon?: string | number | object;
+};
+
+type AnnotationState = {
+  shape: Point | AnimatedPoint | null;
+};
+
+class Annotation extends React.Component<Props, AnnotationState> {
+  static defaultProps = {
+    animated: false,
+    animationDuration: 1000,
+    animationEasingFunction: Easing.linear,
+  };
+
+  constructor(props: Props) {
+    super(props);
+
+    const shape = this._getShapeFromProps(props);
+
+    this.state = {
+      shape: props.animated ? new AnimatedPoint(shape) : shape,
+    };
+
+    this.onPress = this.onPress.bind(this);
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (!Array.isArray(this.props.coordinates)) {
+      this.setState({ shape: null });
+      return;
+    }
+
+    const haveCoordinatesChanged =
+      prevProps.coordinates[0] !== this.props.coordinates[0] ||
+      prevProps.coordinates[1] !== this.props.coordinates[1];
+
+    if (
+      prevProps.animated !== this.props.animated ||
+      (haveCoordinatesChanged && (!this.state.shape || !this.props.animated))
+    ) {
+      const shape = this._getShapeFromProps(this.props);
+
+      this.setState({
+        shape: this.props.animated ? new AnimatedPoint(shape) : shape,
+      });
+    } else if (
+      haveCoordinatesChanged &&
+      this.props.animated &&
+      this.state.shape
+    ) {
+      // flush current animations
+      (this.state.shape as AnimatedPoint).stopAnimation();
+
+      (this.state.shape as AnimatedPoint)
+        .timing({
+          coordinates: this.props.coordinates,
+          easing: this.props.animationEasingFunction,
+          duration: this.props.animationDuration,
+        })
+        .start();
+    }
+  }
+
+  onPress(event: OnPressEvent) {
+    if (this.props.onPress) {
+      this.props.onPress(event);
+    }
+  }
+
+  _getShapeFromProps(props: Partial<Props> = {}): Point {
+    const lng = props.coordinates?.[0] || 0;
+    const lat = props.coordinates?.[1] || 0;
+    return { type: 'Point', coordinates: [lng, lat] };
+  }
+
+  get symbolStyle(): SymbolLayerStyle | undefined {
+    if (!this.props.icon) {
+      return undefined;
+    }
+    return Object.assign({}, this.props.style, {
+      iconImage: this.props.icon,
+    });
+  }
+
+  render() {
+    if (!this.props.coordinates) {
+      return null;
+    }
+
+    const children = [];
+
+    if (this.symbolStyle) {
+      children.push(
+        <SymbolLayer
+          id={`${this.props.id}-symbol`}
+          style={this.symbolStyle as SymbolLayerStyle}
+        />,
+      );
+    }
+
+    if (this.props.children) {
+      if (Array.isArray(this.props.children)) {
+        children.push(...this.props.children);
+      } else {
+        children.push(this.props.children);
+      }
+    }
+
+    return (
+      <Animated.ShapeSource
+        id={this.props.id}
+        onPress={this.onPress}
+        shape={this.state.shape as RNAnimated.WithAnimatedObject<Point>}
+      >
+        {children}
+      </Animated.ShapeSource>
+    );
+  }
+}
+
+export default Annotation;

package/javascript/components/Callout.d.ts

@@ -0,0 +1,35 @@
+import { ViewStyle } from 'react-native';
+
+type Props = Omit<ViewProps, 'style'> & {
+  /**
+   * String that gets displayed in the default callout.
+   */
+  title: string;
+
+  /**
+   * Style property for the Animated.View wrapper, apply animations to this
+   */
+  style?: ViewStyle;
+
+  /**
+   * Style property for the native RCTMGLCallout container, set at your own risk.
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Style property for the content bubble.
+   */
+  contentStyle?: ViewStyle;
+
+  /**
+   * Style property for the triangle tip under the content.
+   */
+  tipStyle?: ViewStyle;
+
+  /**
+   * Style property for the title in the content bubble.
+   */
+  textStyle?: ViewStyle;
+};
+
+export default class Callout extends React.Component<Props> {}

package/javascript/components/ImageSource.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { requireNativeComponent } from 'react-native';
+
+import {
+  cloneReactChildrenWithProps,
+  isNumber,
+  resolveImagePath,
+} from '../utils';
+import { BaseProps } from '../types/BaseProps';
+
+import AbstractSource from './AbstractSource';
+
+export const NATIVE_MODULE_NAME = 'RCTMGLImageSource';
+
+type Position = [number, number];
+
+type Props = BaseProps & {
+  /**
+   * A string that uniquely identifies the source.
+   */
+  id: string;
+
+  /**
+   * An HTTP(S) URL, absolute file URL, or local file URL to the source image.
+   * Gifs are currently not supported.
+   */
+  url?: number | string;
+
+  /**
+   * The top left, top right, bottom right, and bottom left coordinates for the image.
+   */
+  coordinates?: [Position, Position, Position, Position];
+
+  children?: React.ReactElement | React.ReactElement[];
+};
+
+type NativeProps = Props;
+
+/**
+ * ImageSource is a content source that is used for a georeferenced raster image to be shown on the map.
+ * The georeferenced image scales and rotates as the user zooms and rotates the map
+ */
+class ImageSource extends AbstractSource<Props, NativeProps> {
+  _getURL(): string | undefined {
+    const { url } = this.props;
+
+    if (isNumber(url)) {
+      return resolveImagePath(url);
+    } else {
+      return url;
+    }
+  }
+
+  render() {
+    if (
+      !this.props.url ||
+      !this.props.coordinates ||
+      !this.props.coordinates.length
+    ) {
+      return null;
+    }
+
+    const props = {
+      ...this.props,
+      url: this._getURL(),
+    };
+
+    return (
+      <RCTMGLImageSource ref={this.setNativeRef} {...props}>
+        {cloneReactChildrenWithProps(this.props.children, {
+          sourceID: this.props.id,
+        })}
+      </RCTMGLImageSource>
+    );
+  }
+}
+
+const RCTMGLImageSource =
+  requireNativeComponent<NativeProps>(NATIVE_MODULE_NAME);
+
+export default ImageSource;

package/javascript/components/Images.tsx

@@ -1,5 +1,9 @@
 import React, { ReactNode, ReactElement } from 'react';
-import { requireNativeComponent, Image as RNImage } from 'react-native';
+import {
+  requireNativeComponent,
+  Image as RNImage,
+  ImageURISource,
+} from 'react-native';
 import { ImageSourcePropType, ImageResolvedAssetSource } from 'react-native';
 
 import { ShapeSource } from './ShapeSource';
@@ -12,7 +16,7 @@ export type RNMBEvent<PayloadType = { [key: string]: string }> = {
   type: string;
 };
 
-function _isUrlOrPath(value: string | ImageSourcePropType): value is string {
+function _isUrlOrPath(value: ImageEntry): value is string {
   return (
     (typeof value === 'string' || value instanceof String) &&
     (value.startsWith('file://') ||
@@ -24,6 +28,16 @@ function _isUrlOrPath(value: string | ImageSourcePropType): value is string {
   );
 }
 
+function isImageSourcePropType(
+  value: ImageEntry,
+): value is ImageSourcePropType {
+  if (typeof value === 'number' || value instanceof Number) {
+    return true;
+  }
+  const valueAsSource = value as ImageURISource;
+  return !!valueAsSource.uri && typeof valueAsSource.uri === 'string';
+}
+
 type TypedReactNode<T> = ReactElement<T> | Array<TypedReactNode<T>> | never;
 
 type NativeImage =
@@ -33,8 +47,33 @@ type NativeImage =
       sdf?: boolean;
       stretchX?: [number, number][];
       stretchY?: [number, number][];
+      content?: [number, number, number, number];
+      scale?: number;
     };
 
+export type ImageEntryData = {
+  url?: string;
+  image?: ImageSourcePropType;
+  resolvedImage?: ImageResolvedAssetSource;
+  sdf?: boolean;
+  stretchX?: [number, number][];
+  stretchY?: [number, number][];
+  content?: [number, number, number, number];
+  scale?: number;
+};
+
+type ResolvedImageEntryData = {
+  url?: string;
+  resolvedImage?: ImageResolvedAssetSource;
+  sdf?: boolean;
+  stretchX?: [number, number][];
+  stretchY?: [number, number][];
+  content?: [number, number, number, number];
+  scale?: number;
+};
+
+export type ImageEntry = string | ImageSourcePropType | ImageEntryData;
+
 const isChildAnImage = (
   child: ReactNode,
 ): child is React.ReactElement<typeof Image> => {
@@ -47,7 +86,7 @@ interface Props {
    * Keys are names - see iconImage expressions, values can be either urls-s objects
    * with format {uri: 'http://...'}` or `require('image.png')` or `import 'image.png'`
    */
-  images?: { [key: string]: ImageSourcePropType };
+  images?: { [key: string]: ImageEntry };
 
   /**
    * If you have an asset under Image.xcassets on iOS and the drawables directory on android
@@ -77,7 +116,9 @@ class Images extends React.PureComponent<Props> {
       return {};
     }
 
-    const images: { [key: string]: string | ImageResolvedAssetSource } = {};
+    const images: {
+      [key: string]: string | ImageResolvedAssetSource | ResolvedImageEntryData;
+    } = {};
     let nativeImages: NativeImage[] = [];
 
     if (this.props.images) {
@@ -93,11 +134,20 @@ class Images extends React.PureComponent<Props> {
           );
         } else if (_isUrlOrPath(value)) {
           images[imageName] = value;
-        } else {
+        } else if (isImageSourcePropType(value)) {
           const res = RNImage.resolveAssetSource(value);
           if (res && res.uri) {
             images[imageName] = res;
           }
+        } else {
+          let imageEntry = value as ImageEntryData;
+          if (imageEntry.image) {
+            imageEntry = {
+              ...imageEntry,
+              resolvedImage: RNImage.resolveAssetSource(imageEntry.image),
+            };
+          }
+          images[imageName] = imageEntry;
         }
       }
     }
@@ -147,7 +197,9 @@ class Images extends React.PureComponent<Props> {
 type NativeProps = {
   hasOnImageMissing: boolean;
   onImageMissing?: (event: React.SyntheticEvent<Element, RNMBEvent>) => void;
-  images?: { [key: string]: string | ImageResolvedAssetSource };
+  images?: {
+    [key: string]: string | ImageResolvedAssetSource | ResolvedImageEntryData;
+  };
   nativeImages?: NativeImage[];
 };