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