From 92ee50a4a4c4a934c9f5051cd8fc74bf81f6ef4d Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 07:36:30 +0100 Subject: [PATCH 01/13] Added default support to --- src/components/inputs/ArrayInput.jsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/components/inputs/ArrayInput.jsx b/src/components/inputs/ArrayInput.jsx index 69a01d5..5a8a4f5 100644 --- a/src/components/inputs/ArrayInput.jsx +++ b/src/components/inputs/ArrayInput.jsx @@ -12,29 +12,32 @@ class ArrayInput extends React.Component { onChange: PropTypes.func, } + static defaultProps = { + value: [], + default: [], + } + changeValue(idx, newValue) { console.log(idx, newValue) - const values = this.values.slice(0) + const values = this.props.value.slice(0) values[idx] = newValue this.props.onChange(values) } - get values() { - return this.props.value || this.props.default || [] - } - render() { - const inputs = this.values.map((v, i) => { + const inputs = Array(this.props.length).fill(null).map((_, i) => { if(this.props.type === 'number') { return } else { return } From 1f77e156e6dbeae2816ff08045cdb56434a38277 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 07:38:50 +0100 Subject: [PATCH 02/13] Added support for root level properties - center - zoom - bearing - pitch --- src/components/modals/SettingsModal.jsx | 41 ++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 04ca51d..44dbf26 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -3,6 +3,8 @@ import PropTypes from 'prop-types' import {latest} from '@mapbox/mapbox-gl-style-spec' import InputBlock from '../inputs/InputBlock' +import ArrayInput from '../inputs/ArrayInput' +import NumberInput from '../inputs/NumberInput' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' import Modal from './Modal' @@ -26,7 +28,7 @@ class SettingsModal extends React.Component { render() { const metadata = this.props.mapStyle.metadata || {} - const {onChangeMetadataProperty} = this.props; + const {onChangeMetadataProperty, mapStyle} = this.props; const inputProps = { } return + + + + + + + + + + + + + + + + } From e7622c20808401f1e4d4beced95855df8622a1ae Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 08:17:25 +0100 Subject: [PATCH 03/13] Added root level light property support. --- src/components/modals/SettingsModal.jsx | 55 +++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 44dbf26..e6aa890 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -7,6 +7,8 @@ import ArrayInput from '../inputs/ArrayInput' import NumberInput from '../inputs/NumberInput' import StringInput from '../inputs/StringInput' import SelectInput from '../inputs/SelectInput' +import EnumInput from '../inputs/EnumInput' +import ColorField from '../fields/ColorField' import Modal from './Modal' class SettingsModal extends React.Component { @@ -18,6 +20,17 @@ class SettingsModal extends React.Component { onOpenToggle: PropTypes.func.isRequired, } + changeLightProperty(property, value) { + const changedStyle = { + ...this.props.mapStyle, + light: { + ...this.props.mapStyle.light, + [property]: value + } + } + this.props.onStyleChanged(changedStyle) + } + changeStyleProperty(property, value) { const changedStyle = { ...this.props.mapStyle, @@ -30,6 +43,9 @@ class SettingsModal extends React.Component { const metadata = this.props.mapStyle.metadata || {} const {onChangeMetadataProperty, mapStyle} = this.props; const inputProps = { } + + const light = this.props.mapStyle.light || {}; + return + + + + + + + + + + + + + + + + + } From 392a845460d9c5b1e7f3d064bb736897f6abd1f8 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 08:24:25 +0100 Subject: [PATCH 04/13] Moved "Style Renderer" options to bottom of list. --- src/components/modals/SettingsModal.jsx | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index e6aa890..4f94b2a 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -107,18 +107,6 @@ class SettingsModal extends React.Component { /> - - - - + + + + + From 8c760bb8108dbc8991f2d918f5d920ca7c0726d0 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 10:12:59 +0100 Subject: [PATCH 05/13] Added default support to --- src/components/inputs/EnumInput.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/inputs/EnumInput.jsx b/src/components/inputs/EnumInput.jsx index e704110..9472a2f 100644 --- a/src/components/inputs/EnumInput.jsx +++ b/src/components/inputs/EnumInput.jsx @@ -29,13 +29,13 @@ class EnumInput extends React.Component { if(options.length <= 3 && optionsLabelLength(options) <= 20) { return } else { return } From d0a47bd1226f4c7099f7d97fd374b6902b9381d4 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 10:15:46 +0100 Subject: [PATCH 06/13] Added support for transition root property --- src/components/modals/SettingsModal.jsx | 30 +++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 4f94b2a..2b9fdee 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -20,6 +20,17 @@ class SettingsModal extends React.Component { onOpenToggle: PropTypes.func.isRequired, } + changeTransitionProperty(property, value) { + const changedStyle = { + ...this.props.mapStyle, + transition: { + ...this.props.mapStyle.transition, + [property]: value + } + } + this.props.onStyleChanged(changedStyle) + } + changeLightProperty(property, value) { const changedStyle = { ...this.props.mapStyle, @@ -45,6 +56,7 @@ class SettingsModal extends React.Component { const inputProps = { } const light = this.props.mapStyle.light || {}; + const transition = this.props.mapStyle.transition || {}; return + + + + + + + + Date: Wed, 16 Oct 2019 21:57:29 +0100 Subject: [PATCH 07/13] unsetting fix. --- src/components/inputs/NumberInput.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx index 0de1fa4..f2fa3ce 100644 --- a/src/components/inputs/NumberInput.jsx +++ b/src/components/inputs/NumberInput.jsx @@ -65,7 +65,7 @@ class NumberInput extends React.Component { this.setState({editing: false}); // Reset explicitly to default value if value has been cleared if(this.state.value === "") { - return this.changeValue(this.props.default) + return; } // If set value is invalid fall back to the last valid value from props or at last resort the default value @@ -73,7 +73,7 @@ class NumberInput extends React.Component { if(this.isValid(this.props.value)) { this.changeValue(this.props.value) } else { - this.changeValue(this.props.default) + this.changeValue(undefined); } } } From 2910efde6e9462d7d1bb9c5d44427a48f3ace1d7 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 21:58:24 +0100 Subject: [PATCH 08/13] Allow removal of light/transition properties. --- src/components/modals/SettingsModal.jsx | 42 ++++++++++++++++--------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 2b9fdee..aaa714d 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -21,25 +21,39 @@ class SettingsModal extends React.Component { } changeTransitionProperty(property, value) { - const changedStyle = { - ...this.props.mapStyle, - transition: { - ...this.props.mapStyle.transition, - [property]: value - } + const transition = { + ...this.props.mapStyle.transition, } - this.props.onStyleChanged(changedStyle) + + if (value === undefined) { + delete transition[property]; + } + else { + transition[property] = value; + } + + this.props.onStyleChanged({ + ...this.props.mapStyle, + transition, + }); } changeLightProperty(property, value) { - const changedStyle = { - ...this.props.mapStyle, - light: { - ...this.props.mapStyle.light, - [property]: value - } + const light = { + ...this.props.mapStyle.light, } - this.props.onStyleChanged(changedStyle) + + if (value === undefined) { + delete light[property]; + } + else { + light[property] = value; + } + + this.props.onStyleChanged({ + ...this.props.mapStyle, + light, + }); } changeStyleProperty(property, value) { From 0aa0dad7fb80c3de90192cfdd9fb4d015e8b819e Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 22:31:29 +0100 Subject: [PATCH 09/13] Remove undefined root properties. --- src/components/modals/SettingsModal.jsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index aaa714d..43f881b 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -59,9 +59,15 @@ class SettingsModal extends React.Component { changeStyleProperty(property, value) { const changedStyle = { ...this.props.mapStyle, - [property]: value + }; + + if (value === undefined) { + delete changedStyle[property]; } - this.props.onStyleChanged(changedStyle) + else { + changedStyle[property] = value; + } + this.props.onStyleChanged(changedStyle); } render() { From 37e5ba0fff25e562e1e8cca1a3592c4d067b4ff2 Mon Sep 17 00:00:00 2001 From: orangemug Date: Wed, 16 Oct 2019 22:36:41 +0100 Subject: [PATCH 10/13] Remove 'center' and 'light position', as they weren't working properly. --- src/components/modals/SettingsModal.jsx | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 43f881b..5b918b7 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -139,16 +139,6 @@ class SettingsModal extends React.Component { /> - - - - - - - - Date: Sat, 19 Oct 2019 12:07:08 +0100 Subject: [PATCH 11/13] Added invalid style to inputs --- src/styles/_input.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/styles/_input.scss b/src/styles/_input.scss index 90e84ed..7caaa77 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -11,6 +11,11 @@ border: none; background-color: $color-gray; color: lighten($color-lowgray, 12); + + &:invalid { + border: solid 1px #B71C1C; + border-radius: 2px; + } } .maputnik-string { From 9743361e0d691708493153d4aae90afe6fb05ae0 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 19 Oct 2019 12:16:56 +0100 Subject: [PATCH 12/13] Added back in 'light position' and 'center' with fixes for This also improves the usage of *-translate which uses the --- src/components/fields/PropertyGroup.jsx | 2 +- src/components/inputs/ArrayInput.jsx | 73 ++++++++++++++++++++++--- src/components/inputs/NumberInput.jsx | 3 +- src/components/inputs/StringInput.jsx | 5 +- src/components/modals/SettingsModal.jsx | 21 +++++++ 5 files changed, 92 insertions(+), 12 deletions(-) diff --git a/src/components/fields/PropertyGroup.jsx b/src/components/fields/PropertyGroup.jsx index efb567b..3557724 100644 --- a/src/components/fields/PropertyGroup.jsx +++ b/src/components/fields/PropertyGroup.jsx @@ -59,7 +59,7 @@ export default class PropertyGroup extends React.Component { onChange={this.onPropertyChange} key={fieldName} fieldName={fieldName} - value={fieldValue === undefined ? fieldSpec.default : fieldValue} + value={fieldValue} fieldSpec={fieldSpec} /> }) diff --git a/src/components/inputs/ArrayInput.jsx b/src/components/inputs/ArrayInput.jsx index 5a8a4f5..bb406d8 100644 --- a/src/components/inputs/ArrayInput.jsx +++ b/src/components/inputs/ArrayInput.jsx @@ -17,27 +17,84 @@ class ArrayInput extends React.Component { default: [], } + constructor (props) { + super(props); + this.state = { + value: this.props.value.slice(0), + // This is so we can compare changes in getDerivedStateFromProps + initialPropsValue: this.props.value.slice(0), + }; + } + + static getDerivedStateFromProps(props, state) { + const value = []; + const initialPropsValue = state.initialPropsValue.slice(0); + + Array(props.length).fill(null).map((_, i) => { + if (props.value[i] === state.initialPropsValue[i]) { + value[i] = state.value[i]; + } + else { + value[i] = state.value[i]; + initialPropsValue[i] = state.value[i]; + } + }) + + return { + value, + initialPropsValue, + }; + } + + isComplete (value) { + return Array(this.props.length).fill(null).every((_, i) => { + const val = value[i] + return !(val === undefined || val === ""); + }); + } + changeValue(idx, newValue) { - console.log(idx, newValue) - const values = this.props.value.slice(0) - values[idx] = newValue - this.props.onChange(values) + const value = this.state.value.slice(0); + value[idx] = newValue; + + this.setState({ + value, + }, () => { + if (this.isComplete(value)) { + this.props.onChange(value); + } + else { + // Unset until complete + this.props.onChange(undefined); + } + }); } render() { + const {value} = this.state; + + const containsValues = ( + value.length > 0 && + !value.every(val => { + return (val === "" || val === undefined) + }) + ); + const inputs = Array(this.props.length).fill(null).map((_, i) => { if(this.props.type === 'number') { return } else { return } diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx index f2fa3ce..1c8326d 100644 --- a/src/components/inputs/NumberInput.jsx +++ b/src/components/inputs/NumberInput.jsx @@ -83,9 +83,10 @@ class NumberInput extends React.Component { spellCheck="false" className="maputnik-number" placeholder={this.props.default} - value={this.state.value || ""} + value={this.state.value === undefined ? "" : this.state.value} onChange={e => this.changeValue(e.target.value)} onBlur={this.resetValue} + required={this.props.required} /> } } diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx index 875a454..2819cc0 100644 --- a/src/components/inputs/StringInput.jsx +++ b/src/components/inputs/StringInput.jsx @@ -50,7 +50,7 @@ class StringInput extends React.Component { spellCheck: !(tag === "input"), className: classes.join(" "), style: this.props.style, - value: this.state.value, + value: this.state.value === undefined ? "" : this.state.value, placeholder: this.props.default, onChange: e => { this.setState({ @@ -63,7 +63,8 @@ class StringInput extends React.Component { this.setState({editing: false}); this.props.onChange(this.state.value); } - } + }, + required: this.props.required, }); } } diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 5b918b7..de4ced5 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -139,6 +139,16 @@ class SettingsModal extends React.Component { /> + + + + + + + + Date: Sat, 19 Oct 2019 12:21:38 +0100 Subject: [PATCH 13/13] Fixed lint errors. --- src/components/inputs/NumberInput.jsx | 1 + src/components/inputs/StringInput.jsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx index 1c8326d..b2d7dec 100644 --- a/src/components/inputs/NumberInput.jsx +++ b/src/components/inputs/NumberInput.jsx @@ -8,6 +8,7 @@ class NumberInput extends React.Component { min: PropTypes.number, max: PropTypes.number, onChange: PropTypes.func, + required: PropTypes.bool, } constructor(props) { diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx index 2819cc0..e160d69 100644 --- a/src/components/inputs/StringInput.jsx +++ b/src/components/inputs/StringInput.jsx @@ -9,6 +9,7 @@ class StringInput extends React.Component { default: PropTypes.string, onChange: PropTypes.func, multi: PropTypes.bool, + required: PropTypes.bool, } constructor(props) {