Refactor Field components with const arrow functions (#1261)

## Summary
- convert all remaining Field components to const arrow functions
- document the refactor in the CHANGELOG

## Testing
- `npm run lint`
- `npm run build`


------
https://chatgpt.com/codex/tasks/task_e_68684db1b6b88331837307a54e3f9dc1

CHANGELOG.md

@@ -14,6 +14,7 @@
 - When loading a style into localStorage that causes a QuotaExceededError, purge localStorage and retry
 - Remove react-autobind dependency
 - Remove usage of legacy `childContextTypes` API
+- Refactor Field components to use arrow function syntax
 - Replace react-autocomplete with Downshift in the autocomplete component
 - _...Add new stuff here..._
 

src/components/FieldArray.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import InputArray, { FieldArrayProps as InputArrayProps } from './InputArray'
 import Fieldset from './Fieldset'
 
@@ -9,10 +8,12 @@ type FieldArrayProps = InputArrayProps & {
   }
 };
 
-export default class FieldArray extends React.Component<FieldArrayProps> {
-  render() {
-    return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
-      <InputArray {...this.props} />
+const FieldArray: React.FC<FieldArrayProps> = (props) => {
+  return (
+    <Fieldset label={props.label} fieldSpec={props.fieldSpec}>
+      <InputArray {...props} />
     </Fieldset>
-  }
-}
+  );
+};
+
+export default FieldArray;

src/components/FieldAutocomplete.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Block from './Block'
 import InputAutocomplete, { InputAutocompleteProps } from './InputAutocomplete'
 
@@ -8,10 +7,12 @@ type FieldAutocompleteProps = InputAutocompleteProps & {
 };
 
 
-export default class FieldAutocomplete extends React.Component<FieldAutocompleteProps> {
-  render() {
-    return <Block label={this.props.label}>
-      <InputAutocomplete {...this.props} />
+const FieldAutocomplete: React.FC<FieldAutocompleteProps> = (props) => {
+  return (
+    <Block label={props.label}>
+      <InputAutocomplete {...props} />
     </Block>
-  }
-}
+  );
+};
+
+export default FieldAutocomplete;

src/components/FieldCheckbox.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Block from './Block'
 import InputCheckbox, {InputCheckboxProps} from './InputCheckbox'
 
@@ -8,10 +7,12 @@ type FieldCheckboxProps = InputCheckboxProps & {
 };
 
 
-export default class FieldCheckbox extends React.Component<FieldCheckboxProps> {
-  render() {
-    return <Block label={this.props.label}>
-      <InputCheckbox {...this.props} />
+const FieldCheckbox: React.FC<FieldCheckboxProps> = (props) => {
+  return (
+    <Block label={props.label}>
+      <InputCheckbox {...props} />
     </Block>
-  }
-}
+  );
+};
+
+export default FieldCheckbox;

src/components/FieldColor.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Block from './Block'
 import InputColor, {InputColorProps} from './InputColor'
 
@@ -11,10 +10,12 @@ type FieldColorProps = InputColorProps & {
 };
 
 
-export default class FieldColor extends React.Component<FieldColorProps> {
-  render() {
-    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
-      <InputColor {...this.props} />
+const FieldColor: React.FC<FieldColorProps> = (props) => {
+  return (
+    <Block label={props.label} fieldSpec={props.fieldSpec}>
+      <InputColor {...props} />
     </Block>
-  }
-}
+  );
+};
+
+export default FieldColor;

src/components/FieldComment.tsx

@@ -10,29 +10,31 @@ type FieldCommentInternalProps = {
   error: {message: string}
 } & WithTranslation;
 
-class FieldCommentInternal extends React.Component<FieldCommentInternalProps> {
-  render() {
-    const t = this.props.t;
-    const fieldSpec = {
-      doc: t("Comments for the current layer. This is non-standard and not in the spec."),
-    };
+const FieldCommentInternal: React.FC<FieldCommentInternalProps> = (props) => {
+  const t = props.t;
+  const fieldSpec = {
+    doc: t(
+      "Comments for the current layer. This is non-standard and not in the spec."
+    ),
+  };
 
-    return <Block
+  return (
+    <Block
       label={t("Comments")}
       fieldSpec={fieldSpec}
       data-wd-key="layer-comment"
-      error={this.props.error}
+      error={props.error}
     >
       <InputString
         multi={true}
-        value={this.props.value}
-        onChange={this.props.onChange}
+        value={props.value}
+        onChange={props.onChange}
         default={t("Comment...")}
         data-wd-key="layer-comment.input"
       />
     </Block>
-  }
-}
+  );
+};
 
 const FieldComment = withTranslation()(FieldCommentInternal);
 export default FieldComment;

src/components/FieldDocLabel.tsx

@@ -9,57 +9,45 @@ type FieldDocLabelProps = {
   onToggleDoc?(...args: unknown[]): unknown
 };
 
-type FieldDocLabelState = {
-  open: boolean
-};
 
-export default class FieldDocLabel extends React.Component<FieldDocLabelProps, FieldDocLabelState> {
-  constructor (props: FieldDocLabelProps) {
-    super(props);
-    this.state = {
-      open: false,
+const FieldDocLabel: React.FC<FieldDocLabelProps> = (props) => {
+  const [open, setOpen] = React.useState(false);
+
+  const onToggleDoc = (state: boolean) => {
+    setOpen(state);
+    if (props.onToggleDoc) {
+      props.onToggleDoc(state);
     }
-  }
+  };
 
-  onToggleDoc = (open: boolean) => {
-    this.setState({
-      open,
-    }, () => {
-      if (this.props.onToggleDoc) {
-        this.props.onToggleDoc(this.state.open);
-      }
-    });
-  }
+  const { label, fieldSpec } = props;
+  const { doc } = fieldSpec || {};
 
-  render() {
-    const {label, fieldSpec} = this.props;
-    const {doc} = fieldSpec || {};
-
-    if (doc) {
-      return <label className="maputnik-doc-wrapper">
+  if (doc) {
+    return (
+      <label className="maputnik-doc-wrapper">
         <div className="maputnik-doc-target">
           {label}
           {'\xa0'}
           <button
-            aria-label={this.state.open ? "close property documentation" : "open property documentation"}
-            className={`maputnik-doc-button maputnik-doc-button--${this.state.open ? 'open' : 'closed'}`}
-            onClick={() => this.onToggleDoc(!this.state.open)}
-            data-wd-key={'field-doc-button-'+label}
+            aria-label={open ? 'close property documentation' : 'open property documentation'}
+            className={`maputnik-doc-button maputnik-doc-button--${open ? 'open' : 'closed'}`}
+            onClick={() => onToggleDoc(!open)}
+            data-wd-key={'field-doc-button-' + label}
           >
-            {this.state.open ? <MdHighlightOff /> : <MdInfoOutline />}
+            {open ? <MdHighlightOff /> : <MdInfoOutline />}
           </button>
         </div>
       </label>
-    }
-    else if (label) {
-      return <label className="maputnik-doc-wrapper">
-        <div className="maputnik-doc-target">
-          {label}
-        </div>
+    );
+  } else if (label) {
+    return (
+      <label className="maputnik-doc-wrapper">
+        <div className="maputnik-doc-target">{label}</div>
       </label>
-    }
-    else {
-      <div />
-    }
+    );
   }
-}
+  return <div />;
+};
+
+export default FieldDocLabel;

src/components/FieldDynamicArray.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import InputDynamicArray, {FieldDynamicArrayProps as InputDynamicArrayProps} from './InputDynamicArray'
 import Fieldset from './Fieldset'
 
@@ -6,10 +5,12 @@ type FieldDynamicArrayProps = InputDynamicArrayProps & {
   name?: string
 };
 
-export default class FieldDynamicArray extends React.Component<FieldDynamicArrayProps> {
-  render() {
-    return <Fieldset label={this.props.label}>
-      <InputDynamicArray {...this.props} />
+const FieldDynamicArray: React.FC<FieldDynamicArrayProps> = (props) => {
+  return (
+    <Fieldset label={props.label}>
+      <InputDynamicArray {...props} />
     </Fieldset>
-  }
-}
+  );
+};
+
+export default FieldDynamicArray;

src/components/FieldEnum.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import InputEnum, {InputEnumProps} from './InputEnum'
 import Fieldset from './Fieldset';
 
@@ -11,10 +10,12 @@ type FieldEnumProps = InputEnumProps & {
 };
 
 
-export default class FieldEnum extends React.Component<FieldEnumProps> {
-  render() {
-    return <Fieldset label={this.props.label} fieldSpec={this.props.fieldSpec}>
-      <InputEnum {...this.props} />
+const FieldEnum: React.FC<FieldEnumProps> = (props) => {
+  return (
+    <Fieldset label={props.label} fieldSpec={props.fieldSpec}>
+      <InputEnum {...props} />
     </Fieldset>
-  }
-}
+  );
+};
+
+export default FieldEnum;

src/components/FieldFunction.tsx

@@ -111,296 +111,268 @@ type FieldFunctionProps = {
   value?: any
 };
 
-type FieldFunctionState = {
-  dataType: string
-  isEditing: boolean
-}
 
 /** Supports displaying spec field for zoom function objects
  * https://www.mapbox.com/mapbox-gl-style-spec/#types-function-zoom-property
  */
-export default class FieldFunction extends React.Component<FieldFunctionProps, FieldFunctionState> {
-  constructor (props: FieldFunctionProps) {
-    super(props);
-    this.state = {
-      dataType: getDataType(props.value, props.fieldSpec),
-      isEditing: false,
-    }
-  }
+const FieldFunction: React.FC<FieldFunctionProps> = (props) => {
+  const [dataType, setDataType] = React.useState(
+    getDataType(props.value, props.fieldSpec)
+  );
+  const [isEditing, setIsEditing] = React.useState(false);
 
-  static getDerivedStateFromProps(props: Readonly<FieldFunctionProps>, state: FieldFunctionState) {
-    // Because otherwise when editing values we end up accidentally changing field type.
-    if (state.isEditing) {
-      return {};
+  React.useEffect(() => {
+    if (!isEditing) {
+      setDataType(getDataType(props.value, props.fieldSpec));
     }
-    else {
-      return {
-        isEditing: false,
-        dataType: getDataType(props.value, props.fieldSpec)
-      };
-    }
-  }
+  }, [props.value, props.fieldSpec, isEditing]);
 
-  getFieldFunctionType(fieldSpec: any) {
+  const getFieldFunctionType = (fieldSpec: any) => {
     if (fieldSpec.expression.interpolated) {
-      return "exponential"
+      return 'exponential';
     }
-    if (fieldSpec.type === "number") {
-      return "interval"
+    if (fieldSpec.type === 'number') {
+      return 'interval';
     }
-    return "categorical"
-  }
+    return 'categorical';
+  };
 
-  addStop = () => {
-    const stops = this.props.value.stops.slice(0)
-    const lastStop = stops[stops.length - 1]
-    if (typeof lastStop[0] === "object") {
+  const addStop = () => {
+    const stops = props.value.stops.slice(0);
+    const lastStop = stops[stops.length - 1];
+    if (typeof lastStop[0] === 'object') {
       stops.push([
-        {zoom: lastStop[0].zoom + 1, value: lastStop[0].value},
-        lastStop[1]
-      ])
-    }
-    else {
-      stops.push([lastStop[0] + 1, lastStop[1]])
+        { zoom: lastStop[0].zoom + 1, value: lastStop[0].value },
+        lastStop[1],
+      ]);
+    } else {
+      stops.push([lastStop[0] + 1, lastStop[1]]);
     }
 
     const changedValue = {
-      ...this.props.value,
+      ...props.value,
       stops: stops,
-    }
+    };
 
-    this.props.onChange(this.props.fieldName, changedValue)
-  }
+    props.onChange(props.fieldName, changedValue);
+  };
 
-  deleteExpression = () => {
-    const {fieldSpec, fieldName} = this.props;
-    this.props.onChange(fieldName, fieldSpec.default);
-    this.setState({
-      dataType: "value",
-    });
-  }
+  const deleteExpression = () => {
+    const { fieldSpec, fieldName } = props;
+    props.onChange(fieldName, fieldSpec.default);
+    setDataType('value');
+  };
 
-  deleteStop = (stopIdx: number) => {
-    const stops = this.props.value.stops.slice(0)
-    stops.splice(stopIdx, 1)
+  const deleteStop = (stopIdx: number) => {
+    const stops = props.value.stops.slice(0);
+    stops.splice(stopIdx, 1);
 
-    let changedValue = {
-      ...this.props.value,
+    let changedValue: any = {
+      ...props.value,
       stops: stops,
+    };
+
+    if (stops.length === 1) {
+      changedValue = stops[0][1];
     }
 
-    if(stops.length === 1) {
-      changedValue = stops[0][1]
-    }
+    props.onChange(props.fieldName, changedValue);
+  };
 
-    this.props.onChange(this.props.fieldName, changedValue)
-  }
+  const makeZoomFunction = () => {
+    const { value } = props;
 
-  makeZoomFunction = () => {
-    const {value} = this.props;
-
-    let zoomFunc;
-    if (typeof(value) === "object") {
+    let zoomFunc: any;
+    if (typeof value === 'object') {
       if (value.stops) {
         zoomFunc = {
           base: value.base,
           stops: value.stops.map((stop: Stop) => {
-            return [stop[0].zoom, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
-          })
-        }
-      }
-      else {
+            return [stop[0].zoom, stop[1] || findDefaultFromSpec(props.fieldSpec)];
+          }),
+        };
+      } else {
         zoomFunc = {
           base: value.base,
           stops: [
-            [6, findDefaultFromSpec(this.props.fieldSpec)],
-            [10, findDefaultFromSpec(this.props.fieldSpec)]
-          ]
-        }
+            [6, findDefaultFromSpec(props.fieldSpec)],
+            [10, findDefaultFromSpec(props.fieldSpec)],
+          ],
+        };
       }
-    }
-    else {
+    } else {
       zoomFunc = {
         stops: [
-          [6, value || findDefaultFromSpec(this.props.fieldSpec)],
-          [10, value || findDefaultFromSpec(this.props.fieldSpec)]
-        ]
-      }
+          [6, value || findDefaultFromSpec(props.fieldSpec)],
+          [10, value || findDefaultFromSpec(props.fieldSpec)],
+        ],
+      };
     }
 
-    this.props.onChange(this.props.fieldName, zoomFunc)
-  }
+    props.onChange(props.fieldName, zoomFunc);
+  };
 
-  undoExpression = () => {
-    const {value, fieldName} = this.props;
+  const undoExpression = () => {
+    const { value, fieldName } = props;
 
     if (isGetExpression(value)) {
-      this.props.onChange(fieldName, {
-        "type": "identity",
-        "property": value[1]
-      });
-      this.setState({
-        dataType: "value",
+      props.onChange(fieldName, {
+        type: 'identity',
+        property: value[1],
       });
+      setDataType('value');
+    } else if (isLiteralExpression(value)) {
+      props.onChange(fieldName, value[1]);
+      setDataType('value');
     }
-    else if (isLiteralExpression(value)) {
-      this.props.onChange(fieldName, value[1]);
-      this.setState({
-        dataType: "value",
-      });
-    }
-  }
+  };
 
-  canUndo = () => {
-    const {value, fieldSpec} = this.props;
+  const canUndo = () => {
+    const { value, fieldSpec } = props;
     return (
       isGetExpression(value) ||
       isLiteralExpression(value) ||
       isPrimative(value) ||
-      (Array.isArray(value) && fieldSpec.type === "array")
+      (Array.isArray(value) && fieldSpec.type === 'array')
     );
-  }
+  };
 
-  makeExpression = () => {
-    const {value, fieldSpec} = this.props;
+  const makeExpression = () => {
+    const { value, fieldSpec } = props;
     let expression;
 
-    if (typeof(value) === "object" && 'stops' in value) {
+    if (typeof value === 'object' && 'stops' in value) {
       expression = styleFunction.convertFunction(value, fieldSpec);
+    } else if (isIdentityProperty(value)) {
+      expression = ['get', value.property];
+    } else {
+      expression = ['literal', value || props.fieldSpec.default];
     }
-    else if (isIdentityProperty(value)) {
-      expression = ["get", value.property];
-    }
-    else {
-      expression = ["literal", value || this.props.fieldSpec.default];
-    }
-    this.props.onChange(this.props.fieldName, expression);
-  }
+    props.onChange(props.fieldName, expression);
+  };
 
-  makeDataFunction = () => {
-    const functionType = this.getFieldFunctionType(this.props.fieldSpec);
+  const makeDataFunction = () => {
+    const functionType = getFieldFunctionType(props.fieldSpec);
     const stopValue = functionType === 'categorical' ? '' : 0;
-    const {value} = this.props;
+    const { value } = props;
     let dataFunc;
 
-    if (typeof(value) === "object") {
+    if (typeof value === 'object') {
       if (value.stops) {
         dataFunc = {
-          property: "",
+          property: '',
           type: functionType,
           base: value.base,
           stops: value.stops.map((stop: Stop) => {
-            return [{zoom: stop[0], value: stopValue}, stop[1] || findDefaultFromSpec(this.props.fieldSpec)];
-          })
-        }
-      }
-      else {
+            return [{ zoom: stop[0], value: stopValue }, stop[1] || findDefaultFromSpec(props.fieldSpec)];
+          }),
+        };
+      } else {
         dataFunc = {
-          property: "",
+          property: '',
           type: functionType,
           base: value.base,
           stops: [
-            [{zoom: 6, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)],
-            [{zoom: 10, value: stopValue}, findDefaultFromSpec(this.props.fieldSpec)]
-          ]
-        }
+            [{ zoom: 6, value: stopValue }, findDefaultFromSpec(props.fieldSpec)],
+            [{ zoom: 10, value: stopValue }, findDefaultFromSpec(props.fieldSpec)],
+          ],
+        };
       }
-    }
-    else {
+    } else {
       dataFunc = {
-        property: "",
+        property: '',
         type: functionType,
         base: value.base,
         stops: [
-          [{zoom: 6, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)],
-          [{zoom: 10, value: stopValue}, this.props.value || findDefaultFromSpec(this.props.fieldSpec)]
-        ]
-      }
+          [{ zoom: 6, value: stopValue }, props.value || findDefaultFromSpec(props.fieldSpec)],
+          [{ zoom: 10, value: stopValue }, props.value || findDefaultFromSpec(props.fieldSpec)],
+        ],
+      };
     }
 
-    this.props.onChange(this.props.fieldName, dataFunc)
+    props.onChange(props.fieldName, dataFunc);
+  };
+
+  const onMarkEditing = () => {
+    setIsEditing(true);
+  };
+
+  const onUnmarkEditing = () => {
+    setIsEditing(false);
+  };
+
+  const propClass =
+    props.fieldSpec.default === props.value ? 'maputnik-default-property' : 'maputnik-modified-property';
+
+  let specField;
+
+  if (dataType === 'expression') {
+    specField = (
+      <ExpressionProperty
+        errors={props.errors}
+        onChange={props.onChange.bind(null, props.fieldName)}
+        canUndo={canUndo}
+        onUndo={undoExpression}
+        onDelete={deleteExpression}
+        fieldType={props.fieldType}
+        fieldName={props.fieldName}
+        fieldSpec={props.fieldSpec}
+        value={props.value}
+        onFocus={onMarkEditing}
+        onBlur={onUnmarkEditing}
+      />
+    );
+  } else if (dataType === 'zoom_function') {
+    specField = (
+      <ZoomProperty
+        errors={props.errors}
+        onChange={props.onChange.bind(null)}
+        fieldType={props.fieldType}
+        fieldName={props.fieldName}
+        fieldSpec={props.fieldSpec}
+        value={props.value}
+        onDeleteStop={deleteStop}
+        onAddStop={addStop}
+        onChangeToDataFunction={makeDataFunction}
+        onExpressionClick={makeExpression}
+      />
+    );
+  } else if (dataType === 'data_function') {
+    specField = (
+      <DataProperty
+        errors={props.errors}
+        onChange={props.onChange.bind(null)}
+        fieldType={props.fieldType}
+        fieldName={props.fieldName}
+        fieldSpec={props.fieldSpec}
+        value={props.value}
+        onDeleteStop={deleteStop}
+        onAddStop={addStop}
+        onChangeToZoomFunction={makeZoomFunction}
+        onExpressionClick={makeExpression}
+      />
+    );
+  } else {
+    specField = (
+      <SpecProperty
+        errors={props.errors}
+        onChange={props.onChange.bind(null)}
+        fieldType={props.fieldType}
+        fieldName={props.fieldName}
+        fieldSpec={props.fieldSpec}
+        value={props.value}
+        onZoomClick={makeZoomFunction}
+        onDataClick={makeDataFunction}
+        onExpressionClick={makeExpression}
+      />
+    );
   }
 
-  onMarkEditing = () => {
-    this.setState({isEditing: true});
-  }
-
-  onUnmarkEditing = () => {
-    this.setState({isEditing: false});
-  }
-
-  render() {
-    const {dataType} = this.state;
-    const propClass = this.props.fieldSpec.default === this.props.value ? "maputnik-default-property" : "maputnik-modified-property"
-    let specField;
-
-    if (dataType === "expression") {
-      specField = (
-        <ExpressionProperty
-          errors={this.props.errors}
-          onChange={this.props.onChange.bind(this, this.props.fieldName)}
-          canUndo={this.canUndo}
-          onUndo={this.undoExpression}
-          onDelete={this.deleteExpression}
-          fieldType={this.props.fieldType}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onFocus={this.onMarkEditing}
-          onBlur={this.onUnmarkEditing}
-        />
-      );
-    }
-    else if (dataType === "zoom_function") {
-      specField = (
-        <ZoomProperty
-          errors={this.props.errors}
-          onChange={this.props.onChange.bind(this)}
-          fieldType={this.props.fieldType}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onDeleteStop={this.deleteStop}
-          onAddStop={this.addStop}
-          onChangeToDataFunction={this.makeDataFunction}
-          onExpressionClick={this.makeExpression}
-        />
-      )
-    }
-    else if (dataType === "data_function") {
-      // TODO: Rename to FieldFunction **this file** shouldn't be called that
-      specField = (
-        <DataProperty
-          errors={this.props.errors}
-          onChange={this.props.onChange.bind(this)}
-          fieldType={this.props.fieldType}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onDeleteStop={this.deleteStop}
-          onAddStop={this.addStop}
-          onChangeToZoomFunction={this.makeZoomFunction}
-          onExpressionClick={this.makeExpression}
-        />
-      )
-    }
-    else {
-      specField = (
-        <SpecProperty
-          errors={this.props.errors}
-          onChange={this.props.onChange.bind(this)}
-          fieldType={this.props.fieldType}
-          fieldName={this.props.fieldName}
-          fieldSpec={this.props.fieldSpec}
-          value={this.props.value}
-          onZoomClick={this.makeZoomFunction}
-          onDataClick={this.makeDataFunction}
-          onExpressionClick={this.makeExpression}
-        />
-      )
-    }
-    return <div className={propClass} data-wd-key={"spec-field-container:"+this.props.fieldName}>
+  return (
+    <div className={propClass} data-wd-key={'spec-field-container:' + props.fieldName}>
       {specField}
     </div>
-  }
-}
+  );
+};
+
+export default FieldFunction;

src/components/FieldId.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 
 import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
 import Block from './Block'
@@ -11,18 +10,19 @@ type FieldIdProps = {
   error?: {message: string}
 };
 
-export default class FieldId extends React.Component<FieldIdProps> {
-  render() {
-    return <Block label="ID" fieldSpec={latest.layer.id}
-
-      data-wd-key={this.props.wdKey}
-      error={this.props.error}
+const FieldId: React.FC<FieldIdProps> = (props) => {
+  return (
+    <Block label="ID" fieldSpec={latest.layer.id}
+      data-wd-key={props.wdKey}
+      error={props.error}
     >
       <InputString
-        value={this.props.value}
-        onInput={this.props.onChange}
-        data-wd-key={this.props.wdKey + ".input"}
+        value={props.value}
+        onInput={props.onChange}
+        data-wd-key={props.wdKey + ".input"}
       />
     </Block>
-  }
-}
+  );
+};
+
+export default FieldId;

src/components/FieldJson.tsx

@@ -1,12 +1,11 @@
-import React from 'react'
 import InputJson, {InputJsonProps} from './InputJson'
 
 
 type FieldJsonProps = InputJsonProps & {};
 
 
-export default class FieldJson extends React.Component<FieldJsonProps> {
-  render() {
-    return <InputJson {...this.props} />
-  }
-}
+const FieldJson: React.FC<FieldJsonProps> = (props) => {
+  return <InputJson {...props} />;
+};
+
+export default FieldJson;

src/components/FieldMaxZoom.tsx

@@ -11,25 +11,25 @@ type FieldMaxZoomInternalProps = {
   error?: {message: string}
 } & WithTranslation;
 
-class FieldMaxZoomInternal extends React.Component<FieldMaxZoomInternalProps> {
-  render() {
-    const t = this.props.t;
-    return <Block label={t("Max Zoom")} fieldSpec={latest.layer.maxzoom}
-      error={this.props.error}
+const FieldMaxZoomInternal: React.FC<FieldMaxZoomInternalProps> = (props) => {
+  const t = props.t;
+  return (
+    <Block label={t('Max Zoom')} fieldSpec={latest.layer.maxzoom}
+      error={props.error}
       data-wd-key="max-zoom"
     >
       <InputNumber
         allowRange={true}
-        value={this.props.value}
-        onChange={this.props.onChange}
+        value={props.value}
+        onChange={props.onChange}
         min={latest.layer.maxzoom.minimum}
         max={latest.layer.maxzoom.maximum}
         default={latest.layer.maxzoom.maximum}
         data-wd-key="max-zoom.input"
       />
     </Block>
-  }
-}
+  );
+};
 
 const FieldMaxZoom = withTranslation()(FieldMaxZoomInternal);
 export default FieldMaxZoom;

src/components/FieldMinZoom.tsx

@@ -11,25 +11,25 @@ type FieldMinZoomInternalProps = {
   error?: {message: string}
 } & WithTranslation;
 
-class FieldMinZoomInternal extends React.Component<FieldMinZoomInternalProps> {
-  render() {
-    const t = this.props.t;
-    return <Block label={t("Min Zoom")} fieldSpec={latest.layer.minzoom}
-      error={this.props.error}
+const FieldMinZoomInternal: React.FC<FieldMinZoomInternalProps> = (props) => {
+  const t = props.t;
+  return (
+    <Block label={t('Min Zoom')} fieldSpec={latest.layer.minzoom}
+      error={props.error}
       data-wd-key="min-zoom"
     >
       <InputNumber
         allowRange={true}
-        value={this.props.value}
-        onChange={this.props.onChange}
+        value={props.value}
+        onChange={props.onChange}
         min={latest.layer.minzoom.minimum}
         max={latest.layer.minzoom.maximum}
         default={latest.layer.minzoom.minimum}
         data-wd-key='min-zoom.input'
       />
     </Block>
-  }
-}
+  );
+};
 
 const FieldMinZoom = withTranslation()(FieldMinZoomInternal);
 export default FieldMinZoom;

src/components/FieldMultiInput.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import InputMultiInput, {InputMultiInputProps} from './InputMultiInput'
 import Fieldset from './Fieldset'
 
@@ -8,10 +7,12 @@ type FieldMultiInputProps = InputMultiInputProps & {
 };
 
 
-export default class FieldMultiInput extends React.Component<FieldMultiInputProps> {
-  render() {
-    return <Fieldset label={this.props.label}>
-      <InputMultiInput {...this.props} />
+const FieldMultiInput: React.FC<FieldMultiInputProps> = (props) => {
+  return (
+    <Fieldset label={props.label}>
+      <InputMultiInput {...props} />
     </Fieldset>
-  }
-}
+  );
+};
+
+export default FieldMultiInput;

src/components/FieldNumber.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import InputNumber, {InputNumberProps} from './InputNumber'
 import Block from './Block'
 
@@ -11,10 +10,12 @@ type FieldNumberProps = InputNumberProps & {
 };
 
 
-export default class FieldNumber extends React.Component<FieldNumberProps> {
-  render() {
-    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
-      <InputNumber {...this.props} />
+const FieldNumber: React.FC<FieldNumberProps> = (props) => {
+  return (
+    <Block label={props.label} fieldSpec={props.fieldSpec}>
+      <InputNumber {...props} />
     </Block>
-  }
-}
+  );
+};
+
+export default FieldNumber;

src/components/FieldSelect.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Block from './Block'
 import InputSelect, {InputSelectProps} from './InputSelect'
 
@@ -11,10 +10,12 @@ type FieldSelectProps = InputSelectProps & {
 };
 
 
-export default class FieldSelect extends React.Component<FieldSelectProps> {
-  render() {
-    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
-      <InputSelect {...this.props}/>
+const FieldSelect: React.FC<FieldSelectProps> = (props) => {
+  return (
+    <Block label={props.label} fieldSpec={props.fieldSpec}>
+      <InputSelect {...props} />
     </Block>
-  }
-}
+  );
+};
+
+export default FieldSelect;

src/components/FieldSource.tsx

@@ -13,28 +13,28 @@ type FieldSourceInternalProps = {
   error?: {message: string}
 } & WithTranslation;
 
-class FieldSourceInternal extends React.Component<FieldSourceInternalProps> {
-  static defaultProps = {
-    onChange: () => {},
-    sourceIds: [],
-  }
-
-  render() {
-    const t = this.props.t;
-    return <Block
-      label={t("Source")}
+const FieldSourceInternal: React.FC<FieldSourceInternalProps> = (props) => {
+  const t = props.t;
+  return (
+    <Block
+      label={t('Source')}
       fieldSpec={latest.layer.source}
-      error={this.props.error}
-      data-wd-key={this.props.wdKey}
+      error={props.error}
+      data-wd-key={props.wdKey}
     >
       <InputAutocomplete
-        value={this.props.value}
-        onChange={this.props.onChange}
-        options={this.props.sourceIds?.map(src => [src, src])}
+        value={props.value}
+        onChange={props.onChange}
+        options={props.sourceIds?.map((src) => [src, src])}
       />
     </Block>
-  }
-}
+  );
+};
+
+FieldSourceInternal.defaultProps = {
+  onChange: () => {},
+  sourceIds: [],
+};
 
 const FieldSource = withTranslation()(FieldSourceInternal);
 export default FieldSource;

src/components/FieldSourceLayer.tsx

@@ -13,29 +13,29 @@ type FieldSourceLayerInternalProps = {
   error?: {message: string}
 } & WithTranslation;
 
-class FieldSourceLayerInternal extends React.Component<FieldSourceLayerInternalProps> {
-  static defaultProps = {
-    onChange: () => {},
-    sourceLayerIds: [],
-    isFixed: false
-  }
-
-  render() {
-    const t = this.props.t;
-    return <Block
-      label={t("Source Layer")}
+const FieldSourceLayerInternal: React.FC<FieldSourceLayerInternalProps> = (props) => {
+  const t = props.t;
+  return (
+    <Block
+      label={t('Source Layer')}
       fieldSpec={latest.layer['source-layer']}
       data-wd-key="layer-source-layer"
-      error={this.props.error}
+      error={props.error}
     >
       <InputAutocomplete
-        value={this.props.value}
-        onChange={this.props.onChange}
-        options={this.props.sourceLayerIds?.map(l => [l, l])}
+        value={props.value}
+        onChange={props.onChange}
+        options={props.sourceLayerIds?.map((l) => [l, l])}
       />
     </Block>
-  }
-}
+  );
+};
+
+FieldSourceLayerInternal.defaultProps = {
+  onChange: () => {},
+  sourceLayerIds: [],
+  isFixed: false,
+};
 
 const FieldSourceLayer = withTranslation()(FieldSourceLayerInternal);
 export default FieldSourceLayer;

src/components/FieldString.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Block from './Block'
 import InputString, {InputStringProps} from './InputString'
 
@@ -10,10 +9,12 @@ type FieldStringProps = InputStringProps & {
   }
 };
 
-export default class FieldString extends React.Component<FieldStringProps> {
-  render() {
-    return <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
-      <InputString {...this.props} />
+const FieldString: React.FC<FieldStringProps> = (props) => {
+  return (
+    <Block label={props.label} fieldSpec={props.fieldSpec}>
+      <InputString {...props} />
     </Block>
-  }
-}
+  );
+};
+
+export default FieldString;

src/components/FieldType.tsx

@@ -14,24 +14,17 @@ type FieldTypeInternalProps = {
   disabled?: boolean
 } & WithTranslation;
 
-class FieldTypeInternal extends React.Component<FieldTypeInternalProps> {
-  static defaultProps = {
-    disabled: false,
-  }
-
-  render() {
-    const t = this.props.t;
-    return <Block label={t("Type")} fieldSpec={latest.layer.type}
-      data-wd-key={this.props.wdKey}
-      error={this.props.error}
+const FieldTypeInternal: React.FC<FieldTypeInternalProps> = (props) => {
+  const t = props.t;
+  return (
+    <Block label={t('Type')} fieldSpec={latest.layer.type}
+      data-wd-key={props.wdKey}
+      error={props.error}
     >
-      {this.props.disabled &&
-        <InputString
-          value={this.props.value}
-          disabled={true}
-        />
-      }
-      {!this.props.disabled &&
+      {props.disabled && (
+        <InputString value={props.value} disabled={true} />
+      )}
+      {!props.disabled && (
         <InputSelect
           options={[
             ['background', 'Background'],
@@ -44,14 +37,18 @@ class FieldTypeInternal extends React.Component<FieldTypeInternalProps> {
             ['hillshade', 'Hillshade'],
             ['heatmap', 'Heatmap'],
           ]}
-          onChange={this.props.onChange}
-          value={this.props.value}
-          data-wd-key={this.props.wdKey + ".select"}
+          onChange={props.onChange}
+          value={props.value}
+          data-wd-key={props.wdKey + '.select'}
         />
-      }
+      )}
     </Block>
-  }
-}
+  );
+};
+
+FieldTypeInternal.defaultProps = {
+  disabled: false,
+};
 
 const FieldType = withTranslation()(FieldTypeInternal);
 export default FieldType;

src/components/FieldUrl.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import InputUrl, {FieldUrlProps as InputUrlProps} from './InputUrl'
 import Block from './Block'
 
@@ -11,12 +10,12 @@ type FieldUrlProps = InputUrlProps & {
 };
 
 
-export default class FieldUrl extends React.Component<FieldUrlProps> {
-  render () {
-    return (
-      <Block label={this.props.label} fieldSpec={this.props.fieldSpec}>
-        <InputUrl {...this.props} />
-      </Block>
-    );
-  }
-}
+const FieldUrl: React.FC<FieldUrlProps> = (props) => {
+  return (
+    <Block label={props.label} fieldSpec={props.fieldSpec}>
+      <InputUrl {...props} />
+    </Block>
+  );
+};
+
+export default FieldUrl;

src/components/Fieldset.tsx

@@ -9,57 +9,40 @@ type FieldsetProps = PropsWithChildren & {
   action?: ReactElement,
 };
 
-type FieldsetState = {
-  showDoc: boolean
-};
 
-export default class Fieldset extends React.Component<FieldsetProps, FieldsetState> {
-  _labelId: string;
+const Fieldset: React.FC<FieldsetProps> = (props) => {
+  const [showDoc, setShowDoc] = React.useState(false);
+  const labelId = React.useRef(generateUniqueId('fieldset_label_'));
 
-  constructor (props: FieldsetProps) {
-    super(props);
-    this._labelId = generateUniqueId(`fieldset_label_`);
-    this.state = {
-      showDoc: false,
-    }
-  }
+  const onToggleDoc = (val: boolean) => {
+    setShowDoc(val);
+  };
 
-  onToggleDoc = (val: boolean) => {
-    this.setState({
-      showDoc: val
-    });
-  }
-
-  render () {
-    return <div className="maputnik-input-block" role="group" aria-labelledby={this._labelId}>
-      {this.props.fieldSpec &&
+  return (
+    <div className="maputnik-input-block" role="group" aria-labelledby={labelId.current}>
+      {props.fieldSpec && (
         <div className="maputnik-input-block-label">
           <FieldDocLabel
-            label={this.props.label}
-            onToggleDoc={this.onToggleDoc}
-            fieldSpec={this.props.fieldSpec}
+            label={props.label}
+            onToggleDoc={onToggleDoc}
+            fieldSpec={props.fieldSpec}
           />
         </div>
-      }
-      {!this.props.fieldSpec &&
+      )}
+      {!props.fieldSpec && (
         <div className="maputnik-input-block-label">
-          {this.props.label}
+          {props.label}
         </div>
-      }
-      <div className="maputnik-input-block-action">
-        {this.props.action}
-      </div>
-      <div className="maputnik-input-block-content">
-        {this.props.children}
-      </div>
-      {this.props.fieldSpec &&
-        <div
-          className="maputnik-doc-inline"
-          style={{display: this.state.showDoc ? '' : 'none'}}
-        >
-          <Doc fieldSpec={this.props.fieldSpec} />
+      )}
+      <div className="maputnik-input-block-action">{props.action}</div>
+      <div className="maputnik-input-block-content">{props.children}</div>
+      {props.fieldSpec && (
+        <div className="maputnik-doc-inline" style={{ display: showDoc ? '' : 'none' }}>
+          <Doc fieldSpec={props.fieldSpec} />
         </div>
-      }
+      )}
     </div>
-  }
-}
+  );
+};
+
+export default Fieldset;

src/components/SpecField.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Block from './Block'
 import InputSpec, { SpecFieldProps as InputFieldSpecProps } from './InputSpec'
 import Fieldset from './Fieldset'
@@ -20,27 +19,25 @@ export type SpecFieldProps = InputFieldSpecProps & {
   name?: string
 };
 
-export default class SpecField extends React.Component<SpecFieldProps> {
-  render() {
-    const fieldType = this.props.fieldSpec?.type;
+const SpecField: React.FC<SpecFieldProps> = (props) => {
+  const fieldType = props.fieldSpec?.type;
 
-    const typeBlockFn = typeMap[fieldType!];
+  const typeBlockFn = typeMap[fieldType!];
 
-    let TypeBlock;
-    if (typeBlockFn) {
-      TypeBlock = typeBlockFn(this.props);
-    }
-    else {
-      console.warn("No such type for '%s'", fieldType);
-      TypeBlock = Block;
-    }
-
-    return <TypeBlock
-      label={this.props.label}
-      action={this.props.action}
-      fieldSpec={this.props.fieldSpec}
-    >
-      <InputSpec {...this.props} />
-    </TypeBlock>
+  let TypeBlock;
+  if (typeBlockFn) {
+    TypeBlock = typeBlockFn(props);
   }
-}
+  else {
+    console.warn("No such type for '%s'", fieldType);
+    TypeBlock = Block;
+  }
+
+  return (
+    <TypeBlock label={props.label} action={props.action} fieldSpec={props.fieldSpec}>
+      <InputSpec {...props} />
+    </TypeBlock>
+  );
+};
+
+export default SpecField;