@rnmapbox/maps 10.0.0-beta.42 → 10.0.0-beta.43

package/javascript/utils/StyleValue.ts

@@ -28,7 +28,7 @@ export function transformStyle(
   const styleProps = Object.keys(style) as Array<keyof typeof style>;
   for (const styleProp of styleProps) {
     const styleType = getStyleType(styleProp);
-    let rawStyle: RawValueType = style[styleProp];
+    let rawStyle: RawValueType | undefined = style[styleProp];
 
     if (styleType === 'color' && typeof rawStyle === 'string') {
       const color = processColor(rawStyle);
@@ -43,11 +43,13 @@ export function transformStyle(
         (Image.resolveAssetSource(rawStyle) as unknown as RawValueType) || {};
     }
 
-    const bridgeValue = new BridgeValue(rawStyle);
-    nativeStyle[styleProp] = {
-      styletype: styleType,
-      stylevalue: bridgeValue.toJSON(),
-    };
+    if (rawStyle !== undefined) {
+      const bridgeValue = new BridgeValue(rawStyle);
+      nativeStyle[styleProp] = {
+        styletype: styleType,
+        stylevalue: bridgeValue.toJSON(),
+      };
+    }
   }
 
   return nativeStyle;

package/javascript/utils/{filterUtils.js → filterUtils.tsx}

@@ -1,4 +1,4 @@
-export function getFilter(filter) {
+export function getFilter(filter: string[] | unknown) {
   if (!Array.isArray(filter) || filter.length === 0) {
     return [];
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rnmapbox/maps",
   "description": "A Mapbox react native module for creating custom maps",
-  "version": "10.0.0-beta.42",
+  "version": "10.0.0-beta.43",
   "publishConfig": {
     "access": "public"
   },

package/scripts/autogenHelpers/DocJSONBuilder.js

@@ -22,7 +22,6 @@ const IGNORE_FILES = [
   'AbstractLayer',
   'AbstractSource',
   'NativeBridgeComponent',
-  'NativeBridgeComponent.tsx',
 ];
 const IGNORE_PATTERN = /\.web\./;
 
@@ -359,7 +358,7 @@ class DocJSONBuilder {
             return reject(err);
           }
 
-          let fileName = fileNameWithExt.replace(/.(js)/, '');
+          let fileName = fileNameWithExt.replace(/\.(js|tsx|ts$)/, '');
           if (
             IGNORE_FILES.includes(fileName) ||
             fileName.match(IGNORE_PATTERN)
@@ -370,7 +369,7 @@ class DocJSONBuilder {
 
           let parsedComponents = docgen.parse(content, {
             babelOptions: {
-              filename: fileName,
+              filename: fileNameWithExt,
             },
           });
           let [parsed] = parsedComponents;

package/scripts/autogenHelpers/globals.js

@@ -292,20 +292,31 @@ global.dtsInterfaceType = function (prop) {
         propTypes.push('string[]');
         break;
       case 'enum':
-        propTypes.push(`Enum<${pascelCase(prop.name)}Enum>[]`);
+        propTypes.push(
+          `Enum<${pascelCase(prop.name)}Enum, ${pascelCase(
+            prop.name,
+          )}EnumValues>[]`,
+        );
         break;
     }
     // propTypes.push('ConstantPropType');
   } else if (prop.type === 'number') {
     propTypes.push('number');
   } else if (prop.type === 'enum') {
-    propTypes.push(`Enum<${pascelCase(prop.name)}Enum>`);
-  } else {
-    // images can be required which result in a number
-    if (prop.image) {
-      propTypes.push('number');
-    }
+    propTypes.push(
+      `Enum<${pascelCase(prop.name)}Enum, ${pascelCase(prop.name)}EnumValues>`,
+    );
+  } else if (prop.type === 'boolean') {
+    propTypes.push('boolean');
+  } else if (prop.type === 'resolvedImage') {
+    propTypes.push('ResolvedImageType');
+  } else if (prop.type === 'formatted') {
+    propTypes.push('FormattedString');
+  } else if (prop.type === 'string') {
     propTypes.push('string');
+  } else {
+    console.error('Unexpected type:', prop.type);
+    throw new Error(`Unexpected type: ${prop.type} for ${prop.name}`);
   }
 
   /*

package/scripts/templates/MapboxStyles.ts.ejs

@@ -2,7 +2,7 @@
   const layers = locals.layers;
 -%>
 /* This file was generated from MapboxStyle.ts.ejs do not modify */
-
+import { type ImageSourcePropType } from 'react-native';
 
 export type Translation = { x: number; y: number } | [number, number];
 
@@ -11,6 +11,8 @@ export interface Transition {
   delay: number;
 }
 
+export type FormattedString = string; /* TODO */
+
 type ExpressionName =
   // Types
   | 'array' | 'boolean' | 'collator' | 'format' | 'image' | 'literal' | 'number' | 'number-format' | 'object' | 'string'
@@ -47,6 +49,8 @@ export type Expression = [ExpressionName, ...ExpressionField[]];
 
 type ExpressionParameters = 'zoom' | 'feature' | 'feature-state' | 'sky-radial-progress' | 'line-progress' | 'heatmap-density';
 
+type ResolvedImageType = ImageSourcePropType;
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
   | T
@@ -59,9 +63,10 @@ export type Value<T, AllowedParameters extends ExpressionParameters[] = []> =
       <%- pascelCase(k) %> = '<%- k %>',
     <%_ } _%>
   }
+  type <%- pascelCase(enumInfo.name) %>EnumValues = <%- Object.keys(enumInfo.values).map(k => `'${k}'`).join(' | ') %>; 
 <%_ } _%>
 
-type Enum<EnumType> = EnumType | keyof EnumType;
+type Enum<EnumType, EnumValues> = EnumType | EnumValues;
 
 <%_ for (let layer of layers) { _%>
   export interface <%- pascelCase(layer.name) %>LayerStyleProps {

package/javascript/components/AbstractLayer.js

@@ -1,46 +0,0 @@
-/* eslint react/prop-types:0  */
-import React from 'react';
-import { processColor } from 'react-native';
-
-import { getFilter } from '../utils/filterUtils';
-import { transformStyle } from '../utils/StyleValue';
-
-class AbstractLayer extends React.PureComponent {
-  get baseProps() {
-    return {
-      ...this.props,
-      id: this.props.id,
-      sourceID: this.props.sourceID,
-      reactStyle: this.getStyle(this.props.style),
-      minZoomLevel: this.props.minZoomLevel,
-      maxZoomLevel: this.props.maxZoomLevel,
-      aboveLayerID: this.props.aboveLayerID,
-      belowLayerID: this.props.belowLayerID,
-      layerIndex: this.props.layerIndex,
-      filter: getFilter(this.props.filter),
-      style: undefined,
-    };
-  }
-
-  getStyleTypeFormatter(styleType) {
-    if (styleType === 'color') {
-      return processColor;
-    }
-  }
-
-  getStyle(style) {
-    return transformStyle(style);
-  }
-
-  setNativeProps(props) {
-    if (this.refs.nativeLayer) {
-      let propsToPass = props;
-      if (props.style) {
-        propsToPass = { ...props, reactStyle: this.getStyle(props.style) };
-      }
-      this.refs.nativeLayer.setNativeProps(propsToPass);
-    }
-  }
-}
-
-export default AbstractLayer;

package/javascript/components/SymbolLayer.js

@@ -1,120 +0,0 @@
-import React from 'react';
-import { View, NativeModules, requireNativeComponent } from 'react-native';
-import PropTypes from 'prop-types';
-
-import { viewPropTypes } from '../utils';
-import { SymbolLayerStyleProp } from '../utils/styleMap';
-
-import AbstractLayer from './AbstractLayer';
-
-const MapboxGL = NativeModules.MGLModule;
-
-export const NATIVE_MODULE_NAME = 'RCTMGLSymbolLayer';
-
-/**
- * SymbolLayer is a style layer that renders icon and text labels at points or along lines on the map.
- */
-class SymbolLayer extends AbstractLayer {
-  static propTypes = {
-    ...viewPropTypes,
-
-    /**
-     * A string that uniquely identifies the source in the style to which it is added.
-     */
-    id: PropTypes.string.isRequired,
-
-    /**
-     * The source from which to obtain the data to style.
-     * If the source has not yet been added to the current style, the behavior is undefined.
-     * Inferred from parent source only if the layer is a direct child to it.
-     */
-    sourceID: PropTypes.string,
-
-    /**
-     * Identifier of the layer within the source identified by the sourceID property from which the receiver obtains the data to style.
-     */
-    sourceLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer above aboveLayerID.
-     */
-    aboveLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer below belowLayerID
-     */
-    belowLayerID: PropTypes.string,
-
-    /**
-     * Inserts a layer at a specified index
-     */
-    layerIndex: PropTypes.number,
-
-    /**
-     *  Filter only the features in the source layer that satisfy a condition that you define
-     */
-    filter: PropTypes.array,
-
-    /**
-     * The minimum zoom level at which the layer gets parsed and appears.
-     */
-    minZoomLevel: PropTypes.number,
-
-    /**
-     * The maximum zoom level at which the layer gets parsed and appears.
-     */
-    maxZoomLevel: PropTypes.number,
-
-    /**
-     * Customizable style attributes
-     */
-    style: PropTypes.oneOfType([
-      SymbolLayerStyleProp,
-      PropTypes.arrayOf(SymbolLayerStyleProp),
-    ]),
-  };
-
-  static defaultProps = {
-    sourceID: MapboxGL.StyleSource.DefaultSourceID,
-  };
-
-  _shouldSnapshot() {
-    let isSnapshot = false;
-
-    if (React.Children.count(this.props.children) <= 0) {
-      return isSnapshot;
-    }
-
-    React.Children.forEach(this.props.children, (child) => {
-      if (child.type === View) {
-        isSnapshot = true;
-      }
-    });
-
-    return isSnapshot;
-  }
-
-  render() {
-    const props = {
-      ...this.baseProps,
-      snapshot: this._shouldSnapshot(),
-      sourceLayerID: this.props.sourceLayerID,
-    };
-
-    return (
-      <RCTMGLSymbolLayer ref="nativeLayer" {...props}>
-        {this.props.children}
-      </RCTMGLSymbolLayer>
-    );
-  }
-}
-
-const RCTMGLSymbolLayer = requireNativeComponent(
-  NATIVE_MODULE_NAME,
-  SymbolLayer,
-  {
-    nativeOnly: { reactStyle: true, snapshot: true },
-  },
-);
-
-export default SymbolLayer;