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
+  onChange?(...args: unknown[]): unknown
-  fieldName: string
+  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,15 +21,13 @@ type SpecFieldProps = InputFieldSpecProps & {
 
 export default class SpecField extends React.Component<SpecFieldProps> {
   render() {
-    const {props} = this;
+    const fieldType = this.props.fieldSpec.type;
-
-    const fieldType = 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);
@@ -37,11 +35,11 @@ export default class SpecField extends React.Component<SpecFieldProps> {
     }
 
     return <TypeBlock
-      label={props.label}
+      label={this.props.label}
-      action={props.action}
+      action={this.props.action}
       fieldSpec={this.props.fieldSpec}
     >
-      <InputSpec {...props} />
+      <InputSpec {...this.props} />
     </TypeBlock>
   }
 }

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 {
+type DeleteStopButtonProps = {
-  static propTypes = {
+  onClick?(...args: unknown[]): unknown
-    onClick: PropTypes.func,
+};
-  }
 
+
+export default class DeleteStopButton extends React.Component<DeleteStopButtonProps> {
   render() {
     return <InputButton
       className="maputnik-delete-stop"

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 {
+type BlockCommentProps = {
-  static propTypes = {
+  value?: string
-    value: PropTypes.string,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+};
-  }
 
+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.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 {
+type FieldFontProps = {
-  static propTypes = {
+  value?: string[]
-    value: PropTypes.array,
+  default?: string[]
-    default: PropTypes.array,
+  fonts?: unknown[]
-    fonts: PropTypes.array,
+  style?: object
-    style: PropTypes.object,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+  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.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 {
+type BlockIdProps = {
-  static propTypes = {
+  value: string
-    value: PropTypes.string.isRequired,
+  wdKey: string
-    wdKey: PropTypes.string.isRequired,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+  error?: unknown[]
-    error: PropTypes.object,
+};
-  }
 
+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.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 {
+type BlockMaxZoomProps = {
-  static propTypes = {
+  value?: number
-    value: PropTypes.number,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+  error?: unknown[]
-    error: PropTypes.object,
+};
-  }
 
+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.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 {
+type BlockMinZoomProps = {
-  static propTypes = {
+  value?: number
-    value: PropTypes.number,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+  error?: unknown[]
-    error: PropTypes.object,
+};
-  }
 
+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.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 {
+type BlockSourceProps = {
-  static propTypes = {
+  value?: string
-    value: PropTypes.string,
+  wdKey?: string
-    wdKey: PropTypes.string,
+  onChange?(...args: unknown[]): unknown
-    onChange: PropTypes.func,
+  sourceIds?: unknown[]
-    sourceIds: PropTypes.array,
+  error?: unknown[]
-    error: PropTypes.object,
+};
-  }
 
+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}
+        onChange={this.props.onChange!}
-        options={this.props.sourceIds.map(src => [src, src])}
+        options={this.props.sourceIds!.map(src => [src, src])}
       />
     </Block>
   }

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 {
+type BlockSourceLayerProps = {
-  static propTypes = {
+  value?: string
-    value: PropTypes.string,
+  onChange?(...args: unknown[]): unknown
-    onChange: PropTypes.func,
+  sourceLayerIds?: unknown[]
-    sourceLayerIds: PropTypes.array,
+  isFixed?: boolean
-    isFixed: PropTypes.bool,
+};
-  }
 
+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}
+        onChange={this.props.onChange!}
-        options={this.props.sourceLayerIds.map(l => [l, l])}
+        options={this.props.sourceLayerIds!.map(l => [l, l])}
       />
     </Block>
   }

src/components/_FieldSymbol.jsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import FieldAutocomplete from './FieldAutocomplete'
-
-
-export default class FieldSymbol extends React.Component {
-  static propTypes = {
-    value: PropTypes.string,
-    icons: PropTypes.array,
-    style: PropTypes.object,
-    onChange: PropTypes.func.isRequired,
-  }
-
-  static defaultProps = {
-    icons: []
-  }
-
-  render() {
-    return <FieldAutocomplete
-      value={this.props.value}
-      options={this.props.icons.map(f => [f, f])}
-      onChange={this.props.onChange}
-      wrapperStyle={this.props.style}
-    />
-  }
-}
-

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.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 {
+type BlockTypeProps = {
-  static propTypes = {
+  value: string
-    value: PropTypes.string.isRequired,
+  wdKey?: string
-    wdKey: PropTypes.string,
+  onChange(...args: unknown[]): unknown
-    onChange: PropTypes.func.isRequired,
+  error?: unknown[]
-    error: PropTypes.object,
+  disabled?: boolean
-    disabled: PropTypes.bool,
+};
-  }
 
+export default class BlockType extends React.Component<BlockTypeProps> {
   static defaultProps = {
     disabled: false,
   }

src/components/_FunctionButtons.tsx

@@ -1,37 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import InputButton from './InputButton'
 import {MdFunctions, MdInsertChart} from 'react-icons/md'
 import {mdiFunctionVariant} from '@mdi/js';
 
+type FunctionInputButtonsProps = {
+  fieldSpec?: any
+  onZoomClick?(...args: unknown[]): unknown
+  onDataClick?(...args: unknown[]): unknown
+  onExpressionClick?(...args: unknown[]): unknown
+};
 
-/**
+export default class FunctionInputButtons extends React.Component<FunctionInputButtonsProps> {
- * So here we can't just check is `Array.isArray(value)` because certain
- * properties accept arrays as values, for example `text-font`. So we must try
- * and create an expression.
- */
-function isExpression(value, fieldSpec={}) {
-  if (!Array.isArray(value)) {
-    return false;
-  }
-  try {
-    expression.createExpression(value, fieldSpec);
-    return true;
-  }
-  catch (err) {
-    return false;
-  }
-}
-
-export default class FunctionInputButtons extends React.Component {
-  static propTypes = {
-    fieldSpec: PropTypes.object,
-    onZoomClick: PropTypes.func,
-    onDataClick: PropTypes.func,
-    onExpressionClick: PropTypes.func,
-  }
-
   render() {
     let makeZoomInputButton, makeDataInputButton, expressionInputButton;
 

src/components/_SpecProperty.tsx

@@ -1,25 +1,24 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 import SpecField from './SpecField'
 import FunctionButtons from './_FunctionButtons'
-import Block from './Block'
 
 import labelFromFieldName from './_labelFromFieldName'
 
 
-export default class SpecProperty extends React.Component {
+type SpecPropertyProps = {
-  static propTypes = {
+  onZoomClick(...args: unknown[]): unknown
-    onZoomClick: PropTypes.func.isRequired,
+  onDataClick(...args: unknown[]): unknown
-    onDataClick: PropTypes.func.isRequired,
+  fieldName?: string
-    fieldName: PropTypes.string,
+  fieldType?: string
-    fieldType: PropTypes.string,
+  fieldSpec?: any
-    fieldSpec: PropTypes.object,
+  value?: any
-    value: PropTypes.any,
+  errors?: unknown[]
-    errors: PropTypes.object,
+  onExpressionClick?(...args: unknown[]): unknown
-    onExpressionClick: PropTypes.func,
+};
-  }
 
+
+export default class SpecProperty extends React.Component<SpecPropertyProps> {
   static defaultProps = {
     errors: {},
   }
@@ -31,17 +30,16 @@ export default class SpecProperty extends React.Component {
       fieldSpec={this.props.fieldSpec}
       onZoomClick={this.props.onZoomClick}
       onDataClick={this.props.onDataClick} 
-      value={this.props.value}
       onExpressionClick={this.props.onExpressionClick} 
     />
 
-    const error = errors[fieldType+"."+fieldName];
+    const error = errors![fieldType+"."+fieldName as any] as any;
 
     return <SpecField
       {...this.props}
       error={error}
       fieldSpec={this.props.fieldSpec}
-      label={labelFromFieldName(this.props.fieldName)}
+      label={labelFromFieldName(this.props.fieldName || '')}
       action={functionBtn}
     />
   }

src/components/_labelFromFieldName.ts

@@ -1,6 +1,6 @@
 import capitalize from 'lodash.capitalize'
 
-export default function labelFromFieldName(fieldName) {
+export default function labelFromFieldName(fieldName: string) {
   let label;
   const parts = fieldName.split('-');
   if (parts.length > 1) {