Support displaying basic zoom fields

This commit is contained in:
Lukas Martinelli 2016-12-17 17:40:44 +01:00
parent a91a1e99e0
commit 7fae257130

View file

@ -1,21 +1,75 @@
import React from 'react' import React from 'react'
import Immutable from 'immutable' import Immutable from 'immutable'
import color from 'color'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js' import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js'
import NumberField from './number' import NumberField from './number'
import EnumField from './enum' import EnumField from './enum'
import ColorField from './color' import ColorField from './color'
import StringField from './string' import StringField from './string'
import inputStyle from './input.js'
import theme from '../theme.js'
class SpecField extends React.Component { function isZoomField(value) {
static propTypes = { return Immutable.Map.isMap(value)
}
const specFieldProps = {
onChange: React.PropTypes.func.isRequired, onChange: React.PropTypes.func.isRequired,
fieldName: React.PropTypes.string.isRequired, fieldName: React.PropTypes.string.isRequired,
fieldSpec: React.PropTypes.object.isRequired, fieldSpec: React.PropTypes.object.isRequired,
}
/** Supports displaying spec field for zoom function objects
* https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
*/
class ZoomSpecField extends React.Component {
static propTypes = {
...specFieldProps,
value: React.PropTypes.oneOfType([ value: React.PropTypes.oneOfType([
React.PropTypes.object, React.PropTypes.object,
React.PropTypes.string, React.PropTypes.string,
React.PropTypes.number, React.PropTypes.number,
]).isRequired, ]),
}
render() {
if(isZoomField(this.props.value)) {
const zoomFields = this.props.value.get('stops').map(stop => {
console.log(stop)
const zoomLevel = stop.get(0)
const value = stop.get(1)
console.log(zoomLevel, value)
return <div key={zoomLevel}>
<b><span style={inputStyle.label}>Zoom Level {zoomLevel}</span></b>
<SpecField {...this.props} value={value} />
</div>
}).toSeq()
return <div style={{
border: 1,
borderStyle: 'solid',
borderColor: color(theme.colors.gray).lighten(0.1).hexString(),
padding: theme.scale[1],
}}>
{zoomFields}
</div>
} else {
return <SpecField {...this.props} />
}
}
}
/** Display any field from the Mapbox GL style spec and
* choose the correct field component based on the @{fieldSpec}
* to display @{value}. */
class SpecField extends React.Component {
static propTypes = {
...specFieldProps,
value: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number,
]),
} }
onValueChanged(property, value) { onValueChanged(property, value) {
@ -79,7 +133,7 @@ export class PropertyGroup extends React.Component {
const specFields = Object.keys(layerTypeSpec).map(propName => { const specFields = Object.keys(layerTypeSpec).map(propName => {
const fieldSpec = layerTypeSpec[propName] const fieldSpec = layerTypeSpec[propName]
const propValue = this.props.properties.get(propName) const propValue = this.props.properties.get(propName)
return <SpecField return <ZoomSpecField
onChange={this.props.onChange} onChange={this.props.onChange}
key={propName} key={propName}
value={propValue} value={propValue}