clash-verge/src/components/proxy/proxy-group.tsx

194 lines
4.9 KiB
TypeScript
Raw Normal View History

import { useEffect, useRef, useState } from "react";
2022-02-16 02:22:01 +08:00
import { useSWRConfig } from "swr";
import { Virtuoso } from "react-virtuoso";
import {
Box,
Collapse,
Divider,
IconButton,
List,
ListItem,
ListItemText,
} from "@mui/material";
import {
SendRounded,
ExpandLessRounded,
ExpandMoreRounded,
MyLocationRounded,
NetworkCheckRounded,
} from "@mui/icons-material";
2022-02-13 19:27:06 +08:00
import { ApiType } from "../../services/types";
2022-02-15 01:34:10 +08:00
import { updateProxy } from "../../services/api";
2022-02-13 19:27:06 +08:00
import { getProfiles, patchProfile } from "../../services/cmds";
2022-02-16 02:22:01 +08:00
import delayManager from "../../services/delay";
2022-01-13 02:51:30 +08:00
import ProxyItem from "./proxy-item";
interface Props {
2021-12-25 22:33:29 +08:00
group: ApiType.ProxyGroupItem;
}
const ProxyGroup = ({ group }: Props) => {
2022-02-16 02:22:01 +08:00
const { mutate } = useSWRConfig();
const [open, setOpen] = useState(false);
const [now, setNow] = useState(group.now);
2022-02-17 01:42:25 +08:00
const virtuosoRef = useRef<any>();
const proxies = group.all ?? [];
2022-02-17 01:42:25 +08:00
const selectLockRef = useRef(false);
2022-02-16 02:22:01 +08:00
const onSelect = async (name: string) => {
2022-02-17 01:42:25 +08:00
// Todo: support another proxy group type
if (group.type !== "Selector") return;
if (selectLockRef.current) return;
selectLockRef.current = true;
const oldValue = now;
try {
setNow(name);
2021-12-25 22:33:29 +08:00
await updateProxy(group.name, name);
2022-02-17 01:42:25 +08:00
} catch {
setNow(oldValue);
return; // do not update profile
} finally {
selectLockRef.current = false;
}
2021-12-28 01:47:43 +08:00
2022-02-17 01:42:25 +08:00
try {
const profiles = await getProfiles();
2021-12-28 01:47:43 +08:00
const profile = profiles.items![profiles.current!]!;
if (!profile) return;
if (!profile.selected) profile.selected = [];
const index = profile.selected.findIndex(
(item) => item.name === group.name
);
if (index < 0) {
profile.selected.push({ name: group.name, now: name });
} else {
profile.selected[index] = { name: group.name, now: name };
}
2022-02-17 01:42:25 +08:00
await patchProfile(profiles.current!, profile);
} catch (err) {
console.error(err);
}
};
const onLocation = (smooth = true) => {
2022-02-15 01:34:10 +08:00
const index = proxies.findIndex((p) => p.name === now);
if (index >= 0) {
2022-02-17 01:42:25 +08:00
virtuosoRef.current?.scrollToIndex?.({
2022-02-15 01:34:10 +08:00
index,
align: "center",
behavior: smooth ? "smooth" : "auto",
2022-02-15 01:34:10 +08:00
});
}
};
2022-02-17 01:42:25 +08:00
const checkLockRef = useRef(false);
2022-02-16 02:22:01 +08:00
const onCheckAll = async () => {
2022-02-17 01:42:25 +08:00
if (checkLockRef.current) return;
checkLockRef.current = true;
2022-02-16 02:22:01 +08:00
2022-02-17 01:42:25 +08:00
// rerender quickly
if (proxies.length) setTimeout(() => mutate("getProxies"), 500);
let names = proxies.map((p) => p.name);
2022-02-16 02:22:01 +08:00
while (names.length) {
2022-02-17 01:42:25 +08:00
const list = names.slice(0, 8);
names = names.slice(8);
2022-02-16 02:22:01 +08:00
await Promise.all(
list.map((n) => delayManager.checkDelay(n, group.name))
);
mutate("getProxies");
}
2022-02-17 01:42:25 +08:00
checkLockRef.current = false;
2022-02-16 02:22:01 +08:00
};
// auto scroll to current index
useEffect(() => {
if (open) {
setTimeout(() => onLocation(false), 5);
}
}, [open]);
return (
<>
2021-12-12 15:34:17 +08:00
<ListItem button onClick={() => setOpen(!open)} dense>
<ListItemText
primary={group.name}
secondary={
<>
<SendRounded color="primary" sx={{ mr: 1, fontSize: 14 }} />
<span>{now}</span>
</>
}
secondaryTypographyProps={{
sx: { display: "flex", alignItems: "center" },
}}
/>
{open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ pl: 4, pr: 3, my: 0.5 }}>
<IconButton
size="small"
title="location"
onClick={() => onLocation(true)}
>
<MyLocationRounded />
</IconButton>
2022-02-16 02:22:01 +08:00
<IconButton size="small" title="check" onClick={onCheckAll}>
<NetworkCheckRounded />
</IconButton>
</Box>
{proxies.length >= 10 ? (
<Virtuoso
2022-02-17 01:42:25 +08:00
ref={virtuosoRef}
2022-01-17 02:15:54 +08:00
style={{ height: "320px", marginBottom: "4px" }}
totalCount={proxies.length}
itemContent={(index) => (
2022-01-13 02:51:30 +08:00
<ProxyItem
2022-02-16 02:22:01 +08:00
groupName={group.name}
proxy={proxies[index]}
selected={proxies[index].name === now}
2022-01-13 02:51:30 +08:00
sx={{ py: 0, pl: 4 }}
2022-02-16 02:22:01 +08:00
onClick={onSelect}
/>
)}
/>
) : (
<List
component="div"
disablePadding
2022-01-17 02:15:54 +08:00
sx={{ maxHeight: "320px", overflow: "auto", mb: "4px" }}
>
{proxies.map((proxy) => (
2022-01-13 02:51:30 +08:00
<ProxyItem
key={proxy.name}
2022-02-16 02:22:01 +08:00
groupName={group.name}
proxy={proxy}
selected={proxy.name === now}
2022-01-13 02:51:30 +08:00
sx={{ py: 0, pl: 4 }}
2022-02-16 02:22:01 +08:00
onClick={onSelect}
/>
))}
</List>
)}
<Divider variant="middle" />
</Collapse>
</>
);
};
export default ProxyGroup;