Switch from field components to input components

src/components/fields/BooleanField.jsx

@@ -1,75 +0,0 @@
-import React from 'react'
-
-import input from '../../config/input'
-import colors from '../../config/colors'
-import { margins } from '../../config/scales'
-
-class BooleanField extends React.Component {
-  static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.bool,
-    doc: React.PropTypes.string,
-    style: React.PropTypes.object,
-  }
-
-  render() {
-    const styles = {
-			root: {
-        ...input.base,
-        padding: 0,
-				position: 'relative',
-        textAlign: 'center ',
-				cursor: 'pointer'
-			},
-			input: {
-				position: 'absolute',
-				zIndex: -1,
-				opacity: 0
-			},
-			box: {
-				display: 'inline-block',
-        textAlign: 'center ',
-        height: 15,
-        width: 15,
-				marginRight: margins[1],
-				marginBottom: null,
-				backgroundColor: colors.gray,
-				borderRadius: 2,
-				borderStyle: 'solid',
-				borderWidth: 2,
-				borderColor: colors.gray,
-				transition: 'background-color .1s ease-out'
-			},
-			icon: {
-				display: this.props.value ? null : 'none',
-				width: '75%',
-				height: '75%',
-				marginTop: 1,
-				fill: colors.lowgray
-			}
-    }
-
-		return <label style={styles.root}>
-      <input
-				type="checkbox"
-				style={{
-          ...styles.input,
-					...this.props.style,
-				}}
-				value={this.props.value}
-				onChange={e => {this.props.onChange(!this.props.value)}}
-				checked={this.props.value}
-			/>
-      <div style={styles.box}>
-        <svg
-          viewBox='0 0 32 32'
-          style={styles.icon}>
-          <path d='M1 14 L5 10 L13 18 L27 4 L31 8 L13 26 z' />
-        </svg>
-		  </div>
-		</label>
-  }
-}
-
-export default BooleanField

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/NumberField.jsx

@@ -1,50 +0,0 @@
-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 {
-  static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
-    value: React.PropTypes.number,
-    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(e) {
-    const value = parseFloat(e.target.value)
-    /*TODO: we can do range validation already here?
-    if(this.props.min && value < this.props.min) return
-    if(this.props.max && value > this.props.max) return
-    */
-    this.props.onChange(value)
-  }
-
-  render() {
-    let stepSize = null
-    if(this.props.max && this.props.min) {
-      stepSize = (this.props.max - this.props.min) / 10
-    }
-
-    return <input
-      style={{
-        ...input.input,
-        ...this.props.style
-      }}
-      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)}
-    />
-  }
-}
-
-export default NumberField

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}