refactor(common): convert nav-button to TypeScript

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

@@ -15,7 +15,7 @@ import './BackButton.scss';
 
 type Props = {
     className?: string,
-    to?: Location,
+    to?: Location | string,
 };
 
 const BackButton = ({ className, to, ...rest }: Props) => (

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import { Route } from 'react-router-dom';
+import type { Location } from 'history';
+import IconNavigateLeft from '../../../icons/general/IconNavigateLeft';
+import PlainButton from '../../../components/plain-button';
+import messages from '../messages';
+import { ButtonType } from '../../../components/button';
+import './BackButton.scss';
+
+export interface BackButtonProps {
+    className?: string;
+    to?: string | Location;
+}
+
+const BackButton = ({ className, to, ...rest }: BackButtonProps) => (
+    <Route>
+        {({ history }) => (
+            <PlainButton
+                className={classNames('bdl-BackButton', className)}
+                onClick={() => (to ? history.push(to) : history.goBack())}
+                type={ButtonType.BUTTON}
+                {...rest}
+            >
+                <IconNavigateLeft height={24} width={24} />
+                <span className="accessibility-hidden">
+                    <FormattedMessage {...messages.back} />
+                </span>
+            </PlainButton>
+        )}
+    </Route>
+);
+
+export default BackButton;

src/elements/common/nav-button/NavButton.js → src/elements/common/nav-button/NavButton.js.flow

@@ -11,6 +11,12 @@ import type { Match, Location } from 'react-router-dom';
 import PlainButton from '../../../components/plain-button';
 import { isLeftClick } from '../../../utils/dom';
 
+// Custom Location type that makes hash optional
+type CustomLocation = {
+    ...Location,
+    hash?: string,
+};
+
 type Props = {
     activeClassName?: string,
     children: React.Node,
@@ -22,7 +28,7 @@ type Props = {
     onClick?: (event: SyntheticEvent<>) => void,
     replace?: boolean,
     strict?: boolean,
-    to: string | Location,
+    to: string | CustomLocation,
 };
 
 const NavButton = React.forwardRef<Props, React.Ref<any>>((props: Props, ref: React.Ref<any>) => {

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

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Route } from 'react-router-dom';
+import type { match } from 'react-router';
+import type { Location } 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: match, location: Location) => boolean;
+    isDisabled?: boolean;
+    onClick?: (event: React.SyntheticEvent) => void;
+    replace?: boolean;
+    strict?: boolean;
+    to: string | Location;
+}
+
+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.js → src/elements/common/nav-button/index.js.flow

@@ -1,2 +1,3 @@
+// @flow
 export { default as BackButton } from './BackButton';
 export { default } from './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';