geoiq-frontend-ui-kit/dist/index174.es.js

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

import { Typography as m } from "./index19.es.js";
import e, { useState as v, useRef as A } from "react";
import "./index35.es.js";
import { useToast as $ } from "./index86.es.js";
import { Spinner as x } from "./index63.es.js";
import { Upload as M, X as P, Pen as R } from "lucide-react";
import { useFormValues as T } from "./index138.es.js";
const V = ({
  id: f,
  onChange: o,
  value: r = [],
  accept: h = "image/*",
  error: d,
  maxImages: l = 20
}) => {
  const { onAssetUpload: g, onToggleImageEditor: p } = T(), { toast: s } = $(), [a, u] = v(!1), c = A(null), y = async (i) => {
    const t = i.target.files;
    if (!(!t?.length || a)) {
      if (r.length + t.length > l) {
        s({
          title: "Alert!",
          description: `Maximum ${l} 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([...r, ...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 && r.length < l ? c.current?.click() : r.length >= l && s({
      title: "Alert!",
      description: `Maximum ${l} images allowed.`,
      icon: "warning"
    });
  }, E = (i) => {
    if (!a) {
      const t = [...r];
      t.splice(i, 1), o(t);
    }
  };
  function N(i, t) {
    const n = [...r];
    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(x, { 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 || r.length >= l
    },
    /* @__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(M, { className: "w-6 h-6 text-gray-500" })), /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "text-gray-600" }, a ? "Uploading..." : r.length >= l ? `Maximum ${l} images reached` : "Add Images"), r.length > 0 && /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "text-gray-500" }, r.length, " of ", l, " images"))
  ), /* @__PURE__ */ e.createElement(
    "input",
    {
      ref: c,
      id: `${f}-gallery`,
      type: "file",
      accept: h,
      disabled: a || r.length >= l,
      onChange: y,
      className: "hidden",
      multiple: !0
    }
  ), d && /* @__PURE__ */ e.createElement(m, { variant: "body1", className: "mt-1 text-danger-1" }, d)), r.length > 0 && /* @__PURE__ */ e.createElement("div", { className: "grid grid-cols-2 gap-4 mt-4 sm:grid-cols-3 md:grid-cols-4" }, r.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(P, { size: 16, className: "stroke-danger" })
  ), p && /* @__PURE__ */ e.createElement(
    "button",
    {
      type: "button",
      onClick: (n) => {
        n.currentTarget.blur(), 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(R, { size: 16, className: "stroke-danger" })
  )))));
};
export {
  V as MultiImagePicker
};
//# sourceMappingURL=index174.es.js.map