keybind selection and deletion :tada:

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>;
 }