feat: Extensive refactoring and modification to support any number of interfaces

src/views/Options/ShortcutInput.js

@@ -2,32 +2,61 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import IconButton from "@mui/material/IconButton";
 import EditIcon from "@mui/icons-material/Edit";
+import CheckIcon from "@mui/icons-material/Check";
 import { useEffect, useState, useRef } from "react";
 import { shortcutListener } from "../../libs/shortcut";
+import { useI18n } from "../../hooks/I18n";
 
-export default function ShortcutInput({ value, onChange, label, helperText }) {
-  const [disabled, setDisabled] = useState(true);
+export default function ShortcutInput({
+  value: keys,
+  onChange,
+  label,
+  helperText,
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [editingKeys, setEditingKeys] = useState([]);
   const inputRef = useRef(null);
+  const i18n = useI18n();
+
+  const commitChanges = () => {
+    if (editingKeys.length > 0) {
+      onChange(editingKeys);
+    }
+    setIsEditing(false);
+  };
+
+  const handleBlur = () => {
+    commitChanges();
+  };
+
+  const handleEditClick = () => {
+    setEditingKeys([]);
+    setIsEditing(true);
+  };
 
   useEffect(() => {
-    if (disabled) {
+    if (!isEditing) {
       return;
     }
-
-    inputRef.current.focus();
-    onChange([]);
-
-    const clearShortcut = shortcutListener((curkeys, allkeys) => {
-      onChange(allkeys);
-      if (curkeys.length === 0) {
-        setDisabled(true);
-      }
-    }, inputRef.current);
+    const inputElement = inputRef.current;
+    if (inputElement) {
+      inputElement.focus();
+    }
+    const clearShortcut = shortcutListener((pressedKeys, event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setEditingKeys([...pressedKeys]);
+    });
 
     return () => {
       clearShortcut();
     };
-  }, [disabled, onChange]);
+  }, [isEditing]);
+
+  const displayValue = isEditing ? editingKeys : keys;
+  const formattedValue = displayValue
+    .map((item) => (item === " " ? "Space" : item))
+    .join(" + ");
 
   return (
     <Stack direction="row" alignItems="flex-start">
@@ -35,22 +64,22 @@ export default function ShortcutInput({ value, onChange, label, helperText }) {
         size="small"
         label={label}
         name={label}
-        value={value.map((item) => (item === " " ? "Space" : item)).join(" + ")}
+        value={formattedValue}
         fullWidth
         inputRef={inputRef}
-        disabled={disabled}
-        onBlur={() => {
-          setDisabled(true);
-        }}
-        helperText={helperText}
+        disabled={!isEditing}
+        onBlur={handleBlur}
+        helperText={isEditing ? i18n("pls_press_shortcut") : helperText}
       />
-      <IconButton
-        onClick={() => {
-          setDisabled(false);
-        }}
-      >
-        {<EditIcon />}
-      </IconButton>
+      {isEditing ? (
+        <IconButton onClick={commitChanges} color="primary">
+          <CheckIcon />
+        </IconButton>
+      ) : (
+        <IconButton onClick={handleEditClick}>
+          <EditIcon />
+        </IconButton>
+      )}
     </Stack>
   );
 }