codekingpro/portable-devtools

1import React from 'react';2import { makeStyles } from '@mui/styles';3import PropTypes from 'prop-types';4import { isMac } from '../keyboard_shortcuts';5import _ from 'lodash';6import CustomPropTypes from '../custom_prop_types';7import gettext from 'sources/gettext';8 9const useStyles = makeStyles((theme)=>({10  shortcutTitle: {11    width: '100%',12    textAlign: 'center',13  },14  shortcut: {15    justifyContent: 'center',16    marginTop: '0.125rem',17    display: 'flex',18  },19  key: {20    padding: '0 0.25rem',21    border: `1px solid ${theme.otherVars.borderColor}`,22    marginRight: '0.125rem',23    borderRadius: theme.shape.borderRadius,24  },25}));26 27export function getBrowserAccesskey() {28  /* Ref: https://www.w3schools.com/tags/att_accesskey.asp */29  let ua = window.navigator.userAgent;30  // macOS31  if (ua.match(/macintosh/i)) {32    return ['Ctrl', 'Option'];33  }34 35  // Windows / Linux36  if (ua.match(/windows/i) || ua.match(/linux/i)) {37    if(ua.match(/firefox/i)) {38      return ['Alt', 'Shift'];39    }40    return ['Alt'];41  }42 43  // Fallback44  return [gettext('Accesskey')];45}46 47export function shortcutToString(shortcut, accesskey=null, asArray=false) {48  let keys = [];49  if(accesskey) {50    keys = getBrowserAccesskey();51    keys.push(_.capitalize(accesskey?.toUpperCase()));52  } else if(shortcut) {53    shortcut.alt && keys.push((isMac() ? 'Option' : 'Alt'));54    if(isMac() && shortcut.ctrl_is_meta) {55      shortcut.control && keys.push('Cmd');56    } else {57      shortcut.control && keys.push('Ctrl');58    }59    shortcut.shift && keys.push('Shift');60    keys.push(_.capitalize(shortcut.key.char));61  } else {62    return '';63  }64 65  return asArray ? keys : keys.join(' + ');66}67 68/* The tooltip content to show shortcut details */69export default function ShortcutTitle({title, shortcut, accesskey}) {70  const classes = useStyles();71  let keys = shortcutToString(shortcut, accesskey, true);72  return (73    <>74      <div className={classes.shortcutTitle}>{title}</div>75      <div className={classes.shortcut}>76        {keys.map((key)=>{77          return <div key={key} className={classes.key}>{key}</div>;78        })}79      </div>80    </>81  );82}83 84ShortcutTitle.propTypes = {85  title: PropTypes.string,86  shortcut: CustomPropTypes.shortcut,87  accesskey: PropTypes.string,88};89