@codex-storage/marketplace-ui-components
Version:
Marketplace UI components for Codex decentralized storage network.
208 lines (207 loc) • 6.66 kB
JavaScript
import { jsx as r, jsxs as o, Fragment as k } from "react/jsx-runtime";
import * as h from "react";
import { useRef as I, useReducer as z, useCallback as P, useEffect as W } from "react";
import { attributes as S } from "../utils/attributes.js";
import { PrettyBytes as N } from "../utils/bytes.js";
import { Spinner as H } from "../Spinner/Spinner.js";
import { ButtonIcon as L } from "../ButtonIcon/ButtonIcon.js";
import { WebFileIcon as T } from "../WebFileIcon/WebFileIcon.js";
import { S as q } from "../../success-circle-CzSa4439.js";
import { S as G } from "../../close-BypPN932.js";
import { B as J } from "../../browser-DTlYvKdE.js";
import '../../assets/UploadFile.css';const K = (e) => /* @__PURE__ */ h.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 20, height: 20, fill: "none", "data-testid": "icon-warning", ...e }, /* @__PURE__ */ h.createElement("path", { fill: "#FF8447", d: "M10 17.5a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15M6.25 9.25v1.5h7.5v-1.5z" })), O = (e) => /* @__PURE__ */ h.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", ...e }, /* @__PURE__ */ h.createElement("path", { fill: "currentColor", d: "M12 21a9 9 0 1 1 0-18 9 9 0 0 1 0 18m0-1.8a7.2 7.2 0 1 0 0-14.4 7.2 7.2 0 0 0 0 14.4M9.3 9.3h5.4v5.4H9.3z" })), Q = function(e) {
if (e.includes(".")) {
const n = e.split("."), c = n.pop();
return { filename: n.join("."), extension: c };
}
return { filename: e, extension: "" };
};
function V(e, n) {
switch (n.type) {
case "progress": {
const { loaded: c, total: a } = n;
return {
...e,
progress: { loaded: c, total: a },
status: c === a ? "done" : e.status
};
}
case "preview":
return {
...e,
preview: n.preview
};
case "completed":
return {
...e,
// Just to ensure the file upload is in done status,
// in case of the onprogress callback function was not called
status: "done",
cid: n.cid
};
case "cancel":
return {
...e,
status: "error",
error: "The upload has been cancelled."
};
case "delete":
return {
progress: { loaded: 0, total: 0 },
cid: "",
preview: "",
status: "progress",
error: ""
};
case "error":
return { ...e, error: n.error, status: "error" };
default:
return e;
}
}
const X = (e) => e.startsWith("image");
function ie({
file: e,
onClose: n,
id: c,
onSuccess: a,
codexData: g,
successMessage: F
// useWorker,
}) {
const i = I(null), [w, l] = z(V, {
progress: { loaded: 0, total: 0 },
cid: "",
preview: "",
status: "progress",
error: ""
}), v = P(async () => {
const t = new J(e, B, {
filename: e.name,
mimetype: e.type
}), { abort: s, result: u } = g.upload(t);
i.current = s;
const m = await u;
if (m.error) {
l({ type: "error", error: m.data.message });
return;
}
l({ type: "completed", cid: m.data }), a == null || a(m.data, e);
}, [g, a, e]), f = I(!1), B = (t, s) => {
l({
type: "progress",
loaded: t,
total: s
});
};
W(() => {
if (!f.current) {
if (f.current = !0, X(e.type)) {
const t = new FileReader();
t.onload = () => {
var u;
const s = (u = t.result) == null ? void 0 : u.toString();
s && l({ type: "preview", preview: s });
}, t.readAsDataURL(e);
}
v();
}
}, [e, v, g]);
const E = () => {
var s;
(s = i.current) == null || s.call(i);
const t = w.status === "progress" ? "cancel" : "delete";
l({ type: t });
}, R = () => {
var t;
(t = i.current) == null || t.call(i), n(c);
}, { filename: U, extension: y } = Q(e.name), { cid: A, error: C = "", preview: x, progress: d, status: p } = w, M = w.status === "progress" ? E : R, b = d.total > 0 ? d.loaded / d.total * 100 : 0, j = () => /* @__PURE__ */ r(Z, { status: p });
return /* @__PURE__ */ r(
"div",
{
className: "upload-file",
...S({
"aria-invalid": p === "error",
"data-done": p === "done"
}),
children: /* @__PURE__ */ o("div", { children: [
/* @__PURE__ */ o("header", { children: [
/* @__PURE__ */ o("div", { children: [
x ? /* @__PURE__ */ r("img", { src: x, width: "24", alt: "Preview" }) : /* @__PURE__ */ r(T, { type: e.type }),
/* @__PURE__ */ o("div", { className: "preview", children: [
/* @__PURE__ */ o("b", { children: [
/* @__PURE__ */ r("span", { children: U }),
y && /* @__PURE__ */ o("span", { children: [
".",
y
] })
] }),
/* @__PURE__ */ r("div", { children: /* @__PURE__ */ r("small", { children: N(e.size) }) })
] })
] }),
/* @__PURE__ */ o("div", { children: [
/* @__PURE__ */ r(Y, { status: p }),
/* @__PURE__ */ r(
L,
{
variant: "small",
onClick: M,
Icon: j
}
)
] })
] }),
/* @__PURE__ */ o("main", { children: [
/* @__PURE__ */ r(
"progress",
{
...S({
max: e ? d.total.toString() : !1,
value: e ? d.loaded.toString() : !1
})
}
),
/* @__PURE__ */ o("span", { children: [
b.toFixed(2),
" %"
] })
] }),
/* @__PURE__ */ r("footer", { children: A ? /* @__PURE__ */ r("span", { children: F }) : /* @__PURE__ */ o("span", { children: [
" ",
C || /* @__PURE__ */ r(k, { children: " " })
] }) })
] })
}
);
}
function Y({ status: e }) {
switch (e) {
case "done":
return /* @__PURE__ */ r(q, { width: 17.5, fill: "currentColor" });
case "error":
return /* @__PURE__ */ r(
K,
{
width: 17.5,
fill: "currentColor",
stroke: "currentColor"
}
);
case "progress":
return /* @__PURE__ */ r(H, { width: "1.25rem" });
}
}
function Z({ status: e }) {
switch (e) {
case "error":
case "done":
return /* @__PURE__ */ r(G, { width: 17.5, height: 17.5 });
case "progress":
return /* @__PURE__ */ r(O, { width: 17.5, height: 17.5 });
}
}
export {
ie as UploadFile,
Y as UploadStatusIcon
};
//# sourceMappingURL=UploadFile.js.map