From 9bc603a5106ddb5a2fbef0f9bbaebb0f877c24d1 Mon Sep 17 00:00:00 2001 From: orangemug Date: Mon, 6 Nov 2017 15:32:04 +0000 Subject: [PATCH] Update to use prop-types module in components. --- package.json | 1 + src/components/AppLayout.jsx | 13 ++++----- src/components/Button.jsx | 7 ++--- src/components/MessagePanel.jsx | 5 ++-- src/components/Toolbar.jsx | 13 ++++----- src/components/fields/ColorField.jsx | 13 ++++----- src/components/fields/DocLabel.jsx | 9 ++++--- src/components/fields/FunctionSpecField.jsx | 19 ++++++------- src/components/fields/PropertyGroup.jsx | 9 ++++--- src/components/fields/SpecField.jsx | 19 ++++++------- src/components/filter/FilterEditor.jsx | 7 ++--- src/components/filter/FilterEditorBlock.jsx | 5 ++-- src/components/filter/SingleFilterEditor.jsx | 7 ++--- src/components/icons/LayerIcon.jsx | 5 ++-- src/components/inputs/ArrayInput.jsx | 11 ++++---- src/components/inputs/AutocompleteInput.jsx | 7 ++--- src/components/inputs/CheckboxInput.jsx | 7 ++--- src/components/inputs/DynamicArrayInput.jsx | 9 ++++--- src/components/inputs/FontInput.jsx | 9 ++++--- src/components/inputs/IconInput.jsx | 9 ++++--- src/components/inputs/InputBlock.jsx | 15 ++++++----- src/components/inputs/MultiButtonInput.jsx | 7 ++--- src/components/inputs/NumberInput.jsx | 11 ++++---- src/components/inputs/SelectInput.jsx | 9 ++++--- src/components/inputs/StringInput.jsx | 9 ++++--- src/components/layers/Collapser.jsx | 5 ++-- src/components/layers/CommentBlock.jsx | 5 ++-- src/components/layers/JSONEditor.jsx | 5 ++-- src/components/layers/LayerEditor.jsx | 15 ++++++----- src/components/layers/LayerEditorGroup.jsx | 9 ++++--- src/components/layers/LayerIdBlock.jsx | 5 ++-- src/components/layers/LayerList.jsx | 11 ++++---- src/components/layers/LayerListGroup.jsx | 7 ++--- src/components/layers/LayerListItem.jsx | 25 ++++++++--------- src/components/layers/LayerSourceBlock.jsx | 7 ++--- .../layers/LayerSourceLayerBlock.jsx | 7 ++--- src/components/layers/LayerTypeBlock.jsx | 5 ++-- src/components/layers/MaxZoomBlock.jsx | 5 ++-- src/components/layers/MinZoomBlock.jsx | 5 ++-- src/components/map/MapboxGlMap.jsx | 9 ++++--- src/components/map/OpenLayers3Map.jsx | 7 ++--- src/components/modals/AddModal.jsx | 11 ++++---- src/components/modals/ExportModal.jsx | 13 ++++----- src/components/modals/Modal.jsx | 7 ++--- src/components/modals/OpenModal.jsx | 15 ++++++----- src/components/modals/Overlay.jsx | 5 ++-- src/components/modals/SettingsModal.jsx | 9 ++++--- src/components/modals/SourcesModal.jsx | 27 ++++++++++--------- src/components/sources/SourceTypeEditor.jsx | 19 ++++++------- 49 files changed, 261 insertions(+), 212 deletions(-) diff --git a/package.json b/package.json index af959ac0..69a8829f 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "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", diff --git a/src/components/AppLayout.jsx b/src/components/AppLayout.jsx index 3d8ac00d..1804686d 100644 --- a/src/components/AppLayout.jsx +++ b/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, - layerList: React.PropTypes.element.isRequired, - layerEditor: React.PropTypes.element, - map: React.PropTypes.element.isRequired, - bottom: React.PropTypes.element, + toolbar: PropTypes.element.isRequired, + layerList: PropTypes.element.isRequired, + layerEditor: PropTypes.element, + map: PropTypes.element.isRequired, + bottom: PropTypes.element, } static childContextTypes = { - reactIconBase: React.PropTypes.object + reactIconBase: PropTypes.object } getChildContext() { diff --git a/src/components/Button.jsx b/src/components/Button.jsx index f922b9bd..d3c6ee14 100644 --- a/src/components/Button.jsx +++ b/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, - style: React.PropTypes.object, - className: React.PropTypes.string, + onClick: PropTypes.func, + style: PropTypes.object, + className: PropTypes.string, } render() { diff --git a/src/components/MessagePanel.jsx b/src/components/MessagePanel.jsx index f374ebd6..f5e4c819 100644 --- a/src/components/MessagePanel.jsx +++ b/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, - infos: React.PropTypes.array, + errors: PropTypes.array, + infos: PropTypes.array, } render() { diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 9bf7ad68..91f56207 100644 --- a/src/components/Toolbar.jsx +++ b/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' @@ -49,14 +50,14 @@ function ToolbarAction(props) { export default class Toolbar extends React.Component { static propTypes = { - mapStyle: React.PropTypes.object.isRequired, - inspectModeEnabled: React.PropTypes.bool.isRequired, - onStyleChanged: React.PropTypes.func.isRequired, + mapStyle: PropTypes.object.isRequired, + inspectModeEnabled: PropTypes.bool.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, - onInspectModeToggle: React.PropTypes.func.isRequired + sources: PropTypes.object.isRequired, + onInspectModeToggle: PropTypes.func.isRequired } constructor(props) { diff --git a/src/components/fields/ColorField.jsx b/src/components/fields/ColorField.jsx index 2f5343c2..7599533f 100644 --- a/src/components/fields/ColorField.jsx +++ b/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, - name: React.PropTypes.string.isRequired, - value: React.PropTypes.string, - doc: React.PropTypes.string, - style: React.PropTypes.object, - default: React.PropTypes.string, + onChange: PropTypes.func.isRequired, + name: PropTypes.string.isRequired, + value: PropTypes.string, + doc: PropTypes.string, + style: PropTypes.object, + default: PropTypes.string, } constructor(props) { diff --git a/src/components/fields/DocLabel.jsx b/src/components/fields/DocLabel.jsx index d13efb62..9af6a860 100644 --- a/src/components/fields/DocLabel.jsx +++ b/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([ - React.PropTypes.object, - React.PropTypes.string + label: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string ]).isRequired, - doc: React.PropTypes.string.isRequired, + doc: PropTypes.string.isRequired, } render() { diff --git a/src/components/fields/FunctionSpecField.jsx b/src/components/fields/FunctionSpecField.jsx index 2b7383b9..9f5b3f6d 100644 --- a/src/components/fields/FunctionSpecField.jsx +++ b/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, - fieldName: React.PropTypes.string.isRequired, - fieldSpec: React.PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, + fieldName: PropTypes.string.isRequired, + fieldSpec: PropTypes.object.isRequired, - value: React.PropTypes.oneOfType([ - React.PropTypes.object, - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.bool, - React.PropTypes.array + value: PropTypes.oneOfType([ + PropTypes.object, + PropTypes.string, + PropTypes.number, + PropTypes.bool, + PropTypes.array ]), } diff --git a/src/components/fields/PropertyGroup.jsx b/src/components/fields/PropertyGroup.jsx index fc178929..5d3c72c1 100644 --- a/src/components/fields/PropertyGroup.jsx +++ b/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, - groupFields: React.PropTypes.array.isRequired, - onChange: React.PropTypes.func.isRequired, - spec: React.PropTypes.object.isRequired, + layer: PropTypes.object.isRequired, + groupFields: PropTypes.array.isRequired, + onChange: PropTypes.func.isRequired, + spec: PropTypes.object.isRequired, } onPropertyChange(property, newValue) { diff --git a/src/components/fields/SpecField.jsx b/src/components/fields/SpecField.jsx index 9f081444..00796ef4 100644 --- a/src/components/fields/SpecField.jsx +++ b/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, - fieldName: React.PropTypes.string.isRequired, - fieldSpec: React.PropTypes.object.isRequired, - value: React.PropTypes.oneOfType([ - React.PropTypes.string, - React.PropTypes.number, - React.PropTypes.array, - React.PropTypes.bool + onChange: PropTypes.func.isRequired, + fieldName: PropTypes.string.isRequired, + fieldSpec: PropTypes.object.isRequired, + value: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.array, + PropTypes.bool ]), /** Override the style of the field */ - style: React.PropTypes.object, + style: PropTypes.object, } render() { diff --git a/src/components/filter/FilterEditor.jsx b/src/components/filter/FilterEditor.jsx index 8641548e..c16f5e65 100644 --- a/src/components/filter/FilterEditor.jsx +++ b/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, - filter: React.PropTypes.array, - onChange: React.PropTypes.func.isRequired, + properties: PropTypes.object, + filter: PropTypes.array, + onChange: PropTypes.func.isRequired, } // Convert filter to combining filter diff --git a/src/components/filter/FilterEditorBlock.jsx b/src/components/filter/FilterEditorBlock.jsx index 8395b723..3c2b9b1b 100644 --- a/src/components/filter/FilterEditorBlock.jsx +++ b/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, - children: React.PropTypes.element.isRequired, + onDelete: PropTypes.func.isRequired, + children: PropTypes.element.isRequired, } render() { diff --git a/src/components/filter/SingleFilterEditor.jsx b/src/components/filter/SingleFilterEditor.jsx index f7af98d4..92057657 100644 --- a/src/components/filter/SingleFilterEditor.jsx +++ b/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, - onChange: React.PropTypes.func.isRequired, - properties: React.PropTypes.object, + filter: PropTypes.array.isRequired, + onChange: PropTypes.func.isRequired, + properties: PropTypes.object, } static defaultProps = { diff --git a/src/components/icons/LayerIcon.jsx b/src/components/icons/LayerIcon.jsx index 5c75c455..790ca3ad 100644 --- a/src/components/icons/LayerIcon.jsx +++ b/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, - style: React.PropTypes.object, + type: PropTypes.string.isRequired, + style: PropTypes.object, } render() { diff --git a/src/components/inputs/ArrayInput.jsx b/src/components/inputs/ArrayInput.jsx index cbf3a256..69a01d52 100644 --- a/src/components/inputs/ArrayInput.jsx +++ b/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, - type: React.PropTypes.string, - length: React.PropTypes.number, - default: React.PropTypes.array, - onChange: React.PropTypes.func, + value: PropTypes.array, + type: PropTypes.string, + length: PropTypes.number, + default: PropTypes.array, + onChange: PropTypes.func, } changeValue(idx, newValue) { diff --git a/src/components/inputs/AutocompleteInput.jsx b/src/components/inputs/AutocompleteInput.jsx index c2b4c1f6..2ee4c42f 100644 --- a/src/components/inputs/AutocompleteInput.jsx +++ b/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, - options: React.PropTypes.array, - onChange: React.PropTypes.func, + value: PropTypes.string, + options: PropTypes.array, + onChange: PropTypes.func, } static defaultProps = { diff --git a/src/components/inputs/CheckboxInput.jsx b/src/components/inputs/CheckboxInput.jsx index cfe5b3d1..94e89024 100644 --- a/src/components/inputs/CheckboxInput.jsx +++ b/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, - style: React.PropTypes.object, - onChange: React.PropTypes.func, + value: PropTypes.bool.isRequired, + style: PropTypes.object, + onChange: PropTypes.func, } render() { diff --git a/src/components/inputs/DynamicArrayInput.jsx b/src/components/inputs/DynamicArrayInput.jsx index 1a864dd7..edbc9b51 100644 --- a/src/components/inputs/DynamicArrayInput.jsx +++ b/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, - type: React.PropTypes.string, - default: React.PropTypes.array, - onChange: React.PropTypes.func, + value: PropTypes.array, + type: PropTypes.string, + default: PropTypes.array, + onChange: PropTypes.func, } changeValue(idx, newValue) { diff --git a/src/components/inputs/FontInput.jsx b/src/components/inputs/FontInput.jsx index fa1b3726..c879ceaa 100644 --- a/src/components/inputs/FontInput.jsx +++ b/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, - fonts: React.PropTypes.array, - style: React.PropTypes.object, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.array.isRequired, + fonts: PropTypes.array, + style: PropTypes.object, + onChange: PropTypes.func.isRequired, } static defaultProps = { diff --git a/src/components/inputs/IconInput.jsx b/src/components/inputs/IconInput.jsx index 9f6bc33f..daff7e7c 100644 --- a/src/components/inputs/IconInput.jsx +++ b/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, - icons: React.PropTypes.array, - style: React.PropTypes.object, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.array, + icons: PropTypes.array, + style: PropTypes.object, + onChange: PropTypes.func.isRequired, } static defaultProps = { diff --git a/src/components/inputs/InputBlock.jsx b/src/components/inputs/InputBlock.jsx index b537a521..0550fbe2 100644 --- a/src/components/inputs/InputBlock.jsx +++ b/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([ - React.PropTypes.string, - React.PropTypes.element, + label: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.element, ]).isRequired, - doc: React.PropTypes.string, - action: React.PropTypes.element, - children: React.PropTypes.element.isRequired, - style: React.PropTypes.object, + doc: PropTypes.string, + action: PropTypes.element, + children: PropTypes.element.isRequired, + style: PropTypes.object, } onChange(e) { diff --git a/src/components/inputs/MultiButtonInput.jsx b/src/components/inputs/MultiButtonInput.jsx index 20265be1..4b8891da 100644 --- a/src/components/inputs/MultiButtonInput.jsx +++ b/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, - options: React.PropTypes.array.isRequired, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.string.isRequired, + options: PropTypes.array.isRequired, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/inputs/NumberInput.jsx b/src/components/inputs/NumberInput.jsx index 9ae6dd4d..c57af00c 100644 --- a/src/components/inputs/NumberInput.jsx +++ b/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, - default: React.PropTypes.number, - min: React.PropTypes.number, - max: React.PropTypes.number, - onChange: React.PropTypes.func, + value: PropTypes.number, + default: PropTypes.number, + min: PropTypes.number, + max: PropTypes.number, + onChange: PropTypes.func, } constructor(props) { diff --git a/src/components/inputs/SelectInput.jsx b/src/components/inputs/SelectInput.jsx index 13a8b274..145c78f4 100644 --- a/src/components/inputs/SelectInput.jsx +++ b/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, - options: React.PropTypes.array.isRequired, - style: React.PropTypes.object, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.string.isRequired, + options: PropTypes.array.isRequired, + style: PropTypes.object, + onChange: PropTypes.func.isRequired, } diff --git a/src/components/inputs/StringInput.jsx b/src/components/inputs/StringInput.jsx index 5b7753e2..fe1ec524 100644 --- a/src/components/inputs/StringInput.jsx +++ b/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, - style: React.PropTypes.object, - default: React.PropTypes.string, - onChange: React.PropTypes.func, + value: PropTypes.string, + style: PropTypes.object, + default: PropTypes.string, + onChange: PropTypes.func, } constructor(props) { diff --git a/src/components/layers/Collapser.jsx b/src/components/layers/Collapser.jsx index 19410a52..186c4412 100644 --- a/src/components/layers/Collapser.jsx +++ b/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, - style: React.PropTypes.object, + isCollapsed: PropTypes.bool.isRequired, + style: PropTypes.object, } render() { diff --git a/src/components/layers/CommentBlock.jsx b/src/components/layers/CommentBlock.jsx index ac8bee61..961bd7de 100644 --- a/src/components/layers/CommentBlock.jsx +++ b/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, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.string, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx index 5f27055f..69b5d38b 100644 --- a/src/components/layers/JSONEditor.jsx +++ b/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, - onChange: React.PropTypes.func, + layer: PropTypes.object.isRequired, + onChange: PropTypes.func, } constructor(props) { diff --git a/src/components/layers/LayerEditor.jsx b/src/components/layers/LayerEditor.jsx index 4494b855..2184388e 100644 --- a/src/components/layers/LayerEditor.jsx +++ b/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, - sources: React.PropTypes.object, - vectorLayers: React.PropTypes.object, - spec: React.PropTypes.object.isRequired, - onLayerChanged: React.PropTypes.func, - onLayerIdChange: React.PropTypes.func, + layer: PropTypes.object.isRequired, + sources: PropTypes.object, + vectorLayers: PropTypes.object, + spec: PropTypes.object.isRequired, + onLayerChanged: 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) { diff --git a/src/components/layers/LayerEditorGroup.jsx b/src/components/layers/LayerEditorGroup.jsx index 5c4f86f1..7c82fc1c 100644 --- a/src/components/layers/LayerEditorGroup.jsx +++ b/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, - isActive: React.PropTypes.bool.isRequired, - children: React.PropTypes.element.isRequired, - onActiveToggle: React.PropTypes.func.isRequired + title: PropTypes.string.isRequired, + isActive: PropTypes.bool.isRequired, + children: PropTypes.element.isRequired, + onActiveToggle: PropTypes.func.isRequired } render() { diff --git a/src/components/layers/LayerIdBlock.jsx b/src/components/layers/LayerIdBlock.jsx index 831b75c5..fe0f1584 100644 --- a/src/components/layers/LayerIdBlock.jsx +++ b/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, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx index 00bf33ef..8853dc2e 100644 --- a/src/components/layers/LayerList.jsx +++ b/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, - selectedLayerIndex: React.PropTypes.number.isRequired, - onLayersChange: React.PropTypes.func.isRequired, - onLayerSelect: React.PropTypes.func, - sources: React.PropTypes.object.isRequired, + layers: PropTypes.array.isRequired, + selectedLayerIndex: PropTypes.number.isRequired, + onLayersChange: PropTypes.func.isRequired, + onLayerSelect: PropTypes.func, + sources: PropTypes.object.isRequired, } function layerPrefix(name) { diff --git a/src/components/layers/LayerListGroup.jsx b/src/components/layers/LayerListGroup.jsx index 7694014d..ccf7f384 100644 --- a/src/components/layers/LayerListGroup.jsx +++ b/src/components/layers/LayerListGroup.jsx @@ -1,11 +1,12 @@ import React from 'react' +import PropTypes from 'prop-types' import Collapser from './Collapser' export default class LayerListGroup extends React.Component { static propTypes = { - title: React.PropTypes.string.isRequired, - isActive: React.PropTypes.bool.isRequired, - onActiveToggle: React.PropTypes.func.isRequired + title: PropTypes.string.isRequired, + isActive: PropTypes.bool.isRequired, + onActiveToggle: PropTypes.func.isRequired } render() { diff --git a/src/components/layers/LayerListItem.jsx b/src/components/layers/LayerListItem.jsx index 6b1420e9..4d31cf12 100644 --- a/src/components/layers/LayerListItem.jsx +++ b/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, - onClick: React.PropTypes.func.isRequired, + action: PropTypes.string.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, - layerType: React.PropTypes.string.isRequired, - isSelected: React.PropTypes.bool, - visibility: React.PropTypes.string, - className: React.PropTypes.string, + layerId: PropTypes.string.isRequired, + layerType: PropTypes.string.isRequired, + isSelected: PropTypes.bool, + visibility: PropTypes.string, + className: PropTypes.string, - onLayerSelect: React.PropTypes.func.isRequired, - onLayerCopy: React.PropTypes.func, - onLayerDestroy: React.PropTypes.func, - onLayerVisibilityToggle: React.PropTypes.func, + onLayerSelect: PropTypes.func.isRequired, + onLayerCopy: PropTypes.func, + onLayerDestroy: 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() { diff --git a/src/components/layers/LayerSourceBlock.jsx b/src/components/layers/LayerSourceBlock.jsx index b9bea695..e506d61f 100644 --- a/src/components/layers/LayerSourceBlock.jsx +++ b/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, - onChange: React.PropTypes.func, - sourceIds: React.PropTypes.array, + value: PropTypes.string, + onChange: PropTypes.func, + sourceIds: PropTypes.array, } static defaultProps = { diff --git a/src/components/layers/LayerSourceLayerBlock.jsx b/src/components/layers/LayerSourceLayerBlock.jsx index 012c876c..2faf6666 100644 --- a/src/components/layers/LayerSourceLayerBlock.jsx +++ b/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, - onChange: React.PropTypes.func, - sourceLayerIds: React.PropTypes.array, + value: PropTypes.string, + onChange: PropTypes.func, + sourceLayerIds: PropTypes.array, } static defaultProps = { diff --git a/src/components/layers/LayerTypeBlock.jsx b/src/components/layers/LayerTypeBlock.jsx index c2b98b10..6924b536 100644 --- a/src/components/layers/LayerTypeBlock.jsx +++ b/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, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.string.isRequired, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/layers/MaxZoomBlock.jsx b/src/components/layers/MaxZoomBlock.jsx index 1989de46..bdd22010 100644 --- a/src/components/layers/MaxZoomBlock.jsx +++ b/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, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.number, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/layers/MinZoomBlock.jsx b/src/components/layers/MinZoomBlock.jsx index 5483376c..cebde0f4 100644 --- a/src/components/layers/MinZoomBlock.jsx +++ b/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, - onChange: React.PropTypes.func.isRequired, + value: PropTypes.number, + onChange: PropTypes.func.isRequired, } render() { diff --git a/src/components/map/MapboxGlMap.jsx b/src/components/map/MapboxGlMap.jsx index 11b50193..4bf6f249 100644 --- a/src/components/map/MapboxGlMap.jsx +++ b/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' @@ -57,10 +58,10 @@ function buildInspectStyle(originalMapStyle, coloredLayers, highlightedLayer) { export default class MapboxGlMap extends React.Component { static propTypes = { - onDataChange: React.PropTypes.func, - mapStyle: React.PropTypes.object.isRequired, - inspectModeEnabled: React.PropTypes.bool.isRequired, - highlightedLayer: React.PropTypes.object, + onDataChange: PropTypes.func, + mapStyle: PropTypes.object.isRequired, + inspectModeEnabled: PropTypes.bool.isRequired, + highlightedLayer: PropTypes.object, } static defaultProps = { diff --git a/src/components/map/OpenLayers3Map.jsx b/src/components/map/OpenLayers3Map.jsx index 650b90f2..6ca3852f 100644 --- a/src/components/map/OpenLayers3Map.jsx +++ b/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, - mapStyle: React.PropTypes.object.isRequired, - accessToken: React.PropTypes.string, + onDataChange: PropTypes.func, + mapStyle: PropTypes.object.isRequired, + accessToken: PropTypes.string, } static defaultProps = { diff --git a/src/components/modals/AddModal.jsx b/src/components/modals/AddModal.jsx index d08a539c..24a4638d 100644 --- a/src/components/modals/AddModal.jsx +++ b/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, - onLayersChange: React.PropTypes.func.isRequired, - isOpen: React.PropTypes.bool.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, + layers: PropTypes.array.isRequired, + onLayersChange: PropTypes.func.isRequired, + isOpen: PropTypes.bool.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() { diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx index fd00a6f9..cfbffb30 100644 --- a/src/components/modals/ExportModal.jsx +++ b/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, - onStyleChanged: React.PropTypes.func.isRequired, + mapStyle: PropTypes.object.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, - onStyleChanged: React.PropTypes.func.isRequired, - isOpen: React.PropTypes.bool.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, + mapStyle: PropTypes.object.isRequired, + onStyleChanged: PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, } constructor(props) { diff --git a/src/components/modals/Modal.jsx b/src/components/modals/Modal.jsx index cafbdfad..a469940a 100644 --- a/src/components/modals/Modal.jsx +++ b/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, - title: React.PropTypes.string.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, + title: PropTypes.string.isRequired, + onOpenToggle: PropTypes.func.isRequired, } render() { diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx index 08d7e9d7..df9f5658 100644 --- a/src/components/modals/OpenModal.jsx +++ b/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, - thumbnailUrl: React.PropTypes.string.isRequired, - title: React.PropTypes.string.isRequired, - onSelect: React.PropTypes.func.isRequired, + url: PropTypes.string.isRequired, + thumbnailUrl: PropTypes.string.isRequired, + title: PropTypes.string.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, - onOpenToggle: React.PropTypes.func.isRequired, - onStyleOpen: React.PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, + onStyleOpen: PropTypes.func.isRequired, } constructor(props) { diff --git a/src/components/modals/Overlay.jsx b/src/components/modals/Overlay.jsx index 29849bed..75374785 100644 --- a/src/components/modals/Overlay.jsx +++ b/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, - children: React.PropTypes.element.isRequired + isOpen: PropTypes.bool.isRequired, + children: PropTypes.element.isRequired } render() { diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx index d3bc5b96..a5e59b50 100644 --- a/src/components/modals/SettingsModal.jsx +++ b/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, - onStyleChanged: React.PropTypes.func.isRequired, - isOpen: React.PropTypes.bool.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, + mapStyle: PropTypes.object.isRequired, + onStyleChanged: PropTypes.func.isRequired, + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, } constructor(props) { diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx index 532db932..26eff125 100644 --- a/src/components/modals/SourcesModal.jsx +++ b/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, - type: React.PropTypes.string.isRequired, - title: React.PropTypes.string.isRequired, - onSelect: React.PropTypes.func.isRequired, + id: PropTypes.string.isRequired, + type: PropTypes.string.isRequired, + title: PropTypes.string.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, - source: React.PropTypes.object.isRequired, - onDelete: React.PropTypes.func.isRequired, - onChange: React.PropTypes.func.isRequired, + sourceId: PropTypes.string.isRequired, + source: PropTypes.object.isRequired, + onDelete: 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, - isOpen: React.PropTypes.bool.isRequired, - onOpenToggle: React.PropTypes.func.isRequired, - onStyleChanged: React.PropTypes.func.isRequired, + mapStyle: PropTypes.object.isRequired, + isOpen: PropTypes.bool.isRequired, + onOpenToggle: PropTypes.func.isRequired, + onStyleChanged: PropTypes.func.isRequired, } stripTitle(source) { diff --git a/src/components/sources/SourceTypeEditor.jsx b/src/components/sources/SourceTypeEditor.jsx index 2718767c..65a403d8 100644 --- a/src/components/sources/SourceTypeEditor.jsx +++ b/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, - onChange: React.PropTypes.func.isRequired, + source: PropTypes.object.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, - onChange: React.PropTypes.func.isRequired, + source: PropTypes.object.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, - onChange: React.PropTypes.func.isRequired, + source: PropTypes.object.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, - source: React.PropTypes.object.isRequired, - onChange: React.PropTypes.func.isRequired, + mode: PropTypes.string.isRequired, + source: PropTypes.object.isRequired, + onChange: PropTypes.func.isRequired, } render() {