geoiq-frontend-ui-kit/dist/index.es156.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import { Typography as g } from "./index.es17.js";
import { Spinner as $ } from "./index.es56.js";
import { SingleCombobox as x } from "./index.es25.js";
import { Upload as R, Pen as S, X as T } from "lucide-react";
import e, { useState as _, useRef as C } from "react";
import { useFormValues as M } from "./index.es146.js";
import { useToast as P } from "./index.es73.js";
const X = ({
  id: b,
  onChange: c,
  value: l = [],
  accept: y = "image/*",
  error: p,
  maxImages: a = 10,
  options: E
}) => {
  const { onAssetUpload: u, onToggleImageEditor: f } = M(), { toast: o } = P(), [i, h] = _(!1), m = C(null), N = async (s) => {
    const t = s.target.files;
    if (!(!t?.length || i)) {
      if (l.length + t.length > a) {
        o({
          title: "Alert!",
          description: `Maximum ${a} images allowed.`,
          icon: "warning"
        });
        return;
      }
      if (u) {
        h(!0);
        try {
          const r = Array.from(t).map((d) => u(d)), A = (await Promise.all(r)).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 {
          h(!1), m.current && (m.current.value = "");
        }
      }
    }
  }, w = () => {
    !i && l.length < a ? m.current?.click() : l.length >= a && o({
      title: "Alert!",
      description: `Maximum ${a} images allowed.`,
      icon: "warning"
    });
  }, k = (s) => {
    if (!i) {
      const t = [...l];
      t.splice(s, 1), c(t);
    }
  }, v = (s, t) => {
    const r = [...l], n = r[t];
    r.splice(t, 1, { ...n, ...s }), c(r);
  };
  return /* @__PURE__ */ e.createElement("div", { className: "relative" }, i && /* @__PURE__ */ e.createElement("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-white bg-opacity-70" }, /* @__PURE__ */ e.createElement($, { 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: i || l.length >= a
    },
    /* @__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(R, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-600" }, i ? "Uploading..." : l.length >= a ? `Maximum ${a} images reached` : "Add Images"), l.length > 0 && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "text-gray-500" }, l.length, " of ", a, " images"))
  ), /* @__PURE__ */ e.createElement(
    "input",
    {
      ref: m,
      id: `${b}-gallery`,
      type: "file",
      accept: y,
      disabled: i || l.length >= a,
      onChange: N,
      className: "hidden",
      multiple: !0
    }
  ), p && /* @__PURE__ */ e.createElement(g, { variant: "body1", className: "mt-1 text-danger-1" }, p)), 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((s, t) => /* @__PURE__ */ e.createElement("div", { key: s.private_url, className: "flex flex-col gap-2" }, /* @__PURE__ */ e.createElement("div", { key: t, className: "relative flex rounded" }, /* @__PURE__ */ e.createElement(
    "img",
    {
      src: s.public_url,
      alt: `Preview ${t + 1}`,
      className: "object-cover w-full h-24 rounded"
    }
  ), f && /* @__PURE__ */ e.createElement(
    "button",
    {
      onClick: () => {
        f({
          imageUrl: s.public_url,
          index: t,
          onReplaceImage: v
        });
      },
      className: "absolute p-1 text-white bg-white rounded-full left-2 top-2 opacity-70 hover:opacity-100"
    },
    /* @__PURE__ */ e.createElement(S, { size: 16, className: "stroke-danger" })
  ), /* @__PURE__ */ e.createElement(
    "button",
    {
      onClick: () => k(t),
      className: "absolute p-1 text-white bg-white rounded-full right-2 top-2 opacity-70 hover:opacity-100",
      type: "button",
      disabled: i
    },
    /* @__PURE__ */ e.createElement(T, { size: 16, className: "stroke-danger" })
  )), /* @__PURE__ */ e.createElement(
    x,
    {
      options: E.map((r) => ({
        id: r,
        name: r
      })),
      value: s.tag,
      onChange: (r) => {
        const n = [...l];
        n[t].tag = r, c(n);
      },
      placeholder: "Select "
    }
  )))));
};
export {
  X as TaggableMultiImagePicker
};
//# sourceMappingURL=index.es156.js.map