diff --git a/src/components/profile/confirm-viewer.tsx b/src/components/profile/confirm-viewer.tsx new file mode 100644 index 00000000..d4ca21b8 --- /dev/null +++ b/src/components/profile/confirm-viewer.tsx @@ -0,0 +1,46 @@ +import { useEffect, useRef } from "react"; +import { useTranslation } from "react-i18next"; +import { + Button, + Dialog, + DialogActions, + DialogContent, + DialogTitle, +} from "@mui/material"; + +interface Props { + open: boolean; + title: string; + message: string; + onClose: () => void; + onConfirm: () => void; +} + +export const ConfirmViewer = (props: Props) => { + const { open, title, message, onClose, onConfirm } = props; + + const { t } = useTranslation(); + + useEffect(() => { + if (!open) return; + }, [open]); + + return ( + + {t(title)} + + + {t(message)} + + + + + + + + ); +}; diff --git a/src/components/profile/profile-item.tsx b/src/components/profile/profile-item.tsx index 72ffe569..703cbf0f 100644 --- a/src/components/profile/profile-item.tsx +++ b/src/components/profile/profile-item.tsx @@ -23,6 +23,7 @@ import { Notice } from "@/components/base"; import { EditorViewer } from "./editor-viewer"; import { ProfileBox } from "./profile-box"; import parseTraffic from "@/utils/parse-traffic"; +import { ConfirmViewer } from "./confirm-viewer"; const round = keyframes` from { transform: rotate(0deg); } @@ -92,6 +93,7 @@ export const ProfileItem = (props: Props) => { }, [hasUrl, updated]); const [fileOpen, setFileOpen] = useState(false); + const [confirmOpen, setConfirmOpen] = useState(false); const onEditInfo = () => { setAnchorEl(null); @@ -171,14 +173,24 @@ export const ProfileItem = (props: Props) => { { label: "Open File", handler: onOpenFile }, { label: "Update", handler: () => onUpdate(0) }, { label: "Update(Proxy)", handler: () => onUpdate(2) }, - { label: "Delete", handler: onDelete }, + { + label: "Delete", + handler: () => { + setConfirmOpen(true); + }, + }, ]; const fileModeMenu = [ { label: "Select", handler: onForceSelect }, { label: "Edit Info", handler: onEditInfo }, { label: "Edit File", handler: onEditFile }, { label: "Open File", handler: onOpenFile }, - { label: "Delete", handler: onDelete }, + { + label: "Delete", + handler: () => { + setConfirmOpen(true); + }, + }, ]; const boxStyle = { @@ -341,7 +353,19 @@ export const ProfileItem = (props: Props) => { { + return { + color: + item.label === "Delete" + ? theme.palette.error.main + : undefined, + }; + }, + ]} dense > {t(item.label)} @@ -355,6 +379,16 @@ export const ProfileItem = (props: Props) => { mode="yaml" onClose={() => setFileOpen(false)} /> + setConfirmOpen(false)} + onConfirm={() => { + onDelete(); + setConfirmOpen(false); + }} + /> ); }; diff --git a/src/components/profile/profile-more.tsx b/src/components/profile/profile-more.tsx index ca6c94c4..dc6a1b84 100644 --- a/src/components/profile/profile-more.tsx +++ b/src/components/profile/profile-more.tsx @@ -17,6 +17,7 @@ import { Notice } from "@/components/base"; import { EditorViewer } from "./editor-viewer"; import { ProfileBox } from "./profile-box"; import { LogViewer } from "./log-viewer"; +import { ConfirmViewer } from "./confirm-viewer"; interface Props { selected: boolean; @@ -51,6 +52,7 @@ export const ProfileMore = (props: Props) => { const [anchorEl, setAnchorEl] = useState(null); const [position, setPosition] = useState({ left: 0, top: 0 }); const [fileOpen, setFileOpen] = useState(false); + const [confirmOpen, setConfirmOpen] = useState(false); const [logOpen, setLogOpen] = useState(false); const onEditInfo = () => { @@ -87,7 +89,12 @@ export const ProfileMore = (props: Props) => { { label: "Open File", handler: onOpenFile }, { label: "To Top", show: showMove, handler: fnWrapper(onMoveTop) }, { label: "To End", show: showMove, handler: fnWrapper(onMoveEnd) }, - { label: "Delete", handler: fnWrapper(onDelete) }, + { + label: "Delete", + handler: () => { + setConfirmOpen(true); + }, + }, ]; const disableMenu = [ @@ -95,7 +102,12 @@ export const ProfileMore = (props: Props) => { { label: "Edit Info", handler: onEditInfo }, { label: "Edit File", handler: onEditFile }, { label: "Open File", handler: onOpenFile }, - { label: "Delete", handler: fnWrapper(onDelete) }, + { + label: "Delete", + handler: () => { + setConfirmOpen(true); + }, + }, ]; const boxStyle = { @@ -200,7 +212,17 @@ export const ProfileMore = (props: Props) => { { + return { + color: + item.label === "Delete" + ? theme.palette.error.main + : undefined, + }; + }, + ]} dense > {t(item.label)} @@ -214,7 +236,16 @@ export const ProfileMore = (props: Props) => { mode={type === "merge" ? "yaml" : "javascript"} onClose={() => setFileOpen(false)} /> - + setConfirmOpen(false)} + onConfirm={() => { + onDelete(); + setConfirmOpen(false); + }} + /> {selected && (