From a3a3db6abbea703c05aaae95cdc4a3325dac1b50 Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Sun, 16 Jan 2022 03:22:37 +0800
Subject: [PATCH] refactor: setting page
---
src/components/setting-item.tsx | 8 -----
.../{ => setting}/setting-clash.tsx | 22 +++++--------
.../{ => setting}/setting-verge.tsx | 31 ++++++-------------
src/components/setting/setting.tsx | 19 ++++++++++++
src/pages/setting.tsx | 4 +--
5 files changed, 38 insertions(+), 46 deletions(-)
delete mode 100644 src/components/setting-item.tsx
rename src/components/{ => setting}/setting-clash.tsx (86%)
rename src/components/{ => setting}/setting-verge.tsx (82%)
create mode 100644 src/components/setting/setting.tsx
diff --git a/src/components/setting-item.tsx b/src/components/setting-item.tsx
deleted file mode 100644
index 52a0584..0000000
--- a/src/components/setting-item.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ListItem, styled } from "@mui/material";
-
-const SettingItem = styled(ListItem)(() => ({
- paddingTop: 5,
- paddingBottom: 5,
-}));
-
-export default SettingItem;
diff --git a/src/components/setting-clash.tsx b/src/components/setting/setting-clash.tsx
similarity index 86%
rename from src/components/setting-clash.tsx
rename to src/components/setting/setting-clash.tsx
index d3fc013..97d5b8b 100644
--- a/src/components/setting-clash.tsx
+++ b/src/components/setting/setting-clash.tsx
@@ -1,18 +1,16 @@
import useSWR, { useSWRConfig } from "swr";
import {
- List,
ListItemText,
- ListSubheader,
TextField,
Switch,
Select,
MenuItem,
} from "@mui/material";
-import { getClashConfig, updateConfigs } from "../services/api";
-import { patchClashConfig } from "../services/cmds";
-import { ApiType } from "../services/types";
-import GuardState from "./guard-state";
-import SettingItem from "./setting-item";
+import { getClashConfig, updateConfigs } from "../../services/api";
+import { SettingList, SettingItem } from "./setting";
+import { patchClashConfig } from "../../services/cmds";
+import { ApiType } from "../../services/types";
+import GuardState from "../guard-state";
interface Props {
onError?: (err: Error) => void;
@@ -30,22 +28,16 @@ const SettingClash = ({ onError }: Props) => {
} = clashConfig ?? {};
const onSwitchFormat = (_e: any, value: boolean) => value;
-
const onChangeData = (patch: Partial<ApiType.ConfigData>) => {
mutate("getClashConfig", { ...clashConfig, ...patch }, false);
};
-
const onUpdateData = async (patch: Partial<ApiType.ConfigData>) => {
await updateConfigs(patch);
await patchClashConfig(patch);
};
return (
- <List>
- <ListSubheader sx={{ background: "transparent" }}>
- Clash Setting
- </ListSubheader>
-
+ <SettingList title="Clash Setting">
<SettingItem>
<ListItemText primary="Allow Lan" />
<GuardState
@@ -102,7 +94,7 @@ const SettingClash = ({ onError }: Props) => {
disabled
/>
</SettingItem>
- </List>
+ </SettingList>
);
};
diff --git a/src/components/setting-verge.tsx b/src/components/setting/setting-verge.tsx
similarity index 82%
rename from src/components/setting-verge.tsx
rename to src/components/setting/setting-verge.tsx
index 3a15bf9..e3d51bb 100644
--- a/src/components/setting-verge.tsx
+++ b/src/components/setting/setting-verge.tsx
@@ -1,19 +1,12 @@
import useSWR, { useSWRConfig } from "swr";
-import {
- Box,
- List,
- ListItemText,
- ListSubheader,
- Switch,
- Typography,
-} from "@mui/material";
-import { getVergeConfig, patchVergeConfig } from "../services/cmds";
-import { CmdType } from "../services/types";
-import { version } from "../../package.json";
-import GuardState from "./guard-state";
-import SettingItem from "./setting-item";
-import PaletteSwitch from "./palette-switch";
-import SysproxyTooltip from "./sysproxy-tooltip";
+import { Box, ListItemText, Switch, Typography } from "@mui/material";
+import { getVergeConfig, patchVergeConfig } from "../../services/cmds";
+import { SettingList, SettingItem } from "./setting";
+import { CmdType } from "../../services/types";
+import { version } from "../../../package.json";
+import GuardState from "../guard-state";
+import PaletteSwitch from "../palette-switch";
+import SysproxyTooltip from "../sysproxy-tooltip";
interface Props {
onError?: (err: Error) => void;
@@ -36,11 +29,7 @@ const SettingVerge = ({ onError }: Props) => {
};
return (
- <List>
- <ListSubheader sx={{ background: "transparent" }}>
- Common Setting
- </ListSubheader>
-
+ <SettingList title="Common Setting">
<SettingItem>
<ListItemText primary="Theme Mode" />
<GuardState
@@ -110,7 +99,7 @@ const SettingVerge = ({ onError }: Props) => {
<ListItemText primary="Version" />
<Typography sx={{ py: "6px" }}>v{version}</Typography>
</SettingItem>
- </List>
+ </SettingList>
);
};
diff --git a/src/components/setting/setting.tsx b/src/components/setting/setting.tsx
new file mode 100644
index 0000000..49e9a22
--- /dev/null
+++ b/src/components/setting/setting.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { List, ListItem, ListSubheader, styled } from "@mui/material";
+
+export const SettingItem = styled(ListItem)(() => ({
+ paddingTop: 5,
+ paddingBottom: 5,
+}));
+
+export const SettingList: React.FC<{
+ title: string;
+}> = (props) => (
+ <List>
+ <ListSubheader sx={{ background: "transparent" }} disableSticky>
+ {props.title}
+ </ListSubheader>
+
+ {props.children}
+ </List>
+);
diff --git a/src/pages/setting.tsx b/src/pages/setting.tsx
index 98c0256..f4e32b6 100644
--- a/src/pages/setting.tsx
+++ b/src/pages/setting.tsx
@@ -1,7 +1,7 @@
import { Paper } from "@mui/material";
import BasePage from "../components/base-page";
-import SettingVerge from "../components/setting-verge";
-import SettingClash from "../components/setting-clash";
+import SettingVerge from "../components/setting/setting-verge";
+import SettingClash from "../components/setting/setting-clash";
const SettingPage = () => {
return (
--
GitLab