Add label to filter editor

This commit is contained in:
Lukas Martinelli 2017-01-09 16:40:09 +01:00
parent ed9b806143
commit d9b458d7fd
2 changed files with 15 additions and 7 deletions

View file

@ -1,10 +1,11 @@
import React from 'react' import React from 'react'
import GlSpec from 'mapbox-gl-style-spec/reference/latest.min.js' import GlSpec from 'mapbox-gl-style-spec/reference/latest.js'
import input from '../../config/input.js' import input from '../../config/input.js'
import colors from '../../config/colors.js' import colors from '../../config/colors.js'
import { margins } from '../../config/scales.js' import { margins } from '../../config/scales.js'
import DocLabel from '../fields/DocLabel'
import Button from '../Button' import Button from '../Button'
import SelectInput from '../inputs/SelectInput' import SelectInput from '../inputs/SelectInput'
import StringInput from '../inputs/StringInput' import StringInput from '../inputs/StringInput'
@ -148,18 +149,20 @@ export default class CombiningFilterEditor extends React.Component {
static propTypes = { static propTypes = {
/** Properties of the vector layer and the available fields */ /** Properties of the vector layer and the available fields */
properties: React.PropTypes.object.isRequired, properties: React.PropTypes.object.isRequired,
filter: React.PropTypes.array.isRequired, filter: React.PropTypes.array,
onChange: React.PropTypes.func.isRequired, onChange: React.PropTypes.func.isRequired,
} }
// Convert filter to combining filter // Convert filter to combining filter
combiningFilter() { combiningFilter() {
let combiningOp = this.props.filter[0] let filter = this.props.filter || ['all']
let filters = this.props.filter.slice(1)
let combiningOp = filter[0]
let filters = filter.slice(1)
if(combiningFilterOps.indexOf(combiningOp) < 0) { if(combiningFilterOps.indexOf(combiningOp) < 0) {
combiningOp = 'all' combiningOp = 'all'
filters = [this.props.filter.slice(0)] filters = [filter.slice(0)]
} }
return [combiningOp, ...filters] return [combiningOp, ...filters]
@ -216,6 +219,13 @@ export default class CombiningFilterEditor extends React.Component {
} }
return <div> return <div>
<DocLabel
label={"Filter"}
doc={GlSpec.layer.filter.doc}
style={{
width: '42.25%',
}}
/>
<CombiningOperatorSelect <CombiningOperatorSelect
value={combiningOp} value={combiningOp}
onChange={this.onFilterPartChanged.bind(this, 0)} onChange={this.onFilterPartChanged.bind(this, 0)}

View file

@ -118,7 +118,6 @@ export default class LayerEditor extends React.Component {
onChange={v => this.changeProperty(null, 'source-layer', v)} onChange={v => this.changeProperty(null, 'source-layer', v)}
/> />
} }
{this.props.layer.filter &&
<div style={input.property}> <div style={input.property}>
<FilterEditor <FilterEditor
filter={this.props.layer.filter} filter={this.props.layer.filter}
@ -126,7 +125,6 @@ export default class LayerEditor extends React.Component {
onChange={f => this.changeProperty(null, 'filter', f)} onChange={f => this.changeProperty(null, 'filter', f)}
/> />
</div> </div>
}
</div> </div>
case 'properties': return <PropertyGroup case 'properties': return <PropertyGroup
layer={this.props.layer} layer={this.props.layer}