Migration of jsx files to tsx 1 (#848)

In this PR I have changed some of the jsx files to tsx file. I'm starting off with the "leafs" so that migration of the rest will be easier, hopefully. What I'm basically doing is taking a jsx file, copy paste it into: https://mskelton.dev/ratchet And after that I'm fixing the types as needed. It's not a very long process. Hopefully more PRs will follow and this will be over soon. I don't plan to migrate the storybook as I generally don't understand why is it useful, I'll open an issue to see if anyone thinks differently.
2026-06-14 03:07:25 +00:00 · 2023-12-21 23:46:56 +02:00
parent 3bf0e510e6
commit fa182e66fa
64 changed files with 1009 additions and 859 deletions
@@ -0,0 +1,126 @@
+import React, { ReactElement } from 'react'
+
+import InputColor, { InputColorProps } from './InputColor'
+import InputNumber, { InputNumberProps } from './InputNumber'
+import InputCheckbox, { InputCheckboxProps } from './InputCheckbox'
+import InputString, { InputStringProps } from './InputString'
+import InputArray, { FieldArrayProps } from './InputArray'
+import InputDynamicArray, { FieldDynamicArrayProps } from './InputDynamicArray'
+import InputFont, { FieldFontProps } from './InputFont'
+import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
+import InputEnum, { InputEnumProps } from './InputEnum'
+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
+  fieldSpec: {
+    default?: unknown
+    type: 'number' | 'enum' | 'resolvedImage' | 'formatted' | 'string' | 'color' | 'boolean' | 'array'
+    minimum?: number
+    maximum?: number
+    values?: unknown[]
+    length?: number
+    value?: string
+  }
+  value?: string | number | unknown[] | boolean
+  /** Override the style of the field */
+  style?: object
+  'aria-label'?: string
+  error: unknown[]
+  label: string
+  action: ReactElement
+};
+
+/** Display any field from the Maplibre GL style spec and
+ * choose the correct field component based on the @{fieldSpec}
+ * to display @{value}. */
+export default class SpecField extends React.Component<SpecFieldProps> {
+
+  childNodes() {
+    const commonProps = {
+      error: this.props.error,
+      fieldSpec: this.props.fieldSpec,
+      label: this.props.label,
+      action: this.props.action,
+      style: this.props.style,
+      value: this.props.value,
+      default: this.props.fieldSpec.default,
+      name: this.props.fieldName,
+      onChange: (newValue: string) => this.props.onChange(this.props.fieldName, newValue),
+      'aria-label': this.props['aria-label'],
+    }
+    switch(this.props.fieldSpec.type) {
+      case 'number': return (
+        <InputNumber
+          {...commonProps as InputNumberProps}
+          min={this.props.fieldSpec.minimum}
+          max={this.props.fieldSpec.maximum}
+        />
+      )
+      case 'enum':
+        const options = Object.keys(this.props.fieldSpec.values || []).map(v => [v, capitalize(v)])
+
+        return <InputEnum
+          {...commonProps as Omit<InputEnumProps, "options">}
+          options={options}
+        />
+      case 'resolvedImage':
+      case 'formatted':
+      case 'string':
+        if (iconProperties.indexOf(this.props.fieldName) >= 0) {
+          const options = this.props.fieldSpec.values || [];
+          return <InputAutocomplete
+            {...commonProps as Omit<InputAutocompleteProps, "options">}
+            options={options.map(f => [f, f])}
+          />
+        } else {
+          return <InputString
+            {...commonProps as InputStringProps}
+          />
+        }
+      case 'color': return (
+        <InputColor
+          {...commonProps as InputColorProps}
+        />
+      )
+      case 'boolean': return (
+        <InputCheckbox
+          {...commonProps as InputCheckboxProps}
+        />
+      )
+      case 'array':
+        if(this.props.fieldName === 'text-font') {
+          return <InputFont
+            {...commonProps as FieldFontProps}
+            fonts={this.props.fieldSpec.values}
+          />
+        } else {
+          if (this.props.fieldSpec.length) {
+            return <InputArray
+              {...commonProps as FieldArrayProps}
+              type={this.props.fieldSpec.value}
+              length={this.props.fieldSpec.length}
+            />
+          } else {
+            return <InputDynamicArray
+              {...commonProps as FieldDynamicArrayProps}
+              fieldSpec={this.props.fieldSpec}
+              type={this.props.fieldSpec.value as FieldDynamicArrayProps['type']}
+            />
+          }
+        }
+      default: return null
+    }
+  }
+
+  render() {
+    return (
+      <div data-wd-key={"spec-field:"+this.props.fieldName}>
+        {this.childNodes()}
+      </div>
+    );
+  }
+}