More conversion from jsx to tsx

src/components/InputSpec.tsx

@@ -14,8 +14,8 @@ import capitalize from 'lodash.capitalize'
 const iconProperties = ['background-pattern', 'fill-pattern', 'line-pattern', 'fill-extrusion-pattern', 'icon-image']
 
 export type SpecFieldProps = {
-  onChange(...args: unknown[]): unknown
-  fieldName: string
+  onChange?(...args: unknown[]): unknown
+  fieldName?: string
   fieldSpec: {
     default?: unknown
     type: 'number' | 'enum' | 'resolvedImage' | 'formatted' | 'string' | 'color' | 'boolean' | 'array'
@@ -49,7 +49,7 @@ export default class SpecField extends React.Component<SpecFieldProps> {
       value: this.props.value,
       default: this.props.fieldSpec.default,
       name: this.props.fieldName,
-      onChange: (newValue: string) => this.props.onChange(this.props.fieldName, newValue),
+      onChange: (newValue: string) => this.props.onChange!(this.props.fieldName, newValue),
       'aria-label': this.props['aria-label'],
     }
     switch(this.props.fieldSpec.type) {
@@ -70,7 +70,7 @@ export default class SpecField extends React.Component<SpecFieldProps> {
       case 'resolvedImage':
       case 'formatted':
       case 'string':
-        if (iconProperties.indexOf(this.props.fieldName) >= 0) {
+        if (iconProperties.indexOf(this.props.fieldName!) >= 0) {
           const options = this.props.fieldSpec.values || [];
           return <InputAutocomplete
             {...commonProps as Omit<InputAutocompleteProps, "options">}

src/components/SpecField.tsx

@@ -21,27 +21,25 @@ type SpecFieldProps = InputFieldSpecProps & {
 
 export default class SpecField extends React.Component<SpecFieldProps> {
   render() {
-    const {props} = this;
-
-    const fieldType = props.fieldSpec.type;
+    const fieldType = this.props.fieldSpec.type;
 
     const typeBlockFn = typeMap[fieldType];
 
     let TypeBlock;
     if (typeBlockFn) {
-      TypeBlock = typeBlockFn(props);
+      TypeBlock = typeBlockFn(this.props);
     }
     else {
       console.warn("No such type for '%s'", fieldType);
       TypeBlock = Block;
     }
 
     return <TypeBlock
-      label={props.label}
-      action={props.action}
+      label={this.props.label}
+      action={this.props.action}
       fieldSpec={this.props.fieldSpec}
     >
-      <InputSpec {...props} />
+      <InputSpec {...this.props} />
     </TypeBlock>
   }
 }

src/components/_DeleteStopButton.jsx → src/components/_DeleteStopButton.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import InputButton from './InputButton'
 import {MdDelete} from 'react-icons/md'
 
 
-export default class DeleteStopButton extends React.Component {
-  static propTypes = {
-    onClick: PropTypes.func,
-  }
+type DeleteStopButtonProps = {
+  onClick?(...args: unknown[]): unknown
+};
+
 
+export default class DeleteStopButton extends React.Component<DeleteStopButtonProps> {
   render() {
     return <InputButton
       className="maputnik-delete-stop"

src/components/_FieldComment.jsx → src/components/_FieldComment.tsx

@@ -1,15 +1,14 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import Block from './Block'
 import FieldString from './FieldString'
 
-export default class BlockComment extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-  }
+type BlockCommentProps = {
+  value?: string
+  onChange(...args: unknown[]): unknown
+};
 
+export default class BlockComment extends React.Component<BlockCommentProps> {
   render() {
     const fieldSpec = {
       doc: "Comments for the current layer. This is non-standard and not in the spec."

src/components/_FieldFont.jsx → src/components/_FieldFont.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
 import Block from './Block'
-import PropTypes from 'prop-types'
 import FieldAutocomplete from './FieldAutocomplete'
 
-export default class FieldFont extends React.Component {
-  static propTypes = {
-    value: PropTypes.array,
-    default: PropTypes.array,
-    fonts: PropTypes.array,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-  }
+type FieldFontProps = {
+  value?: string[]
+  default?: string[]
+  fonts?: unknown[]
+  style?: object
+  onChange(...args: unknown[]): unknown
+  label?: string
+};
 
+export default class FieldFont extends React.Component<FieldFontProps> {
   static defaultProps = {
     fonts: []
   }
@@ -28,7 +28,7 @@ export default class FieldFont extends React.Component {
     }
   }
 
-  changeFont(idx, newValue) {
+  changeFont(idx: number, newValue: string) {
     const changedValues = this.values.slice(0)
     changedValues[idx] = newValue
     const filteredValues = changedValues
@@ -45,7 +45,7 @@ export default class FieldFont extends React.Component {
       >
         <FieldAutocomplete
           value={value}
-          options={this.props.fonts.map(f => [f, f])}
+          options={this.props.fonts!.map(f => [f, f])}
           onChange={this.changeFont.bind(this, i)}
         />
       </li>

src/components/_FieldId.jsx → src/components/_FieldId.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 FieldString from './FieldString'
 
-export default class BlockId extends React.Component {
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    wdKey: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    error: PropTypes.object,
-  }
+type BlockIdProps = {
+  value: string
+  wdKey: string
+  onChange(...args: unknown[]): unknown
+  error?: unknown[]
+};
 
+export default class BlockId extends React.Component<BlockIdProps> {
   render() {
     return <Block label={"ID"} fieldSpec={latest.layer.id}
       data-wd-key={this.props.wdKey}

src/components/_FieldMaxZoom.jsx → src/components/_FieldMaxZoom.tsx

@@ -1,17 +1,16 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldNumber from './FieldNumber'
 
-export default class BlockMaxZoom extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
-    error: PropTypes.object,
-  }
+type BlockMaxZoomProps = {
+  value?: number
+  onChange(...args: unknown[]): unknown
+  error?: unknown[]
+};
 
+export default class BlockMaxZoom extends React.Component<BlockMaxZoomProps> {
   render() {
     return <Block label={"Max Zoom"} fieldSpec={latest.layer.maxzoom}
       error={this.props.error}

src/components/_FieldMinZoom.jsx → src/components/_FieldMinZoom.tsx

@@ -1,17 +1,16 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldNumber from './FieldNumber'
 
-export default class BlockMinZoom extends React.Component {
-  static propTypes = {
-    value: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
-    error: PropTypes.object,
-  }
+type BlockMinZoomProps = {
+  value?: number
+  onChange(...args: unknown[]): unknown
+  error?: unknown[]
+};
 
+export default class BlockMinZoom extends React.Component<BlockMinZoomProps> {
   render() {
     return <Block label={"Min Zoom"} fieldSpec={latest.layer.minzoom}
       error={this.props.error}

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 FieldAutocomplete from './FieldAutocomplete'
 
-export default class BlockSource extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    wdKey: PropTypes.string,
-    onChange: PropTypes.func,
-    sourceIds: PropTypes.array,
-    error: PropTypes.object,
-  }
+type BlockSourceProps = {
+  value?: string
+  wdKey?: string
+  onChange?(...args: unknown[]): unknown
+  sourceIds?: unknown[]
+  error?: unknown[]
+};
 
+export default class BlockSource extends React.Component<BlockSourceProps> {
   static defaultProps = {
     onChange: () => {},
     sourceIds: [],
@@ -28,8 +27,8 @@ export default class BlockSource extends React.Component {
     >
       <FieldAutocomplete
         value={this.props.value}
-        onChange={this.props.onChange}
-        options={this.props.sourceIds.map(src => [src, src])}
+        onChange={this.props.onChange!}
+        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 FieldAutocomplete from './FieldAutocomplete'
 
-export default class BlockSourceLayer extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    onChange: PropTypes.func,
-    sourceLayerIds: PropTypes.array,
-    isFixed: PropTypes.bool,
-  }
+type BlockSourceLayerProps = {
+  value?: string
+  onChange?(...args: unknown[]): unknown
+  sourceLayerIds?: unknown[]
+  isFixed?: boolean
+};
 
+export default class BlockSourceLayer extends React.Component<BlockSourceLayerProps> {
   static defaultProps = {
     onChange: () => {},
     sourceLayerIds: [],
@@ -26,8 +25,8 @@ export default class BlockSourceLayer extends React.Component {
       <FieldAutocomplete
         keepMenuWithinWindowBounds={!!this.props.isFixed}
         value={this.props.value}
-        onChange={this.props.onChange}
-        options={this.props.sourceLayerIds.map(l => [l, l])}
+        onChange={this.props.onChange!}
+        options={this.props.sourceLayerIds!.map(l => [l, l])}
       />
     </Block>
   }

src/components/_FieldSymbol.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import FieldAutocomplete from './FieldAutocomplete'
+
+
+type FieldSymbolProps = {
+  value?: string
+  icons?: unknown[]
+  onChange(...args: unknown[]): unknown
+};
+
+
+export default class FieldSymbol extends React.Component<FieldSymbolProps> {
+  static defaultProps = {
+    icons: []
+  }
+
+  render() {
+    return <FieldAutocomplete
+      value={this.props.value}
+      options={this.props.icons!.map(f => [f, f])}
+      onChange={this.props.onChange}
+    />
+  }
+}
+

src/components/_FieldType.jsx → src/components/_FieldType.tsx

@@ -1,20 +1,19 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import {latest} from '@maplibre/maplibre-gl-style-spec'
 import Block from './Block'
 import FieldSelect from './FieldSelect'
 import FieldString from './FieldString'
 
-export default class BlockType extends React.Component {
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    wdKey: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
-    error: PropTypes.object,
-    disabled: PropTypes.bool,
-  }
+type BlockTypeProps = {
+  value: string
+  wdKey?: string
+  onChange(...args: unknown[]): unknown
+  error?: unknown[]
+  disabled?: boolean
+};
 
+export default class BlockType extends React.Component<BlockTypeProps> {
   static defaultProps = {
     disabled: false,
   }