@spaced-out/ui-design-system/lib/components/SubMenu/SubMenuLink.js.flow

Sense UI components library

//@flow strict

import * as React from 'react';

import classify from '../../utils/classify';
import type {IconSize, IconType} from '../Icon';
import {Icon} from '../Icon';
import {ButtonTextMedium, TEXT_COLORS} from '../Text';
import {Truncate} from '../Truncate';

import css from './SubMenu.module.css';


export type SubMenuLinkProps = {
  menuLinkTitle?: string,
  menuLinkIcon: string,
  menuLinkIconSize?: IconSize,
  menuLinkIconType?: IconType,
  menuKey: string,
  selectedMenuKey?: string,
  disabled?: boolean,
  onChange?: (selectedMenuLinkKey: string) => mixed,
  ...
};

export const SubMenuLink: React$AbstractComponent<
  SubMenuLinkProps,
  HTMLElement,
> = React.forwardRef(
  (
    {
      menuLinkTitle,
      menuLinkIcon,
      menuLinkIconSize = 'medium',
      menuLinkIconType,
      menuKey,
      selectedMenuKey,
      disabled = false,
      onChange,
    }: SubMenuLinkProps,
    ref,
  ): React.Node => {
    const isMenuLinkSelected = selectedMenuKey === menuKey;

    const onChangeHandler = () => {
      if (!disabled) {
        onChange && onChange(menuKey);
      }
    };

    const onKeyDownHandler = (e) => {
      if (e.key === 'Enter') {
        onChangeHandler();
      }
    };

    return (
      <div className={classify(css.subMenuLinkWrapper)}>
        <div
          className={classify(css.subMenuLink, {
            [css.highlightedMenu]: isMenuLinkSelected,
          })}
          onKeyDown={onKeyDownHandler}
          onClick={onChangeHandler}
          ref={ref}
          tabIndex={disabled ? '-1' : 0}
        >
          <div className={css.groupTitleWrapper}>
            {!!menuLinkIcon && (
              <Icon
                color={TEXT_COLORS.inverseSecondary}
                name={menuLinkIcon}
                size={menuLinkIconSize}
                type={menuLinkIconType}
                className={css.menuLinkIcon}
              />
            )}
            <ButtonTextMedium
              color={TEXT_COLORS.inverseSecondary}
              className={css.menuLinkTitle}
            >
              <Truncate>{menuLinkTitle}</Truncate>
            </ButtonTextMedium>
          </div>
        </div>
      </div>
    );
  },
);