Merge pull request #191 from orangemug/fix/console-errors

Fixed startup errors/warnings

config/webpack.config.js

@@ -23,7 +23,11 @@ module.exports = {
     extensions: ['', '.js', '.jsx']
   },
   module: {
-    loaders
+    noParse: [
+      /mapbox-gl\/dist\/mapbox-gl.js/,
+      /openlayers\/dist\/ol.js/
+    ],
+    loaders: loaders
   },
   node: {
     fs: "empty",

package.json

@@ -38,10 +38,11 @@
     "mousetrap": "^1.6.0",
     "ol-mapbox-style": "1.0.1",
     "openlayers": "^3.19.1",
+    "prop-types": "^15.6.0",
     "react": "^15.4.0",
     "react-addons-pure-render-mixin": "^15.4.0",
     "react-autocomplete": "^1.4.0",
-    "react-codemirror": "^0.3.0",
+    "react-codemirror": "^1.0.0",
     "react-collapse": "^4.0.3",
     "react-color": "^2.10.0",
     "react-copy-to-clipboard": "^5.0.1",
@@ -51,7 +52,7 @@
     "react-icon-base": "^2.0.4",
     "react-icons": "^2.2.1",
     "react-motion": "^0.4.7",
-    "react-sortable-hoc": "^0.4.5",
+    "react-sortable-hoc": "^0.6.8",
     "reconnecting-websocket": "^3.0.3",
     "request": "^2.79.0",
     "url": "^0.11.0"

src/components/AppLayout.jsx

@@ -1,17 +1,18 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import ScrollContainer from './ScrollContainer'
 
 class AppLayout extends React.Component {
   static propTypes = {
-    toolbar: React.PropTypes.element.isRequired,
+    toolbar: PropTypes.element.isRequired,
-    layerList: React.PropTypes.element.isRequired,
+    layerList: PropTypes.element.isRequired,
-    layerEditor: React.PropTypes.element,
+    layerEditor: PropTypes.element,
-    map: React.PropTypes.element.isRequired,
+    map: PropTypes.element.isRequired,
-    bottom: React.PropTypes.element,
+    bottom: PropTypes.element,
   }
 
   static childContextTypes = {
-    reactIconBase: React.PropTypes.object
+    reactIconBase: PropTypes.object
   }
 
   getChildContext() {

src/components/Button.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
 class Button extends React.Component {
   static propTypes = {
-    onClick: React.PropTypes.func,
+    onClick: PropTypes.func,
-    style: React.PropTypes.object,
+    style: PropTypes.object,
-    className: React.PropTypes.string,
+    className: PropTypes.string,
   }
 
   render() {

src/components/MessagePanel.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 class MessagePanel extends React.Component {
   static propTypes = {
-    errors: React.PropTypes.array,
+    errors: PropTypes.array,
-    infos: React.PropTypes.array,
+    infos: PropTypes.array,
   }
 
   render() {

src/components/Toolbar.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import FileReaderInput from 'react-file-reader-input'
 import classnames from 'classnames'
 
@@ -50,14 +51,14 @@ function ToolbarAction(props) {
 
 export default class Toolbar extends React.Component {
   static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
+    mapStyle: PropTypes.object.isRequired,
-    inspectModeEnabled: React.PropTypes.bool.isRequired,
+    inspectModeEnabled: PropTypes.bool.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
     // A new style has been uploaded
-    onStyleOpen: React.PropTypes.func.isRequired,
+    onStyleOpen: PropTypes.func.isRequired,
     // A dict of source id's and the available source layers
-    sources: React.PropTypes.object.isRequired,
+    sources: PropTypes.object.isRequired,
-    onInspectModeToggle: React.PropTypes.func.isRequired
+    onInspectModeToggle: PropTypes.func.isRequired
   }
 
   constructor(props) {

src/components/fields/ColorField.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import Color from 'color'
 import ChromePicker from 'react-color/lib/components/chrome/Chrome'
+import PropTypes from 'prop-types'
 
 function formatColor(color) {
   const rgb = color.rgb
@@ -10,12 +11,12 @@ function formatColor(color) {
 /*** Number fields with support for min, max and units and documentation*/
 class ColorField extends React.Component {
   static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
-    name: React.PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
-    value: React.PropTypes.string,
+    value: PropTypes.string,
-    doc: React.PropTypes.string,
+    doc: PropTypes.string,
-    style: React.PropTypes.object,
+    style: PropTypes.object,
-    default: React.PropTypes.string,
+    default: PropTypes.string,
   }
 
   constructor(props) {
@@ -37,7 +38,6 @@ class ColorField extends React.Component {
         left: pos.left + 196,
       }
     } else {
-      console.warn('Color field has no element to adjust position')
       return {
         top: 160,
         left: 555,

src/components/fields/DocLabel.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 export default class DocLabel extends React.Component {
   static propTypes = {
-    label: React.PropTypes.oneOfType([
+    label: PropTypes.oneOfType([
-      React.PropTypes.object,
+      PropTypes.object,
-      React.PropTypes.string
+      PropTypes.string
     ]).isRequired,
-    doc: React.PropTypes.string.isRequired,
+    doc: PropTypes.string.isRequired,
   }
 
   render() {

src/components/fields/FunctionSpecField.jsx

@@ -14,6 +14,7 @@ import DeleteIcon from 'react-icons/lib/md/delete'
 import FunctionIcon from 'react-icons/lib/md/functions'
 import MdInsertChart from 'react-icons/lib/md/insert-chart'
 
+import PropTypes from 'prop-types'
 import capitalize from 'lodash.capitalize'
 
 function isZoomField(value) {
@@ -29,16 +30,16 @@ function isDataField(value) {
  */
 export default class FunctionSpecProperty  extends React.Component {
   static propTypes = {
-      onChange: React.PropTypes.func.isRequired,
+      onChange: PropTypes.func.isRequired,
-      fieldName: React.PropTypes.string.isRequired,
+      fieldName: PropTypes.string.isRequired,
-      fieldSpec: React.PropTypes.object.isRequired,
+      fieldSpec: PropTypes.object.isRequired,
 
-      value: React.PropTypes.oneOfType([
+      value: PropTypes.oneOfType([
-      React.PropTypes.object,
+      PropTypes.object,
-      React.PropTypes.string,
+      PropTypes.string,
-      React.PropTypes.number,
+      PropTypes.number,
-      React.PropTypes.bool,
+      PropTypes.bool,
-      React.PropTypes.array
+      PropTypes.array
     ]),
   }
 

src/components/fields/PropertyGroup.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import FunctionSpecField from './FunctionSpecField'
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
@@ -35,10 +36,10 @@ function getGroupName(spec, layerType, fieldName) {
 
 export default class PropertyGroup extends React.Component {
   static propTypes = {
-    layer: React.PropTypes.object.isRequired,
+    layer: PropTypes.object.isRequired,
-    groupFields: React.PropTypes.array.isRequired,
+    groupFields: PropTypes.array.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
-    spec: React.PropTypes.object.isRequired,
+    spec: PropTypes.object.isRequired,
   }
 
   onPropertyChange(property, newValue) {

src/components/fields/SpecField.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import color from 'color'
 
 import ColorField from './ColorField'
@@ -36,17 +37,17 @@ function optionsLabelLength(options) {
  * to display @{value}. */
 export default class SpecField extends React.Component {
   static propTypes = {
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
-    fieldName: React.PropTypes.string.isRequired,
+    fieldName: PropTypes.string.isRequired,
-    fieldSpec: React.PropTypes.object.isRequired,
+    fieldSpec: PropTypes.object.isRequired,
-    value: React.PropTypes.oneOfType([
+    value: PropTypes.oneOfType([
-      React.PropTypes.string,
+      PropTypes.string,
-      React.PropTypes.number,
+      PropTypes.number,
-      React.PropTypes.array,
+      PropTypes.array,
-      React.PropTypes.bool
+      PropTypes.bool
     ]),
     /** Override the style of the field */
-    style: React.PropTypes.object,
+    style: PropTypes.object,
   }
 
   render() {

src/components/filter/FilterEditor.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { combiningFilterOps } from '../../libs/filterops.js'
 
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
@@ -26,9 +27,9 @@ function hasNestedCombiningFilter(filter) {
 export default class CombiningFilterEditor extends React.Component {
   static propTypes = {
     /** Properties of the vector layer and the available fields */
-    properties: React.PropTypes.object,
+    properties: PropTypes.object,
-    filter: React.PropTypes.array,
+    filter: PropTypes.array,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   // Convert filter to combining filter

src/components/filter/FilterEditorBlock.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Button from '../Button'
 import DeleteIcon from 'react-icons/lib/md/delete'
 
 class FilterEditorBlock extends React.Component {
   static propTypes = {
-    onDelete: React.PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
-    children: React.PropTypes.element.isRequired,
+    children: PropTypes.element.isRequired,
   }
 
   render() {

src/components/filter/SingleFilterEditor.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { otherFilterOps } from '../../libs/filterops.js'
 import StringInput from '../inputs/StringInput'
@@ -36,9 +37,9 @@ function parseFilter(v) {
 
 class SingleFilterEditor extends React.Component {
   static propTypes = {
-    filter: React.PropTypes.array.isRequired,
+    filter: PropTypes.array.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
-    properties: React.PropTypes.object,
+    properties: PropTypes.object,
   }
 
   static defaultProps = {

src/components/icons/LayerIcon.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import LineIcon from './LineIcon.jsx'
 import FillIcon from './FillIcon.jsx'
@@ -8,8 +9,8 @@ import CircleIcon from './CircleIcon.jsx'
 
 class LayerIcon extends React.Component {
   static propTypes = {
-    type: React.PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
-    style: React.PropTypes.object,
+    style: PropTypes.object,
   }
 
   render() {

src/components/inputs/ArrayInput.jsx

@@ -1,14 +1,15 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import StringInput from './StringInput'
 import NumberInput from './NumberInput'
 
 class ArrayInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.array,
+    value: PropTypes.array,
-    type: React.PropTypes.string,
+    type: PropTypes.string,
-    length: React.PropTypes.number,
+    length: PropTypes.number,
-    default: React.PropTypes.array,
+    default: PropTypes.array,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
   }
 
   changeValue(idx, newValue) {

src/components/inputs/AutocompleteInput.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Autocomplete from 'react-autocomplete'
 
 
 class AutocompleteInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string,
+    value: PropTypes.string,
-    options: React.PropTypes.array,
+    options: PropTypes.array,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
   }
 
   static defaultProps = {

src/components/inputs/CheckboxInput.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 class CheckboxInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.bool.isRequired,
+    value: PropTypes.bool.isRequired,
-    style: React.PropTypes.object,
+    style: PropTypes.object,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
   }
 
   render() {

src/components/inputs/DynamicArrayInput.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import StringInput from './StringInput'
 import NumberInput from './NumberInput'
 import Button from '../Button'
@@ -8,10 +9,10 @@ import DocLabel from '../fields/DocLabel'
 
 class DynamicArrayInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.array,
+    value: PropTypes.array,
-    type: React.PropTypes.string,
+    type: PropTypes.string,
-    default: React.PropTypes.array,
+    default: PropTypes.array,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
   }
 
   changeValue(idx, newValue) {

src/components/inputs/FontInput.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import AutocompleteInput from './AutocompleteInput'
 
 class FontInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.array.isRequired,
+    value: PropTypes.array.isRequired,
-    fonts: React.PropTypes.array,
+    fonts: PropTypes.array,
-    style: React.PropTypes.object,
+    style: PropTypes.object,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   static defaultProps = {

src/components/inputs/IconInput.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import AutocompleteInput from './AutocompleteInput'
 
 
 class IconInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.array,
+    value: PropTypes.array,
-    icons: React.PropTypes.array,
+    icons: PropTypes.array,
-    style: React.PropTypes.object,
+    style: PropTypes.object,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   static defaultProps = {

src/components/inputs/InputBlock.jsx

@@ -1,18 +1,19 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import DocLabel from '../fields/DocLabel'
 
 /** Wrap a component with a label */
 class InputBlock extends React.Component {
   static propTypes = {
-    label: React.PropTypes.oneOfType([
+    label: PropTypes.oneOfType([
-      React.PropTypes.string,
+      PropTypes.string,
-      React.PropTypes.element,
+      PropTypes.element,
     ]).isRequired,
-    doc: React.PropTypes.string,
+    doc: PropTypes.string,
-    action: React.PropTypes.element,
+    action: PropTypes.element,
-    children: React.PropTypes.element.isRequired,
+    children: PropTypes.element.isRequired,
-    style: React.PropTypes.object,
+    style: PropTypes.object,
   }
 
   onChange(e) {

src/components/inputs/MultiButtonInput.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Button from '../Button'
 
 class MultiButtonInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
-    options: React.PropTypes.array.isRequired,
+    options: PropTypes.array.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {

src/components/inputs/NumberInput.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 class NumberInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.number,
+    value: PropTypes.number,
-    default: React.PropTypes.number,
+    default: PropTypes.number,
-    min: React.PropTypes.number,
+    min: PropTypes.number,
-    max: React.PropTypes.number,
+    max: PropTypes.number,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
   }
 
   constructor(props) {

src/components/inputs/SelectInput.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 class SelectInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
-    options: React.PropTypes.array.isRequired,
+    options: PropTypes.array.isRequired,
-    style: React.PropTypes.object,
+    style: PropTypes.object,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
 

src/components/inputs/StringInput.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 class StringInput extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string,
+    value: PropTypes.string,
-    style: React.PropTypes.object,
+    style: PropTypes.object,
-    default: React.PropTypes.string,
+    default: PropTypes.string,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
   }
 
   constructor(props) {

src/components/layers/Collapser.jsx

@@ -1,11 +1,12 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import CollapseOpenIcon from 'react-icons/lib/md/arrow-drop-down'
 import CollapseCloseIcon from 'react-icons/lib/md/arrow-drop-up'
 
 export default class Collapser extends React.Component {
   static propTypes = {
-    isCollapsed: React.PropTypes.bool.isRequired,
+    isCollapsed: PropTypes.bool.isRequired,
-    style: React.PropTypes.object,
+    style: PropTypes.object,
   }
 
   render() {

src/components/layers/CommentBlock.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
 
 class MetadataBlock extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string,
+    value: PropTypes.string,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {

src/components/layers/JSONEditor.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import CodeMirror from 'react-codemirror'
 import InputBlock from '../inputs/InputBlock'
@@ -18,8 +19,8 @@ import '../../vendor/codemirror/addon/lint/json-lint'
 
 class JSONEditor extends React.Component {
   static propTypes = {
-    layer: React.PropTypes.object.isRequired,
+    layer: PropTypes.object.isRequired,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
   }
 
   constructor(props) {

src/components/layers/LayerEditor.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import JSONEditor from './JSONEditor'
 import FilterEditor from '../filter/FilterEditor'
@@ -43,12 +44,12 @@ function layoutGroups(layerType) {
 /** Layer editor supporting multiple types of layers. */
 export default class LayerEditor extends React.Component {
   static propTypes = {
-    layer: React.PropTypes.object.isRequired,
+    layer: PropTypes.object.isRequired,
-    sources: React.PropTypes.object,
+    sources: PropTypes.object,
-    vectorLayers: React.PropTypes.object,
+    vectorLayers: PropTypes.object,
-    spec: React.PropTypes.object.isRequired,
+    spec: PropTypes.object.isRequired,
-    onLayerChanged: React.PropTypes.func,
+    onLayerChanged: PropTypes.func,
-    onLayerIdChange: React.PropTypes.func,
+    onLayerIdChange: PropTypes.func,
   }
 
   static defaultProps = {
@@ -58,7 +59,7 @@ export default class LayerEditor extends React.Component {
   }
 
   static childContextTypes = {
-    reactIconBase: React.PropTypes.object
+    reactIconBase: PropTypes.object
   }
 
   constructor(props) {

src/components/layers/LayerEditorGroup.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Collapse from 'react-collapse'
 import Collapser from './Collapser'
 
 export default class LayerEditorGroup extends React.Component {
   static propTypes = {
-    title: React.PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
-    isActive: React.PropTypes.bool.isRequired,
+    isActive: PropTypes.bool.isRequired,
-    children: React.PropTypes.element.isRequired,
+    children: PropTypes.element.isRequired,
-    onActiveToggle: React.PropTypes.func.isRequired
+    onActiveToggle: PropTypes.func.isRequired
   }
 
   render() {

src/components/layers/LayerIdBlock.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
@@ -6,8 +7,8 @@ import StringInput from '../inputs/StringInput'
 
 class LayerIdBlock extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {

src/components/layers/LayerList.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import cloneDeep from 'lodash.clonedeep'
 
@@ -12,11 +13,11 @@ import style from '../../libs/style.js'
 import {SortableContainer, SortableHandle, arrayMove} from 'react-sortable-hoc';
 
 const layerListPropTypes = {
-  layers: React.PropTypes.array.isRequired,
+  layers: PropTypes.array.isRequired,
-  selectedLayerIndex: React.PropTypes.number.isRequired,
+  selectedLayerIndex: PropTypes.number.isRequired,
-  onLayersChange: React.PropTypes.func.isRequired,
+  onLayersChange: PropTypes.func.isRequired,
-  onLayerSelect: React.PropTypes.func,
+  onLayerSelect: PropTypes.func,
-  sources: React.PropTypes.object.isRequired,
+  sources: PropTypes.object.isRequired,
 }
 
 function layerPrefix(name) {

src/components/layers/LayerListGroup.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Collapser from './Collapser'
 
-export default class LayerEditorGroup extends React.Component {
+export default class LayerListGroup extends React.Component {
   static propTypes = {
-    title: React.PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
-    children: React.PropTypes.element.isRequired,
+    isActive: PropTypes.bool.isRequired,
-    isActive: React.PropTypes.bool.isRequired,
+    onActiveToggle: PropTypes.func.isRequired
-    onActiveToggle: React.PropTypes.func.isRequired
   }
 
   render() {

src/components/layers/LayerListItem.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Color from 'color'
 import classnames from 'classnames'
 
@@ -30,8 +31,8 @@ class LayerTypeDragHandle extends React.Component {
 
 class IconAction extends React.Component {
   static propTypes = {
-    action: React.PropTypes.string.isRequired,
+    action: PropTypes.string.isRequired,
-    onClick: React.PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
   }
 
   renderIcon() {
@@ -57,16 +58,16 @@ class IconAction extends React.Component {
 @SortableElement
 class LayerListItem extends React.Component {
   static propTypes = {
-    layerId: React.PropTypes.string.isRequired,
+    layerId: PropTypes.string.isRequired,
-    layerType: React.PropTypes.string.isRequired,
+    layerType: PropTypes.string.isRequired,
-    isSelected: React.PropTypes.bool,
+    isSelected: PropTypes.bool,
-    visibility: React.PropTypes.string,
+    visibility: PropTypes.string,
-    className: React.PropTypes.string,
+    className: PropTypes.string,
 
-    onLayerSelect: React.PropTypes.func.isRequired,
+    onLayerSelect: PropTypes.func.isRequired,
-    onLayerCopy: React.PropTypes.func,
+    onLayerCopy: PropTypes.func,
-    onLayerDestroy: React.PropTypes.func,
+    onLayerDestroy: PropTypes.func,
-    onLayerVisibilityToggle: React.PropTypes.func,
+    onLayerVisibilityToggle: PropTypes.func,
   }
 
   static defaultProps = {
@@ -78,7 +79,7 @@ class LayerListItem extends React.Component {
   }
 
   static childContextTypes = {
-    reactIconBase: React.PropTypes.object
+    reactIconBase: PropTypes.object
   }
 
   getChildContext() {

src/components/layers/LayerSourceBlock.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
@@ -8,9 +9,9 @@ import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceBlock extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string,
+    value: PropTypes.string,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
-    sourceIds: React.PropTypes.array,
+    sourceIds: PropTypes.array,
   }
 
   static defaultProps = {

src/components/layers/LayerSourceLayerBlock.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
@@ -8,9 +9,9 @@ import AutocompleteInput from '../inputs/AutocompleteInput'
 
 class LayerSourceLayer extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string,
+    value: PropTypes.string,
-    onChange: React.PropTypes.func,
+    onChange: PropTypes.func,
-    sourceLayerIds: React.PropTypes.array,
+    sourceLayerIds: PropTypes.array,
   }
 
   static defaultProps = {

src/components/layers/LayerTypeBlock.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
@@ -6,8 +7,8 @@ import SelectInput from '../inputs/SelectInput'
 
 class LayerTypeBlock extends React.Component {
   static propTypes = {
-    value: React.PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {

src/components/layers/MaxZoomBlock.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
@@ -6,8 +7,8 @@ import NumberInput from '../inputs/NumberInput'
 
 class MaxZoomBlock extends React.Component {
   static propTypes = {
-    value: React.PropTypes.number.isRequired,
+    value: PropTypes.number,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {

src/components/layers/MinZoomBlock.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
@@ -6,8 +7,8 @@ import NumberInput from '../inputs/NumberInput'
 
 class MinZoomBlock extends React.Component {
   static propTypes = {
-    value: React.PropTypes.number.isRequired,
+    value: PropTypes.number,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {

src/components/map/MapboxGlMap.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import ReactDOM from 'react-dom'
 import MapboxGl from 'mapbox-gl'
 import MapboxInspect from 'mapbox-gl-inspect'
@@ -58,10 +59,10 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) {
 
 export default class MapboxGlMap extends React.Component {
   static propTypes = {
-    onDataChange: React.PropTypes.func,
+    onDataChange: PropTypes.func,
-    mapStyle: React.PropTypes.object.isRequired,
+    mapStyle: PropTypes.object.isRequired,
-    inspectModeEnabled: React.PropTypes.bool.isRequired,
+    inspectModeEnabled: PropTypes.bool.isRequired,
-    highlightedLayer: React.PropTypes.object,
+    highlightedLayer: PropTypes.object,
   }
 
   static defaultProps = {

src/components/map/OpenLayers3Map.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import style from '../../libs/style.js'
 import isEqual from 'lodash.isequal'
 import { loadJSON } from '../../libs/urlopen'
@@ -65,9 +66,9 @@ function sourceFromTileJSON(url, cb) {
 
 class OpenLayers3Map extends React.Component {
   static propTypes = {
-    onDataChange: React.PropTypes.func,
+    onDataChange: PropTypes.func,
-    mapStyle: React.PropTypes.object.isRequired,
+    mapStyle: PropTypes.object.isRequired,
-    accessToken: React.PropTypes.string,
+    accessToken: PropTypes.string,
   }
 
   static defaultProps = {

src/components/modals/AddModal.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import Button from '../Button'
 import InputBlock from '../inputs/InputBlock'
@@ -13,13 +14,13 @@ import LayerSourceLayerBlock from '../layers/LayerSourceLayerBlock'
 
 class AddModal extends React.Component {
   static propTypes = {
-    layers: React.PropTypes.array.isRequired,
+    layers: PropTypes.array.isRequired,
-    onLayersChange: React.PropTypes.func.isRequired,
+    onLayersChange: PropTypes.func.isRequired,
-    isOpen: React.PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
 
     // A dict of source id's and the available source layers
-    sources: React.PropTypes.object.isRequired,
+    sources: PropTypes.object.isRequired,
   }
 
   addLayer() {

src/components/modals/ExportModal.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import { saveAs } from 'file-saver'
 
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
@@ -17,8 +18,8 @@ import { CopyToClipboard } from 'react-copy-to-clipboard'
 
 class Gist extends React.Component {
   static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
+    mapStyle: PropTypes.object.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
   }
 
   constructor(props) {
@@ -197,10 +198,10 @@ function stripAccessTokens(mapStyle) {
 
 class ExportModal extends React.Component {
   static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
+    mapStyle: PropTypes.object.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
-    isOpen: React.PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
   }
 
   constructor(props) {

src/components/modals/Modal.jsx

@@ -1,12 +1,13 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import CloseIcon from 'react-icons/lib/md/close'
 import Overlay from './Overlay'
 
 class Modal extends React.Component {
   static propTypes = {
-    isOpen: React.PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool.isRequired,
-    title: React.PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
   }
 
   render() {

src/components/modals/OpenModal.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import Modal from './Modal'
 import Button from '../Button'
 import FileReaderInput from 'react-file-reader-input'
@@ -12,10 +13,10 @@ import publicStyles from '../../config/styles.json'
 
 class PublicStyle extends React.Component {
   static propTypes = {
-    url: React.PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
-    thumbnailUrl: React.PropTypes.string.isRequired,
+    thumbnailUrl: PropTypes.string.isRequired,
-    title: React.PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
+    onSelect: PropTypes.func.isRequired,
   }
 
   render() {
@@ -41,9 +42,9 @@ class PublicStyle extends React.Component {
 
 class OpenModal extends React.Component {
   static propTypes = {
-    isOpen: React.PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
-    onStyleOpen: React.PropTypes.func.isRequired,
+    onStyleOpen: PropTypes.func.isRequired,
   }
 
   constructor(props) {

src/components/modals/Overlay.jsx

@@ -1,10 +1,11 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 
 class Overlay extends React.Component {
   static propTypes = {
-    isOpen: React.PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool.isRequired,
-    children: React.PropTypes.element.isRequired
+    children: PropTypes.element.isRequired
   }
 
   render() {

src/components/modals/SettingsModal.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
@@ -8,10 +9,10 @@ import Modal from './Modal'
 
 class SettingsModal extends React.Component {
   static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
+    mapStyle: PropTypes.object.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
-    isOpen: React.PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
   }
 
   constructor(props) {

src/components/modals/SourcesModal.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
 import Modal from './Modal'
 import Button from '../Button'
@@ -16,10 +17,10 @@ import DeleteIcon from 'react-icons/lib/md/delete'
 
 class PublicSource extends React.Component {
   static propTypes = {
-    id: React.PropTypes.string.isRequired,
+    id: PropTypes.string.isRequired,
-    type: React.PropTypes.string.isRequired,
+    type: PropTypes.string.isRequired,
-    title: React.PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
-    onSelect: React.PropTypes.func.isRequired,
+    onSelect: PropTypes.func.isRequired,
   }
 
   render() {
@@ -54,10 +55,10 @@ function editorMode(source) {
 
 class ActiveSourceTypeEditor extends React.Component {
   static propTypes = {
-    sourceId: React.PropTypes.string.isRequired,
+    sourceId: PropTypes.string.isRequired,
-    source: React.PropTypes.object.isRequired,
+    source: PropTypes.object.isRequired,
-    onDelete: React.PropTypes.func.isRequired,
+    onDelete: PropTypes.func.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {
@@ -87,7 +88,7 @@ class ActiveSourceTypeEditor extends React.Component {
 
 class AddSource extends React.Component {
   static propTypes = {
-    onAdd: React.PropTypes.func.isRequired,
+    onAdd: PropTypes.func.isRequired,
   }
 
   constructor(props) {
@@ -167,10 +168,10 @@ class AddSource extends React.Component {
 
 class SourcesModal extends React.Component {
   static propTypes = {
-    mapStyle: React.PropTypes.object.isRequired,
+    mapStyle: PropTypes.object.isRequired,
-    isOpen: React.PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool.isRequired,
-    onOpenToggle: React.PropTypes.func.isRequired,
+    onOpenToggle: PropTypes.func.isRequired,
-    onStyleChanged: React.PropTypes.func.isRequired,
+    onStyleChanged: PropTypes.func.isRequired,
   }
 
   stripTitle(source) {

src/components/sources/SourceTypeEditor.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styleSpec from '@mapbox/mapbox-gl-style-spec'
 import InputBlock from '../inputs/InputBlock'
 import StringInput from '../inputs/StringInput'
@@ -6,8 +7,8 @@ import NumberInput from '../inputs/NumberInput'
 
 class TileJSONSourceEditor extends React.Component {
   static propTypes = {
-    source: React.PropTypes.object.isRequired,
+    source: PropTypes.object.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {
@@ -25,8 +26,8 @@ class TileJSONSourceEditor extends React.Component {
 
 class TileURLSourceEditor extends React.Component {
   static propTypes = {
-    source: React.PropTypes.object.isRequired,
+    source: PropTypes.object.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   changeTileUrl(idx, value) {
@@ -79,8 +80,8 @@ class TileURLSourceEditor extends React.Component {
 
 class GeoJSONSourceEditor extends React.Component {
   static propTypes = {
-    source: React.PropTypes.object.isRequired,
+    source: PropTypes.object.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {
@@ -98,9 +99,9 @@ class GeoJSONSourceEditor extends React.Component {
 
 class SourceTypeEditor extends React.Component {
   static propTypes = {
-    mode: React.PropTypes.string.isRequired,
+    mode: PropTypes.string.isRequired,
-    source: React.PropTypes.object.isRequired,
+    source: PropTypes.object.isRequired,
-    onChange: React.PropTypes.func.isRequired,
+    onChange: PropTypes.func.isRequired,
   }
 
   render() {