@craftercms/studio-ui/components/KeyboardShortcutsDialog/KeyboardShortcutsDialog.js

Services, components, models & utils to build CrafterCMS authoring extensions.

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/*
 * Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License version 3 as published by
 * the Free Software Foundation.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import React from 'react';
import EnhancedDialog from '../EnhancedDialog';
import { FormattedMessage, useIntl } from 'react-intl';
import DialogBody from '../DialogBody/DialogBody';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import Chip from '@mui/material/Chip';
import Typography from '@mui/material/Typography';
import { getPossibleTranslation } from '../../utils/i18n';
export function KeyboardShortcutsDialog(props) {
  const { shortcuts, sxs, ...rest } = props;
  const { formatMessage } = useIntl();
  return React.createElement(
    EnhancedDialog,
    {
      title: React.createElement(FormattedMessage, {
        id: 'keyboardShortcutsDialog.title',
        defaultMessage: 'Keyboard Shortcuts'
      }),
      maxWidth: 'sm',
      ...rest
    },
    React.createElement(
      DialogBody,
      null,
      shortcuts.map((category, index) =>
        React.createElement(
          Card,
          { key: index },
          React.createElement(
            CardContent,
            null,
            React.createElement(
              Typography,
              {
                variant: 'subtitle1',
                gutterBottom: true,
                sx: {
                  fontSize: '1.25rem',
                  ...sxs?.categoryTitle
                }
              },
              getPossibleTranslation(category.label, formatMessage)
            ),
            React.createElement(
              List,
              {
                sx: {
                  padding: 0,
                  ...sxs?.shortcutsList
                }
              },
              category.shortcuts.map(({ label, shortcut }, index) =>
                React.createElement(
                  ListItem,
                  {
                    key: index,
                    secondaryAction: React.createElement(Chip, {
                      label: shortcut,
                      sx: {
                        fontFamily: 'monospace',
                        borderRadius: '8px',
                        ...sxs?.shortcutChip
                      }
                    }),
                    divider: true
                  },
                  React.createElement(ListItemText, { primary: getPossibleTranslation(label, formatMessage) })
                )
              )
            )
          )
        )
      )
    )
  );
}
export default KeyboardShortcutsDialog;