refactor: adjust setting dialog component

src/components/setting/mods/misc-viewer.tsx

@@ -1,27 +1,12 @@
-import { useEffect, useState } from "react";
+import { forwardRef, useImperativeHandle, useState } from "react";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  List,
-  ListItem,
-  ListItemText,
-  Switch,
-  TextField,
-} from "@mui/material";
-import { ModalHandler } from "@/hooks/use-modal-handler";
+import { List, ListItem, ListItemText, Switch, TextField } from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
+import { BaseDialog, DialogRef } from "@/components/base";
 import Notice from "@/components/base/base-notice";
 
-interface Props {
-  handler: ModalHandler;
-}
-
-const MiscViewer = ({ handler }: Props) => {
+export const MiscViewer = forwardRef<DialogRef>((props, ref) => {
   const { t } = useTranslation();
   const { verge, patchVerge } = useVerge();
 
@@ -31,21 +16,16 @@ const MiscViewer = ({ handler }: Props) => {
     defaultLatencyTest: "",
   });
 
-  if (handler) {
-    handler.current = {
-      open: () => setOpen(true),
-      close: () => setOpen(false),
-    };
-  }
-
-  useEffect(() => {
-    if (open) {
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      setOpen(true);
       setValues({
         autoCloseConnection: verge?.auto_close_connection || false,
         defaultLatencyTest: verge?.default_latency_test || "",
       });
-    }
-  }, [open, verge]);
+    },
+    close: () => setOpen(false),
+  }));
 
   const onSave = useLockFn(async () => {
     try {
@@ -60,51 +40,45 @@ const MiscViewer = ({ handler }: Props) => {
   });
 
   return (
-    <Dialog open={open} onClose={() => setOpen(false)}>
-      <DialogTitle>{t("Miscellaneous")}</DialogTitle>
+    <BaseDialog
+      open={open}
+      title={t("Miscellaneous")}
+      contentSx={{ width: 420 }}
+      okBtn={t("Save")}
+      cancelBtn={t("Cancel")}
+      onClose={() => setOpen(false)}
+      onCancel={() => setOpen(false)}
+      onOk={onSave}
+    >
+      <List>
+        <ListItem sx={{ padding: "5px 2px" }}>
+          <ListItemText primary="Auto Close Connections" />
+          <Switch
+            edge="end"
+            checked={values.autoCloseConnection}
+            onChange={(_, c) =>
+              setValues((v) => ({ ...v, autoCloseConnection: c }))
+            }
+          />
+        </ListItem>
 
-      <DialogContent sx={{ width: 420 }}>
-        <List>
-          <ListItem sx={{ padding: "5px 2px" }}>
-            <ListItemText primary="Auto Close Connections" />
-            <Switch
-              edge="end"
-              checked={values.autoCloseConnection}
-              onChange={(_, c) =>
-                setValues((v) => ({ ...v, autoCloseConnection: c }))
-              }
-            />
-          </ListItem>
-
-          <ListItem sx={{ padding: "5px 2px" }}>
-            <ListItemText primary="Default Latency Test" />
-            <TextField
-              size="small"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              sx={{ width: 200 }}
-              value={values.defaultLatencyTest}
-              placeholder="http://www.gstatic.com/generate_204"
-              onChange={(e) =>
-                setValues((v) => ({ ...v, defaultLatencyTest: e.target.value }))
-              }
-            />
-          </ListItem>
-        </List>
-      </DialogContent>
-
-      <DialogActions>
-        <Button variant="outlined" onClick={() => setOpen(false)}>
-          {t("Cancel")}
-        </Button>
-        <Button onClick={onSave} variant="contained">
-          {t("Save")}
-        </Button>
-      </DialogActions>
-    </Dialog>
+        <ListItem sx={{ padding: "5px 2px" }}>
+          <ListItemText primary="Default Latency Test" />
+          <TextField
+            size="small"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="off"
+            spellCheck="false"
+            sx={{ width: 200 }}
+            value={values.defaultLatencyTest}
+            placeholder="http://www.gstatic.com/generate_204"
+            onChange={(e) =>
+              setValues((v) => ({ ...v, defaultLatencyTest: e.target.value }))
+            }
+          />
+        </ListItem>
+      </List>
+    </BaseDialog>
   );
-};
-
-export default MiscViewer;
+});