From a44e757e31e342d981be9414a2744096da0cc351 Mon Sep 17 00:00:00 2001 From: orangemug Date: Sat, 19 Oct 2019 14:43:27 +0100 Subject: [PATCH 01/10] Initial work for new help text implementation. --- src/components/fields/DocLabel.jsx | 31 ++++++++++++++++++++++++---- src/components/inputs/InputBlock.jsx | 22 ++++++++++++++++++++ src/styles/_components.scss | 31 ++++++++++++++++++++++++++++ 3 files changed, 80 insertions(+), 4 deletions(-) diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx index 65d7193..5f5edac 100644 --- a/src/components/fields/DocLabel.jsx +++ b/src/components/fields/DocLabel.jsx @@ -10,13 +10,36 @@ export default class DocLabel extends React.Component { doc: PropTypes.string.isRequired, } + constructor (props) { + super(props); + this.state = { + open: false, + } + } + + onToggleDoc = (open) => { + this.setState({ + open, + }, () => { + if (this.props.onToggleDoc) { + this.props.onToggleDoc(this.state.open); + } + }); + } + render() { return } diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx index 117ba3e..0645acf 100644 --- a/src/components/inputs/InputBlock.jsx +++ b/src/components/inputs/InputBlock.jsx @@ -18,11 +18,24 @@ class InputBlock extends React.Component { onChange: PropTypes.func, } + constructor (props) { + super(props); + this.state = { + showDoc: false, + } + } + onChange(e) { const value = e.target.value return this.props.onChange(value === "" ? undefined : value) } + onToggleDoc = (val) => { + this.setState({ + showDoc: val + }); + } + render() { return
} @@ -52,6 +66,14 @@ class InputBlock extends React.Component {
{this.props.children}
+ {this.props.doc && +
+ {this.props.doc} +
+ } } } diff --git a/src/styles/_components.scss b/src/styles/_components.scss index c8b0749..2fc3a23 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -28,6 +28,13 @@ height: 100%; } +.maputnik-input-block:hover { + .maputnik-doc-button { + opacity: 1; + pointer-events: all; + } +} + // DOC LABEL .maputnik-doc { &-target { @@ -57,6 +64,30 @@ z-index: 10; pointer-events: none; } + + &-button { + opacity: 0; + pointer-events: none; + background: #000; + color: white; + border: solid 1px #555; + border-radius: 100px; + + &--open { + background: white; + color: black; + opacity: 1; + pointer-events: all; + } + } +} + +.maputnik-doc-inline { + color: $color-lowgray; + background-color: $color-gray; + padding: $margin-2; + font-size: 12px; + margin-top: $margin-2; } .maputnik-doc-target:hover .maputnik-doc-popup { From 30facc885f11e9c7a118ca27ef6147bab737933d Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 23 Jan 2020 08:33:12 +0000 Subject: [PATCH 02/10] Tidy inline docs and added sdk support table. --- src/components/Button.jsx | 3 +- src/components/fields/DocLabel.jsx | 27 ++++++--- src/components/fields/_DataProperty.jsx | 21 ++++--- src/components/fields/_DeleteStopButton.jsx | 7 +-- src/components/fields/_FunctionButtons.jsx | 15 ++--- src/components/fields/_SpecProperty.jsx | 1 + src/components/fields/_ZoomProperty.jsx | 2 +- src/components/filter/FilterEditor.jsx | 27 ++++++++- src/components/inputs/InputBlock.jsx | 13 +++-- src/components/inputs/SelectInput.jsx | 2 + src/components/inputs/SpecDoc.js | 55 +++++++++++++++++++ src/components/layers/CommentBlock.jsx | 6 +- src/components/layers/LayerIdBlock.jsx | 2 +- src/components/layers/LayerSourceBlock.jsx | 2 +- .../layers/LayerSourceLayerBlock.jsx | 2 +- src/components/layers/LayerTypeBlock.jsx | 2 +- src/components/layers/MaxZoomBlock.jsx | 2 +- src/components/layers/MinZoomBlock.jsx | 2 +- src/components/modals/AddModal.jsx | 1 + src/components/modals/Modal.jsx | 4 +- src/components/modals/SettingsModal.jsx | 36 ++++++------ src/components/modals/SourcesModal.jsx | 4 +- src/components/sources/SourceTypeEditor.jsx | 14 ++--- src/styles/_components.scss | 18 +++--- src/styles/_input.scss | 17 ++++++ src/styles/_layout.scss | 2 +- src/styles/_modal.scss | 5 ++ 27 files changed, 204 insertions(+), 88 deletions(-) create mode 100644 src/components/inputs/SpecDoc.js diff --git a/src/components/Button.jsx b/src/components/Button.jsx index 0d350b0..4c2105f 100644 --- a/src/components/Button.jsx +++ b/src/components/Button.jsx @@ -20,7 +20,8 @@ class Button extends React.Component { aria-label={this.props["aria-label"]} className={classnames("maputnik-button", this.props.className)} data-wd-key={this.props["data-wd-key"]} - style={this.props.style}> + style={this.props.style} + > {this.props.children} } diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx index 5f5edac..3addf05 100644 --- a/src/components/fields/DocLabel.jsx +++ b/src/components/fields/DocLabel.jsx @@ -1,13 +1,15 @@ import React from 'react' import PropTypes from 'prop-types' +import {MdInfoOutline, MdHighlightOff} from 'react-icons/md' + export default class DocLabel extends React.Component { static propTypes = { label: PropTypes.oneOfType([ PropTypes.object, PropTypes.string ]).isRequired, - doc: PropTypes.string.isRequired, + fieldSpec: PropTypes.object.isRequired, } constructor (props) { @@ -28,19 +30,26 @@ export default class DocLabel extends React.Component { } render() { - return + } + else { + return
+ } } } diff --git a/src/components/fields/_DataProperty.jsx b/src/components/fields/_DataProperty.jsx index acfa2f6..b4b5431 100644 --- a/src/components/fields/_DataProperty.jsx +++ b/src/components/fields/_DataProperty.jsx @@ -200,17 +200,17 @@ export default class DataProperty extends React.Component { return
this.changeDataProperty("property", propVal)} />
@@ -218,12 +218,12 @@ export default class DataProperty extends React.Component {
this.changeDataProperty("type", propVal)} + title={"Select a type of data scale (default is 'categorical')."} options={this.getDataFunctionTypes(this.props.fieldSpec)} />
@@ -231,7 +231,6 @@ export default class DataProperty extends React.Component {
+ {dataFields} +
- {dataFields} -
} } diff --git a/src/components/fields/_DeleteStopButton.jsx b/src/components/fields/_DeleteStopButton.jsx index 3cab507..fe98421 100644 --- a/src/components/fields/_DeleteStopButton.jsx +++ b/src/components/fields/_DeleteStopButton.jsx @@ -1,7 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import DocLabel from './DocLabel' import Button from '../Button' import {MdDelete} from 'react-icons/md' @@ -15,11 +14,9 @@ export default class DeleteStopButton extends React.Component { return } } diff --git a/src/components/fields/_FunctionButtons.jsx b/src/components/fields/_FunctionButtons.jsx index 9048a60..220e77e 100644 --- a/src/components/fields/_FunctionButtons.jsx +++ b/src/components/fields/_FunctionButtons.jsx @@ -1,7 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import DocLabel from './DocLabel' import Button from '../Button' import {MdFunctions, MdInsertChart} from 'react-icons/md' @@ -19,24 +18,18 @@ export default class FunctionButtons extends React.Component { makeZoomButton = if (this.props.fieldSpec['property-type'] === 'data-driven') { makeDataButton = } return
{makeDataButton}{makeZoomButton}
diff --git a/src/components/fields/_SpecProperty.jsx b/src/components/fields/_SpecProperty.jsx index 0e0fd9f..febe80a 100644 --- a/src/components/fields/_SpecProperty.jsx +++ b/src/components/fields/_SpecProperty.jsx @@ -25,6 +25,7 @@ export default class SpecProperty extends React.Component { return diff --git a/src/components/fields/_ZoomProperty.jsx b/src/components/fields/_ZoomProperty.jsx index adb5bcb..86d6f77 100644 --- a/src/components/fields/_ZoomProperty.jsx +++ b/src/components/fields/_ZoomProperty.jsx @@ -125,7 +125,7 @@ export default class ZoomProperty extends React.Component { return diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx index 8073f57..e49948e 100644 --- a/src/components/filter/FilterEditor.jsx +++ b/src/components/filter/FilterEditor.jsx @@ -8,6 +8,7 @@ import SelectInput from '../inputs/SelectInput' import SingleFilterEditor from './SingleFilterEditor' import FilterEditorBlock from './FilterEditorBlock' import Button from '../Button' +import SpecDoc from '../inputs/SpecDoc' function hasCombiningFilter(filter) { return combiningFilterOps.indexOf(filter[0]) >= 0 @@ -29,6 +30,13 @@ export default class CombiningFilterEditor extends React.Component { onChange: PropTypes.func.isRequired, } + constructor () { + super(); + this.state = { + showDoc: false, + }; + } + // Convert filter to combining filter combiningFilter() { let filter = this.props.filter || ['all'] @@ -63,11 +71,21 @@ export default class CombiningFilterEditor extends React.Component { this.props.onChange(newFilterItem) } + onToggleDoc = (val) => { + this.setState({ + showDoc: val + }); + } + render() { const filter = this.combiningFilter() let combiningOp = filter[0] let filters = filter.slice(1) + const fieldSpec={ + doc: latest.layer.filter.doc + " Combine multiple filters together by using a compound filter." + }; + const editorBlocks = filters.map((f, idx) => { return
+
+ +
} } diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx index 0645acf..de3de64 100644 --- a/src/components/inputs/InputBlock.jsx +++ b/src/components/inputs/InputBlock.jsx @@ -2,6 +2,8 @@ import React from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import DocLabel from '../fields/DocLabel' +import SpecDoc from './SpecDoc' + /** Wrap a component with a label */ class InputBlock extends React.Component { @@ -11,7 +13,6 @@ class InputBlock extends React.Component { PropTypes.string, PropTypes.element, ]).isRequired, - doc: PropTypes.string, action: PropTypes.element, children: PropTypes.node.isRequired, style: PropTypes.object, @@ -44,16 +45,16 @@ class InputBlock extends React.Component { "maputnik-action-block": this.props.action })} > - {this.props.doc && + {this.props.fieldSpec &&
} - {!this.props.doc && + {!this.props.fieldSpec && @@ -66,12 +67,12 @@ class InputBlock extends React.Component {
{this.props.children}
- {this.props.doc && + {this.props.fieldSpec &&
- {this.props.doc} +
}
diff --git a/src/components/inputs/SelectInput.jsx b/src/components/inputs/SelectInput.jsx index 7d06a64..edbbb38 100644 --- a/src/components/inputs/SelectInput.jsx +++ b/src/components/inputs/SelectInput.jsx @@ -8,6 +8,7 @@ class SelectInput extends React.Component { options: PropTypes.array.isRequired, style: PropTypes.object, onChange: PropTypes.func.isRequired, + title: PropTypes.string, } @@ -21,6 +22,7 @@ class SelectInput extends React.Component { className="maputnik-select" data-wd-key={this.props["data-wd-key"]} style={this.props.style} + title={this.props.title} value={this.props.value} onChange={e => this.props.onChange(e.target.value)} > diff --git a/src/components/inputs/SpecDoc.js b/src/components/inputs/SpecDoc.js new file mode 100644 index 0000000..390d757 --- /dev/null +++ b/src/components/inputs/SpecDoc.js @@ -0,0 +1,55 @@ +import React from 'react' + +export default function SpecDoc (props={}) { + const {fieldSpec} = props; + + const {doc} = fieldSpec; + const sdkSupport = fieldSpec['sdk-support']; + + const headers = { + js: "JS", + android: "Android", + ios: "iOS", + macos: "macOS", + }; + + return ( + <> + {doc && +
{doc}
+ } + {sdkSupport && +
+ + + + + {Object.values(headers).map(header => { + return ; + })} + + + + {Object.entries(sdkSupport).map(([key, supportObj]) => { + return ( + + + {Object.keys(headers).map(k => { + const value = supportObj[k]; + if (supportObj.hasOwnProperty(k)) { + return ; + } + else { + return ; + } + })} + + ); + })} + +
{header}
{key}{supportObj[k]}no
+
+ } + + ); +} diff --git a/src/components/layers/CommentBlock.jsx b/src/components/layers/CommentBlock.jsx index fb7d1ac..5f53848 100644 --- a/src/components/layers/CommentBlock.jsx +++ b/src/components/layers/CommentBlock.jsx @@ -11,9 +11,13 @@ class MetadataBlock extends React.Component { } render() { + const fieldSpec = { + doc: "Comments for the current layer. This is non-standard and not in the spec." + }; + return
-
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index 4316317..3655ad7 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -86,21 +86,21 @@ class SettingsModal extends React.Component { title={'Style Settings'} >
- + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + this.setState({ sourceId: v})} /> - + - + this.props.onChange({ @@ -52,7 +52,7 @@ class TileURLSourceEditor extends React.Component { const prefix = ['1st', '2nd', '3rd', '4th', '5th', '6th', '7th'] const tiles = this.props.source.tiles || [] return tiles.map((tileUrl, tileIndex) => { - return + return {this.renderTileUrls()} - + this.props.onChange({ @@ -73,7 +73,7 @@ class TileURLSourceEditor extends React.Component { })} /> - + this.props.onChange({ @@ -95,7 +95,7 @@ class GeoJSONSourceUrlEditor extends React.Component { } render() { - return + return this.props.onChange({ @@ -114,7 +114,7 @@ class GeoJSONSourceJSONEditor extends React.Component { } render() { - return + return case 'tilejson_raster-dem': return case 'tilexyz_raster-dem': return - + this.props.onChange({ diff --git a/src/styles/_components.scss b/src/styles/_components.scss index 2fc3a23..01bb3a6 100644 --- a/src/styles/_components.scss +++ b/src/styles/_components.scss @@ -28,7 +28,8 @@ height: 100%; } -.maputnik-input-block:hover { +.maputnik-input-block:hover, +.maputnik-filter-editor-compound-select:hover { .maputnik-doc-button { opacity: 1; pointer-events: all; @@ -68,14 +69,16 @@ &-button { opacity: 0; pointer-events: none; - background: #000; + background: $color-black; color: white; - border: solid 1px #555; - border-radius: 100px; + border: none; + padding: 0; + + svg { + pointer-events: none; + } &--open { - background: white; - color: black; opacity: 1; pointer-events: all; } @@ -87,7 +90,8 @@ background-color: $color-gray; padding: $margin-2; font-size: 12px; - margin-top: $margin-2; + margin-top: $margin-3; + line-height: 1.5; } .maputnik-doc-target:hover .maputnik-doc-popup { diff --git a/src/styles/_input.scss b/src/styles/_input.scss index 6c196a2..a77a96b 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -193,3 +193,20 @@ position: relative; overflow: hidden; } + +.sdk-support { + position: relative; + max-width: 100%; + overflow-x: auto; +} + +.sdk-support__table { + width: 100%; + margin-top: $margin-3; + + td, th { + border: solid 1px $color-midgray; + padding: 4px 6px; + white-space: nowrap; + } +} diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index 25299b2..e0f00ad 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -32,7 +32,7 @@ top: $toolbar-height + $toolbar-offset; left: 200px; z-index: 1; - width: 350px; + width: 370px; background-color: $color-black; } diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index f15cf79..a051979 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -108,6 +108,11 @@ background-color: $color-midgray; } +.maputnik-add-modal { + width: 400px; + max-width: 100%; +} + .maputnik-add-layer { @extend .clearfix; } From 62f3cbe8fb8f683c34456a228420d55f1cc4cf45 Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 23 Jan 2020 08:42:20 +0000 Subject: [PATCH 03/10] Lint fixes. --- src/components/fields/DocLabel.jsx | 1 + src/components/inputs/InputBlock.jsx | 1 + src/components/inputs/SpecDoc.js | 103 ++++++++++++++------------- 3 files changed, 57 insertions(+), 48 deletions(-) diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx index 3addf05..83fd624 100644 --- a/src/components/fields/DocLabel.jsx +++ b/src/components/fields/DocLabel.jsx @@ -10,6 +10,7 @@ export default class DocLabel extends React.Component { PropTypes.string ]).isRequired, fieldSpec: PropTypes.object.isRequired, + onToggleDoc: PropTypes.func.isRequired, } constructor (props) { diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx index de3de64..f35d3b1 100644 --- a/src/components/inputs/InputBlock.jsx +++ b/src/components/inputs/InputBlock.jsx @@ -17,6 +17,7 @@ class InputBlock extends React.Component { children: PropTypes.node.isRequired, style: PropTypes.object, onChange: PropTypes.func, + fieldSpec: PropTypes.object, } constructor (props) { diff --git a/src/components/inputs/SpecDoc.js b/src/components/inputs/SpecDoc.js index 390d757..6c8ddc3 100644 --- a/src/components/inputs/SpecDoc.js +++ b/src/components/inputs/SpecDoc.js @@ -1,55 +1,62 @@ import React from 'react' +import PropTypes from 'prop-types' -export default function SpecDoc (props={}) { - const {fieldSpec} = props; +export default class SpecDoc extends React.Component { + static propTypes = { + fieldSpec: PropTypes.object.isRequired, + } - const {doc} = fieldSpec; - const sdkSupport = fieldSpec['sdk-support']; + render () { + const {fieldSpec} = this.props; - const headers = { - js: "JS", - android: "Android", - ios: "iOS", - macos: "macOS", - }; + const {doc} = fieldSpec; + const sdkSupport = fieldSpec['sdk-support']; - return ( - <> - {doc && -
{doc}
- } - {sdkSupport && -
- - - - - {Object.values(headers).map(header => { - return ; + const headers = { + js: "JS", + android: "Android", + ios: "iOS", + macos: "macOS", + }; + + return ( + <> + {doc && +
{doc}
+ } + {sdkSupport && +
+
{header}
+ + + + {Object.values(headers).map(header => { + return ; + })} + + + + {Object.entries(sdkSupport).map(([key, supportObj]) => { + return ( + + + {Object.keys(headers).map(k => { + const value = supportObj[k]; + if (supportObj.hasOwnProperty(k)) { + return ; + } + else { + return ; + } + })} + + ); })} - - - - {Object.entries(sdkSupport).map(([key, supportObj]) => { - return ( - - - {Object.keys(headers).map(k => { - const value = supportObj[k]; - if (supportObj.hasOwnProperty(k)) { - return ; - } - else { - return ; - } - })} - - ); - })} - -
{header}
{key}{supportObj[k]}no
{key}{supportObj[k]}no
-
- } - - ); + + +
+ } + + ); + } } From b31537e063804c5eda2b0f721ebbef3a1bda229f Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 24 Jan 2020 09:04:32 +0000 Subject: [PATCH 04/10] Added property values to docs --- src/components/inputs/SpecDoc.js | 22 ++++++++++++++++++---- src/styles/_input.scss | 14 ++++++++++++-- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/src/components/inputs/SpecDoc.js b/src/components/inputs/SpecDoc.js index 6c8ddc3..1cc7fe0 100644 --- a/src/components/inputs/SpecDoc.js +++ b/src/components/inputs/SpecDoc.js @@ -9,7 +9,7 @@ export default class SpecDoc extends React.Component { render () { const {fieldSpec} = this.props; - const {doc} = fieldSpec; + const {doc, values} = fieldSpec; const sdkSupport = fieldSpec['sdk-support']; const headers = { @@ -22,11 +22,25 @@ export default class SpecDoc extends React.Component { return ( <> {doc && -
{doc}
+
+
{doc}
+ {values && +
    + {Object.entries(values).map(([key, value]) => { + return ( +
  • + {JSON.stringify(key)} +
    {value.doc}
    +
    • + ); + })} +
+ } +
} {sdkSupport && -
- +
+
diff --git a/src/styles/_input.scss b/src/styles/_input.scss index a77a96b..03aa4ea 100644 --- a/src/styles/_input.scss +++ b/src/styles/_input.scss @@ -194,13 +194,13 @@ overflow: hidden; } -.sdk-support { +.SpecDoc__sdk-support { position: relative; max-width: 100%; overflow-x: auto; } -.sdk-support__table { +.SpecDoc__sdk-support__table { width: 100%; margin-top: $margin-3; @@ -210,3 +210,13 @@ white-space: nowrap; } } + +.SpecDoc__values li { + margin-top: $margin-3; +} + +.SpecDoc__values code { + background: $color-midgray; + padding: 0.1em 0.3em; + border-radius: 2px; +} From 9b4d924dff1f9d0791a5967c2a9f22d9cb6550b2 Mon Sep 17 00:00:00 2001 From: orangemug Date: Fri, 24 Jan 2020 17:46:43 +0000 Subject: [PATCH 05/10] Fix to ignore modified styleSpec. --- src/components/inputs/SpecDoc.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/inputs/SpecDoc.js b/src/components/inputs/SpecDoc.js index 1cc7fe0..fe12dad 100644 --- a/src/components/inputs/SpecDoc.js +++ b/src/components/inputs/SpecDoc.js @@ -19,12 +19,19 @@ export default class SpecDoc extends React.Component { macos: "macOS", }; + const renderValues = ( + !!values && + // HACK: Currently we merge additional values into the stylespec, so this is required + // See + !Array.isArray(values) + ); + return ( <> {doc &&
{doc}
- {values && + {renderValues &&
    {Object.entries(values).map(([key, value]) => { return ( From 223721a65d25797cd40dcf887a316b91bfa76096 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 27 Jan 2020 08:49:44 +0000 Subject: [PATCH 06/10] Code review fixes - Added docs to export modal - Fixed 'source type' doc in data sources modal --- src/components/modals/ExportModal.jsx | 17 ++++++++++++++--- src/components/modals/SettingsModal.jsx | 16 +++++++++++++--- src/components/modals/SourcesModal.jsx | 13 ++++++++++++- src/libs/field-spec-additional.js | 18 ++++++++++++++++++ src/styles/_modal.scss | 5 +++++ 5 files changed, 62 insertions(+), 7 deletions(-) create mode 100644 src/libs/field-spec-additional.js diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index 27ee069..37ad09f 100644 --- a/src/components/modals/ExportModal.jsx +++ b/src/components/modals/ExportModal.jsx @@ -11,6 +11,7 @@ import Button from '../Button' import Modal from './Modal' import {MdFileDownload} from 'react-icons/md' import style from '../../libs/style' +import fieldSpecAdditional from '../../libs/field-spec-additional' @@ -70,6 +71,7 @@ class ExportModal extends React.Component { isOpen={this.props.isOpen} onOpenToggle={this.props.onOpenToggle} title={'Export Style'} + className="maputnik-export-modal" >
    @@ -79,19 +81,28 @@ class ExportModal extends React.Component {

    - + - + - + - + - + - + this.setState({ sourceId: v})} /> - + Date: Wed, 29 Jan 2020 08:44:27 +0000 Subject: [PATCH 07/10] Fix to fallback to index for unique feature key in --- src/components/map/FeaturePropertyPopup.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/map/FeaturePropertyPopup.jsx b/src/components/map/FeaturePropertyPopup.jsx index 71b9983..8b7816a 100644 --- a/src/components/map/FeaturePropertyPopup.jsx +++ b/src/components/map/FeaturePropertyPopup.jsx @@ -21,8 +21,9 @@ function renderProperties(feature) { }) } -function renderFeature(feature) { - return

    +function renderFeature(feature, idx) { + const uniqueKey = feature.hasOwnProperty('id') ? feature.id : idx; + return
    {feature.layer['source-layer']}{feature.inspectModeCounter && × {feature.inspectModeCounter}}
    From c714e23d79bf0fa66e60aaaed60496998cac8d35 Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 30 Jan 2020 08:46:26 +0000 Subject: [PATCH 08/10] 'id' is not guaranteed to be unique, see --- src/components/map/FeaturePropertyPopup.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/map/FeaturePropertyPopup.jsx b/src/components/map/FeaturePropertyPopup.jsx index 8b7816a..56f33ae 100644 --- a/src/components/map/FeaturePropertyPopup.jsx +++ b/src/components/map/FeaturePropertyPopup.jsx @@ -22,8 +22,7 @@ function renderProperties(feature) { } function renderFeature(feature, idx) { - const uniqueKey = feature.hasOwnProperty('id') ? feature.id : idx; - return
    + return
    {feature.layer['source-layer']}{feature.inspectModeCounter && × {feature.inspectModeCounter}}
    From a8cbe19f0920798638936e467cffe91e6fa40f74 Mon Sep 17 00:00:00 2001 From: orangemug Date: Thu, 30 Jan 2020 08:54:08 +0000 Subject: [PATCH 09/10] Added style_renderer to field-spec-additional --- src/components/modals/SettingsModal.jsx | 5 ++++- src/libs/field-spec-additional.js | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index dbc95c3..b8eba02 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/src/components/modals/SettingsModal.jsx @@ -244,7 +244,10 @@ class SettingsModal extends React.Component { /> - + Date: Thu, 30 Jan 2020 09:18:23 +0000 Subject: [PATCH 10/10] 'name' is not a required property of --- src/components/fields/ColorField.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx index 9cb44f8..cc77d69 100644 --- a/src/components/fields/ColorField.jsx +++ b/src/components/fields/ColorField.jsx @@ -13,7 +13,7 @@ function formatColor(color) { class ColorField extends React.Component { static propTypes = { onChange: PropTypes.func.isRequired, - name: PropTypes.string.isRequired, + name: PropTypes.string, value: PropTypes.string, doc: PropTypes.string, style: PropTypes.object,