@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/useUploadQueue.js

@@ -0,0 +1,175 @@
+import { useEffect, useRef, useState } from "react";
+function useUploadQueue({
+  value,
+  defaultValue = [],
+  onChange,
+  request,
+  autoUpload = true,
+  concurrency = 3,
+  disabled = false,
+  onSuccess,
+  onError
+}) {
+  const [local, setLocal] = useState(defaultValue), [revision, setRevision] = useState(0), files = value ?? local, current = useRef(files), jobs = useRef(/* @__PURE__ */ new Map()), manual = useRef(/* @__PURE__ */ new Set()), attempted = useRef(/* @__PURE__ */ new Map()), alive = useRef(true), frame = useRef(0), progress = useRef(/* @__PURE__ */ new Map());
+  current.current = files;
+  const callbacks = useRef({ onChange, onSuccess, onError });
+  callbacks.current = { onChange, onSuccess, onError };
+  const emit = (next) => {
+    current.current = next;
+    if (value === void 0) setLocal(next);
+    callbacks.current.onChange?.(next);
+  };
+  const update = (id, change) => emit(current.current.map((file) => file.id === id ? change(file) : file));
+  const cancelJob = (id) => {
+    const job = jobs.current.get(id);
+    jobs.current.delete(id);
+    progress.current.delete(id);
+    job?.controller.abort();
+  };
+  const running = (id, job) => alive.current && jobs.current.get(id) === job && !job.controller.signal.aborted && current.current.some((file) => file.id === id && file.file === job.file);
+  const begin = (id) => {
+    const item = current.current.find((file) => file.id === id);
+    if (disabled || !request || !item?.file || jobs.current.has(id) || item.status === "success")
+      return;
+    manual.current.delete(id);
+    const job = { controller: new AbortController(), file: item.file };
+    jobs.current.set(id, job);
+    attempted.current.set(id, item.file);
+    update(id, (file) => ({
+      ...file,
+      status: "uploading",
+      progress: 0,
+      error: void 0
+    }));
+    const onProgress = (amount) => {
+      if (!running(id, job) || !Number.isFinite(amount)) return;
+      progress.current.set(
+        id,
+        Math.max(
+          progress.current.get(id) || 0,
+          Math.min(100, Math.max(0, amount))
+        )
+      );
+      if (!frame.current)
+        frame.current = requestAnimationFrame(() => {
+          frame.current = 0;
+          if (!alive.current) return;
+          const changes = new Map(progress.current);
+          progress.current.clear();
+          if (changes.size)
+            emit(
+              current.current.map(
+                (file) => changes.has(file.id) && file.status === "uploading" && jobs.current.has(file.id) ? {
+                  ...file,
+                  progress: Math.max(file.progress, changes.get(file.id))
+                } : file
+              )
+            );
+        });
+    };
+    void Promise.resolve().then(() => {
+      if (!running(id, job)) return;
+      return request(job.file, { signal: job.controller.signal, onProgress });
+    }).then((result) => {
+      if (!running(id, job)) return;
+      progress.current.delete(id);
+      const completed = {
+        ...current.current.find((file) => file.id === id),
+        status: "success",
+        progress: 100,
+        error: void 0,
+        url: result?.url ?? item.url,
+        response: result?.response
+      };
+      update(id, () => completed);
+      callbacks.current.onSuccess?.(completed, result);
+    }).catch((error) => {
+      if (!running(id, job)) return;
+      progress.current.delete(id);
+      const failed = {
+        ...current.current.find((file) => file.id === id),
+        status: "error",
+        error: error instanceof Error ? error.message : "\u4E0A\u4F20\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5\u3002"
+      };
+      update(id, () => failed);
+      callbacks.current.onError?.(failed, error);
+    }).finally(() => {
+      if (jobs.current.get(id) !== job) return;
+      jobs.current.delete(id);
+      if (alive.current) setRevision((old) => old + 1);
+    });
+  };
+  useEffect(() => {
+    alive.current = true;
+    return () => {
+      alive.current = false;
+      cancelAnimationFrame(frame.current);
+      frame.current = 0;
+      jobs.current.forEach((job) => job.controller.abort());
+      jobs.current.clear();
+      attempted.current.clear();
+      manual.current.clear();
+      progress.current.clear();
+    };
+  }, []);
+  useEffect(() => {
+    for (const [id, job] of jobs.current) {
+      const item = files.find((file) => file.id === id);
+      if (!item || item.file !== job.file || item.status !== "uploading")
+        cancelJob(id);
+    }
+    for (const id of manual.current)
+      if (!files.some((file) => file.id === id)) manual.current.delete(id);
+    for (const id of attempted.current.keys())
+      if (!files.some((file) => file.id === id)) attempted.current.delete(id);
+    if (disabled || !request) return;
+    const limit = Number.isFinite(concurrency) ? Math.max(1, Math.floor(concurrency)) : 3;
+    for (const file of files) {
+      if (jobs.current.size >= limit) break;
+      if (file.file && (manual.current.has(file.id) || autoUpload && file.status === "ready" && attempted.current.get(file.id) !== file.file))
+        begin(file.id);
+    }
+  }, [files, autoUpload, disabled, request, concurrency, revision]);
+  const start = (id) => {
+    if (disabled || !request) return;
+    manual.current.add(id);
+    setRevision((old) => old + 1);
+  };
+  return {
+    files,
+    current,
+    add: (batch) => emit([
+      ...current.current,
+      ...batch.map((file) => ({
+        id: crypto.randomUUID(),
+        name: file.name,
+        size: file.size,
+        type: file.type,
+        file,
+        status: "ready",
+        progress: 0
+      }))
+    ]),
+    start,
+    cancel: (id) => {
+      manual.current.delete(id);
+      cancelJob(id);
+      update(id, (file) => ({ ...file, status: "canceled", error: void 0 }));
+      setRevision((old) => old + 1);
+    },
+    remove: (id) => {
+      manual.current.delete(id);
+      cancelJob(id);
+      attempted.current.delete(id);
+      emit(current.current.filter((file) => file.id !== id));
+      setRevision((old) => old + 1);
+    },
+    retry: (id) => {
+      cancelJob(id);
+      start(id);
+    }
+  };
+}
+export {
+  useUploadQueue
+};