Refactor components to use functional components and hooks (#8751)

Converted several more React class-based components to functional
components. Mostly from `/frontend/javascripts/viewer/view/components`.

- ButtonComponent, 
- CheckboxComponent
- EditableTextIcon
- EditableTextLabel
- InputComponent 
- SettingsInputView

### Issues:
- Contributes to #8747

------
(Please delete unneeded items, merge only when none are left open)
- [ ] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [ ] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

Author: hotzenklotz

frontend/javascripts/components/hover_icon_button.tsx

@@ -1,6 +1,6 @@
 import type { ButtonProps } from "antd";
-import * as React from "react";
-const { useState } = React;
+import type React from "react";
+import { cloneElement, useState } from "react";
 
 export type HoverButtonProps = Omit<ButtonProps, "icon"> & {
   icon: React.ReactElement<any>;
@@ -23,7 +23,7 @@ export function HoverIconButton(props: HoverButtonProps) {
     }
   };
   const { hoveredIcon, ...restProps } = props;
-  return React.cloneElement(isMouseOver ? hoveredIcon : props.icon, {
+  return cloneElement(isMouseOver ? hoveredIcon : props.icon, {
     ...restProps,
     onMouseEnter,
     onMouseLeave,

frontend/javascripts/viewer/view/components/border_toggle_button.tsx

@@ -1,7 +1,7 @@
 import { Button } from "antd";
 import FastTooltip from "components/fast_tooltip";
 import { V2 } from "libs/mjs";
-import * as React from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 import type { BorderOpenStatus, WebknossosState } from "viewer/store";
 type OwnProps = {
@@ -30,7 +30,7 @@ function BorderToggleButton(props: Props) {
   const imageClass = `center-item-using-flex icon-sidebar-toggle icon-sidebar-${iconKind}-${side}-${
     inFooter ? "dark" : "bright"
   }`;
-  const [lastTouchPosition, setLastTouchPosition] = React.useState([0, 0]);
+  const [lastTouchPosition, setLastTouchPosition] = useState([0, 0]);
   return (
     <FastTooltip title={tooltipTitle} placement={placement} style={TOOLTIP_STYLE}>
       <Button

frontend/javascripts/viewer/view/components/button_component.tsx

@@ -1,7 +1,7 @@
 import { Button, type ButtonProps } from "antd";
 import FastTooltip, { type FastTooltipPlacement } from "components/fast_tooltip";
 import _ from "lodash";
-import * as React from "react";
+import type React from "react";
 
 type ButtonComponentProps = ButtonProps & {
   faIcon?: string;
@@ -12,53 +12,50 @@ type ButtonComponentProps = ButtonProps & {
  * after it was clicked.
  */
 
-class ButtonComponent extends React.PureComponent<ButtonComponentProps> {
-  static defaultProps: ButtonComponentProps = {
-    onClick: _.noop,
-  };
+function ButtonComponent(props: ButtonComponentProps) {
+  const {
+    children,
+    faIcon,
+    title,
+    tooltipPlacement,
+    onClick = _.noop,
+    onTouchEnd,
+    ...restProps
+  } = props;
 
-  handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    // For antd buttons e.target seems to be the span with the button description, whereas
-    // e.currentTarget is the actual button
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.currentTarget.blur();
-
-    if (this.props.onClick) {
-      this.props.onClick(e);
-    }
+    onClick(e);
   };
 
-  handleTouchEnd = (e: React.TouchEvent<HTMLButtonElement>) => {
+  const handleTouchEnd = (e: React.TouchEvent<HTMLButtonElement>) => {
     e.currentTarget.blur();
-
-    if (this.props.onTouchEnd) {
-      this.props.onTouchEnd(e);
+    if (onTouchEnd) {
+      onTouchEnd(e);
     }
   };
 
-  render() {
-    const { children, faIcon, title, tooltipPlacement, ...restProps } = this.props;
-    const iconEl = faIcon != null && !this.props.loading ? <i className={faIcon} /> : null;
-    const button =
-      // Differentiate via children != null, since antd uses a different styling for buttons
-      // with a single icon child (.ant-btn-icon-only will be assigned)
-      children != null ? (
-        <Button {...restProps} onClick={this.handleClick} onTouchEnd={this.handleTouchEnd}>
-          {iconEl}
-          {children}
-        </Button>
-      ) : (
-        <Button {...restProps} onClick={this.handleClick} onTouchEnd={this.handleTouchEnd}>
-          {iconEl}
-        </Button>
-      );
-    return title != null ? (
-      <FastTooltip title={title} placement={tooltipPlacement}>
-        {button}
-      </FastTooltip>
+  const iconEl = faIcon != null && !props.loading ? <i className={faIcon} /> : null;
+  const button =
+    // Differentiate via children != null, since antd uses a different styling for buttons
+    // with a single icon child (.ant-btn-icon-only will be assigned)
+    children != null ? (
+      <Button {...restProps} onClick={handleClick} onTouchEnd={handleTouchEnd}>
+        {iconEl}
+        {children}
+      </Button>
     ) : (
-      button
+      <Button {...restProps} onClick={handleClick} onTouchEnd={handleTouchEnd}>
+        {iconEl}
+      </Button>
     );
-  }
+  return title != null ? (
+    <FastTooltip title={title} placement={tooltipPlacement}>
+      {button}
+    </FastTooltip>
+  ) : (
+    button
+  );
 }
 
 export function ToggleButton(props: { active: boolean } & ButtonComponentProps) {

frontend/javascripts/viewer/view/components/checkbox_component.tsx

@@ -1,6 +1,6 @@
 import { Checkbox } from "antd";
 import _ from "lodash";
-import * as React from "react";
+import type React from "react";
 type CheckboxComponentProp = {
   onClick?: (...args: Array<any>) => any;
 };
@@ -9,25 +9,17 @@ type CheckboxComponentProp = {
  * after it was clicked.
  */
 
-class CheckboxComponent extends React.PureComponent<CheckboxComponentProp> {
-  static defaultProps: CheckboxComponentProp = {
-    onClick: _.noop,
-  };
+function CheckboxComponent(props: CheckboxComponentProp) {
+  const { onClick = _.noop, ...restProps } = props;
 
-  handleClick = (e: React.SyntheticEvent<HTMLInputElement>) => {
+  const handleClick: React.MouseEventHandler<HTMLElement> = (e) => {
     // For antd checkboxs e.target seems to be the span with the checkbox description, whereas
     // e.currentTarget is the actual checkbox
     e.currentTarget.blur();
-
-    if (this.props.onClick) {
-      this.props.onClick(e);
-    }
+    onClick(e);
   };
 
-  render() {
-    // @ts-expect-error ts-migrate(2322) FIXME: Type '(e: React.SyntheticEvent<HTMLInputElement>) ... Remove this comment to see the full error message
-    return <Checkbox {...this.props} onClick={this.handleClick} />;
-  }
+  return <Checkbox {...restProps} onClick={handleClick} />;
 }
 
 export default CheckboxComponent;

frontend/javascripts/viewer/view/components/dom_visibility_observer.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 // This component uses an IntersectionObserver to find out if the element with the id targetId
 // is visible in the current viewport or not. It then calls its children render function with that value.
 // This allows to not render performance-heavy components or to disable shortcuts if their flex layout tab is not visible.

frontend/javascripts/viewer/view/components/editable_text_icon.tsx

@@ -1,79 +1,61 @@
 import { Button, Input } from "antd";
-import React from "react";
+import type React from "react";
+import { useState } from "react";
 
 type Props = {
   icon: React.ReactElement;
   label?: string;
   onChange: (value: string, event: React.SyntheticEvent<HTMLInputElement>) => void;
 };
 
-type State = {
-  isEditing: boolean;
-  value: string;
-};
-
-class EditableTextIcon extends React.PureComponent<Props, State> {
-  state = {
-    isEditing: false,
-    value: "",
-  };
+function EditableTextIcon(props: Props) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [value, setValue] = useState("");
 
-  handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({
-      value: event.target.value,
-    });
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
   };
 
-  handleInputSubmit = (event: React.SyntheticEvent<HTMLInputElement>) => {
-    const { value } = this.state;
-
+  const handleInputSubmit = (event: React.FormEvent<HTMLInputElement>) => {
     if (value !== "") {
-      this.props.onChange(this.state.value, event);
+      props.onChange(value, event);
     }
 
-    this.setState({
-      isEditing: false,
-      value: "",
-    });
+    setIsEditing(false);
+    setValue("");
   };
 
-  render() {
-    if (this.state.isEditing) {
-      return (
-        <Input
-          value={this.state.value}
-          onChange={this.handleInputChange}
-          onPressEnter={this.handleInputSubmit}
-          onBlur={this.handleInputSubmit}
-          style={{
-            width: 75,
-          }}
-          size="small"
-          autoFocus
-        />
-      );
-    }
-
+  if (isEditing) {
     return (
-      <Button
-        size="small"
-        icon={this.props.icon}
+      <Input
+        value={value}
+        onChange={handleInputChange}
+        onPressEnter={handleInputSubmit}
+        onBlur={handleInputSubmit}
         style={{
-          height: 22,
-          width: this.props.label ? "initial" : 22,
-          fontSize: "12px",
-          color: "#7c7c7c",
+          width: 75,
         }}
-        onClick={() =>
-          this.setState({
-            isEditing: true,
-          })
-        }
-      >
-        {this.props.label ? <span style={{ marginLeft: 0 }}>{this.props.label}</span> : null}
-      </Button>
+        size="small"
+        autoFocus
+      />
     );
   }
+
+  return (
+    <Button
+      size="small"
+      icon={props.icon}
+      style={{
+        height: 22,
+        width: props.label ? "initial" : 22,
+        fontSize: "12px",
+        color: "#7c7c7c",
+      }}
+      onClick={() => setIsEditing(true)}
+    >
+      {props.label ? <span style={{ marginLeft: 0 }}>{props.label}</span> : null}
+    </Button>
+  );
 }
 
 export default EditableTextIcon;