More components migration

src/components/FieldEnum.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import InputEnum, {InputEnumProps} from './InputEnum'
+import Fieldset from './Fieldset';
+
+
+type FieldEnumProps = InputEnumProps & { label : string };
+
+
+export default class FieldEnum extends React.Component<FieldEnumProps> {
+  render() {
+    const {props} = this;
+
+    return <Fieldset label={props.label}>
+      <InputEnum {...props} />
+    </Fieldset>
+  }
+}

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

src/components/InputArray.jsx → src/components/InputArray.tsx

@@ -1,24 +1,29 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import InputString from './InputString'
 import InputNumber from './InputNumber'
 
-export default class FieldArray extends React.Component {
-  static propTypes = {
-    value: PropTypes.array,
-    type: PropTypes.string,
-    length: PropTypes.number,
-    default: PropTypes.array,
-    onChange: PropTypes.func,
-    'aria-label': PropTypes.string,
-  }
+type FieldArrayProps = {
+  value: string[]
+  type?: string
+  length?: number
+  default?: string[] | number[]
+  onChange?(...args: unknown[]): unknown
+  'aria-label'?: string
+  label?: string
+};
+
+type FieldArrayState = {
+  value: string[] | number[]
+  initialPropsValue: unknown[]
+}
 
+export default class FieldArray extends React.Component<FieldArrayProps, FieldArrayState> {
   static defaultProps = {
     value: [],
     default: [],
   }
 
-  constructor (props) {
+  constructor (props: FieldArrayProps) {
     super(props);
     this.state = {
       value: this.props.value.slice(0),
@@ -27,8 +32,8 @@ export default class FieldArray extends React.Component {
     };
   }
 
-  static getDerivedStateFromProps(props, state) {
-    const value = [];
+  static getDerivedStateFromProps(props: FieldArrayProps, state: FieldArrayState) {
+    const value: any[] = [];
     const initialPropsValue = state.initialPropsValue.slice(0);
 
     Array(props.length).fill(null).map((_, i) => {
@@ -47,24 +52,24 @@ export default class FieldArray extends React.Component {
     };
   }
 
-  isComplete (value) {
+  isComplete(value: unknown[]) {
     return Array(this.props.length).fill(null).every((_, i) => {
       const val = value[i]
       return !(val === undefined || val === "");
     });
   }
 
-  changeValue(idx, newValue) {
+  changeValue(idx: number, newValue: string) {
     const value = this.state.value.slice(0);
     value[idx] = newValue;
 
     this.setState({
       value,
     }, () => {
-      if (this.isComplete(value)) {
+      if (this.isComplete(value) && this.props.onChange) {
         this.props.onChange(value);
       }
-      else {
+      else if (this.props.onChange){
         // Unset until complete
         this.props.onChange(undefined);
       }
@@ -85,17 +90,17 @@ export default class FieldArray extends React.Component {
       if(this.props.type === 'number') {
         return <InputNumber
           key={i}
-          default={containsValues ? undefined : this.props.default[i]}
-          value={value[i]}
+          default={containsValues || !this.props.default ? undefined : this.props.default[i] as number}
+          value={value[i] as number}
           required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
           aria-label={this.props['aria-label'] || this.props.label}
         />
       } else {
         return <InputString
           key={i}
-          default={containsValues ? undefined : this.props.default[i]}
-          value={value[i]}
+          default={containsValues || !this.props.default ? undefined : this.props.default[i] as string}
+          value={value[i] as string}
           required={containsValues ? true : false}
           onChange={this.changeValue.bind(this, i)}
           aria-label={this.props['aria-label'] || this.props.label}

src/components/InputEnum.jsx → src/components/InputEnum.tsx

@@ -1,10 +1,9 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import InputSelect from './InputSelect'
 import InputMultiInput from './InputMultiInput'
 
 
-function optionsLabelLength(options) {
+function optionsLabelLength(options: any[]) {
   let sum = 0;
   options.forEach(([_, label]) => {
     sum += label.length
@@ -13,33 +12,35 @@ function optionsLabelLength(options) {
 }
 
 
-export default class InputEnum extends React.Component {
-  static propTypes = {
-    "data-wd-key": PropTypes.string,
-    value: PropTypes.string,
-    style: PropTypes.object,
-    default: PropTypes.string,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    options: PropTypes.array,
-    'aria-label': PropTypes.string,
-  }
+export type InputEnumProps = {
+  "data-wd-key"?: string
+  value?: string
+  style?: object
+  default?: string
+  name: string
+  onChange(...args: unknown[]): unknown
+  options: any[]
+  'aria-label'?: string
+  label?: string
+};
+
 
+export default class InputEnum extends React.Component<InputEnumProps> {
   render() {
     const {options, value, onChange, name, label} = this.props;
 
     if(options.length <= 3 && optionsLabelLength(options) <= 20) {
       return <InputMultiInput
         name={name}
         options={options}
-        value={value || this.props.default}
+        value={(value || this.props.default)!}
         onChange={onChange}
         aria-label={this.props['aria-label'] || label}
       />
     } else {
       return <InputSelect
         options={options}
-        value={value || this.props.default}
+        value={(value || this.props.default)!}
         onChange={onChange}
         aria-label={this.props['aria-label'] || label}
       />

src/components/InputFont.jsx → src/components/InputFont.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import InputAutocomplete from './InputAutocomplete'
 
-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,
-    'aria-label': PropTypes.string,
-  }
-
+type FieldFontProps = {
+  name: string
+  value?: string[]
+  default?: string[]
+  fonts?: unknown[]
+  style?: object
+  onChange(...args: unknown[]): unknown
+  'aria-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
@@ -46,7 +46,7 @@ export default class FieldFont extends React.Component {
         <InputAutocomplete
           aria-label={this.props['aria-label'] || this.props.name}
           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/InputMultiInput.jsx → src/components/InputMultiInput.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import InputButton from './InputButton'
 
-export default class InputMultiInput extends React.Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-    options: PropTypes.array.isRequired,
-    onChange: PropTypes.func.isRequired,
-  }
+type InputMultiInputProps = {
+  name: string
+  value: string
+  options: any[]
+  onChange(...args: unknown[]): unknown
+  'aria-label'?: string
+};
 
+export default class InputMultiInput extends React.Component<InputMultiInputProps> {
   render() {
     let options = this.props.options
     if(options.length > 0 && !Array.isArray(options[0])) {
@@ -25,7 +24,7 @@ export default class InputMultiInput extends React.Component {
       >
         <input type="radio"
           name={this.props.name}
-          onChange={e => this.props.onChange(val)}
+          onChange={_e => this.props.onChange(val)}
           value={val}
           checked={val === selectedValue}
         />