<commit_before>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<string, string>;
}

/**
 * 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<Props> {
    /**
     * Implements React's {@link Component#render()}.
     *
     * @inheritdoc
     * @returns {ReactElement}
     */
    render() {
        const shortcuts = Array.from(this.props.shortcutDescriptions)
            .map(description => this._renderShortcutsListItem(...description));

        return (
            <Dialog
                cancel = {{ hidden: true }}
                ok = {{ hidden: true }}
                titleKey = 'keyboardShortcuts.keyboardShortcuts'>
                <div
                    id = 'keyboard-shortcuts'>
                    <ul
                        className = { clsx('shortcuts-list', this.props.classes.list) }
                        id = 'keyboard-shortcuts-list'>
                        {shortcuts}
                    </ul>
                </div>
            </Dialog>
        );
    }

    /**
     * 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 (
            <li
                className = 'shortcuts-list__item'
                key = { keyboardKey }>
                <span
                    aria-label = { this.props.t(translationKey) }
                    className = 'shortcuts-list__description'>
                    { this.props.t(translationKey) }
                </span>
                <span className = 'item-action'>
                    { keyboardKey.startsWith(':')
                        ? `${modifierKey} + ${keyboardKey.slice(1)}`
                        : keyboardKey }
                </span>
            </li>
        );
    }
}

export default translate(withStyles(styles)(KeyboardShortcutsDialog));<commit_msg>ref(keyboard-shortcuts) Change Dialog to function component (#12403)<commit_after>import { Theme } from '@mui/material';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';

import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Dialog from '../../../base/ui/components/web/Dialog';

/**
 * The type of the React {@code Component} props of
 * {@link KeyboardShortcutsDialog}.
 */
interface Props {

    /**
     * A Map with keyboard keys as keys and translation keys as values.
     */
    shortcutDescriptions: Map<string, string>;
}

/**
 * Creates the styles for the component.
 *
 * @param {Object} theme - The current UI theme.
 *
 * @returns {Object}
 */
const useStyles = makeStyles()((theme: Theme) => {
    return {
        list: {
            listStyleType: 'none',
            padding: 0,

            '& .shortcuts-list__item': {
                display: 'flex',
                justifyContent: 'space-between',
                marginBottom: theme.spacing(2),
                ...withPixelLineHeight(theme.typography.labelRegular),
                color: theme.palette.text01
            },

            '& .item-action': {
                backgroundColor: theme.palette.ui04,
                fontWeight: 'bold',
                padding: '1px 4px',
                borderRadius: '4px'
            }
        }
    };
});

const KeyboardShortcutsDialog = ({ shortcutDescriptions }: Props) => {
    const { classes, cx } = useStyles();
    const { t } = useTranslation();

    // eslint-disable-next-line react/no-multi-comp
    const _renderShortcutsListItem = (keyboardKey: string, translationKey: string) => {
        let modifierKey = 'Alt';

        if (window.navigator?.platform) {
            if (window.navigator.platform.indexOf('Mac') !== -1) {
                modifierKey = '⌥';
            }
        }

        return (
            <li
                className = 'shortcuts-list__item'
                key = { keyboardKey }>
                <span
                    aria-label = { t(translationKey) }
                    className = 'shortcuts-list__description'>
                    {t(translationKey)}
                </span>
                <span className = 'item-action'>
                    {keyboardKey.startsWith(':')
                        ? `${modifierKey} + ${keyboardKey.slice(1)}`
                        : keyboardKey}
                </span>
            </li>
        );
    };

    return (
        <Dialog
            cancel = {{ hidden: true }}
            ok = {{ hidden: true }}
            titleKey = 'keyboardShortcuts.keyboardShortcuts'>
            <div
                id = 'keyboard-shortcuts'>
                <ul
                    className = { cx('shortcuts-list', classes.list) }
                    id = 'keyboard-shortcuts-list'>
                    {Array.from(shortcutDescriptions)
                        .map(description => _renderShortcutsListItem(...description))}
                </ul>
            </div>
        </Dialog>
    );
};

export default KeyboardShortcutsDialog;
{'fraction_non_alphanumeric': 0.12454158720844946, 'fraction_numerical': 0.004547454892181312, 'mean_word_length': 1.6092613853807884, 'pattern_counts': {'":': 0, '<': 30, '<?xml version=': 0, '>': 36, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6891852', 'n_tokens_mistral': 1887, 'n_tokens_neox': 1776, 'n_words': 417}