From 4934a2429363c856b42da9eac2c3d8471af3967d Mon Sep 17 00:00:00 2001
From: GyDi <segydi@foxmail.com>
Date: Tue, 15 Feb 2022 01:34:10 +0800
Subject: [PATCH] feat: scroll to proxy item
---
src/components/proxy/proxy-group.tsx | 22 ++++++++++++++++++----
1 file changed, 18 insertions(+), 4 deletions(-)
diff --git a/src/components/proxy/proxy-group.tsx b/src/components/proxy/proxy-group.tsx
index 6962189..2638660 100644
--- a/src/components/proxy/proxy-group.tsx
+++ b/src/components/proxy/proxy-group.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { Virtuoso } from "react-virtuoso";
+import { useRef, useState } from "react";
+import { Virtuoso, VirtuosoHandle } from "react-virtuoso";
import {
Box,
Collapse,
@@ -16,8 +16,8 @@ import {
MyLocationRounded,
NetworkCheckRounded,
} from "@mui/icons-material";
-import { updateProxy } from "../../services/api";
import { ApiType } from "../../services/types";
+import { updateProxy } from "../../services/api";
import { getProfiles, patchProfile } from "../../services/cmds";
import ProxyItem from "./proxy-item";
@@ -26,6 +26,7 @@ interface Props {
}
const ProxyGroup = ({ group }: Props) => {
+ const listRef = useRef<any>();
const [open, setOpen] = useState(false);
const [now, setNow] = useState(group.now);
@@ -67,6 +68,18 @@ const ProxyGroup = ({ group }: Props) => {
}
};
+ const onLocation = () => {
+ const index = proxies.findIndex((p) => p.name === now);
+
+ if (index >= 0) {
+ listRef.current?.scrollToIndex?.({
+ index,
+ align: "center",
+ behavior: "smooth",
+ });
+ }
+ };
+
return (
<>
<ListItem button onClick={() => setOpen(!open)} dense>
@@ -88,7 +101,7 @@ const ProxyGroup = ({ group }: Props) => {
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ pl: 4, pr: 3, my: 0.5 }}>
- <IconButton size="small" title="location">
+ <IconButton size="small" title="location" onClick={onLocation}>
<MyLocationRounded />
</IconButton>
<IconButton size="small" title="check">
@@ -98,6 +111,7 @@ const ProxyGroup = ({ group }: Props) => {
{proxies.length >= 10 ? (
<Virtuoso
+ ref={listRef}
style={{ height: "320px", marginBottom: "4px" }}
totalCount={proxies.length}
itemContent={(index) => (
--
GitLab