Prowlarr/frontend/src/Components/Page/Header/KeyboardShortcutsModalContent.js

import PropTypes from 'prop-types';
import React from 'react';
import { shortcuts } from 'Components/keyboardShortcuts';
import Button from 'Components/Link/Button';
import ModalBody from 'Components/Modal/ModalBody';
import ModalContent from 'Components/Modal/ModalContent';
import ModalFooter from 'Components/Modal/ModalFooter';
import ModalHeader from 'Components/Modal/ModalHeader';
import translate from 'Utilities/String/translate';
import styles from './KeyboardShortcutsModalContent.css';

function getShortcuts() {
  const allShortcuts = [];

  Object.keys(shortcuts).forEach((key) => {
    allShortcuts.push(shortcuts[key]);
  });

  return allShortcuts;
}

function getShortcutKey(combo, isOsx) {
  const comboMatch = combo.match(/(.+?)\+(.*)/);

  if (!comboMatch) {
    return combo;
  }

  const modifier = comboMatch[1];
  let key = comboMatch[2];
  let osModifier = modifier;

  if (modifier === 'mod') {
    osModifier = isOsx ? 'cmd' : 'Ctrl';
  }

  if (key === 'home') {
    key = isOsx ? '↑' : 'Home';
  }

  if (key === 'end') {
    key = isOsx ? '↓' : 'End';
  }

  return `${osModifier} + ${key}`;
}

function KeyboardShortcutsModalContent(props) {
  const {
    isOsx,
    onModalClose
  } = props;

  const allShortcuts = getShortcuts();

  return (
    <ModalContent onModalClose={onModalClose}>
      <ModalHeader>
        Keyboard Shortcuts
      </ModalHeader>

      <ModalBody>
        {
          allShortcuts.map((shortcut) => {
            return (
              <div
                key={shortcut.name}
                className={styles.shortcut}
              >
                <div className={styles.key}>
                  {getShortcutKey(shortcut.key, isOsx)}
                </div>

                <div>
                  {shortcut.name}
                </div>
              </div>
            );
          })
        }
      </ModalBody>

      <ModalFooter>
        <Button
          onPress={onModalClose}
        >
          {translate('Close')}
        </Button>
      </ModalFooter>
    </ModalContent>
  );
}

KeyboardShortcutsModalContent.propTypes = {
  isOsx: PropTypes.bool.isRequired,
  onModalClose: PropTypes.func.isRequired
};

export default KeyboardShortcutsModalContent;