feat: display proxy group type

2022-11-23 18:27:57 +08:00
parent 72ff9c0964
commit 2f9bf7f063
3 changed files with 134 additions and 101 deletions
--- a/src/components/proxy/proxy-render.tsx
+++ b/src/components/proxy/proxy-render.tsx
@@ -0,0 +1,128 @@
+import {
+  alpha,
+  Box,
+  ListItem,
+  ListItemText,
+  Typography,
+  styled,
+} from "@mui/material";
+import {
+  ExpandLessRounded,
+  ExpandMoreRounded,
+  InboxRounded,
+} from "@mui/icons-material";
+import { HeadState } from "./use-head-state";
+import { ProxyHead } from "./proxy-head";
+import { ProxyItem } from "./proxy-item";
+import type { IRenderItem } from "./use-render-list";
+
+interface RenderProps {
+  item: IRenderItem;
+  indent: boolean;
+  onLocation: (group: IProxyGroupItem) => void;
+  onCheckAll: (groupName: string) => void;
+  onHeadState: (groupName: string, patch: Partial<HeadState>) => void;
+  onChangeProxy: (group: IProxyGroupItem, proxy: IProxyItem) => void;
+}
+
+export const ProxyRender = (props: RenderProps) => {
+  const { indent, item, onLocation, onCheckAll, onHeadState, onChangeProxy } =
+    props;
+  const { type, group, headState, proxy } = item;
+
+  if (type === 0) {
+    return (
+      <ListItem
+        button
+        dense
+        onClick={() => onHeadState(group.name, { open: !headState?.open })}
+      >
+        <ListItemText
+          primary={group.name}
+          secondary={
+            <Box
+              sx={{
+                overflow: "hidden",
+                display: "flex",
+                alignItems: "center",
+                pt: "2px",
+              }}
+            >
+              <StyledTypeBox>{group.type}</StyledTypeBox>
+              <StyledSubtitle>{group.now}</StyledSubtitle>
+            </Box>
+          }
+          secondaryTypographyProps={{
+            sx: { display: "flex", alignItems: "center" },
+          }}
+        />
+        {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
+      </ListItem>
+    );
+  }
+
+  if (type === 1) {
+    return (
+      <ProxyHead
+        sx={{ pl: indent ? 4.5 : 2.5, pr: 3, mt: indent ? 1 : 0.5, mb: 1 }}
+        groupName={group.name}
+        headState={headState!}
+        onLocation={() => onLocation(group)}
+        onCheckDelay={() => onCheckAll(group.name)}
+        onHeadState={(p) => onHeadState(group.name, p)}
+      />
+    );
+  }
+
+  if (type === 2) {
+    return (
+      <ProxyItem
+        groupName={group.name}
+        proxy={proxy!}
+        selected={group.now === proxy?.name}
+        showType={headState?.showType}
+        sx={{ py: 0, pl: indent ? 4 : 2 }}
+        onClick={() => onChangeProxy(group, proxy!)}
+      />
+    );
+  }
+
+  if (type === 3) {
+    return (
+      <Box
+        sx={{
+          py: 2,
+          pl: indent ? 4.5 : 0,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <InboxRounded sx={{ fontSize: "2.5em", color: "inherit" }} />
+        <Typography sx={{ color: "inherit" }}>No Proxies</Typography>
+      </Box>
+    );
+  }
+
+  return null;
+};
+
+const StyledSubtitle = styled("span")`
+  font-size: 0.8rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledTypeBox = styled(Box)(({ theme }) => ({
+  display: "inline-block",
+  border: "1px solid #ccc",
+  borderColor: alpha(theme.palette.primary.main, 0.5),
+  color: alpha(theme.palette.primary.main, 0.8),
+  borderRadius: 4,
+  fontSize: 10,
+  padding: "0 2px",
+  lineHeight: 1.25,
+  marginRight: "4px",
+}));