schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-28 17:21:18 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Capitalize label names for fields

Browse source
This commit is contained in:
Lukas Martinelli 2016-12-17 20:36:43 +01:00
parent 1d05ea000d
commit 362f7ae9a1
1 changed files with 14 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/fields/spec.jsx
View file

@ -60,6 +60,14 @@ class ZoomSpecField extends React.Component {
} }
} }
function labelFromFieldName(fieldName) {
let label = fieldName.split('-').slice(1).join(' ')
if(label.length > 0) {
label = label.charAt(0).toUpperCase() + label.slice(1);
}
return label
}
/** Display any field from the Mapbox GL style spec and /** Display any field from the Mapbox GL style spec and
* choose the correct field component based on the @{fieldSpec} * choose the correct field component based on the @{fieldSpec}
* to display @{value}. */ * to display @{value}. */
@ -77,12 +85,13 @@ class SpecField extends React.Component {
} }
render() { render() {
const label = labelFromFieldName(this.props.fieldName)
switch(this.props.fieldSpec.type) { switch(this.props.fieldSpec.type) {
case 'number': return ( case 'number': return (
<NumberField <NumberField
onChange={this.onValueChanged.bind(this, this.props.fieldName)} onChange={this.onValueChanged.bind(this, this.props.fieldName)}
value={this.props.value} value={this.props.value}
name={this.props.fieldName} name={label}
default={this.props.fieldSpec.default} default={this.props.fieldSpec.default}
min={this.props.fieldSpec.min} min={this.props.fieldSpec.min}
max={this.props.fieldSpec.max} max={this.props.fieldSpec.max}
@ -94,7 +103,7 @@ class SpecField extends React.Component {
<EnumField <EnumField
onChange={this.onValueChanged.bind(this, this.props.fieldName)} onChange={this.onValueChanged.bind(this, this.props.fieldName)}
value={this.props.value} value={this.props.value}
name={this.props.fieldName} name={label}
allowedValues={this.props.fieldSpec.values} allowedValues={this.props.fieldSpec.values}
doc={this.props.fieldSpec.doc} doc={this.props.fieldSpec.doc}
/> />
@ -103,7 +112,7 @@ class SpecField extends React.Component {
<StringField <StringField
onChange={this.onValueChanged.bind(this, this.props.fieldName)} onChange={this.onValueChanged.bind(this, this.props.fieldName)}
value={this.props.value} value={this.props.value}
name={this.props.fieldName} name={label}
doc={this.props.fieldSpec.doc} doc={this.props.fieldSpec.doc}
/> />
) )
@ -111,7 +120,7 @@ class SpecField extends React.Component {
<ColorField <ColorField
onChange={this.onValueChanged.bind(this, this.props.fieldName)} onChange={this.onValueChanged.bind(this, this.props.fieldName)}
value={this.props.value} value={this.props.value}
name={this.props.fieldName} name={label}
doc={this.props.fieldSpec.doc} doc={this.props.fieldSpec.doc}
/> />
) )
@ -130,7 +139,7 @@ export class PropertyGroup extends React.Component {
render() { render() {
const layerTypeSpec = GlSpec[this.props.groupType + "_" + this.props.layerType] const layerTypeSpec = GlSpec[this.props.groupType + "_" + this.props.layerType]
const specFields = Object.keys(layerTypeSpec).map(propName => { const specFields = Object.keys(layerTypeSpec).filter(propName => propName !== 'visibility').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 <ZoomSpecField return <ZoomSpecField