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

Reactivate on change for background layer

Browse source
This commit is contained in:
lukasmartinelli 2016-09-12 20:10:49 +02:00
parent 885e31111c
commit 7c7c8b7111
7 changed files with 47 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/fields/color.jsx
View file

@ -4,6 +4,7 @@ import { Select, Input } from 'rebass'
/*** Number fields with support for min, max and units and documentation*/
class ColorField extends React.Component {
static propTypes = {
onChange: React.PropTypes.func.isRequired,
name: React.PropTypes.string.isRequired,
value: React.PropTypes.number,
default: React.PropTypes.number,
@ -12,6 +13,7 @@ static propTypes = {
render() {
return <Input
onChange={this.props.onChange}
label={this.props.name}
name={this.props.name}
value={this.props.value}

8
src/fields/enum.jsx
View file

@ -3,6 +3,7 @@ import { Select, Input } from 'rebass'
class EnumField extends React.Component {
static propTypes = {
onChange: React.PropTypes.func.isRequired,
name: React.PropTypes.string.isRequired,
value: React.PropTypes.string,
allowedValues: React.PropTypes.array.isRequired,
@ -13,7 +14,12 @@ class EnumField extends React.Component {
const options = this.props.allowedValues.map(val => {
return {children: val, value: val}
})
return <Select name={this.props.name} options={options} label={this.props.name} />
return <Select
onChange={this.props.onChange}
name={this.props.name}
options={options}
label={this.props.name}
/>
}
}

2
src/fields/number.jsx
View file

@ -4,6 +4,7 @@ import { Select, Input } from 'rebass'
/*** Number fields with support for min, max and units and documentation*/
class NumberField extends React.Component {
static propTypes = {
onChange: React.PropTypes.func.isRequired,
name: React.PropTypes.string.isRequired,
value: React.PropTypes.number,
default: React.PropTypes.number,
@ -15,6 +16,7 @@ class NumberField extends React.Component {
render() {
return <Input type="number"
onChange={this.props.onChange}
label={this.props.name}
name={this.props.name}
message={this.props.doc}

11
src/fields/spec.jsx
View file

@ -8,6 +8,7 @@ import StringField from './string'
class SpecField extends React.Component {
static propTypes = {
onChange: React.PropTypes.func.isRequired,
fieldName: React.PropTypes.string.isRequired,
fieldSpec: React.PropTypes.object.isRequired,
value: React.PropTypes.oneOfType([
@ -17,10 +18,15 @@ class SpecField extends React.Component {
]).isRequired,
}
onValueChanged(property, e) {
return this.props.onChange(property, e.target.value)
}
render() {
switch(this.props.fieldSpec.type) {
case 'number': return (
<NumberField
onChange={this.onValueChanged.bind(this, this.props.fieldName)}
value={this.props.value}
name={this.props.fieldName}
default={this.props.fieldSpec.default}
@ -32,6 +38,7 @@ class SpecField extends React.Component {
)
case 'enum': return (
<EnumField
onChange={this.onValueChanged.bind(this, this.props.fieldName)}
value={this.props.value}
name={this.props.fieldName}
allowedValues={this.props.fieldSpec.values}
@ -40,6 +47,7 @@ class SpecField extends React.Component {
)
case 'string': return (
<StringField
onChange={this.onValueChanged.bind(this, this.props.fieldName)}
value={this.props.value}
name={this.props.fieldName}
doc={this.props.fieldSpec.doc}
@ -47,6 +55,7 @@ class SpecField extends React.Component {
)
case 'color': return (
<ColorField
onChange={this.onValueChanged.bind(this, this.props.fieldName)}
value={this.props.value}
name={this.props.fieldName}
doc={this.props.fieldSpec.doc}
@ -59,6 +68,7 @@ class SpecField extends React.Component {
export class PropertyGroup extends React.Component {
static propTypes = {
onChange: React.PropTypes.func.isRequired,
properties: React.PropTypes.instanceOf(Immutable.Map).isRequired,
layerType: React.PropTypes.oneOf(['fill', 'background', 'line']).isRequired,
groupType: React.PropTypes.oneOf(['paint', 'layout']).isRequired,
@ -70,6 +80,7 @@ export class PropertyGroup extends React.Component {
const fieldSpec = layerTypeSpec[propName]
const propValue = this.props.properties.get(propName)
return <SpecField
onChange={this.props.onChange}
key={propName}
value={propValue}
fieldName={propName}

2
src/fields/string.jsx
View file

@ -4,6 +4,7 @@ import { Input } from 'rebass'
/*** Number fields with support for min, max and units and documentation*/
class StringField extends React.Component {
static propTypes = {
onChange: React.PropTypes.func.isRequired,
name: React.PropTypes.string.isRequired,
value: React.PropTypes.number,
default: React.PropTypes.number,
@ -12,6 +13,7 @@ static propTypes = {
render() {
return <Input
onChange={this.props.onChange}
label={this.props.name}
name={this.props.name}
value={this.props.value}

16
src/layers/background.jsx
View file

@ -15,8 +15,7 @@ export default class BackgroundLayer extends React.Component {
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
onPaintChanged(property, e) {
let value = e.target.value
onPaintChanged(property, value) {
if (property == "background-opacity" && !isNaN(parseFloat(value))) {
value = parseFloat(value)
}
@ -25,8 +24,17 @@ export default class BackgroundLayer extends React.Component {
render() {
return <div>
<PropertyGroup layerType="background" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
<PropertyGroup layerType="background" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
<PropertyGroup
layerType="background"
groupType="layout"
properties={this.props.layer.get('layout', Immutable.Map())}
/>
<PropertyGroup
onChange={this.props.onPaintChanged.bind(this)}
layerType="background"
groupType="paint"
properties={this.props.layer.get('paint', Immutable.Map())}
/>
</div>
}
}

13
src/layers/fill.jsx
View file

@ -26,8 +26,17 @@ export default class FillLayer extends React.Component {
render() {
return <div>
<PropertyGroup layerType="fill" groupType="layout" properties={this.props.layer.get('layout', Immutable.Map())}/>
<PropertyGroup layerType="fill" groupType="paint" properties={this.props.layer.get('paint', Immutable.Map())}/>
<PropertyGroup
layerType="fill"
groupType="layout"
properties={this.props.layer.get('layout', Immutable.Map())}
/>
<PropertyGroup
onChange={this.props.onPaintChanged.bind(this)}
layerType="fill"
groupType="paint"
properties={this.props.layer.get('paint', Immutable.Map())}
/>
</div>
}
}