import { Theme } from '@mui/material'; import { withStyles } from '@mui/styles'; import clsx from 'clsx'; import React, { Component } from 'react'; import { WithTranslation } from 'react-i18next'; import { translate } from '../../../base/i18n/functions'; import Dialog from '../../../base/ui/components/web/Dialog'; /** * The type of the React {@code Component} props of * {@link KeyboardShortcutsDialog}. */ interface Props extends WithTranslation { /** * An object containing the CSS classes. */ classes: any; /** * A Map with keyboard keys as keys and translation keys as values. */ shortcutDescriptions: Map; } /** * Creates the styles for the component. * * @param {Object} theme - The current UI theme. * * @returns {Object} */ const styles = (theme: Theme) => { return { list: { listStyleType: 'none', padding: 0, '& .shortcuts-list__item': { display: 'flex', justifyContent: 'space-between', marginBottom: theme.spacing(2) }, '& .item-action': { backgroundColor: theme.palette.ui04, fontWeight: 'bold', padding: '1px 4px', borderRadius: '4px' } } }; }; /** * Implements a React {@link Component} which displays a dialog describing * registered keyboard shortcuts. * * @augments Component */ class KeyboardShortcutsDialog extends Component { /** * Implements React's {@link Component#render()}. * * @inheritdoc * @returns {ReactElement} */ render() { const shortcuts = Array.from(this.props.shortcutDescriptions) .map(description => this._renderShortcutsListItem(...description)); return (
    {shortcuts}
); } /** * Creates a {@code ReactElement} for describing a single keyboard shortcut. * * @param {string} keyboardKey - The keyboard key that triggers an action. * @param {string} translationKey - A description of what the action does. * @private * @returns {ReactElement} */ _renderShortcutsListItem(keyboardKey: string, translationKey: string) { let modifierKey = 'Alt'; if (window.navigator?.platform) { if (window.navigator.platform.indexOf('Mac') !== -1) { modifierKey = '⌥'; } } return (
  • { this.props.t(translationKey) } { keyboardKey.startsWith(':') ? `${modifierKey} + ${keyboardKey.slice(1)}` : keyboardKey }
  • ); } } export default translate(withStyles(styles)(KeyboardShortcutsDialog));