-
Notifications
You must be signed in to change notification settings - Fork 51
/
KeyCombinations.js
55 lines (48 loc) · 1.27 KB
/
KeyCombinations.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React from 'react'
import PropTypes from 'prop-types'
/**
* Displays the set of key combinations for a keyboard shortcut.
*/
function KeyCombinations ({ keys }) {
const keyDefs = keys.map(symbolizeKey).map((key, index) => {
return <kbd key={index}>{key}</kbd>
})
return <span>{keyDefs}</span>
}
KeyCombinations.propTypes = {
// string representations of keyboard shortcuts, in long form (not symbolized)
keys: PropTypes.arrayOf(PropTypes.string).isRequired
}
export default KeyCombinations
// symbols to use for named keys
const symbols = {
command: '⌘',
shift: '⇧',
left: '←',
right: '→',
up: '↑',
down: '↓',
'return': '↩',
backspace: '⌫'
}
/**
* Convert strings like cmd into symbols like ⌘
* @param {String} combo Key combination, e.g. 'mod+f'
* @return {String} The key combination with symbols
*/
function symbolizeKey (combo) {
combo = combo.split('+')
for (var i = 0; i < combo.length; i++) {
// try to resolve command / ctrl based on OS:
if (combo[i] === 'mod') {
if (window.navigator &&
window.navigator.platform.indexOf('Mac') >= 0) {
combo[i] = 'command'
} else {
combo[i] = 'ctrl'
}
}
combo[i] = symbols[combo[i]] || combo[i]
}
return combo.join(' + ')
}