1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 | import classNames from "classnames";
|
18 | import * as React from "react";
|
19 | import { polyfill } from "react-lifecycles-compat";
|
20 |
|
21 | import { AbstractPureComponent2, Classes, DISPLAYNAME_PREFIX, Props } from "../../common";
|
22 | import { Icon, IconName } from "../icon/icon";
|
23 | import { normalizeKeyCombo } from "./hotkeyParser";
|
24 |
|
25 | const KeyIcons: { [key: string]: { icon: IconName; iconTitle: string } } = {
|
26 | alt: { icon: "key-option", iconTitle: "Alt/Option key" },
|
27 | cmd: { icon: "key-command", iconTitle: "Command key" },
|
28 | ctrl: { icon: "key-control", iconTitle: "Control key" },
|
29 | delete: { icon: "key-delete", iconTitle: "Delete key" },
|
30 | down: { icon: "arrow-down", iconTitle: "Down key" },
|
31 | enter: { icon: "key-enter", iconTitle: "Enter key" },
|
32 | left: { icon: "arrow-left", iconTitle: "Left key" },
|
33 | meta: { icon: "key-command", iconTitle: "Command key" },
|
34 | right: { icon: "arrow-right", iconTitle: "Right key" },
|
35 | shift: { icon: "key-shift", iconTitle: "Shift key" },
|
36 | up: { icon: "arrow-up", iconTitle: "Up key" },
|
37 | };
|
38 |
|
39 |
|
40 | export type KeyComboTagProps = IKeyComboProps;
|
41 |
|
42 | export interface IKeyComboProps extends Props {
|
43 |
|
44 | combo: string;
|
45 |
|
46 | |
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 | minimal?: boolean;
|
54 | }
|
55 |
|
56 | @polyfill
|
57 | export class KeyCombo extends AbstractPureComponent2<KeyComboTagProps> {
|
58 | public static displayName = `${DISPLAYNAME_PREFIX}.KeyCombo`;
|
59 |
|
60 | public render() {
|
61 | const { className, combo, minimal } = this.props;
|
62 | const keys = normalizeKeyCombo(combo)
|
63 | .map(key => (key.length === 1 ? key.toUpperCase() : key))
|
64 | .map(minimal ? this.renderMinimalKey : this.renderKey);
|
65 | return <span className={classNames(Classes.KEY_COMBO, className)}>{keys}</span>;
|
66 | }
|
67 |
|
68 | private renderKey = (key: string, index: number) => {
|
69 | const icon = KeyIcons[key];
|
70 | const reactKey = `key-${index}`;
|
71 | return (
|
72 | <kbd className={classNames(Classes.KEY, { [Classes.MODIFIER_KEY]: icon != null })} key={reactKey}>
|
73 | {icon != null && <Icon icon={icon.icon} title={icon.iconTitle} />}
|
74 | {key}
|
75 | </kbd>
|
76 | );
|
77 | };
|
78 |
|
79 | private renderMinimalKey = (key: string, index: number) => {
|
80 | const icon = KeyIcons[key];
|
81 | return icon == null ? key : <Icon icon={icon.icon} title={icon.iconTitle} key={`key-${index}`} />;
|
82 | };
|
83 | }
|