fix: resolve deprecated warnings in console

src/components/base/base-search-box.tsx

@@ -1,6 +1,6 @@
 import { Box, SvgIcon, TextField, styled } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
-import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { ChangeEvent, useEffect, useRef, useState, useMemo } from "react";
 
 import { useTranslation } from "react-i18next";
 import matchCaseIcon from "@/assets/image/component/match_case.svg?react";
@@ -22,7 +22,20 @@ type SearchProps = {
   onSearch: (match: (content: string) => boolean, state: SearchState) => void;
 };
 
-export const BaseSearchBox = styled((props: SearchProps) => {
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  "& .MuiInputBase-root": {
+    background: theme.palette.mode === "light" ? "#fff" : undefined,
+    paddingRight: "4px",
+  },
+  "& .MuiInputBase-root svg[aria-label='active'] path": {
+    fill: theme.palette.primary.light,
+  },
+  "& .MuiInputBase-root svg[aria-label='inactive'] path": {
+    fill: "#A7A7A7",
+  },
+}));
+
+export const BaseSearchBox = (props: SearchProps) => {
   const { t } = useTranslation();
   const inputRef = useRef<HTMLInputElement>(null);
   const [matchCase, setMatchCase] = useState(props.matchCase ?? false);
@@ -43,58 +56,58 @@ export const BaseSearchBox = styled((props: SearchProps) => {
     inheritViewBox: true,
   };
 
-  useEffect(() => {
-    if (!inputRef.current) return;
+  const createMatcher = useMemo(() => {
+    return (searchText: string) => {
+      try {
+        return (content: string) => {
+          if (!searchText) return true;
 
-    onChange({
-      target: inputRef.current,
-    } as ChangeEvent<HTMLInputElement>);
+          let item = !matchCase ? content.toLowerCase() : content;
+          let searchItem = !matchCase ? searchText.toLowerCase() : searchText;
+
+          if (useRegularExpression) {
+            return new RegExp(searchItem).test(item);
+          }
+
+          if (matchWholeWord) {
+            return new RegExp(`\\b${searchItem}\\b`).test(item);
+          }
+
+          return item.includes(searchItem);
+        };
+      } catch (err) {
+        setErrorMessage(`${err}`);
+        return () => true;
+      }
+    };
   }, [matchCase, matchWholeWord, useRegularExpression]);
 
-  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    props.onSearch(
-      (content) => doSearch([content], e.target?.value ?? "").length > 0,
-      {
-        text: e.target?.value ?? "",
+  useEffect(() => {
+    if (!inputRef.current) return;
+    const value = inputRef.current.value;
+    setErrorMessage("");
+    props.onSearch(createMatcher(value), {
+      text: value,
       matchCase,
       matchWholeWord,
       useRegularExpression,
-      },
-    );
-  };
+    });
+  }, [matchCase, matchWholeWord, useRegularExpression, createMatcher]);
 
-  const doSearch = (searchList: string[], searchItem: string) => {
+  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const value = e.target?.value ?? "";
     setErrorMessage("");
-    return searchList.filter((item) => {
-      try {
-        let searchItemCopy = searchItem;
-        if (!matchCase) {
-          item = item.toLowerCase();
-          searchItemCopy = searchItemCopy.toLowerCase();
-        }
-        if (matchWholeWord) {
-          const regex = new RegExp(`\\b${searchItemCopy}\\b`);
-          if (useRegularExpression) {
-            const regexWithOptions = new RegExp(searchItemCopy);
-            return regexWithOptions.test(item) && regex.test(item);
-          } else {
-            return regex.test(item);
-          }
-        } else if (useRegularExpression) {
-          const regex = new RegExp(searchItemCopy);
-          return regex.test(item);
-        } else {
-          return item.includes(searchItemCopy);
-        }
-      } catch (err) {
-        setErrorMessage(`${err}`);
-      }
+    props.onSearch(createMatcher(value), {
+      text: value,
+      matchCase,
+      matchWholeWord,
+      useRegularExpression,
     });
   };
 
   return (
     <Tooltip title={errorMessage} placement="bottom-start">
-      <TextField
+      <StyledTextField
         autoComplete="new-password"
         inputRef={inputRef}
         hiddenLabel
@@ -115,9 +128,7 @@ export const BaseSearchBox = styled((props: SearchProps) => {
                     component={matchCaseIcon}
                     {...iconStyle}
                     aria-label={matchCase ? "active" : "inactive"}
-                    onClick={() => {
-                      setMatchCase(!matchCase);
-                    }}
+                    onClick={() => setMatchCase(!matchCase)}
                   />
                 </div>
               </Tooltip>
@@ -127,9 +138,7 @@ export const BaseSearchBox = styled((props: SearchProps) => {
                     component={matchWholeWordIcon}
                     {...iconStyle}
                     aria-label={matchWholeWord ? "active" : "inactive"}
-                    onClick={() => {
-                      setMatchWholeWord(!matchWholeWord);
-                    }}
+                    onClick={() => setMatchWholeWord(!matchWholeWord)}
                   />
                 </div>
               </Tooltip>
@@ -139,28 +148,16 @@ export const BaseSearchBox = styled((props: SearchProps) => {
                     component={useRegularExpressionIcon}
                     aria-label={useRegularExpression ? "active" : "inactive"}
                     {...iconStyle}
-                    onClick={() => {
-                      setUseRegularExpression(!useRegularExpression);
-                    }}
+                    onClick={() =>
+                      setUseRegularExpression(!useRegularExpression)
+                    }
                   />{" "}
                 </div>
               </Tooltip>
             </Box>
           ),
         }}
-        {...props}
       />
     </Tooltip>
   );
-})(({ theme }) => ({
-  "& .MuiInputBase-root": {
-    background: theme.palette.mode === "light" ? "#fff" : undefined,
-    "padding-right": "4px",
-  },
-  "& .MuiInputBase-root svg[aria-label='active'] path": {
-    fill: theme.palette.primary.light,
-  },
-  "& .MuiInputBase-root svg[aria-label='inactive'] path": {
-    fill: "#A7A7A7",
-  },
-}));
+};

src/components/proxy/proxy-render.tsx

@@ -100,7 +100,7 @@ export const ProxyRender = (props: RenderProps) => {
         <ListItemText
           primary={<StyledPrimary>{group.name}</StyledPrimary>}
           secondary={
-            <ListItemTextChild
+            <Box
               sx={{
                 overflow: "hidden",
                 display: "flex",
@@ -108,16 +108,19 @@ export const ProxyRender = (props: RenderProps) => {
                 pt: "2px",
               }}
             >
-              <Box sx={{ marginTop: "2px" }}>
+              <Box component="span" sx={{ marginTop: "2px" }}>
                 <StyledTypeBox>{group.type}</StyledTypeBox>
                 <StyledSubtitle sx={{ color: "text.secondary" }}>
                   {group.now}
                 </StyledSubtitle>
               </Box>
-            </ListItemTextChild>
+            </Box>
           }
-          secondaryTypographyProps={{
+          slotProps={{
+            secondary: {
+              component: "div",
               sx: { display: "flex", alignItems: "center", color: "#ccc" },
+            },
           }}
         />
         {headState?.open ? <ExpandLessRounded /> : <ExpandMoreRounded />}
@@ -219,11 +222,7 @@ const StyledSubtitle = styled("span")`
   white-space: nowrap;
 `;
 
-const ListItemTextChild = styled("span")`
-  display: block;
-`;
-
-const StyledTypeBox = styled(ListItemTextChild)(({ theme }) => ({
+const StyledTypeBox = styled(Box)(({ theme }) => ({
   display: "inline-block",
   border: "1px solid #ccc",
   borderColor: alpha(theme.palette.primary.main, 0.5),

src/components/setting/setting-verge.tsx

@@ -182,7 +182,11 @@ const SettingVerge = ({ onError }: Props) => {
         >
           <Select size="small" sx={{ width: 140, "> div": { py: "7.5px" } }}>
             {routers.map((page: { label: string; path: string }) => {
-              return <MenuItem value={page.path}>{t(page.label)}</MenuItem>;
+              return (
+                <MenuItem key={page.path} value={page.path}>
+                  {t(page.label)}
+                </MenuItem>
+              );
             })}
           </Select>
         </GuardState>

src/pages/connections.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState, useCallback } from "react";
 import { useLockFn } from "ahooks";
 import { Box, Button, IconButton, MenuItem } from "@mui/material";
 import { Virtuoso } from "react-virtuoso";
@@ -15,7 +15,10 @@ import {
   ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
 import parseTraffic from "@/utils/parse-traffic";
-import { BaseSearchBox } from "@/components/base/base-search-box";
+import {
+  BaseSearchBox,
+  type SearchState,
+} from "@/components/base/base-search-box";
 import { BaseStyledSelect } from "@/components/base/base-styled-select";
 import useSWRSubscription from "swr/subscription";
 import { createSockette } from "@/utils/websocket";
@@ -135,6 +138,10 @@ const ConnectionsPage = () => {
 
   const detailRef = useRef<ConnectionDetailRef>(null!);
 
+  const handleSearch = useCallback((match: (content: string) => boolean) => {
+    setMatch(() => match);
+  }, []);
+
   return (
     <BasePage
       full
@@ -211,7 +218,7 @@ const ConnectionsPage = () => {
             ))}
           </BaseStyledSelect>
         )}
-        <BaseSearchBox onSearch={(match) => setMatch(() => match)} />
+        <BaseSearchBox onSearch={handleSearch} />
       </Box>
 
       {filterConn.length === 0 ? (

src/pages/settings.tsx

@@ -1,4 +1,11 @@
-import { Box, ButtonGroup, Grid, IconButton } from "@mui/material";
+import {
+  Box,
+  ButtonGroup,
+  Grid,
+  IconButton,
+  Select,
+  MenuItem,
+} from "@mui/material";
 import { useLockFn } from "ahooks";
 import { useTranslation } from "react-i18next";
 import { BasePage, Notice } from "@/components/base";
@@ -31,6 +38,12 @@ const SettingPage = () => {
   const mode = useThemeMode();
   const isDark = mode === "light" ? false : true;
 
+  const routers = [
+    { label: "Manual", path: "manual" },
+    { label: "TG Channel", path: "telegram" },
+    { label: "Github Repo", path: "github" },
+  ];
+
   return (
     <BasePage
       title={t("Settings")}
@@ -95,6 +108,15 @@ const SettingPage = () => {
           </Box>
         </Grid>
       </Grid>
+      <Select size="small" sx={{ width: 140, "> div": { py: "7.5px" } }}>
+        {routers.map((page: { label: string; path: string }) => {
+          return (
+            <MenuItem key={page.path} value={page.path}>
+              {t(page.label)}
+            </MenuItem>
+          );
+        })}
+      </Select>
     </BasePage>
   );
 };