From 3b4013a1b04713aac9fe07064ae3430a0ce2694d Mon Sep 17 00:00:00 2001 From: wonfen Date: Tue, 18 Feb 2025 07:10:28 +0800 Subject: [PATCH] fix: resolve deprecated warnings in console --- src/components/base/base-search-box.tsx | 127 +++++++++++------------ src/components/proxy/proxy-render.tsx | 19 ++-- src/components/setting/setting-verge.tsx | 6 +- src/pages/connections.tsx | 13 ++- src/pages/settings.tsx | 24 ++++- 5 files changed, 109 insertions(+), 80 deletions(-) diff --git a/src/components/base/base-search-box.tsx b/src/components/base/base-search-box.tsx index ec4b22d8..167662bd 100644 --- a/src/components/base/base-search-box.tsx +++ b/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(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; - - onChange({ - target: inputRef.current, - } as ChangeEvent); - }, [matchCase, matchWholeWord, useRegularExpression]); - - const onChange = (e: ChangeEvent) => { - props.onSearch( - (content) => doSearch([content], e.target?.value ?? "").length > 0, - { - text: e.target?.value ?? "", - matchCase, - matchWholeWord, - useRegularExpression, - }, - ); - }; - - const doSearch = (searchList: string[], searchItem: string) => { - setErrorMessage(""); - return searchList.filter((item) => { + const createMatcher = useMemo(() => { + return (searchText: string) => { try { - let searchItemCopy = searchItem; - if (!matchCase) { - item = item.toLowerCase(); - searchItemCopy = searchItemCopy.toLowerCase(); - } - if (matchWholeWord) { - const regex = new RegExp(`\\b${searchItemCopy}\\b`); + return (content: string) => { + if (!searchText) return true; + + let item = !matchCase ? content.toLowerCase() : content; + let searchItem = !matchCase ? searchText.toLowerCase() : searchText; + if (useRegularExpression) { - const regexWithOptions = new RegExp(searchItemCopy); - return regexWithOptions.test(item) && regex.test(item); - } else { - return regex.test(item); + return new RegExp(searchItem).test(item); } - } else if (useRegularExpression) { - const regex = new RegExp(searchItemCopy); - return regex.test(item); - } else { - return item.includes(searchItemCopy); - } + + if (matchWholeWord) { + return new RegExp(`\\b${searchItem}\\b`).test(item); + } + + return item.includes(searchItem); + }; } catch (err) { setErrorMessage(`${err}`); + return () => true; } + }; + }, [matchCase, matchWholeWord, useRegularExpression]); + + 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 onChange = (e: ChangeEvent) => { + const value = e.target?.value ?? ""; + setErrorMessage(""); + props.onSearch(createMatcher(value), { + text: value, + matchCase, + matchWholeWord, + useRegularExpression, }); }; return ( - { component={matchCaseIcon} {...iconStyle} aria-label={matchCase ? "active" : "inactive"} - onClick={() => { - setMatchCase(!matchCase); - }} + onClick={() => setMatchCase(!matchCase)} /> @@ -127,9 +138,7 @@ export const BaseSearchBox = styled((props: SearchProps) => { component={matchWholeWordIcon} {...iconStyle} aria-label={matchWholeWord ? "active" : "inactive"} - onClick={() => { - setMatchWholeWord(!matchWholeWord); - }} + onClick={() => setMatchWholeWord(!matchWholeWord)} /> @@ -139,28 +148,16 @@ export const BaseSearchBox = styled((props: SearchProps) => { component={useRegularExpressionIcon} aria-label={useRegularExpression ? "active" : "inactive"} {...iconStyle} - onClick={() => { - setUseRegularExpression(!useRegularExpression); - }} + onClick={() => + setUseRegularExpression(!useRegularExpression) + } />{" "} ), }} - {...props} /> ); -})(({ 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", - }, -})); +}; diff --git a/src/components/proxy/proxy-render.tsx b/src/components/proxy/proxy-render.tsx index 8ad2514d..7a18b01d 100644 --- a/src/components/proxy/proxy-render.tsx +++ b/src/components/proxy/proxy-render.tsx @@ -100,7 +100,7 @@ export const ProxyRender = (props: RenderProps) => { {group.name}} secondary={ - { pt: "2px", }} > - + {group.type} {group.now} - + } - secondaryTypographyProps={{ - sx: { display: "flex", alignItems: "center", color: "#ccc" }, + slotProps={{ + secondary: { + component: "div", + sx: { display: "flex", alignItems: "center", color: "#ccc" }, + }, }} /> {headState?.open ? : } @@ -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), diff --git a/src/components/setting/setting-verge.tsx b/src/components/setting/setting-verge.tsx index 50fe95df..a849e6d7 100644 --- a/src/components/setting/setting-verge.tsx +++ b/src/components/setting/setting-verge.tsx @@ -182,7 +182,11 @@ const SettingVerge = ({ onError }: Props) => { > diff --git a/src/pages/connections.tsx b/src/pages/connections.tsx index 762edf0f..a56195f6 100644 --- a/src/pages/connections.tsx +++ b/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(null!); + const handleSearch = useCallback((match: (content: string) => boolean) => { + setMatch(() => match); + }, []); + return ( { ))} )} - setMatch(() => match)} /> + {filterConn.length === 0 ? ( diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx index 7986e57e..49041cb0 100644 --- a/src/pages/settings.tsx +++ b/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 ( { + ); };