insomnia/packages/insomnia-app/app/ui/components/hotkey.js

// @flow
import * as React from 'react';
import classnames from 'classnames';
import { isMac } from '../../common/constants';
import type { KeyBindings, KeyCombination } from '../../common/hotkeys';
import { constructKeyCombinationDisplay, getPlatformKeyCombinations } from '../../common/hotkeys';

type Props = {
  // One of these two must be given.
  // If both is given, keyCombination will be used.
  keyCombination?: KeyCombination,
  keyBindings?: KeyBindings,

  // Optional
  className?: string,
  // Show fallback message if keyCombination is not given,
  // but keyBindings has no key combinations.
  useFallbackMessage?: boolean,
};

class Hotkey extends React.PureComponent<Props> {
  render() {
    const { keyCombination, keyBindings, className, useFallbackMessage } = this.props;

    if (keyCombination == null && keyBindings == null) {
      console.error('Hotkey needs one of keyCombination or keyBindings!');
      return null;
    }

    let keyComb = null;
    if (keyCombination != null) {
      keyComb = keyCombination;
    } else if (keyBindings != null) {
      const keyCombs = getPlatformKeyCombinations(keyBindings);
      // Only take the first key combination if there is a mapping.
      if (keyCombs.length > 0) {
        keyComb = keyCombs[0];
      }
    }

    let display = '';
    if (keyComb != null) {
      display = constructKeyCombinationDisplay(keyComb, false);
    }

    const isFallback = display.length === 0 && useFallbackMessage;
    if (isFallback) {
      display = 'Not defined';
    }
    const classes = {
      'font-normal': isMac(),
      italic: isFallback,
    };

    return <span className={classnames(className, classes)}>{display}</span>;
  }
}

export default Hotkey;