Skip to content

Commit

Permalink
✨ 添加在主页可删除扩展工具的功能
Browse files Browse the repository at this point in the history
  • Loading branch information
neila-a committed Mar 31, 2024
1 parent fc3bcce commit 4dc6a47
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 53 deletions.
31 changes: 29 additions & 2 deletions src/app/index/SingleTool.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
"use client";
import {
createElement,
useContext,
useState
} from 'react';
Expand All @@ -14,7 +15,8 @@ import {
import {
ExitToApp as ExitToAppIcon,
DragIndicator as DragIndicatorIcon,
Delete
Delete,
FolderDelete
} from "@mui/icons-material";
import {
tool
Expand Down Expand Up @@ -51,6 +53,7 @@ import {
import destroyer from '../components/destroyer';
import MouseOverPopover from '../components/Popover';
import useStoragedState from '../components/useStoragedState';
import { NXTMetadata } from '../setting/extensions/page';
export default function SingleTool(props: {
tool: tool;
isFirst: boolean;
Expand Down Expand Up @@ -84,6 +87,7 @@ export default function SingleTool(props: {
color = colorContext.value,
[jumpto, setJumpTo] = useState<string>(""),
homeWhere = useContext(homeWhereContext),
[removeDialogOpen, setRemoveDialogOpen] = useState<boolean>(false),
[elevation, setElevation] = useState<number>(2),
[jumpName, setJumpName] = useState<string>(""),
[jumpDialogOpen, setJumpDialogOpen] = useState<boolean>(false),
Expand Down Expand Up @@ -221,6 +225,29 @@ export default function SingleTool(props: {
display: "flex",
alignItems: "center"
}}>
{tool.to.startsWith("/tools/extension") && (
<>
<MouseOverPopover text={get("singleTool.deleteExtension")}>
<IconButton onClick={event => {
setRemoveDialogOpen(true);
}}>
<Delete />
</IconButton>
</MouseOverPopover>
{createElement(dynamic(() => import("../setting/extensions/RemoveExtensionDialog")), {
open: removeDialogOpen,
reset: () => setRemoveDialogOpen(false),
fileInfo: {
...tool,
to: tool.to.replace("/tools/extension?tool=", "") as Lowercase<string>,
settings: [],
main: ""
} as unknown as NXTMetadata,
files: [],
onTrue: () => setTools(old => old.slice(0).filter(atool => atool.to !== tool.to))
})}
</>
)}
{sortingFor !== "__global__" && sortingFor !== "__home__" && (
<MouseOverPopover text={get("singleTool.deleteFromCategory")}>
<IconButton onClick={event => {
Expand All @@ -232,7 +259,7 @@ export default function SingleTool(props: {
}));
setTools(old => old.slice(0).filter(atool => atool.to !== tool.to))
}}>
<Delete />
<FolderDelete />
</IconButton>
</MouseOverPopover>
)}
Expand Down
3 changes: 2 additions & 1 deletion src/app/locales/zh-CN.json
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,7 @@
},
"singleTool": {
"jump": "确定离开Verkfi并跳转至",
"deleteFromCategory": "从此分类中删除此工具"
"deleteFromCategory": "从此分类中删除此工具",
"deleteExtension": "删除此扩展工具"
}
}
57 changes: 57 additions & 0 deletions src/app/setting/extensions/RemoveExtensionDialog.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
"use client";
import {
FormControlLabel,
Checkbox
} from "@mui/material";
import {
useContext,
useState
} from "react";
import {
get
} from "react-intl-universal";
import db from "../../components/db";
import CheckDialog from "../../components/dialog/CheckDialog";
import {
lists as listsContext,
mostUsed as mostUsedContext,
recentlyUsed as recentlyUsedContext
} from "../../layout/layoutClient";
import clearExtensionData from "./clearExtensionData";
import {
NXTMetadata
} from "./page";
export default function RemoveExtensionDialog(props: {
open: boolean;
reset: () => any;
fileInfo: NXTMetadata;
onTrue?: () => any;
files: [string, Uint8Array][];
}) {
const [clearData, setClearData] = useState<boolean>(false),
recentlyUsed = useContext(recentlyUsedContext),
mostUsed = useContext(mostUsedContext),
lists = useContext(listsContext);
return (
<CheckDialog insert={<FormControlLabel control={<Checkbox value={clearData} onChange={event => {
setClearData(event.target.checked);
}} />} label={get("extensions.clear")} />} onFalse={() => {
props.reset();
setClearData(false);
}} onTrue={async () => {
debugger
if (lists.value !== undefined) {
lists.set(lists.value.map(singleList => [singleList[0], singleList[1].filter(item => item !== `/tools/extension?tool=${props.fileInfo.to}`)]));
}
if (clearData) {
clearExtensionData(props.fileInfo, props.files, recentlyUsed, mostUsed);
}
await db.extensionTools.delete(props.fileInfo.to);
setClearData(false);
if ("onTrue" in props) {
props.onTrue();
}
return props.reset();
}} open={props.open} title={get("extensions.删除扩展")} description={`${get("extensions.确定删除扩展")}${props.fileInfo.name}?`} />
);
}
34 changes: 34 additions & 0 deletions src/app/setting/extensions/clearExtensionData.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
"use client";
import db from "../../components/db";
import {
mostUsedMarks
} from "../../layout/layoutClient";
import {
setState
} from "../../declare";
import {
NXTMetadata
} from "./page";
export default async function clearExtensionData(clearingExtension: NXTMetadata, clearingFiles: [string, Uint8Array][], recentlyUsed: {
value: string[];
set: setState<string[]>;
}, mostUsed: {
value: mostUsedMarks;
set: setState<mostUsedMarks>;
}) {
await db.extensionTools.put({
...clearingExtension,
files: clearingFiles,
settings: clearingExtension.settings.map(setting => ({
...setting,
value: setting.defaultValue
}))
});
const oldRecently = recentlyUsed.value;
recentlyUsed.set(oldRecently.filter(item => item !== clearingExtension.to));
const oldMost = {
...mostUsed.value
};
Reflect.deleteProperty(oldMost, clearingExtension.to);
mostUsed.set(oldMost);
}
66 changes: 16 additions & 50 deletions src/app/setting/extensions/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import {
Divider,
IconButton,
Box,
FormControlLabel,
Checkbox,
useMediaQuery,
useTheme,
ButtonGroup
Expand All @@ -31,7 +29,8 @@ const PureDialog = dynamic(() => import("../../components/dialog/PureDialog"));
import {
FilePondFile,
FilePondServerConfigProps
} from 'filepond'; import {
} from 'filepond';
import {
Add as AddIcon,
Edit as EditIcon,
SyncProblem as SyncProblemIcon,
Expand All @@ -41,10 +40,8 @@ import {
useLiveQuery
} from "dexie-react-hooks";
import db, {
option,
single
} from "../../components/db";
import CheckDialog from "../../components/dialog/CheckDialog";
import DialogInputs from "./DialogInputs";
import {
lists as listsContext,
Expand All @@ -61,9 +58,8 @@ import {
import {
emptyNXTMetadata
} from "../../tools/extension/empties";
import {
lists
} from "../../index/Sidebar";
import clearExtensionData from "./clearExtensionData";
import RemoveExtensionDialog from "./RemoveExtensionDialog";
export type inputTypes = "modify" | "add";
export default function ExtensionManager() {
const [addDialogOpen, setAddDialogOpen] = useState<boolean>(false),
Expand All @@ -73,25 +69,26 @@ export default function ExtensionManager() {
[removeDialogOpen, setRemoveDialogOpen] = useState<boolean>(false),
[modifyDialogOpen, setModifyDialogOpen] = useState<boolean>(false),
lists = useContext(listsContext),
[clearData, setClearData] = useState<boolean>(false),
theme = useTheme(),
fullScreen = useMediaQuery(theme.breakpoints.down('sm')),
dialogButtons = (type: "modify" | "add") => <ButtonGroup fullWidth>
{files.length !== 0 && <Button variant="contained" onClick={async (event) => {
{files.length !== 0 && <Button variant="contained" onClick={async event => {
await db.extensionTools.put({
...fileInfo,
files: files
});
if (lists !== undefined) {
const index = lists.value.find(list => list[0] === "__global__"),
to = `/tools/extension?tool=${fileInfo.to}`;
if (!index[1].includes(to)) {
lists.set(lists.value.map(singleList => {
if (singleList[0] === "__global__") {
return [singleList[0], [...singleList[1], to]]
}
return singleList;
}));
if (index !== undefined) {
if (!index[1].includes(to)) {
lists.set(lists.value.map(singleList => {
if (singleList[0] === "__global__") {
return [singleList[0], [...singleList[1], to]]
}
return singleList;
}));
}
}
}
reset();
Expand All @@ -113,7 +110,6 @@ export default function ExtensionManager() {
setRemoveDialogOpen(false);
setFileArray([]);
setFiles([]);
setClearData(false);
setFileInfo(emptyNXTMetadata);
},
extensionTools = useLiveQuery(() => db.extensionTools.toArray(), [], [] as single[]),
Expand All @@ -126,23 +122,6 @@ export default function ExtensionManager() {
setModifyDialogOpen={setModifyDialogOpen}
setRemoveDialogOpen={setRemoveDialogOpen}
/>
async function clearExtensionData(clearingExtension: NXTMetadata, clearingFiles: [string, Uint8Array][]) {
await db.extensionTools.put({
...clearingExtension,
files: clearingFiles,
settings: clearingExtension.settings.map(setting => ({
...setting,
value: setting.defaultValue
}))
});
const oldRecently = recentlyUsed.value;
recentlyUsed.set(oldRecently.filter(item => item !== clearingExtension.to));
const oldMost = {
...mostUsed.value
};
Reflect.deleteProperty(oldMost, clearingExtension.to);
mostUsed.set(oldMost);
}
return (
<>
<Typography variant="h4">
Expand Down Expand Up @@ -200,7 +179,7 @@ export default function ExtensionManager() {
files: thisFiles,
...metadata
} = single;
clearExtensionData(metadata, thisFiles);
clearExtensionData(metadata, thisFiles, recentlyUsed, mostUsed);
}}>
<RestartAltIcon />
</IconButton>
Expand Down Expand Up @@ -232,20 +211,7 @@ export default function ExtensionManager() {
}} title={get("extensions.编辑扩展")}>
{packagedDialogInputs("modify")}
</PureDialog>
<CheckDialog insert={<FormControlLabel control={<Checkbox value={clearData} onChange={event => {
setClearData(event.target.checked);
}} />} label={get("extensions.clear")} />} onFalse={() => {
reset();
}} onTrue={async () => {
await db.extensionTools.delete(fileInfo.to);
if (lists.value !== undefined) {
lists.set(lists.value.map(singleList => [singleList[0], singleList[1].filter(item => item !== `/tools/extension?tool=${fileInfo.to}`)]));
}
if (clearData) {
clearExtensionData(fileInfo, files);
}
reset();
}} open={removeDialogOpen} title={get("extensions.删除扩展")} description={`${get("extensions.确定删除扩展")}${fileInfo.name}?`} />
<RemoveExtensionDialog open={removeDialogOpen} reset={reset} fileInfo={fileInfo} files={files} />
<PureDialog action={dialogButtons("add")} add={{
fullScreen: fullScreen
}} open={addDialogOpen} onClose={() => reset()} title={get("extensions.添加扩展")}>
Expand Down

0 comments on commit 4dc6a47

Please sign in to comment.