Merge remote-tracking branch 'upstream/master' into fix/tooltip-pointer-events

src/components/App.jsx

@@ -10,7 +10,7 @@ import AppLayout from './AppLayout'
 import MessagePanel from './MessagePanel'
 
 import { downloadGlyphsMetadata, downloadSpriteMetadata } from '../libs/metadata'
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import style from '../libs/style.js'
 import { initialStyleUrl, loadStyleUrl } from '../libs/urlopen'
 import { undoMessages, redoMessages } from '../libs/diffmessage'

src/components/Button.jsx

@@ -7,6 +7,7 @@ class Button extends React.Component {
     onClick: PropTypes.func,
     style: PropTypes.object,
     className: PropTypes.string,
+    children: PropTypes.node
   }
 
   render() {

src/components/MessagePanel.jsx

@@ -9,11 +9,11 @@ class MessagePanel extends React.Component {
 
   render() {
     const errors = this.props.errors.map((m, i) => {
-      return <p className="maputnik-message-panel-error">{m}</p>
+      return <p key={"error-"+i} className="maputnik-message-panel-error">{m}</p>
     })
 
     const infos = this.props.infos.map((m, i) => {
-      return <p key={i}>{m}</p>
+      return <p key={"info-"+i}>{m}</p>
     })
 
     return <div className="maputnik-message-panel">

src/components/ScrollContainer.jsx

@@ -1,9 +1,16 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const ScrollContainer = (props) => {
-  return <div className="maputnik-scroll-container">
-    {props.children}
-  </div>
+class ScrollContainer extends React.Component {
+  static propTypes = {
+    children: PropTypes.node
+  }
+
+  render() {
+    return <div className="maputnik-scroll-container">
+      {this.props.children}
+    </div>
+  }
 }
 
 export default ScrollContainer

src/components/Toolbar.jsx

@@ -25,28 +25,49 @@ import OpenModal from './modals/OpenModal'
 
 import style from '../libs/style'
 
-function IconText(props) {
-  return <span className="maputnik-icon-text">{props.children}</span>
+class IconText extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+  }
+
+  render() {
+    return <span className="maputnik-icon-text">{this.props.children}</span>
+  }
 }
 
-function ToolbarLink(props) {
-  return <a
-    className={classnames('maputnik-toolbar-link', props.className)}
-    href={props.href}
-    rel="noopener noreferrer"
-    target="_blank"
-  >
-    {props.children}
-  </a>
+class ToolbarLink extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+    href: PropTypes.string,
+  }
+
+  render() {
+    return <a
+      className={classnames('maputnik-toolbar-link', this.props.className)}
+      href={this.props.href}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      {this.props.children}
+    </a>
+  }
 }
 
-function ToolbarAction(props) {
-  return <a
-    className='maputnik-toolbar-action'
-    onClick={props.onClick}
-  >
-    {props.children}
-  </a>
+class ToolbarAction extends React.Component {
+  static propTypes = {
+    children: PropTypes.node,
+    onClick: PropTypes.func
+  }
+
+  render() {
+    return <a
+      className='maputnik-toolbar-action'
+      onClick={this.props.onClick}
+    >
+      {this.props.children}
+    </a>
+  }
 }
 
 export default class Toolbar extends React.Component {
@@ -58,7 +79,8 @@ export default class Toolbar extends React.Component {
     onStyleOpen: PropTypes.func.isRequired,
     // A dict of source id's and the available source layers
     sources: PropTypes.object.isRequired,
-    onInspectModeToggle: PropTypes.func.isRequired
+    onInspectModeToggle: PropTypes.func.isRequired,
+    children: PropTypes.node
   }
 
   constructor(props) {

src/components/fields/ColorField.jsx

@@ -30,7 +30,7 @@ class ColorField extends React.Component {
   //but I am too stupid to get it to work together with fixed position
   //and scrollbars so I have to fallback to JavaScript
   calcPickerOffset() {
-    const elem = this.refs.colorInput
+    const elem = this.colorInput
     if(elem) {
       const pos = elem.getBoundingClientRect()
       return {
@@ -99,7 +99,7 @@ class ColorField extends React.Component {
       <div className="maputnik-color-swatch" style={swatchStyle}></div>
       <input
         className="maputnik-color"
-        ref="colorInput"
+        ref={(input) => this.colorInput = input}
         onClick={this.togglePicker.bind(this)}
         style={this.props.style}
         name={this.props.name}

src/components/fields/FunctionSpecField.jsx

@@ -315,49 +315,63 @@ export default class FunctionSpecProperty  extends React.Component {
   }
 }
 
-function MakeFunctionButtons(props) {
-  let makeZoomButton, makeDataButton
-  if (props.fieldSpec['zoom-function']) {
-    makeZoomButton = <Button
-      className="maputnik-make-zoom-function"
-      onClick={props.onZoomClick}
-    >
-      <DocLabel
-        label={<FunctionIcon />}
-        cursorTargetStyle={{ cursor: 'pointer' }}
-        doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
-      />
-    </Button>
+class MakeFunctionButtons extends React.Component {
+  static propTypes = {
+    fieldSpec: PropTypes.object,
+    onZoomClick: PropTypes.func,
+    onDataClick: PropTypes.func,
+  }
 
-    if (props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(props.fieldSpec['function']) !== -1) {
-      makeDataButton = <Button
-        className="maputnik-make-data-function"
-        onClick={props.onDataClick}
+  render() {
+    let makeZoomButton, makeDataButton
+    if (this.props.fieldSpec['zoom-function']) {
+      makeZoomButton = <Button
+        className="maputnik-make-zoom-function"
+        onClick={this.props.onZoomClick}
       >
         <DocLabel
-          label={<MdInsertChart />}
+          label={<FunctionIcon />}
           cursorTargetStyle={{ cursor: 'pointer' }}
-          doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
+          doc={"Turn property into a zoom function to enable a map feature to change with map's zoom level."}
         />
       </Button>
+
+      if (this.props.fieldSpec['property-function'] && ['piecewise-constant', 'interpolated'].indexOf(this.props.fieldSpec['function']) !== -1) {
+        makeDataButton = <Button
+          className="maputnik-make-data-function"
+          onClick={this.props.onDataClick}
+        >
+          <DocLabel
+            label={<MdInsertChart />}
+            cursorTargetStyle={{ cursor: 'pointer' }}
+            doc={"Turn property into a data function to enable a map feature to change according to data properties and the map's zoom level."}
+          />
+        </Button>
+      }
+      return <div>{makeDataButton}{makeZoomButton}</div>
+    }
+    else {
+      return null
     }
-    return <div>{makeDataButton}{makeZoomButton}</div>
-  }
-  else {
-    return null
   }
 }
 
-function DeleteStopButton(props) {
-  return <Button
-    className="maputnik-delete-stop"
-    onClick={props.onClick}
-  >
-    <DocLabel
-      label={<DeleteIcon />}
-      doc={"Remove zoom level stop."}
-    />
-  </Button>
+class DeleteStopButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render() {
+    return <Button
+      className="maputnik-delete-stop"
+      onClick={this.props.onClick}
+    >
+      <DocLabel
+        label={<DeleteIcon />}
+        doc={"Remove zoom level stop."}
+      />
+    </Button>
+  }
 }
 
 function labelFromFieldName(fieldName) {

src/components/filter/FilterEditor.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { combiningFilterOps } from '../../libs/filterops.js'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import DocLabel from '../fields/DocLabel'
 import SelectInput from '../inputs/SelectInput'
 import SingleFilterEditor from './SingleFilterEditor'

src/components/inputs/AutocompleteInput.jsx

@@ -17,7 +17,7 @@ class AutocompleteInput extends React.Component {
   }
 
   render() {
-    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"} children={items} />
+    const AutocompleteMenu = (items, value, style) => <div className={"maputnik-autocomplete-menu"}>{items}</div>
 
     return <Autocomplete
       wrapperProps={{

src/components/inputs/DynamicArrayInput.jsx

@@ -13,6 +13,7 @@ class DynamicArrayInput extends React.Component {
     type: PropTypes.string,
     default: PropTypes.array,
     onChange: PropTypes.func,
+    style: PropTypes.object,
   }
 
   changeValue(idx, newValue) {
@@ -84,10 +85,15 @@ class DynamicArrayInput extends React.Component {
   }
 }
 
-function DeleteValueButton(props) {
+class DeleteValueButton extends React.Component {
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render() {
     return <Button
       className="maputnik-delete-stop"
-      onClick={props.onClick}
+      onClick={this.props.onClick}
     >
       <DocLabel
         label={<DeleteIcon />}
@@ -95,5 +101,6 @@ function DeleteValueButton(props) {
       />
     </Button>
   }
+}
 
 export default DynamicArrayInput

src/components/inputs/FontInput.jsx

@@ -5,6 +5,7 @@ import AutocompleteInput from './AutocompleteInput'
 class FontInput extends React.Component {
   static propTypes = {
     value: PropTypes.array.isRequired,
+    default: PropTypes.array,
     fonts: PropTypes.array,
     style: PropTypes.object,
     onChange: PropTypes.func.isRequired,

src/components/inputs/InputBlock.jsx

@@ -14,6 +14,7 @@ class InputBlock extends React.Component {
     action: PropTypes.element,
     children: PropTypes.element.isRequired,
     style: PropTypes.object,
+    onChange: PropTypes.func,
   }
 
   onChange(e) {

src/components/inputs/StringInput.jsx

@@ -7,6 +7,7 @@ class StringInput extends React.Component {
     style: PropTypes.object,
     default: PropTypes.string,
     onChange: PropTypes.func,
+    multi: PropTypes.bool,
   }
 
   constructor(props) {

src/components/layers/LayerIdBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 

src/components/layers/LayerSourceBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'

src/components/layers/LayerSourceLayerBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'

src/components/layers/LayerTypeBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import SelectInput from '../inputs/SelectInput'
 

src/components/layers/MaxZoomBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import NumberInput from '../inputs/NumberInput'
 

src/components/layers/MinZoomBlock.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import NumberInput from '../inputs/NumberInput'
 

src/components/map/FeatureLayerPopup.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import LayerIcon from '../icons/LayerIcon'
@@ -14,6 +15,10 @@ function groupFeaturesBySourceLayer(features) {
 }
 
 class FeatureLayerPopup extends React.Component {
+  static propTypes = {
+    features: PropTypes.array
+  }
+
   render() {
     const sources = groupFeaturesBySourceLayer(this.props.features)
 

src/components/map/FeaturePropertyPopup.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 
@@ -31,6 +32,9 @@ function renderFeature(feature) {
 }
 
 class FeaturePropertyPopup extends React.Component {
+  static propTypes = {
+    features: PropTypes.array
+  }
 
   render() {
     const features = this.props.features

src/components/map/OpenLayers3Map.jsx

@@ -69,6 +69,7 @@ class OpenLayers3Map extends React.Component {
     onDataChange: PropTypes.func,
     mapStyle: PropTypes.object.isRequired,
     accessToken: PropTypes.string,
+    style: PropTypes.object,
   }
 
   static defaultProps = {

src/components/modals/ExportModal.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { saveAs } from 'file-saver'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'

src/components/modals/Modal.jsx

@@ -8,6 +8,7 @@ class Modal extends React.Component {
     isOpen: PropTypes.bool.isRequired,
     title: PropTypes.string.isRequired,
     onOpenToggle: PropTypes.func.isRequired,
+    children: PropTypes.node,
   }
 
   render() {

src/components/modals/OpenModal.jsx

@@ -77,7 +77,7 @@ class OpenModal extends React.Component {
   }
 
   onOpenUrl() {
-    const url = this.refs.styleUrl.value;
+    const url = this.styleUrlElement.value;
     this.onStyleSelect(url);
   }
 
@@ -151,7 +151,7 @@ class OpenModal extends React.Component {
         <p>
           Load from a URL. Note that the URL must have <a href="https://enable-cors.org" target="_blank" rel="noopener noreferrer">CORS enabled</a>.
         </p>
-        <input type="text" ref="styleUrl" className="maputnik-input" placeholder="Enter URL..."/>
+        <input type="text" ref={(input) => this.styleUrlElement = input} className="maputnik-input" placeholder="Enter URL..."/>
         <div>
           <Button className="maputnik-big-button" onClick={this.onOpenUrl.bind(this)}>Open URL</Button>
         </div>

src/components/modals/SettingsModal.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import SelectInput from '../inputs/SelectInput'

src/components/modals/SourcesModal.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import Modal from './Modal'
 import Button from '../Button'
 import InputBlock from '../inputs/InputBlock'
@@ -139,7 +139,7 @@ class AddSource extends React.Component {
           onChange={v => this.setState({ sourceId: v})}
         />
       </InputBlock>
-      <InputBlock label={"Source Type"} doc={styleSpec.latest.source_tile.type.doc}>
+      <InputBlock label={"Source Type"} doc={styleSpec.latest.source_vector.type.doc}>
         <SelectInput
           options={[
             ['geojson', 'GeoJSON'],

src/components/sources/SourceTypeEditor.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 import NumberInput from '../inputs/NumberInput'
@@ -12,7 +12,7 @@ class TileJSONSourceEditor extends React.Component {
   }
 
   render() {
-    return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_tile.url.doc}>
+    return <InputBlock label={"TileJSON URL"} doc={styleSpec.latest.source_vector.url.doc}>
       <StringInput
         value={this.props.source.url}
         onChange={url => this.props.onChange({
@@ -43,7 +43,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 <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_tile.tiles.doc}>
+      return <InputBlock key={tileIndex} label={prefix[tileIndex] + " Tile URL"} doc={styleSpec.latest.source_vector.tiles.doc}>
         <StringInput
           value={tileUrl}
           onChange={this.changeTileUrl.bind(this, tileIndex)}
@@ -55,7 +55,7 @@ class TileURLSourceEditor extends React.Component {
   render() {
     return <div>
       {this.renderTileUrls()}
-      <InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_tile.minzoom.doc}>
+      <InputBlock label={"Min Zoom"} doc={styleSpec.latest.source_vector.minzoom.doc}>
         <NumberInput
           value={this.props.source.minzoom || 0}
           onChange={minzoom => this.props.onChange({
@@ -64,7 +64,7 @@ class TileURLSourceEditor extends React.Component {
           })}
         />
       </InputBlock>
-      <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_tile.maxzoom.doc}>
+      <InputBlock label={"Max Zoom"} doc={styleSpec.latest.source_vector.maxzoom.doc}>
         <NumberInput
           value={this.props.source.maxzoom || 22}
           onChange={maxzoom => this.props.onChange({

src/libs/diffmessage.js

@@ -1,4 +1,4 @@
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 
 export function diffMessages(beforeStyle, afterStyle) {
   const changes = styleSpec.diff(beforeStyle, afterStyle)

src/libs/filterops.js

@@ -1,4 +1,4 @@
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 export const combiningFilterOps = ['all', 'any', 'none']
 export const setFilterOps = ['in', '!in']
 export const otherFilterOps = Object

src/libs/layer.js

@@ -1,4 +1,4 @@
-import styleSpec from '@mapbox/mapbox-gl-style-spec'
+import styleSpec from '@mapbox/mapbox-gl-style-spec/style-spec'
 
 export function changeType(layer, newType) {
   const changedPaintProps = { ...layer.paint }

src/libs/mapbox-rtl.js

@@ -1,7 +1,7 @@
 import MapboxGl from 'mapbox-gl/dist/mapbox-gl.js'
 
 // Load mapbox-gl-rtl-text using object urls without needing http://localhost for AJAX.
-const data = require("base64?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
+const data = require("base64-loader?mimetype=text/javascript!@mapbox/mapbox-gl-rtl-text/mapbox-gl-rtl-text.js");
 
 const blob = new window.Blob([window.atob(data)]);
 const objectUrl = window.URL.createObjectURL(blob, {