Only disable <LayerTypeBlock/> in <LayerEditor/>

src/components/layers/LayerEditor.jsx

@@ -154,6 +154,7 @@ export default class LayerEditor extends React.Component {
           onChange={newId => this.props.onLayerIdChange(this.props.layer.id, newId)}
         />
         <LayerTypeBlock
+          disabled={true}
           error={errorData.type}
           value={this.props.layer.type}
           onChange={newType => this.props.onLayerChanged(changeType(this.props.layer, newType))}

src/components/layers/LayerTypeBlock.jsx

@@ -12,6 +12,11 @@ class LayerTypeBlock extends React.Component {
     wdKey: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     error: PropTypes.object,
+    disabled: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    disabled: false,
   }
 
   render() {
@@ -19,10 +24,29 @@ class LayerTypeBlock extends React.Component {
       data-wd-key={this.props.wdKey}
       error={this.props.error}
     >
-      <StringInput
+      {this.props.disabled &&
-        value={this.props.value}
+        <StringInput
-        disabled={true}
+          value={this.props.value}
-      />
+          disabled={true}
+        />
+      }
+      {!this.props.disabled &&
+        <SelectInput
+          options={[
+            ['background', 'Background'],
+            ['fill', 'Fill'],
+            ['line', 'Line'],
+            ['symbol', 'Symbol'],
+            ['raster', 'Raster'],
+            ['circle', 'Circle'],
+            ['fill-extrusion', 'Fill Extrusion'],
+            ['hillshade', 'Hillshade'],
+            ['heatmap', 'Heatmap'],
+          ]}
+          onChange={this.props.onChange}
+          value={this.props.value}
+        />
+      }
     </InputBlock>
   }
 }