Improve typings of exising components and migrated a few more

src/components/InputArray.tsx

@@ -3,17 +3,17 @@ import InputString from './InputString'
 import InputNumber from './InputNumber'
 
 export type FieldArrayProps = {
-  value: string[] | number[]
+  value: (string | number | undefined)[]
   type?: string
   length?: number
-  default?: string[] | number[]
-  onChange?(...args: unknown[]): unknown
+  default?: (string | number | undefined)[]
+  onChange?(value: (string | number | undefined)[] | undefined): unknown
   'aria-label'?: string
   label?: string
 };
 
 type FieldArrayState = {
-  value: string[] | number[]
+  value: (string | number | undefined)[]
   initialPropsValue: unknown[]
 }
 
@@ -59,7 +59,7 @@ export default class FieldArray extends React.Component<FieldArrayProps, FieldAr
     });
   }
 
-  changeValue(idx: number, newValue: string) {
+  changeValue(idx: number, newValue: string | number | undefined) {
     const value = this.state.value.slice(0);
     value[idx] = newValue;
 
@@ -93,7 +93,7 @@ export default class FieldArray extends React.Component<FieldArrayProps, FieldAr
           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)}
+          onChange={(v) => this.changeValue(i, v)}
           aria-label={this.props['aria-label'] || this.props.label}
         />
       } else {

src/components/InputDynamicArray.tsx

@@ -11,10 +11,10 @@ import InputUrl from './InputUrl'
 
 
 export type FieldDynamicArrayProps = {
-  value?: (string | number)[]
+  value?: (string | number | undefined)[]
   type?: 'url' | 'number' | 'enum' | 'string'
-  default?: (string | number)[]
-  onChange?(...args: unknown[]): unknown
+  default?: (string | number | undefined)[]
+  onChange?(values: (string | number | undefined)[] | undefined): unknown
   style?: object
   fieldSpec?: {
     values?: any
@@ -25,7 +25,7 @@ export type FieldDynamicArrayProps = {
 
 
 export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
-  changeValue(idx: number, newValue: string | number) {
+  changeValue(idx: number, newValue: string | number | undefined) {
     const values = this.values.slice(0)
     values[idx] = newValue
     if (this.props.onChange) this.props.onChange(values)

src/components/InputNumber.tsx

@@ -7,7 +7,7 @@ export type InputNumberProps = {
   default?: number
   min?: number
   max?: number
-  onChange?(...args: unknown[]): unknown
+  onChange?(value: number | undefined): unknown
   allowRange?: boolean
   rangeStep?: number
   wdKey?: string

src/components/InputSelect.tsx

@@ -5,7 +5,7 @@ export type InputSelectProps = {
   "data-wd-key"?: string
   options: [string, any][] | string[]
   style?: object
-  onChange(...args: unknown[]): unknown
+  onChange(value: string): unknown
   title?: string
   'aria-label'?: string
 };

src/components/InputSpec.tsx

@@ -14,11 +14,11 @@ 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?(fieldName: string | undefined, value: number | undefined | (string | number | undefined)[]): unknown
   fieldName?: string
-  fieldSpec: {
+  fieldSpec?: {
     default?: unknown
-    type: 'number' | 'enum' | 'resolvedImage' | 'formatted' | 'string' | 'color' | 'boolean' | 'array'
+    type?: 'number' | 'enum' | 'resolvedImage' | 'formatted' | 'string' | 'color' | 'boolean' | 'array'
     minimum?: number
     maximum?: number
     values?: unknown[]
@@ -29,9 +29,9 @@ export type SpecFieldProps = {
   /** Override the style of the field */
   style?: object
   'aria-label'?: string
-  error: unknown[]
-  label: string
-  action: ReactElement
+  error?: unknown[]
+  label?: string
+  action?: ReactElement
 };
 
 /** Display any field from the Maplibre GL style spec and
@@ -47,12 +47,12 @@ export default class SpecField extends React.Component<SpecFieldProps> {
       action: this.props.action,
       style: this.props.style,
       value: this.props.value,
-      default: this.props.fieldSpec.default,
+      default: this.props.fieldSpec?.default,
       name: this.props.fieldName,
-      onChange: (newValue: string) => this.props.onChange!(this.props.fieldName, newValue),
+      onChange: (newValue: number | undefined | (string | number | undefined)[]) => this.props.onChange!(this.props.fieldName, newValue),
       'aria-label': this.props['aria-label'],
     }
-    switch(this.props.fieldSpec.type) {
+    switch(this.props.fieldSpec?.type) {
       case 'number': return (
         <InputNumber
           {...commonProps as InputNumberProps}

src/components/InputString.tsx

@@ -5,8 +5,8 @@ export type InputStringProps = {
   value?: string
   style?: object
   default?: string
-  onChange?(...args: unknown[]): unknown
-  onInput?(...args: unknown[]): unknown
+  onChange?(value: string | undefined): unknown
+  onInput?(value: string | undefined): unknown
   multi?: boolean
   required?: boolean
   disabled?: boolean

src/components/ModalSources.tsx

@@ -233,7 +233,7 @@ class AddSource extends React.Component<AddSourceProps, AddSourceState> {
           ['image', 'Image'],
           ['video', 'Video'],
         ]}
-        onChange={(mode: EditorMode) => this.setState({mode: mode, source: this.defaultSource(mode)})}
+        onChange={mode => this.setState({mode: mode as EditorMode, source: this.defaultSource(mode as EditorMode)})}
         value={this.state.mode as string}
       />
       <ModalSourcesTypeEditor

src/components/SpecField.tsx

@@ -21,9 +21,9 @@ type SpecFieldProps = InputFieldSpecProps & {
 
 export default class SpecField extends React.Component<SpecFieldProps> {
   render() {
-    const fieldType = this.props.fieldSpec.type;
+    const fieldType = this.props.fieldSpec?.type;
 
-    const typeBlockFn = typeMap[fieldType];
+    const typeBlockFn = typeMap[fieldType!];
 
     let TypeBlock;
     if (typeBlockFn) {