aboutsummaryrefslogtreecommitdiff
path: root/components
diff options
context:
space:
mode:
authorlonkaars <loek@pipeframe.xyz>2021-06-20 14:03:22 +0200
committerlonkaars <loek@pipeframe.xyz>2021-06-20 14:03:22 +0200
commita5eeeca1383a0fdf50d0c76730e1ace8f03f3759 (patch)
tree240e011a2e0beca970fd847545983a551967bf0d /components
parentb0d73dbbfbf002b9f1d4a7456c627b70901f0979 (diff)
keybind selection and deletion :tada:
Diffstat (limited to 'components')
-rw-r--r--components/keybindselector.tsx58
1 files changed, 45 insertions, 13 deletions
diff --git a/components/keybindselector.tsx b/components/keybindselector.tsx
index 084d748..1d11b6b 100644
--- a/components/keybindselector.tsx
+++ b/components/keybindselector.tsx
@@ -1,32 +1,64 @@
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 { useEffect, useRef, useState } from 'react';
import { v4 as uuid } from 'uuid';
function Keybind(props: {
keyName: string;
+ onClick?: () => any;
}) {
- return <span className='keybind'>{props.keyName}</span>;
+ return <span className='keybind' onClick={props.onClick}>{props.keyName}</span>;
}
-function KeybindSelectorInner(props: {
- value: string[];
-}) {
- return <div className='keybind-selector-inner'>
- {props.value.map(s => <Keybind keyName={s} />)}
- </div>;
-}
+var keyBlacklist = [
+ 'Shift',
+ 'Control',
+ 'Alt',
+ 'Meta',
+];
+var keyMap = {
+ ' ': 'Space',
+};
export default function KeybindSelector(props: {
label: string;
value: string[];
onChange?: (newValue: string[]) => any;
}) {
- var [tempID, _setTempID] = useState(uuid());
+ 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));
+ }}
+ />
+ )}
+ </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);
- return <FormControl variant='filled' className='keybind-selector' tabIndex={0}>
- <InputLabel htmlFor={tempID} shrink>{props.label}</InputLabel>
- <FilledInput id={tempID} inputComponent={() => <KeybindSelectorInner value={props.value} />} />
+ props.onChange(newArr);
+ }}
+ >
+ <InputLabel htmlFor={inputID} shrink>{props.label}</InputLabel>
+ <FilledInput id={inputID} inputComponent={() => <KeybindSelectorInner />} />
</FormControl>;
}