blob: 26eb222d748df644a7f56924aee4fabd86f1a5fb (
plain)
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
import FilledInput from '@material-ui/core/FilledInput';
import FormControl from '@material-ui/core/FormControl';
import InputLabel from '@material-ui/core/InputLabel';
import { useState } from 'react';
import { v4 as uuid } from 'uuid';
function Keybind(props: {
keyName: string;
onClick?: () => any;
}) {
return <span className='keybind' onClick={props.onClick}>{props.keyName}</span>;
}
var keyBlacklist = [
'Shift',
'Control',
'Alt',
'Meta',
];
var keyMap = {
' ': 'Space',
'ArrowDown': 'Down',
'ArrowLeft': 'Left',
'ArrowRight': 'Right',
'ArrowUp': 'Up',
};
export default function KeybindSelector(props: {
label: string;
value: string[];
onChange?: (newValue: string[]) => any;
}) {
var [inputID, _setInputID] = useState(uuid());
function KeybindSelectorInner() {
return <div className='keybind-selector-inner'>
{props.value.map(s =>
<Keybind
keyName={s}
onClick={() => {
props.onChange && props.onChange(props.value.filter(v => v != s));
}}
/>
)}
{props.value.length == 0 && <span className='placeholder'>Unbound</span>}
</div>;
}
return <FormControl
variant='filled'
className='keybind-selector'
tabIndex={0}
onKeyDown={e => {
e.preventDefault();
var key = e.key;
if (key in keyMap) key = keyMap[key];
if (keyBlacklist.includes(key)) return;
var newArr = Array.from(props.value);
if (!newArr.includes(key)) newArr.push(key);
props.onChange(newArr);
}}
>
<InputLabel htmlFor={inputID} shrink>{props.label}</InputLabel>
<FilledInput id={inputID} inputComponent={() => <KeybindSelectorInner />} />
</FormControl>;
}
|