Switch from field components to input components

src/components/fields/EnumField.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import input from '../../config/input.js'
-
-class EnumField extends React.Component {
-  static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.string,
-    allowedValues: React.PropTypes.array.isRequired,
-    doc: React.PropTypes.string,
-    style: React.PropTypes.object,
-  }
-
-  onChange(e) {
-    return this.props.onChange(e.target.value)
-  }
-
-  render() {
-    const options = this.props.allowedValues.map(val => {
-      return <option key={val} value={val}>{val}</option>
-    })
-
-    return <select
-      style={{
-        ...input.select,
-        ...this.props.style
-      }}
-      value={this.props.value}
-      onChange={this.onChange.bind(this)}
-    >
-      {options}
-    </select>
-  }
-}
-
-export default EnumField

src/components/fields/SpecField.jsx

@@ -2,11 +2,11 @@ import React from 'react'
 import color from 'color'
 
 import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
-import NumberField from './NumberField'
-import EnumField from './EnumField'
-import BooleanField from './BooleanField'
 import ColorField from './ColorField'
-import StringField from './StringField'
+import NumberInput from '../inputs/NumberInput'
+import CheckboxInput from '../inputs/CheckboxInput'
+import StringInput from '../inputs/StringInput'
+import SelectInput from '../inputs/SelectInput'
 
 import input from '../../config/input.js'
 
@@ -37,30 +37,29 @@ export default class SpecField extends React.Component {
 
   render() {
     const commonProps = {
-      doc: this.props.fieldSpec.doc,
       style: this.props.style,
       value: this.props.value,
       name: this.props.fieldName,
       onChange: newValue => this.props.onChange(this.props.fieldName, newValue)
     }
+    console.log(this.props.fieldName, this.props.fieldSpec.type)
     switch(this.props.fieldSpec.type) {
       case 'number': return (
-        <NumberField
+        <NumberInput
           {...commonProps}
           default={this.props.fieldSpec.default}
           min={this.props.fieldSpec.minimum}
           max={this.props.fieldSpec.maximum}
-          unit={this.props.fieldSpec.unit}
         />
       )
       case 'enum': return (
-        <EnumField
+        <SelectInput
           {...commonProps}
-          allowedValues={Object.keys(this.props.fieldSpec.values)}
+          options={Object.keys(this.props.fieldSpec.values).map(v => [v, v])}
         />
       )
       case 'string': return (
-        <StringField
+        <StringInput
           {...commonProps}
         />
       )
@@ -70,7 +69,7 @@ export default class SpecField extends React.Component {
         />
       )
       case 'boolean': return (
-        <BooleanField
+        <CheckboxInput
           {...commonProps}
         />
       )

src/components/fields/StringField.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import input from '../../config/input.js'
-
-/*** Number fields with support for min, max and units and documentation*/
-class StringField extends React.Component {
-  static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.string,
-    default: React.PropTypes.number,
-    doc: React.PropTypes.string,
-    style: React.PropTypes.object,
-  }
-
-  onChange(e) {
-    const value = e.target.value
-    return this.props.onChange(value === "" ? null: value)
-  }
-
-  render() {
-    return <input
-      style={{
-        ...input.input,
-        ...this.props.style
-      }}
-      name={this.props.name}
-      placeholder={this.props.default}
-      value={this.props.value ? this.props.value : ""}
-      onChange={this.onChange.bind(this)}
-    />
-  }
-}
-
-export default StringField

src/components/fields/ZoomSpecField.jsx

@@ -2,11 +2,6 @@ import React from 'react'
 import Color from 'color'
 
 import Button from '../Button'
-import NumberField from './NumberField'
-import EnumField from './EnumField'
-import BooleanField from './BooleanField'
-import ColorField from './ColorField'
-import StringField from './StringField'
 import SpecField from './SpecField'
 import DocLabel from './DocLabel'
 
@@ -45,7 +40,6 @@ export default class ZoomSpecField extends React.Component {
   }
 
   render() {
-    console.log(this.props.fieldSpec)
     let label = <DocLabel
       label={labelFromFieldName(this.props.fieldName)}
       doc={this.props.fieldSpec.doc}

src/components/inputs/CheckboxInput.jsx

@@ -1,16 +1,13 @@
 import React from 'react'
-
-import input from '../../config/input'
+import input from '../../config/input.js'
 import colors from '../../config/colors'
 import { margins } from '../../config/scales'
 
-class BooleanField extends React.Component {
+class CheckboxInput extends React.Component {
   static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.bool,
-    doc: React.PropTypes.string,
+    value: React.PropTypes.string,
     style: React.PropTypes.object,
+    onChange: React.PropTypes.func,
   }
 
   render() {
@@ -57,7 +54,6 @@ class BooleanField extends React.Component {
           ...styles.input,
 					...this.props.style,
 				}}
-				value={this.props.value}
 				onChange={e => {this.props.onChange(!this.props.value)}}
 				checked={this.props.value}
 			/>
@@ -72,4 +68,4 @@ class BooleanField extends React.Component {
   }
 }
 
-export default BooleanField
+export default CheckboxInput

src/components/inputs/NumberInput.jsx

@@ -1,18 +1,14 @@
 import React from 'react'
 import input from '../../config/input.js'
 
-/*** Number fields with support for min, max and units and documentation*/
-class NumberField extends React.Component {
+class NumberInput extends React.Component {
   static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
     value: React.PropTypes.number,
+    style: React.PropTypes.object,
     default: React.PropTypes.number,
-    unit: React.PropTypes.string,
     min: React.PropTypes.number,
     max: React.PropTypes.number,
-    doc: React.PropTypes.string,
-    style: React.PropTypes.object,
+    onChange: React.PropTypes.func,
   }
 
   onChange(e) {
@@ -21,7 +17,12 @@ class NumberField extends React.Component {
     if(this.props.min && value < this.props.min) return
     if(this.props.max && value > this.props.max) return
     */
-    this.props.onChange(value)
+
+    if(isNaN(value)) {
+      this.props.onChange(this.props.default)
+    } else {
+      this.props.onChange(value)
+    }
   }
 
   render() {
@@ -35,11 +36,10 @@ class NumberField extends React.Component {
         ...input.input,
         ...this.props.style
       }}
-      type="number"
+      type={"number"}
       min={this.props.min}
       max={this.props.max}
       step={stepSize}
-      name={this.props.name}
       placeholder={this.props.default}
       value={this.props.value}
       onChange={this.onChange.bind(this)}
@@ -47,4 +47,4 @@ class NumberField extends React.Component {
   }
 }
 
-export default NumberField
+export default NumberInput