ButtonOrLink: add types

Author: clairep94

client/common/ButtonOrLink.tsx

@@ -1,14 +1,38 @@
 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.
  */
+type ButtonOrLinkProps = {
+  /**
+   * 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?: 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;
+};
 
+type Ref = HTMLAnchorElement | HTMLButtonElement
+
+/**
+ * Helper for switching between <button>, <a>, and <Link>
+ */
 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 +47,8 @@ const ButtonOrLink = React.forwardRef(
       if (href.startsWith('http')) {
         return (
           <a
-            ref={ref}
+            // eslint-disable-next-line prettier/prettier -- not able to parse 'as' for some reason
+            ref={ref as React.Ref<HTMLAnchorElement>}
             href={href}
             target="_blank"
             rel="noopener noreferrer"
@@ -37,7 +62,7 @@ const ButtonOrLink = React.forwardRef(
       }
       return (
         <Link
-          ref={ref}
+          ref={ref as React.Ref<HTMLAnchorElement>}
           to={href}
           aria-disabled={isDisabled}
           {...props}
@@ -49,7 +74,7 @@ const ButtonOrLink = React.forwardRef(
     }
     return (
       <button
-        ref={ref}
+        ref={ref as React.Ref<HTMLButtonElement>}
         aria-disabled={isDisabled}
         {...props}
         onClick={handleClick}
@@ -60,30 +85,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;