refactor(common): convert nav-button to TypeScript

src/elements/common/nav-button/BackButton.js → src/elements/common/nav-button/BackButton.tsx

@@ -1,30 +1,26 @@
-/**
- * @flow
- * @file Back Button component
- * @author Box
- */
-
 import * as React from 'react';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
-import { Route, type Location } from 'react-router-dom';
+import { Route } from 'react-router-dom';
+import type { Location } from 'history';
 import IconNavigateLeft from '../../../icons/general/IconNavigateLeft';
 import messages from '../messages';
 import PlainButton from '../../../components/plain-button';
+import { ButtonType } from '../../../components/button';
 import './BackButton.scss';
 
-type Props = {
-    className?: string,
-    to?: Location,
-};
+export interface BackButtonProps {
+    className?: string;
+    to?: Location;
+}
 
-const BackButton = ({ className, to, ...rest }: Props) => (
+const BackButton = ({ className, to, ...rest }: BackButtonProps) => (
     <Route>
         {({ history }) => (
             <PlainButton
                 className={classNames('bdl-BackButton', className)}
                 onClick={() => (to ? history.push(to) : history.goBack())}
-                type="button"
+                type={ButtonType.BUTTON}
                 {...rest}
             >
                 <IconNavigateLeft height={24} width={24} />

src/elements/common/nav-button/NavButton.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Route } from 'react-router-dom';
+import type { Location as RouterLocation } from 'history';
+import PlainButton, { PlainButtonProps } from '../../../components/plain-button';
+import { isLeftClick } from '../../../utils/dom';
+
+export interface NavButtonProps {
+    activeClassName?: string;
+    children: React.ReactNode;
+    className?: string;
+    component?: React.ComponentType<PlainButtonProps & { ref?: React.Ref<HTMLButtonElement> }>;
+    exact?: boolean;
+    isActive?: (
+        match: { path: string; url: string; isExact: boolean; params: Record<string, string> },
+        location: RouterLocation,
+    ) => boolean | null;
+    isDisabled?: boolean;
+    onClick?: (event: React.SyntheticEvent) => void;
+    replace?: boolean;
+    strict?: boolean;
+    to: string | RouterLocation;
+}
+
+const NavButton = React.forwardRef<HTMLButtonElement, NavButtonProps>(
+    (props: NavButtonProps, ref: React.Ref<HTMLButtonElement>) => {
+        const {
+            activeClassName = 'bdl-is-active',
+            children,
+            className = 'bdl-NavButton',
+            component: Component = PlainButton,
+            exact,
+            isActive,
+            isDisabled,
+            onClick,
+            replace,
+            strict,
+            to,
+            ...rest
+        } = props;
+        const path = typeof to === 'object' ? to.pathname : to;
+
+        const disabledClassName = 'bdl-is-disabled';
+
+        return (
+            <Route exact={exact} path={path} strict={strict}>
+                {({ history, location, match }) => {
+                    const isActiveValue = !!(isActive ? isActive(match, location) : match);
+
+                    return (
+                        <Component
+                            className={classNames(className, {
+                                [activeClassName]: isActiveValue,
+                                [disabledClassName]: isDisabled,
+                            })}
+                            isDisabled={isDisabled}
+                            onClick={event => {
+                                if (onClick) {
+                                    onClick(event);
+                                }
+
+                                if (!event.defaultPrevented && isLeftClick(event)) {
+                                    const method = replace ? history.replace : history.push;
+                                    method(to);
+                                }
+                            }}
+                            ref={ref}
+                            {...rest}
+                        >
+                            {children}
+                        </Component>
+                    );
+                }}
+            </Route>
+        );
+    },
+);
+
+export default NavButton;

src/elements/common/nav-button/index.ts

@@ -0,0 +1,4 @@
+export { default as BackButton } from './BackButton';
+export { default } from './NavButton';
+export type { BackButtonProps } from './BackButton';
+export type { NavButtonProps } from './NavButton';