Blame · Kbd.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import {KeyCode, Modifier} from './KeyboardShortcuts';
b69ab31	9	import {isMac, isWindows} from './OperatingSystem';
b69ab31	10
b69ab31	11	import './Kbd.css';
b69ab31	12
b69ab31	13	/** Keyboard key, useful for rendering keyboard shortcuts */
b69ab31	14	export function Kbd({keycode, modifiers}: {keycode?: KeyCode; modifiers?: Array<Modifier>}) {
b69ab31	15	return (
b69ab31	16	<span className="kbd-group" title={asEntireString(keycode, modifiers)}>
b69ab31	17	{modifiers
b69ab31	18	?.filter(modifier => modifier != Modifier.NONE)
b69ab31	19	.map(modifier => (
b69ab31	20	<kbd className="modifier" key={modifier}>
b69ab31	21	{modifierToIcon[modifier]}
b69ab31	22	</kbd>
b69ab31	23	))}
b69ab31	24	{keycode != null && <kbd>{keycodeToString(keycode)}</kbd>}
b69ab31	25	</span>
b69ab31	26	);
b69ab31	27	}
b69ab31	28
b69ab31	29	function keycodeToString(keycode: KeyCode): string {
b69ab31	30	switch (keycode) {
b69ab31	31	case KeyCode.QuestionMark:
b69ab31	32	return '?';
b69ab31	33	case KeyCode.SingleQuote:
b69ab31	34	return "'";
b69ab31	35	case KeyCode.Period:
b69ab31	36	return '.';
b69ab31	37	case KeyCode.Escape:
b69ab31	38	return 'Esc';
b69ab31	39	case KeyCode.Plus:
b69ab31	40	return '+';
b69ab31	41	case KeyCode.Minus:
b69ab31	42	return '-';
b69ab31	43	default:
b69ab31	44	return String.fromCharCode(keycode).toUpperCase();
b69ab31	45	}
b69ab31	46	}
b69ab31	47
b69ab31	48	const modifierToIcon = isMac
b69ab31	49	? ({
b69ab31	50	[Modifier.ALT]: '⌥',
b69ab31	51	[Modifier.CMD]: '⌘',
b69ab31	52	[Modifier.SHIFT]: '⇧',
b69ab31	53	[Modifier.CTRL]: '⌃',
b69ab31	54	[Modifier.NONE]: '',
b69ab31	55	} as const)
b69ab31	56	: ({
b69ab31	57	[Modifier.ALT]: 'Alt',
b69ab31	58	[Modifier.CMD]: isWindows ? 'Win' : 'Super',
b69ab31	59	[Modifier.SHIFT]: 'Shift',
b69ab31	60	[Modifier.CTRL]: 'Ctrl',
b69ab31	61	[Modifier.NONE]: '',
b69ab31	62	} as const);
b69ab31	63
b69ab31	64	const modifierToString = {
b69ab31	65	[Modifier.ALT]: 'Alt',
b69ab31	66	[Modifier.CMD]: 'Command',
b69ab31	67	[Modifier.SHIFT]: 'Shift',
b69ab31	68	[Modifier.CTRL]: 'Control',
b69ab31	69	[Modifier.NONE]: '',
b69ab31	70	} as const;
b69ab31	71
b69ab31	72	function asEntireString(keycode?: KeyCode, modifiers?: Array<Modifier>): string {
b69ab31	73	const result: Array<string> = [];
b69ab31	74	for (const modifier of modifiers ?? []) {
b69ab31	75	result.push(modifierToString[modifier]);
b69ab31	76	}
b69ab31	77	if (keycode != null) {
b69ab31	78	result.push(keycodeToString(keycode));
b69ab31	79	}
b69ab31	80	return result.join(' + ');
b69ab31	81	}