Updated autogen script and code to support Light

scripts/autogenHelpers/DocJSONBuilder.js

@@ -13,7 +13,8 @@ class DocJSONBuilder {
     this._styledLayers = {};
 
     for (let styleLayer of styledLayers) {
-      this._styledLayers[pascelCase(styleLayer.name) + 'Layer'] = styleLayer;
+      const ComponentName = pascelCase(styleLayer.name);
+      this._styledLayers[ComponentName + (ComponentName === 'Light' ? '' : 'Layer')] = styleLayer;
     }
 
     this._filePath = INPUT_PATH;

scripts/autogenHelpers/globals.js

@@ -80,6 +80,8 @@ global.getLayerType = function (layer, platform) {
       return isIOS ? 'MGLBackgroundStyleLayer' : 'BackgroundLayer';
     case 'raster':
       return isIOS ? 'MGLRasterStyleLayer' : 'RasterLayer';
+    case 'light':
+      return isIOS ? 'MGLLight' : 'Light';
     default:
       throw new Error(`Is ${layer.name} a new layer? We should add support for it!`);
   }

scripts/autogenerate.js

@@ -29,70 +29,73 @@ Object.keys(styleSpecJSON.layer.type.values).forEach((layerName) => {
   });
 });
 
+// add light as a layer
+layers.push({ name: 'light', properties: getPropertiesForLight() })
+
+function getPropertiesForLight () {
+  const lightAttributes = styleSpecJSON.light;
+
+  const lightProps = getSupportedProperties(lightAttributes).map((attrName) => {
+    return Object.assign({}, buildProperties(lightAttributes, attrName), {
+      allowedFunctionTypes: [],
+    });
+  });
+
+  return lightProps;
+}
+
 function getPropertiesForLayer (layerName) {
   const paintAttributes = styleSpecJSON[`paint_${layerName}`];
   const layoutAttributes = styleSpecJSON[`layout_${layerName}`];
 
-  const paintProps = Object.keys(paintAttributes)
-    .filter((attrName) => isAttrSupported(paintAttributes[attrName]))
-    .map((attrName) => {
-      let prop = {
-        name: camelCase(attrName),
-        doc: {
-          description: paintAttributes[attrName].doc,
-          requires: getRequires(paintAttributes[attrName].requires),
-          disabledBy: getDisables(paintAttributes[attrName].requires),
-          values: paintAttributes[attrName].values,
-        },
-        type: paintAttributes[attrName].type,
-        value: paintAttributes[attrName].value,
-        image: isImage(attrName),
-        translate: isTranslate(attrName),
-        transition: paintAttributes[attrName].transition,
-        support: getAttributeSupport(paintAttributes[attrName]['sdk-support']),
-        allowedFunctionTypes: getAllowedFunctionTypes(paintAttributes[attrName]),
-      };
+  const paintProps = getSupportedProperties(paintAttributes).map((attrName) => {
+    let prop = buildProperties(paintAttributes, attrName);
 
-      // overrides
-      if (['line-width'].includes(attrName)) {
-        prop.allowedFunctionTypes = ['camera'];
-      }
+    // overrides
+    if (['line-width'].includes(attrName)) {
+      prop.allowedFunctionTypes = ['camera'];
+    }
 
-      return prop;
+    return prop;
   });
 
-  const layoutProps = Object.keys(layoutAttributes)
-    .filter((attrName) => isAttrSupported(layoutAttributes[attrName]))
-    .map((attrName) => {
-      let prop = {
-        name: camelCase(attrName),
-        doc: {
-          description: layoutAttributes[attrName].doc,
-          requires: getRequires(layoutAttributes[attrName].requires),
-          disabledBy: getDisables(layoutAttributes[attrName].requires),
-          values: layoutAttributes[attrName].values,
-        },
-        type: layoutAttributes[attrName].type,
-        value: layoutAttributes[attrName].value,
-        image: isImage(attrName),
-        translate: isTranslate(attrName),
-        support: getAttributeSupport(layoutAttributes[attrName]['sdk-support']),
-        allowedFunctionTypes: getAllowedFunctionTypes(layoutAttributes[attrName]),
-      };
-
-      // overrides
-      if (['line-join', 'text-max-width', 'text-letter-spacing', 'text-anchor', 'text-justify'].includes(attrName)) {
-        prop.allowedFunctionTypes = ['camera'];
-      }
-
-      return prop;
-    })
+  const layoutProps = getSupportedProperties(layoutAttributes).map((attrName) => {
+    let prop = buildProperties(layoutAttributes, attrName);
 
+    // overrides
+    if (['line-join', 'text-max-width', 'text-letter-spacing', 'text-anchor', 'text-justify'].includes(attrName)) {
+      prop.allowedFunctionTypes = ['camera'];
+    }
 
+    return prop;
+  });
 
   return layoutProps.concat(paintProps);
 }
 
+function getSupportedProperties (attributes) {
+  return Object.keys(attributes).filter((attrName) => isAttrSupported(attributes[attrName]));
+}
+
+function buildProperties (attributes, attrName) {
+  return {
+    name: camelCase(attrName),
+    doc: {
+      description: attributes[attrName].doc,
+      requires: getRequires(attributes[attrName].requires),
+      disabledBy: getDisables(attributes[attrName].requires),
+      values: attributes[attrName].values,
+    },
+    type: attributes[attrName].type,
+    value: attributes[attrName].value,
+    image: isImage(attrName),
+    translate: isTranslate(attrName),
+    transition: attributes[attrName].transition,
+    support: getAttributeSupport(attributes[attrName]['sdk-support']),
+    allowedFunctionTypes: getAllowedFunctionTypes(attributes[attrName]),
+  };
+}
+
 function getRequires (requiredItems) {
   let items = [];
 

scripts/templates/RCTMGLStyle.m.ejs

@@ -19,6 +19,10 @@
 
   NSArray<NSString*> *styleProps = [reactStyle allKeys];
   for (NSString *prop in styleProps) {
+    if ([prop isEqualToString:@"__MAPBOX_STYLESHEET__"]) {
+      continue;
+    }
+
     RCTMGLStyleValue *styleValue = [RCTMGLStyleValue make:reactStyle[prop]];
 
   <% for (let i = 0; i < layer.properties.length; i++) { -%>
@@ -56,7 +60,11 @@
         return;
     }
     <%_ } _%>
+    <%_ if (layer.name === 'light' && prop.name === 'position') { _%>
+    layer.position = [styleValue getSphericalPosition];
+    <%_ } else { _%>
     layer.<%- iosPropName(prop.name) -%> = styleValue.mglStyleValue;
+    <%_ } _%>
 }
 <%_ if (prop.transition) { _%>
 

scripts/templates/RCTMGLStyleFactory.java.ejs

@@ -16,6 +16,8 @@ import com.mapbox.mapboxsdk.style.layers.PropertyValue;
 import com.mapbox.mapboxsdk.style.layers.RasterLayer;
 import com.mapbox.mapboxsdk.style.layers.SymbolLayer;
 import com.mapbox.mapboxsdk.style.layers.TransitionOptions;
+import com.mapbox.mapboxsdk.style.light.Light;
+import com.mapbox.mapboxsdk.style.light.Position;
 
 import java.util.List;
 
@@ -78,7 +80,14 @@ public class RCTMGLStyleFactory {
         layer.setProperties(PropertyFactory.<%= prop.name %>(<%- androidGetConfigType(androidInputType(prop.type, prop.value)) -%>));
       }
       <%_ } else { _%>
+        <%_ if (layer.name === 'light' && prop.name === 'position') { _%>
+        Float[] values = styleValue.getFloatArray(VALUE_KEY);
+        layer.set<%- pascelCase(prop.name) -%>(Position.fromPosition(values[0], values[1], values[2]));
+        <%_ } else if (layer.name === 'light') { _%>
+        layer.set<%- pascelCase(prop.name) -%>(<%- androidGetConfigType(androidInputType(prop.type, prop.value)) -%>);
+        <%_ } else { _%>
         layer.setProperties(PropertyFactory.<%= prop.name %>(<%- androidGetConfigType(androidInputType(prop.type, prop.value)) -%>));
+        <%_ } _%>
       <%_ } _%>
     }