ButtonOrLink: update to typescript

Author: clairep94

client/common/ButtonOrLink.tsx

@@ -1,14 +1,47 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import PropTypes from 'prop-types';
 
 /**
- * Helper for switching between <button>, <a>, and <Link>
+ * Accepts all the props of an HTML <a> or <button> tag.
  */
+export type ButtonOrLinkProps = {
+  /**
+   * Can be internal or external ('http'- or 'https'-).
+   */
+  href?: string;
+  isDisabled?: boolean;
+  /**
+   * Content of the button/link.
+   * Can be either a string or a complex element.
+   */
+  children: React.ReactNode;
+  onClick?: (
+    e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+  ) => void;
+};
+
+export type Ref = HTMLAnchorElement | HTMLButtonElement;
 
+/**
+ * Helper for switching between `<button>`, `<a>`, and `<Link>`
+ * If providing an `href`, will render as a link instead of a button.
+ *   - Internal links will use react-router.
+ *   - External links should start with 'http' or 'https' and will open in a new window.
+ */
 const ButtonOrLink = React.forwardRef(
-  ({ href, children, isDisabled, onClick, ...props }, ref) => {
-    const handleClick = (e) => {
+  (
+    {
+      href,
+      children,
+      isDisabled = false,
+      onClick,
+      ...props
+    }: ButtonOrLinkProps,
+    ref: React.Ref<Ref>
+  ) => {
+    const handleClick = (
+      e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>
+    ) => {
       if (isDisabled) {
         e.preventDefault();
         e.stopPropagation();
@@ -23,7 +56,7 @@ const ButtonOrLink = React.forwardRef(
       if (href.startsWith('http')) {
         return (
           <a
-            ref={ref}
+            ref={ref as React.Ref<HTMLAnchorElement>}
             href={href}
             target="_blank"
             rel="noopener noreferrer"
@@ -37,7 +70,7 @@ const ButtonOrLink = React.forwardRef(
       }
       return (
         <Link
-          ref={ref}
+          ref={ref as React.Ref<HTMLAnchorElement>}
           to={href}
           aria-disabled={isDisabled}
           {...props}
@@ -49,7 +82,7 @@ const ButtonOrLink = React.forwardRef(
     }
     return (
       <button
-        ref={ref}
+        ref={ref as React.Ref<HTMLButtonElement>}
         aria-disabled={isDisabled}
         {...props}
         onClick={handleClick}
@@ -60,30 +93,4 @@ const ButtonOrLink = React.forwardRef(
   }
 );
 
-/**
- * Accepts all the props of an HTML <a> or <button> tag.
- */
-ButtonOrLink.propTypes = {
-  /**
-   * If providing an href, will render as a link instead of a button.
-   * Can be internal or external.
-   * Internal links will use react-router.
-   * External links should start with 'http' or 'https' and will open in a new window.
-   */
-  href: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  /**
-   * Content of the button/link.
-   * Can be either a string or a complex element.
-   */
-  children: PropTypes.node.isRequired,
-  onClick: PropTypes.func
-};
-
-ButtonOrLink.defaultProps = {
-  href: null,
-  isDisabled: false,
-  onClick: null
-};
-
 export default ButtonOrLink;