Shortcut.tsx

import type { FunctionComponent } from 'react';
import { MouseIcon } from '@patternfly/react-icons';
import { Label } from '@patternfly/react-core';
import { createUseStyles } from 'react-jss';
import { css } from '@patternfly/react-styles';

export interface ShortcutProps {
  /** Array of shortcut keys */
  keys: string[];
  /** Shortcut description */
  description?: React.ReactNode;
  /** Indicates whether symbols should be displayed for certain keys */
  showSymbols?: boolean;
  /** Show hover in the shortcut */
  hover?: boolean;
  /** Show click in the shortcut */
  click?: boolean;
  /** Show right click in the shortcut */
  rightClick?: boolean;
  /** Show drag in the shortcut */
  drag?: boolean;
  /** Show drag and drop in the shortcut */
  dragAndDrop?: boolean;
  /** Custom label for the "Hover" mouse action. Defaults to "Hover" */
  hoverLabel?: string;
  /** Custom label for the "Click" mouse action. Defaults to "Click" */
  clickLabel?: string;
  /** Custom label for the "Right click" mouse action. Defaults to "Right click" */
  rightClickLabel?: string;
  /** Custom label for the "Drag" mouse action. Defaults to "Drag" */
  dragLabel?: string;
  /** Custom label for the "Drag + Drop" mouse action. Defaults to "Drag + Drop" */
  dragAndDropLabel?: string;
  /** Shortcut className */
  className?: string;
  /** Custom OUIA ID */
  ouiaId?: string | number;
}

const symbols = {
  'shift': '⇧',
  'opt': '⌥',
  'cmd': '⌘',
  'enter': '↵',
  'ctrl': '^',
  'caps lock': '⇪',
  'tab': '↹',
  'win': '⊞',
  'backspace': '⌫'
}

const useStyles = createUseStyles({
  shortcut: {
    marginRight: 'var(--pf-t--global--spacer--400)'
  }
})

const Shortcut: FunctionComponent<ShortcutProps> = ({
  keys = [],
  description = null,
  showSymbols = true,
  hover,
  click,
  drag,
  rightClick,
  dragAndDrop,
  hoverLabel = 'Hover',
  clickLabel = 'Click',
  rightClickLabel = 'Right click',
  dragLabel = 'Drag',
  dragAndDropLabel = 'Drag + Drop',
  className,
  ouiaId = 'Shortcut',
  ...props
}: ShortcutProps) => {
  const classes = useStyles();
  const badges = [
    ...(hover ? [
      <Label variant="outline" key="hover" data-test-id="hover">
        <MouseIcon />{` ${hoverLabel}`}
      </Label>
    ] : []),
    ...keys.map((key) => {
      const trimmedKey = key.trim().toLowerCase();
      return(
        <Label variant="outline" key={key} data-test-id={`${key}-key`}>
          {showSymbols && symbols[trimmedKey] ? `${symbols[trimmedKey]} ` : '' }
          {key.length === 1 ? key.toUpperCase() : key[0].toUpperCase() + key.slice(1).toLowerCase()}
        </Label>
      )}),
    ...(click ? [
      <Label variant="outline" key="click" data-test-id="click">
        <MouseIcon />{` ${clickLabel}`}
      </Label>
    ] : []),
    ...(rightClick ? [
      <Label variant="outline" key="right-click" data-test-id="right-click">
        <MouseIcon />{` ${rightClickLabel}`}
      </Label>
    ] : []),
    ...(drag ? [
      <Label variant="outline" key="drag" data-test-id="drag">
        <MouseIcon />{` ${dragLabel}`}
      </Label>
    ] : []),
    ...(dragAndDrop ? [
      <Label variant="outline" key="drag-and-drop" data-test-id="drag-and-drop">
        <MouseIcon />{` ${dragAndDropLabel}`}
      </Label>
    ] : [])
  ]

  return (
    <>
      <span className={css({ [classes.shortcut]: description, className })} data-ouia-component-id={ouiaId} {...props}>
        {badges.length > 0 && badges.reduce((prev, curr, idx) => (
          <span key={idx}>{[ prev, ' + ', curr ]}</span>
        ))}
      </span>
      {description}
    </>
  );}

export default Shortcut;