More migration of components

package.json

@@ -99,6 +99,7 @@
     "@types/codemirror": "^5.60.15",
     "@types/color": "^3.0.6",
     "@types/cors": "^2.8.17",
+    "@types/file-saver": "^2.0.7",
     "@types/lodash.capitalize": "^4.2.9",
     "@types/lodash.isequal": "^4.5.8",
     "@types/lodash.throttle": "^4.1.9",

src/components/FieldCheckbox.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import Block from './Block'
+import InputCheckbox, {InputCheckboxProps} from './InputCheckbox'
+
+
+type FieldCheckboxProps = InputCheckboxProps & {
+  label?: string;
+};
+
+
+export default class FieldCheckbox extends React.Component<FieldCheckboxProps> {
+  render() {
+    return <Block label={this.props.label}>
+      <InputCheckbox {...this.props} />
+    </Block>
+  }
+}
+

src/components/FieldDynamicArray.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
+import Fieldset from './Fieldset'
+
+type FieldDynamicArrayProps = InputDynamicArrayProps & {
+  name?: string
+};
+
+export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
+  render() {
+    return <Fieldset label={this.props.label}>
+      <InputDynamicArray {...this.props} />
+    </Fieldset>
+  }
+}
+

src/components/FieldSource.jsx → src/components/FieldSource.tsx

@@ -1,19 +1,18 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'
 
-export default class FieldSource extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    wdKey: PropTypes.string,
-    onChange: PropTypes.func,
-    sourceIds: PropTypes.array,
-    error: PropTypes.object,
-  }
+type FieldSourceProps = {
+  value?: string
+  wdKey?: string
+  onChange?(...args: unknown[]): unknown
+  sourceIds?: unknown[]
+  error?: unknown[]
+};
 
+export default class FieldSource extends React.Component<FieldSourceProps> {
   static defaultProps = {
     onChange: () => {},
     sourceIds: [],
@@ -29,7 +28,7 @@ export default class FieldSource extends React.Component {
       <InputAutocomplete
         value={this.props.value}
         onChange={this.props.onChange}
-        options={this.props.sourceIds.map(src => [src, src])}
+        options={this.props.sourceIds?.map(src => [src, src])}
       />
     </Block>
   }

src/components/FieldSourceLayer.jsx → src/components/FieldSourceLayer.tsx

@@ -1,18 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import InputAutocomplete from './InputAutocomplete'
 
-export default class FieldSourceLayer extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func,
-    sourceLayerIds: PropTypes.array,
-    isFixed: PropTypes.bool,
-  }
+type FieldSourceLayerProps = {
+  value?: string
+  onChange?(...args: unknown[]): unknown
+  sourceLayerIds?: unknown[]
+  isFixed?: boolean
+};
 
+export default class FieldSourceLayer extends React.Component<FieldSourceLayerProps> {
   static defaultProps = {
     onChange: () => {},
     sourceLayerIds: [],
@@ -27,7 +26,7 @@ export default class FieldSourceLayer extends React.Component {
         keepMenuWithinWindowBounds={!!this.props.isFixed}
         value={this.props.value}
         onChange={this.props.onChange}
-        options={this.props.sourceLayerIds.map(l => [l, l])}
+        options={this.props.sourceLayerIds?.map(l => [l, l])}
       />
     </Block>
   }

src/components/InputDynamicArray.tsx

@@ -12,7 +12,7 @@ import InputUrl from './InputUrl'
 
 export type FieldDynamicArrayProps = {
   value?: (string | number)[]
-  type?: 'url' | 'number' | 'enum'
+  type?: 'url' | 'number' | 'enum' | 'string'
   default?: (string | number)[]
   onChange?(...args: unknown[]): unknown
   style?: object

src/components/InputJson.tsx

@@ -17,7 +17,7 @@ export type InputJsonProps = {
   onChange?(...args: unknown[]): unknown
   lineNumbers?: boolean
   lineWrapping?: boolean
-  getValue(data: any): string
+  getValue?(data: any): string
   gutters?: string[]
   className?: string
   onFocus?(...args: unknown[]): unknown
@@ -58,13 +58,13 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
     this.state = {
       isEditing: false,
       showMessage: false,
-      prevValue: this.props.getValue(this.props.layer),
+      prevValue: this.props.getValue!(this.props.layer),
     };
   }
 
   componentDidMount () {
     this._doc = CodeMirror(this._el!, {
-      value: this.props.getValue(this.props.layer),
+      value: this.props.getValue!(this.props.layer),
       mode: this.props.mode || {
         name: "mgl",
       },
@@ -117,7 +117,7 @@ export default class InputJson extends React.Component<InputJsonProps, InputJson
     if (!this.state.isEditing && prevProps.layer !== this.props.layer) {
       this._cancelNextChange = true;
       this._doc!.setValue(
-        this.props.getValue(this.props.layer),
+        this.props.getValue!(this.props.layer),
       )
     }
   }

src/components/ModalAdd.jsx → src/components/ModalAdd.tsx

@@ -1,29 +1,32 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
-import {latest} from '@maplibre/maplibre-gl-style-spec'
 import InputButton from './InputButton'
 import Modal from './Modal'
-
 import FieldType from './FieldType'
 import FieldId from './FieldId'
 import FieldSource from './FieldSource'
 import FieldSourceLayer from './FieldSourceLayer'
 
-export default class ModalAdd extends React.Component {
-  static propTypes = {
-    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: PropTypes.object.isRequired,
-  }
-
+type ModalAddProps = {
+  layers: unknown[]
+  onLayersChange(...args: unknown[]): unknown
+  isOpen: boolean
+  onOpenToggle(...args: unknown[]): unknown
+  // A dict of source id's and the available source layers
+  sources: any
+};
+
+type ModalAddState = {
+  type: string
+  id: string
+  source?: string
+  'source-layer'?: string
+};
+
+export default class ModalAdd extends React.Component<ModalAddProps, ModalAddState> {
   addLayer = () => {
     const changedLayers = this.props.layers.slice(0)
-    const layer = {
+    const layer: ModalAddState = {
       id: this.state.id,
       type: this.state.type,
     }
@@ -41,20 +44,21 @@ export default class ModalAdd extends React.Component {
     this.props.onOpenToggle(false)
   }
 
-  constructor(props) {
+  constructor(props: ModalAddProps) {
     super(props)
-    this.state = {
+    const state: ModalAddState = {
       type: 'fill',
       id: '',
     }
 
     if(props.sources.length > 0) {
-      this.state.source = Object.keys(this.props.sources)[0]
-      this.state['source-layer'] = this.props.sources[this.state.source][0]
+      state.source = Object.keys(this.props.sources)[0];
+      state['source-layer'] = this.props.sources[state.source as keyof ModalAddProps["sources"]][0]
     }
+    this.state = state;
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(_prevProps: ModalAddProps, prevState: ModalAddState) {
     // Check if source is valid for new type
     const oldType = prevState.type;
     const newType = this.state.type;
@@ -67,9 +71,9 @@ export default class ModalAdd extends React.Component {
       oldType !== newType
       && prevState.source !== ""
       // Was a valid source previously
-      && availableSourcesOld.indexOf(prevState.source) > -1
+      && availableSourcesOld.indexOf(prevState.source!) > -1
       // And is not a valid source now
-      && availableSourcesNew.indexOf(this.state.source) < 0
+      && availableSourcesNew.indexOf(this.state.source!) < 0
     ) {
       // Clear the source
       this.setState({
@@ -78,12 +82,12 @@ export default class ModalAdd extends React.Component {
     }
   }
 
-  getLayersForSource(source) {
+  getLayersForSource(source: string) {
     const sourceObj = this.props.sources[source] || {};
     return sourceObj.layers || [];
   }
 
-  getSources(type) {
+  getSources(type: string) {
     const sources = [];
 
     const types = {
@@ -108,8 +112,9 @@ export default class ModalAdd extends React.Component {
       ]
     }
 
-    for(let [key, val] of Object.entries(this.props.sources)) {
-      if(types[val.type] && types[val.type].indexOf(type) > -1) {
+    for(let [key, val] of Object.entries(this.props.sources) as any) {
+      const valType = val.type as keyof typeof types;
+      if(types[valType] && types[valType].indexOf(type) > -1) {
         sources.push(key);
       }
     }
@@ -120,7 +125,7 @@ export default class ModalAdd extends React.Component {
 
   render() {
     const sources = this.getSources(this.state.type);
-    const layers = this.getLayersForSource(this.state.source);
+    const layers = this.getLayersForSource(this.state.source!);
 
     return <Modal
       isOpen={this.props.isOpen}
@@ -131,33 +136,31 @@ export default class ModalAdd extends React.Component {
     >
       <div className="maputnik-add-layer">
       <FieldId
-        label="ID"
-        fieldSpec={latest.layer.id}
         value={this.state.id}
         wdKey="add-layer.layer-id"
-        onChange={v => {
+        onChange={(v: string) => {
           this.setState({ id: v })
         }}
       />
       <FieldType
         value={this.state.type}
         wdKey="add-layer.layer-type"
-        onChange={v => this.setState({ type: v })}
+        onChange={(v: string) => this.setState({ type: v })}
       />
       {this.state.type !== 'background' &&
       <FieldSource
         sourceIds={sources}
         wdKey="add-layer.layer-source-block"
         value={this.state.source}
-        onChange={v => this.setState({ source: v })}
+        onChange={(v: string) => this.setState({ source: v })}
       />
       }
       {['background', 'raster', 'hillshade', 'heatmap'].indexOf(this.state.type) < 0 &&
       <FieldSourceLayer
         isFixed={true}
         sourceLayerIds={layers}
         value={this.state['source-layer']}
-        onChange={v => this.setState({ 'source-layer': v })}
+        onChange={(v: string) => this.setState({ 'source-layer': v })}
       />
       }
       <InputButton