tranbox...

2023-10-23 18:02:42 +08:00
parent e89da9120c
commit 4125aba808
13 changed files with 706 additions and 21 deletions
--- a/src/views/Options/Tranbox.js
+++ b/src/views/Options/Tranbox.js
@@ -0,0 +1,137 @@
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import MenuItem from "@mui/material/MenuItem";
+import { useI18n } from "../../hooks/I18n";
+import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
+import ShortcutInput from "./ShortcutInput";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import { useCallback } from "react";
+import { limitNumber } from "../../libs/utils";
+import { useTranbox } from "../../hooks/Tranbox";
+
+export default function Tranbox() {
+  const i18n = useI18n();
+  const { tranboxSetting, updateTranbox } = useTranbox();
+
+  const handleChange = (e) => {
+    e.preventDefault();
+    let { name, value } = e.target;
+    switch (name) {
+      case "btnOffsetX" || "btnOffsetY":
+        value = limitNumber(value, 0, 100);
+        break;
+      default:
+    }
+    updateTranbox({
+      [name]: value,
+    });
+  };
+
+  const handleShortcutInput = useCallback(
+    (val) => {
+      updateTranbox({ tranboxShortcut: val });
+    },
+    [updateTranbox]
+  );
+
+  const {
+    transOpen,
+    translator,
+    fromLang,
+    toLang,
+    tranboxShortcut,
+    btnOffsetX,
+    btnOffsetY,
+  } = tranboxSetting;
+
+  return (
+    <Box>
+      <Stack spacing={3}>
+        <FormControlLabel
+          control={
+            <Switch
+              size="small"
+              name="transOpen"
+              checked={transOpen}
+              onChange={() => {
+                updateTranbox({ transOpen: !transOpen });
+              }}
+            />
+          }
+          label={i18n("toggle_selection_translate")}
+        />
+
+        <TextField
+          select
+          size="small"
+          name="translator"
+          value={translator}
+          label={i18n("translate_service")}
+          onChange={handleChange}
+        >
+          {OPT_TRANS_ALL.map((item) => (
+            <MenuItem key={item} value={item}>
+              {item}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          select
+          size="small"
+          name="fromLang"
+          value={fromLang}
+          label={i18n("from_lang")}
+          onChange={handleChange}
+        >
+          {OPT_LANGS_FROM.map(([lang, name]) => (
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          select
+          size="small"
+          name="toLang"
+          value={toLang}
+          label={i18n("to_lang")}
+          onChange={handleChange}
+        >
+          {OPT_LANGS_TO.map(([lang, name]) => (
+            <MenuItem key={lang} value={lang}>
+              {name}
+            </MenuItem>
+          ))}
+        </TextField>
+
+        <TextField
+          size="small"
+          label={i18n("tanbtn_offset_x")}
+          type="number"
+          name="btnOffsetX"
+          defaultValue={btnOffsetX}
+          onChange={handleChange}
+        />
+
+        <TextField
+          size="small"
+          label={i18n("tanbtn_offset_y")}
+          type="number"
+          name="btnOffsetY"
+          defaultValue={btnOffsetY}
+          onChange={handleChange}
+        />
+
+        <ShortcutInput
+          value={tranboxShortcut}
+          onChange={handleShortcutInput}
+          label={i18n("trigger_tranbox_shortcut")}
+        />
+      </Stack>
+    </Box>
+  );
+}