geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
118 lines (117 loc) • 4.46 kB
JavaScript
import { Typography as m } from "./index.es17.js";
import { Spinner as v } from "./index.es56.js";
import { Upload as A, X as $, Pen as x } from "lucide-react";
import e, { useState as M, useRef as P } from "react";
import { useFormValues as R } from "./index.es146.js";
import { useToast as U } from "./index.es73.js";
const L = ({
id: f,
onChange: o,
value: l = [],
accept: h = "image/*",
error: d,
maxImages: r = 10
}) => {
const { onAssetUpload: g, onToggleImageEditor: p } = R(), { toast: s } = U(), [a, u] = M(!1), c = P(null), y = async (i) => {
const t = i.target.files;
if (!(!t?.length || a)) {
if (l.length + t.length > r) {
s({
title: "Alert!",
description: `Maximum ${r} images allowed.`,
icon: "warning"
});
return;
}
if (g) {
u(!0);
try {
const n = Array.from(t).map((k) => g(k)), w = await Promise.all(n);
o([...l, ...w]), s({
title: "Alert!",
description: `${t.length} ${t.length === 1 ? "image" : "images"} uploaded successfully.`,
icon: "success"
});
} catch {
s({
title: "Alert!",
description: "Error uploading images",
icon: "warning"
});
} finally {
u(!1), c.current && (c.current.value = "");
}
}
}
}, b = () => {
!a && l.length < r ? c.current?.click() : l.length >= r && s({
title: "Alert!",
description: `Maximum ${r} images allowed.`,
icon: "warning"
});
}, E = (i) => {
if (!a) {
const t = [...l];
t.splice(i, 1), o(t);
}
};
function N(i, t) {
const n = [...l];
n.splice(t, 1, i), o(n);
}
return /* @__PURE__ */ e.createElement("div", { className: "relative" }, a && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement(v, { className: "w-8 h-8 text-primary-1" })), /* @__PURE__ */ e.createElement("div", { className: "relative p-8 border-2 border-dashed rounded-lg border-primary-1 bg-primary-1" }, /* @__PURE__ */ e.createElement(
"button",
{
className: "w-full",
onClick: b,
type: "button",
disabled: a || l.length >= r
},
/* @__PURE__ */ e.createElement("div", { className: "flex flex-col items-center gap-3 text-center" }, /* @__PURE__ */ e.createElement("div", { className: "bg-gray-100 rounded-full" }, /* @__PURE__ */ e.createElement(A, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "text-gray-600" }, a ? "Uploading..." : l.length >= r ? `Maximum ${r} images reached` : "Add Images"), l.length > 0 && /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "text-gray-500" }, l.length, " of ", r, " images"))
), /* @__PURE__ */ e.createElement(
"input",
{
ref: c,
id: `${f}-gallery`,
type: "file",
accept: h,
disabled: a || l.length >= r,
onChange: y,
className: "hidden",
multiple: !0
}
), d && /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "mt-1 text-danger-1" }, d)), l.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4" }, l.map((i, t) => /* @__PURE__ */ e.createElement("div", { key: t, className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
"img",
{
src: i.public_url,
alt: `Preview ${t + 1}`,
className: "object-cover w-full h-24 rounded"
}
), /* @__PURE__ */ e.createElement(
"button",
{
onClick: () => E(t),
className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100",
type: "button",
disabled: a
},
/* @__PURE__ */ e.createElement($, { size: 16, className: "stroke-danger" })
), p && /* @__PURE__ */ e.createElement(
"button",
{
onClick: () => {
p({
imageUrl: i.public_url,
index: t,
onReplaceImage: N
});
},
className: "absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100"
},
/* @__PURE__ */ e.createElement(x, { size: 16, className: "stroke-danger" })
)))));
};
export {
L as MultiImagePicker
};
//# sourceMappingURL=index.es153.js.map