@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
182 lines (181 loc) • 7.95 kB
JavaScript
import { t as o } from "./utils-COaoD3PI.js";
import { LoaderIcon as _ } from "./assets/icons/components/Loader.js";
import { PhotoLibraryIcon as ee } from "./assets/icons/components/PhotoLibrary.js";
import { WarningIcon as te } from "./assets/icons/components/Warning.js";
import { Button as F } from "./components/Button/Button.js";
import { t as D } from "./x-DBIZFfaM.js";
import { helperTextVariants as ae, imageUploadVariants as re, inputContainerVariants as le, inputFieldVariants as ie, labelVariants as se } from "./components/ImageUpload/ImageUpload.variants.js";
import { useEffect as ne, useId as ce, useRef as V, useState as N } from "react";
import { Fragment as P, jsx as e, jsxs as l } from "react/jsx-runtime";
var t = /* @__PURE__ */ (function(n) {
return n.Default = "default", n.Uploading = "uploading", n.Complete = "complete", n.Error = "error", n;
})({}), oe = ({ className: n, error: y, fileName: b, fileSize: z, fileUrl: E, helperText: R = "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.", isRequired: S = !1, label: p = "Item logo", labelClassName: T, labelWrapperClassName: L, name: A, onChange: k, onRemove: J, status: v = t.Default, theme: f, uploadButtonText: $ = "Upload logo", accept: M = "image/svg+xml,image/png,image/jpeg,image/jpg", maxSize: K = 5 * 1024 * 1024 }) => {
const U = ce(), h = V(null), c = V(null), [W, d] = N(v), [H, B] = N(E), [X, C] = N(b), [q, G] = N(z);
ne(() => () => {
c.current && clearTimeout(c.current);
}, []);
const a = v !== t.Default ? v : W, w = E ?? H, m = b ?? X, x = z ?? q, g = !!y || a === t.Error, O = (i) => {
const r = i.target.files?.[0];
if (!r) return;
if (!M.split(",").map((s) => s.trim()).some((s) => {
if (s.includes("*")) {
const Z = s.split("/")[0];
return r.type.startsWith(Z);
}
return r.type === s;
})) {
d(t.Error), k?.(i);
return;
}
if (r.size > K) {
d(t.Error), k?.(i);
return;
}
d(t.Uploading), C(r.name), G(Y(r.size));
const u = new FileReader();
u.onloadend = () => {
B(u.result), c.current = setTimeout(() => {
d(t.Complete);
}, 500);
}, u.readAsDataURL(r), k?.(i);
}, I = () => {
c.current && (clearTimeout(c.current), c.current = null), B(void 0), C(void 0), G(void 0), d(t.Default), h.current && (h.current.value = ""), J?.();
}, Q = () => {
h.current?.click();
}, Y = (i) => {
if (i === 0) return "0 Bytes";
const r = 1024, u = [
"Bytes",
"KB",
"MB",
"GB"
], s = Math.floor(Math.log(i) / Math.log(r));
return `${parseFloat((i / Math.pow(r, s)).toFixed(2))}${u[s]}`;
}, j = y || (g ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
return /* @__PURE__ */ l("div", {
className: o(re({
status: a,
className: n
})),
"data-theme": f,
children: [
p && /* @__PURE__ */ e("div", {
className: o(L),
children: /* @__PURE__ */ l("label", {
htmlFor: U,
className: o(se({ className: T }), "cursor-pointer"),
children: [p, S && /* @__PURE__ */ e("span", {
className: "text-red-600 dark:text-red-500 text-xs mt-0.5",
children: "*"
})]
})
}),
/* @__PURE__ */ l("div", {
className: o(le({ status: a })),
children: [
/* @__PURE__ */ l("div", {
className: o(ie({ status: a }), {
"justify-between": g,
"justify-start": !g
}),
children: [
a === t.Uploading && /* @__PURE__ */ l(P, { children: [/* @__PURE__ */ e(_, {
size: 20,
className: "shrink-0 animate-spin text-metal-400"
}), m && /* @__PURE__ */ l("div", {
className: "flex flex-col items-start min-w-0 flex-1",
children: [/* @__PURE__ */ e("p", {
className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50",
children: m
}), x && /* @__PURE__ */ e("p", {
className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]",
children: x
})]
})] }),
a === t.Complete && w && /* @__PURE__ */ l(P, { children: [/* @__PURE__ */ e("div", {
className: "w-8 h-8 shrink-0 relative",
children: /* @__PURE__ */ e("img", {
src: w,
alt: m || "Uploaded image",
className: "w-full h-full object-contain"
})
}), m && /* @__PURE__ */ l("div", {
className: "flex flex-col items-start min-w-0 flex-1",
children: [/* @__PURE__ */ e("p", {
className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50",
children: m
}), x && /* @__PURE__ */ e("p", {
className: "text-xs leading-4 text-slate-600 dark:text-slate-400 kubefirst-dark:text-slate-400 tracking-[0.15px]",
children: x
})]
})] }),
(a === t.Default || a === t.Error && !w) && /* @__PURE__ */ e("div", {
className: "w-8 h-8 shrink-0 flex items-center justify-center",
children: /* @__PURE__ */ e(ee, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" })
}),
g && /* @__PURE__ */ e("div", {
className: "shrink-0",
children: /* @__PURE__ */ e(te, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" })
})
]
}),
(a === t.Default || a === t.Error) && /* @__PURE__ */ e(F, {
variant: "secondary",
onClick: Q,
theme: f,
className: "h-10 px-4 py-2 shrink-0",
children: $
}),
a === t.Uploading && /* @__PURE__ */ e(F, {
variant: "secondary",
shape: "circle",
size: "medium",
onClick: I,
theme: f,
className: "shrink-0",
"aria-label": "Cancel upload",
children: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
}),
a === t.Complete && /* @__PURE__ */ e(F, {
variant: "secondary",
shape: "circle",
size: "medium",
onClick: I,
theme: f,
className: "shrink-0",
"aria-label": "Remove file",
children: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
})
]
}),
j && /* @__PURE__ */ l("div", {
className: "flex w-full gap-2",
children: [
/* @__PURE__ */ e("div", {
className: "flex-1 min-w-0",
children: /* @__PURE__ */ e("p", {
className: o(ae({ status: a })),
children: j
})
}),
(a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
a === t.Uploading && /* @__PURE__ */ e("div", { className: "shrink-0 w-10" })
]
}),
/* @__PURE__ */ e("input", {
ref: h,
id: U,
type: "file",
name: A,
accept: M,
onChange: O,
className: "hidden",
"aria-label": typeof p == "string" ? p : "File upload"
})
]
});
};
oe.displayName = "KonstructImageUpload";
export {
oe as t
};