Add DragDrop drop, Promise.all unlisten, isHover off via drop event, file select existence check

This commit is contained in:
2024-11-27 06:56:25 -06:00
parent d009c00ed1
commit 81f230687e
+19 -6
View File
@@ -19,11 +19,20 @@ export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
const [isHovering, setIsHovering] = useState<HoverState>("off"); const [isHovering, setIsHovering] = useState<HoverState>("off");
async function isValid(paths: string[]): Promise<boolean> { async function isValid(paths: string[]): Promise<boolean> {
console.log({ paths });
return paths.length === 1 && paths[0].endsWith(".zip") && exists(paths[0]); return paths.length === 1 && paths[0].endsWith(".zip") && exists(paths[0]);
} }
useEffect(() => { useEffect(() => {
const unlistenDrop = listen<DragDropEvent & { type: "drop" }>(
"tauri://drag-drop",
async (event) => {
setIsHovering("off");
if (await isValid(event.payload.paths)) {
onFile(event.payload.paths[0]);
}
}
).then((fn) => fn);
const unlistenEnter = listen<DragDropEvent & { type: "enter" }>( const unlistenEnter = listen<DragDropEvent & { type: "enter" }>(
"tauri://drag-enter", "tauri://drag-enter",
async (event) => { async (event) => {
@@ -37,8 +46,11 @@ export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
}).then((fn) => fn); }).then((fn) => fn);
return () => { return () => {
unlistenEnter.then(() => {}); Promise.all([unlistenDrop, unlistenEnter, unlistenLeave]).then(
unlistenLeave.then(() => {}); (results) => {
console.log("DragAndDrop listeners removed.", results);
}
);
}; };
}); });
@@ -54,13 +66,13 @@ export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
title: "Select a save file", title: "Select a save file",
filters: [ filters: [
{ {
name: "ZIP Archive", name: "Factorio Save File",
extensions: ["zip"], extensions: ["zip"],
}, },
], ],
}); });
if (selectedFile !== null) { if (selectedFile !== null && (await exists(selectedFile))) {
onFile(selectedFile); onFile(selectedFile);
} }
} }
@@ -76,7 +88,8 @@ export default function DragAndDrop({ className, onFile }: DragAndDropProps) {
{ {
"hover:bg-zinc-800 hover:border-zinc-500": isHovering === "off", "hover:bg-zinc-800 hover:border-zinc-500": isHovering === "off",
"bg-zinc-800 border-zinc-500": isHovering === "valid", "bg-zinc-800 border-zinc-500": isHovering === "valid",
"bg-red-800/25 border-red-700/25": isHovering === "invalid", "bg-red-800/25 border-red-700/25 cursor-not-allowed":
isHovering === "invalid",
} }
)} )}
> >