Remove layer specific components

src/layers/background.jsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import Immutable from 'immutable'
-import Input from 'rebass/dist/Input'
-import { PropertyGroup } from '../fields/spec'
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-
-//TODO: All layers contain a lot of redundancy
-export default class BackgroundLayer extends React.Component {
-	static propTypes = {
-		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-		onPaintChanged: React.PropTypes.func.isRequired,
-    onLayoutChanged: React.PropTypes.func.isRequired,
-	}
-
-	constructor(props) {
-		super(props);
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-	}
-
-	render() {
-		return <div>
-			<PropertyGroup
-				onChange={this.props.onLayoutChanged.bind(this)}
-				layerType="background"
-				groupType="layout"
-				properties={this.props.layer.get('layout', Immutable.Map())}
-			/>
-			<PropertyGroup
-				onChange={this.props.onPaintChanged.bind(this)}
-				layerType="background"
-				groupType="paint"
-				properties={this.props.layer.get('paint', Immutable.Map())}
-			/>
-		</div>
-	}
-}
-

src/layers/editor.jsx

@@ -7,14 +7,9 @@ import Space from 'rebass/dist/Space'
 import Tabs from 'react-simpletabs'
 
 import theme from '../theme.js'
-import FillLayer from './fill.jsx'
-import LineLayer from './line.jsx'
-import SymbolLayer from './symbol.jsx'
-import BackgroundLayer from './background.jsx'
 import SourceEditor from './source.jsx'
 import FilterEditor from '../filter/editor.jsx'
-
+import { PropertyGroup } from '../fields/spec.jsx'
-
 
 import MdVisibility from 'react-icons/lib/md/visibility'
 import MdVisibilityOff from 'react-icons/lib/md/visibility-off'
@@ -90,42 +85,6 @@ export class LayerEditor extends React.Component {
     this.props.onLayerChanged(changedLayer)
   }
 
-  layerFromType(type) {
-    if (type === "fill") {
-      return <FillLayer
-        layer={this.props.layer}
-        onPaintChanged={this.onPaintChanged.bind(this)}
-        onLayoutChanged={this.onLayoutChanged.bind(this)}
-      />
-    }
-
-    if (type === "background") {
-      return <BackgroundLayer
-        layer={this.props.layer}
-        onPaintChanged={this.onPaintChanged.bind(this)}
-        onLayoutChanged={this.onLayoutChanged.bind(this)}
-      />
-    }
-
-    if (type === "line") {
-      return <LineLayer
-        layer={this.props.layer}
-        onPaintChanged={this.onPaintChanged.bind(this)}
-        onLayoutChanged={this.onLayoutChanged.bind(this)}
-      />
-    }
-
-    if (type === "symbol") {
-      return <SymbolLayer
-        layer={this.props.layer}
-        onPaintChanged={this.onPaintChanged.bind(this)}
-        onLayoutChanged={this.onLayoutChanged.bind(this)}
-      />
-    }
-
-    return <UnsupportedLayer />
-  }
-
   toggleVisibility() {
     if(this.props.layer.has('layout') && this.props.layer.getIn(['layout', 'visibility']) === 'none') {
       this.onLayoutChanged('visibility', 'visible')
@@ -158,7 +117,22 @@ export class LayerEditor extends React.Component {
       <Tabs>
         <Tabs.Panel title='Paint'>
           <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
-          {this.layerFromType(this.props.layer.get('type'))}
+          <PropertyGroup
+            onChange={this.onPaintChanged.bind(this)}
+            layerType={this.props.layer.get('type')}
+            groupType="paint"
+            properties={this.props.layer.get('paint', Immutable.Map())}
+          />
+          </div>
+        </Tabs.Panel>
+        <Tabs.Panel title='Layout'>
+          <div style={{padding: theme.scale[2], paddingRight: 0, backgroundColor: theme.colors.black}}>
+          <PropertyGroup
+            onChange={this.onLayoutChanged.bind(this)}
+            layerType={this.props.layer.get('type')}
+            groupType="layout"
+            properties={this.props.layer.get('layout', Immutable.Map())}
+          />
           </div>
         </Tabs.Panel>
         <Tabs.Panel title='Data'>

src/layers/fill.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import Immutable from 'immutable'
-import { PropertyGroup } from '../fields/spec'
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-
-//TODO: All layers contain a lot of redundancy
-export default class FillLayer extends React.Component {
-	static propTypes = {
-		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-    onPaintChanged: React.PropTypes.func.isRequired,
-    onLayoutChanged: React.PropTypes.func.isRequired,
-  }
-
-	constructor(props) {
-		super(props);
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-	}
-
-	render() {
-		return <div>
-			<PropertyGroup
-				onChange={this.props.onLayoutChanged.bind(this)}
-				layerType="fill"
-				groupType="layout"
-				properties={this.props.layer.get('layout', Immutable.Map())}
-			/>
-			<PropertyGroup
-				onChange={this.props.onPaintChanged.bind(this)}
-				layerType="fill"
-				groupType="paint"
-				properties={this.props.layer.get('paint', Immutable.Map())}
-			/>
-		</div>
-	}
-}

src/layers/line.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import Immutable from 'immutable'
-import { PropertyGroup } from '../fields/spec'
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-
-//TODO: All layers contain a lot of redundancy
-export default class LineLayer extends React.Component {
-	static propTypes = {
-		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-		onPaintChanged: React.PropTypes.func.isRequired,
-    onLayoutChanged: React.PropTypes.func.isRequired,
-  }
-
-	constructor(props) {
-		super(props);
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-	}
-
-	render() {
-		return <div>
-			<PropertyGroup
-				onChange={this.props.onLayoutChanged.bind(this)}
-				layerType="line"
-				groupType="layout"
-				properties={this.props.layer.get('layout', Immutable.Map())}
-			/>
-			<PropertyGroup
-				onChange={this.props.onPaintChanged.bind(this)}
-				layerType="line"
-				groupType="paint"
-				properties={this.props.layer.get('paint', Immutable.Map())}
-			/>
-		</div>
-	}
-}

src/layers/symbol.jsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import Immutable from 'immutable'
-import PureRenderMixin from 'react-addons-pure-render-mixin';
-import { PropertyGroup } from '../fields/spec'
-
-//TODO: All layers contain a lot of redundancy
-export default class SymbolLayer extends React.Component {
-	static propTypes = {
-		layer: React.PropTypes.instanceOf(Immutable.Map).isRequired,
-		onPaintChanged: React.PropTypes.func.isRequired,
-    onLayoutChanged: React.PropTypes.func.isRequired,
-	}
-
-	constructor(props) {
-		super(props);
-		this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
-	}
-
-	render() {
-		return <div>
-			<PropertyGroup
-				onChange={this.props.onLayoutChanged.bind(this)}
-				layerType="symbol"
-				groupType="layout"
-				properties={this.props.layer.get('layout', Immutable.Map())}
-			/>
-			<PropertyGroup
-				onChange={this.props.onPaintChanged.bind(this)}
-				layerType="symbol"
-				groupType="paint"
-				properties={this.props.layer.get('paint', Immutable.Map())}
-			/>
-		</div>
-	}
-}