Add color field

This commit is contained in:
lukasmartinelli 2016-09-12 19:47:28 +02:00
parent 957d805ab8
commit 4d1609a826
4 changed files with 31 additions and 2 deletions

21
src/fields/color.jsx Normal file
View file

@ -0,0 +1,21 @@
import React from 'react'
import { Select, Input } from 'rebass'
/*** Number fields with support for min, max and units and documentation*/
class ColorField extends React.Component {
static propTypes = {
name: React.PropTypes.string.isRequired,
value: React.PropTypes.number,
default: React.PropTypes.number,
doc: React.PropTypes.string,
}
render() {
return <Input
label={this.props.name}
name={this.props.name}
/>
}
}
export default ColorField

View file

@ -4,7 +4,7 @@ import { Select, Input } from 'rebass'
class EnumField extends React.Component {
static propTypes = {
name: React.PropTypes.string.isRequired,
value: React.PropTypes.string.isRequired,
value: React.PropTypes.string,
allowedValues: React.PropTypes.array.isRequired,
doc: React.PropTypes.string,
}

View file

@ -5,7 +5,7 @@ import { Select, Input } from 'rebass'
class NumberField extends React.Component {
static propTypes = {
name: React.PropTypes.string.isRequired,
value: React.PropTypes.number.isRequired,
value: React.PropTypes.number,
default: React.PropTypes.number,
unit: React.PropTypes.string,
min: React.PropTypes.number,

View file

@ -3,6 +3,7 @@ import Immutable from 'immutable'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
import NumberField from './number'
import EnumField from './enum'
import ColorField from './color'
class SpecField extends React.Component {
static propTypes = {
@ -36,6 +37,13 @@ class SpecField extends React.Component {
doc={this.props.fieldSpec.doc}
/>
)
case 'color': return (
<ColorField
value={this.props.value}
name={this.props.fieldName}
doc={this.props.fieldSpec.doc}
/>
)
default: return null
}
}