Convert <Button> to Typescript (#27492)

app/javascript/mastodon/components/__tests__/button-test.jsx

@@ -1,7 +1,7 @@
 import { render, fireEvent, screen } from '@testing-library/react';
 import renderer from 'react-test-renderer';
 
-import Button from '../button';
+import { Button } from '../button';
 
 describe('<Button />', () => {
   it('renders a button element', () => {

app/javascript/mastodon/components/account.jsx

@@ -15,7 +15,7 @@ import { VerifiedBadge } from 'mastodon/components/verified_badge';
 import { me } from '../initial_state';
 
 import { Avatar } from './avatar';
-import Button from './button';
+import { Button } from './button';
 import { FollowersCounter } from './counters';
 import { DisplayName } from './display_name';
 import { IconButton } from './icon_button';

app/javascript/mastodon/components/button.jsx

@@ -1,58 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import classNames from 'classnames';
-
-export default class Button extends PureComponent {
-
-  static propTypes = {
-    text: PropTypes.node,
-    type: PropTypes.string,
-    onClick: PropTypes.func,
-    disabled: PropTypes.bool,
-    block: PropTypes.bool,
-    secondary: PropTypes.bool,
-    className: PropTypes.string,
-    title: PropTypes.string,
-    children: PropTypes.node,
-  };
-
-  static defaultProps = {
-    type: 'button',
-  };
-
-  handleClick = (e) => {
-    if (!this.props.disabled && this.props.onClick) {
-      this.props.onClick(e);
-    }
-  };
-
-  setRef = (c) => {
-    this.node = c;
-  };
-
-  focus() {
-    this.node.focus();
-  }
-
-  render () {
-    const className = classNames('button', this.props.className, {
-      'button-secondary': this.props.secondary,
-      'button--block': this.props.block,
-    });
-
-    return (
-      <button
-        className={className}
-        disabled={this.props.disabled}
-        onClick={this.handleClick}
-        ref={this.setRef}
-        title={this.props.title}
-        type={this.props.type}
-      >
-        {this.props.text || this.props.children}
-      </button>
-    );
-  }
-
-}

app/javascript/mastodon/components/button.tsx

@@ -0,0 +1,58 @@
+import { useCallback } from 'react';
+
+import classNames from 'classnames';
+
+interface BaseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  block?: boolean;
+  secondary?: boolean;
+  text?: JSX.Element;
+}
+
+interface PropsWithChildren extends BaseProps {
+  text?: never;
+}
+
+interface PropsWithText extends BaseProps {
+  text: JSX.Element;
+  children: never;
+}
+
+type Props = PropsWithText | PropsWithChildren;
+
+export const Button: React.FC<Props> = ({
+  text,
+  type = 'button',
+  onClick,
+  disabled,
+  block,
+  secondary,
+  className,
+  title,
+  children,
+  ...props
+}) => {
+  const handleClick = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
+    (e) => {
+      if (!disabled && onClick) {
+        onClick(e);
+      }
+    },
+    [disabled, onClick],
+  );
+
+  return (
+    <button
+      className={classNames('button', className, {
+        'button-secondary': secondary,
+        'button--block': block,
+      })}
+      disabled={disabled}
+      onClick={handleClick}
+      title={title}
+      type={type}
+      {...props}
+    >
+      {text ?? children}
+    </button>
+  );
+};