maputnik/src/components/fields/PropertyGroup.jsx

71 lines
2.1 KiB
React
Raw Normal View History

import React from 'react'
import FunctionSpecField from './FunctionSpecField'
const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
2016-12-20 11:44:22 +01:00
/** Extract field spec by {@fieldName} from the {@layerType} in the
* style specification from either the paint or layout group */
function getFieldSpec(spec, layerType, fieldName) {
const groupName = getGroupName(spec, layerType, fieldName)
const group = spec[groupName + '_' + layerType]
const fieldSpec = group[fieldName]
if(iconProperties.indexOf(fieldName) >= 0) {
return {
...fieldSpec,
values: spec.$root.sprite.values
}
}
if(fieldName === 'text-font') {
return {
...fieldSpec,
values: spec.$root.glyphs.values
}
}
return fieldSpec
}
function getGroupName(spec, layerType, fieldName) {
const paint = spec['paint_' + layerType] || {}
if (fieldName in paint) {
return 'paint'
} else {
return 'layout'
}
}
export default class PropertyGroup extends React.Component {
static propTypes = {
layer: React.PropTypes.object.isRequired,
2016-12-20 16:08:49 +01:00
groupFields: React.PropTypes.array.isRequired,
onChange: React.PropTypes.func.isRequired,
spec: React.PropTypes.object.isRequired,
}
onPropertyChange(property, newValue) {
const group = getGroupName(this.props.spec, this.props.layer.type, property)
this.props.onChange(group , property, newValue)
}
render() {
const fields = this.props.groupFields.map(fieldName => {
const fieldSpec = getFieldSpec(this.props.spec, this.props.layer.type, fieldName)
const paint = this.props.layer.paint || {}
const layout = this.props.layer.layout || {}
const fieldValue = fieldName in paint ? paint[fieldName] : layout[fieldName]
return <FunctionSpecField
onChange={this.onPropertyChange.bind(this)}
key={fieldName}
fieldName={fieldName}
value={fieldValue === undefined ? fieldSpec.default : fieldValue}
fieldSpec={fieldSpec}
/>
2016-12-20 16:08:49 +01:00
})
2017-01-10 21:28:30 +01:00
return <div className="maputnik-property-group">
{fields}
</div>
}
}