Line data    Source code

       1              : import * as React from 'react';
       2              : import { Link } from 'react-router-dom';
       3              : import { classNames } from '../utils/classnames.js';
       4              : 
       5              : import * as styles from './navbar_button.module.css';
       6              : import { RouteContext } from './router/router.js';
       7              : 
       8            1 : export enum HoverMode {
       9            1 :     Invert,
      10            1 :     Darken,
      11            1 :     Lighten,
      12            1 : }
      13              : 
      14              : type LinkProps = {
      15              :     'aria-label'?: string;
      16              :     className?: string;
      17              :     to: string;
      18              :     hover?: HoverMode;
      19              :     invert?: boolean;
      20              :     children?: React.ReactElement;
      21              :     newWindow?: boolean;
      22              :     state: RouteContext;
      23              :     title?: string;
      24              : };
      25              : 
      26              : export const NavBarLink: React.FC<LinkProps> = (props: LinkProps) => (
      27              :     <Link
      28              :         aria-label={props['aria-label']}
      29              :         className={classNames(props.className, {
      30              :             [styles.button]: props.invert === undefined || !props.invert,
      31              :             [styles.button_inverted]: props.invert,
      32              :             [styles.hover_invert]: props.hover === undefined || props.hover === HoverMode.Invert,
      33              :             [styles.hover_lighten]: props.hover === HoverMode.Lighten,
      34              :             [styles.hover_darken]: props.hover === HoverMode.Darken,
      35              :         })}
      36              :         to={props.to}
      37              :         target={props.newWindow ? '_blank' : undefined}
      38              :         state={props.state}
      39              :         title={props.title}
      40              :     >
      41              :         {props.children}
      42              :     </Link>
      43              : );
      44              : 
      45              : type ButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
      46              :     className?: string;
      47              :     hover?: HoverMode;
      48              :     invert?: boolean;
      49              :     children?: React.ReactNode;
      50              : };
      51              : 
      52              : export const NavBarButton: React.FC<ButtonProps> = ({ className, hover, invert, children, type, ...props }) => (
      53              :     <button
      54              :         {...props}
      55              :         className={classNames(className, {
      56              :             [styles.button]: invert === undefined || !invert,
      57              :             [styles.button_inverted]: invert,
      58              :             [styles.hover_invert]: hover === undefined || hover === HoverMode.Invert,
      59              :             [styles.hover_lighten]: hover === HoverMode.Lighten,
      60              :             [styles.hover_darken]: hover === HoverMode.Darken,
      61              :         })}
      62              :         type={type ?? 'button'}
      63              :     >
      64              :         {children}
      65              :     </button>
      66              : );
      67              : 
      68            1 : export const NavBarButtonWithRef = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, hover, invert, children, type, ...props }, ref) => (
      69            1 :     <button
      70            1 :         {...props}
      71            1 :         ref={ref}
      72            1 :         className={classNames(className, {
      73            1 :             [styles.button]: invert === undefined || !invert,
      74            1 :             [styles.button_inverted]: invert,
      75            1 :             [styles.hover_invert]: hover === undefined || hover === HoverMode.Invert,
      76            1 :             [styles.hover_lighten]: hover === HoverMode.Lighten,
      77            1 :             [styles.hover_darken]: hover === HoverMode.Darken,
      78            1 :         })}
      79            1 :         type={type ?? 'button'}
      80              :     >
      81            1 :         {children}
      82            1 :     </button>
      83            1 : ));