@primer/react
Version:
An implementation of GitHub's Primer Design System using React
114 lines (113 loc) • 3.6 kB
JavaScript
//#region src/KeybindingHint/key-names.ts
/** Converts the first character of the string to upper case and the remaining to lower case. */
const capitalize = ([first, ...rest]) => {
var _first$toUpperCase;
return ((_first$toUpperCase = first === null || first === void 0 ? void 0 : first.toUpperCase()) !== null && _first$toUpperCase !== void 0 ? _first$toUpperCase : "") + rest.join("").toLowerCase();
};
/**
* Short-form iconic versions of keys. These should be intuitive (not archaic) and match icons on keyboards.
*/
const condensedKeyName = (key, platform) => {
var _alt$control$shift$me;
return (_alt$control$shift$me = {
alt: platform === "apple" ? "⌥" : "Alt",
control: "⌃",
shift: "⇧",
meta: platform === "apple" ? "⌘" : platform === "windows" ? "Win" : "Meta",
mod: platform === "apple" ? "⌘" : "⌃",
pageup: "PgUp",
pagedown: "PgDn",
arrowup: "↑",
arrowdown: "↓",
arrowleft: "←",
arrowright: "→",
plus: "+",
backspace: "⌫",
delete: "Del",
space: "␣",
tab: "⇥",
enter: "⏎",
escape: "Esc",
function: "Fn",
capslock: "CapsLock",
insert: "Ins",
printscreen: "PrtScn"
}[key]) !== null && _alt$control$shift$me !== void 0 ? _alt$control$shift$me : capitalize(key);
};
/**
* Specific key displays for 'full' format. We still do show some icons (ie punctuation)
* because that's more intuitive, but for the rest of keys we show the standard key name.
*/
const fullKeyName = (key, platform) => {
var _alt$meta$mod$$pageu;
return (_alt$meta$mod$$pageu = {
alt: platform === "apple" ? "Option" : "Alt",
meta: platform === "apple" ? "Command" : platform === "windows" ? "Windows" : "Meta",
mod: platform === "apple" ? "Command" : "Control",
"+": "Plus",
pageup: "Page Up",
pagedown: "Page Down",
arrowup: "Up Arrow",
arrowdown: "Down Arrow",
arrowleft: "Left Arrow",
arrowright: "Right Arrow",
capslock: "Caps Lock",
printscreen: "Print Screen"
}[key]) !== null && _alt$meta$mod$$pageu !== void 0 ? _alt$meta$mod$$pageu : capitalize(key);
};
/**
* Accessible key names intended to be read by a screen reader. This prevents screen
* readers from expressing punctuation in speech, ie, reading a long pause instead of the
* word "period".
*/
const accessibleKeyName = (key, platform) => {
var _alt$meta$mod$pageup$;
return (_alt$meta$mod$pageup$ = {
alt: platform === "apple" ? "option" : "alt",
meta: platform === "apple" ? "command" : platform === "windows" ? "Windows" : "meta",
mod: platform === "apple" ? "command" : "control",
pageup: "page up",
pagedown: "page down",
arrowup: "up arrow",
arrowdown: "down arrow",
arrowleft: "left arrow",
arrowright: "right arrow",
capslock: "caps lock",
printscreen: "print screen",
"`": "backtick",
"~": "tilde",
"!": "exclamation point",
"@": "at",
"#": "hash",
$: "dollar sign",
"%": "percent",
"^": "caret",
"&": "ampersand",
"*": "asterisk",
"(": "left parenthesis",
")": "right parenthesis",
_: "underscore",
"-": "dash",
"+": "plus",
"=": "equals",
"[": "left bracket",
"{": "left curly brace",
"]": "right bracket",
"}": "right curly brace",
"\\": "backslash",
"|": "pipe",
";": "semicolon",
":": "colon",
"'": "single quote",
"\"": "double quote",
",": "comma",
"<": "left angle bracket",
".": "period",
">": "right angle bracket",
"/": "forward slash",
"?": "question mark",
" ": "space"
}[key]) !== null && _alt$meta$mod$pageup$ !== void 0 ? _alt$meta$mod$pageup$ : key.toLowerCase();
};
//#endregion
export { accessibleKeyName, condensedKeyName, fullKeyName };