@chaibuilder/sdk 1.2.9 → 1.2.10-7.beta.1

package/dist/UploadImages-SVnIHigg.js

@@ -0,0 +1,153 @@
+import { j as e } from "./jsx-runtime-Sp0orL4X.js";
+import { useState as l, useEffect as k } from "react";
+import { isEmpty as j, map as b } from "lodash-es";
+import { atom as F, useAtom as U } from "jotai";
+import { S as C } from "./context-menu-YGd09SE1.js";
+import { useTranslation as S } from "react-i18next";
+import { d as N } from "./index-3NV_rst1.js";
+import { Upload as E, Loader as G } from "lucide-react";
+import "@radix-ui/react-switch";
+import "@radix-ui/react-accordion";
+import "@radix-ui/react-icons";
+import "class-variance-authority";
+import "@radix-ui/react-alert-dialog";
+import "@radix-ui/react-slot";
+import "@radix-ui/react-label";
+import "@radix-ui/react-scroll-area";
+import "@radix-ui/react-tabs";
+import "@radix-ui/react-tooltip";
+import "@radix-ui/react-popover";
+import "@radix-ui/react-hover-card";
+import "@radix-ui/react-select";
+import "@radix-ui/react-dropdown-menu";
+import "@radix-ui/react-separator";
+import "@radix-ui/react-toast";
+import "cmdk";
+import "@radix-ui/react-dialog";
+import "@radix-ui/react-context-menu";
+import "clsx";
+import "tailwind-merge";
+import "./iconBase-Ief2hJUZ.js";
+import "@chaibuilder/runtime";
+import "./plugin-f6SDZ_Or.js";
+import "@react-hookz/web";
+import "tree-model";
+import "react-quill";
+import "./STRINGS-Xxstm-7I.js";
+import "flagged";
+import "react-hotkeys-hook";
+import "@floating-ui/dom";
+import "@floating-ui/react-dom";
+import "react-event-hook";
+import "@tailwindcss/typography";
+import "@tailwindcss/forms";
+import "@tailwindcss/aspect-ratio";
+import "react-wrap-balancer";
+import "react-dom";
+import "prop-types";
+import "react-error-boundary";
+import "re-resizable";
+import "@rjsf/validator-ajv8";
+import "@rjsf/core";
+import "./controls-lEwMTdPQ.js";
+import "react-arborist";
+import "himalaya";
+import "react-icons-picker";
+import "react-autosuggest";
+import "fuse.js";
+import "i18next";
+import "framer-motion";
+const P = F([]), Re = ({ isModalView: s, onSelect: m }) => {
+  const { t: r } = S(), c = N("uploadMediaCallback"), n = N("fetchMediaCallback"), [i, d] = U(P), [y, u] = l(!1), [x, f] = l(!1), [, v] = l(), [h, p] = l("");
+  k(() => {
+    (async () => {
+      if (!n)
+        return;
+      f(!0);
+      const t = await n();
+      d(t || []), f(!1);
+    })();
+  }, []);
+  const w = (t) => {
+    var o, a;
+    if (p(""), t && ((a = (o = t == null ? void 0 : t.target) == null ? void 0 : o.files) == null ? void 0 : a.length) > 0) {
+      const g = t.target.files[0];
+      g.type.startsWith("image") ? I(g) : p(r("Please select an image"));
+    }
+  }, I = async (t) => {
+    if (c) {
+      u(!0);
+      try {
+        const { url: o } = await c(t);
+        m(o), v(void 0);
+        const a = await n();
+        d(a);
+      } catch (o) {
+        d([]), p((o == null ? void 0 : o.message) || "Something went wrong.");
+      }
+      u(!1);
+    }
+  };
+  return /* @__PURE__ */ e.jsxs("div", { children: [
+    /* @__PURE__ */ e.jsxs("label", { htmlFor: s ? "upload-in-modal" : "upload-in-panel", children: [
+      /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center rounded-lg", children: /* @__PURE__ */ e.jsxs(
+        "label",
+        {
+          htmlFor: "image-upload",
+          className: "flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed border-border",
+          children: [
+            /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center pb-6 pt-5", children: [
+              /* @__PURE__ */ e.jsx(E, { className: "mb-3 h-10 w-10 text-gray-400" }),
+              /* @__PURE__ */ e.jsx("p", { className: "mb-2 text-sm text-gray-500 dark:text-gray-400", children: /* @__PURE__ */ e.jsx("span", { className: "font-semibold", children: r("Click to upload") }) }),
+              /* @__PURE__ */ e.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: r("SVG, PNG, JPG or GIF (Max. 2mb)") })
+            ] }),
+            y ? /* @__PURE__ */ e.jsxs("div", { className: "flex h-full w-full items-center justify-center", children: [
+              /* @__PURE__ */ e.jsx(G, { className: "h-6 w-6 animate-spin" }),
+              /* @__PURE__ */ e.jsx("span", { className: "ml-2 text-sm text-gray-500", children: r("Uploading...") })
+            ] }) : null,
+            h && /* @__PURE__ */ e.jsx("p", { className: "pb-2 text-xs text-red-500", children: h || r("Something went wrong") })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          type: "file",
+          id: "image-upload",
+          accept: "image/*",
+          hidden: !0,
+          onChange: w
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e.jsxs(C, { className: `-mx-2 flex h-full flex-col pb-8 pt-2 ${s ? "px-2" : ""} pt-2`, children: [
+      j(i) && x && /* @__PURE__ */ e.jsx("div", { className: "flex flex-col items-center justify-center py-6", children: /* @__PURE__ */ e.jsx("div", { className: "animate-pulse font-medium", children: r("Fetching...") }) }),
+      j(i) && !x && /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col items-center justify-center text-center", children: [
+        /* @__PURE__ */ e.jsx("div", { className: "mb-4 h-12 rounded-full p-6" }),
+        /* @__PURE__ */ e.jsx("h3", { className: "mb-2 text-sm font-semibold", children: r("No images found") }),
+        /* @__PURE__ */ e.jsx("p", { className: "mb-4 max-w-sm text-muted-foreground", children: r("It looks like you haven't uploaded any images yet. Start by clicking the upload button above.") })
+      ] }),
+      s ? /* @__PURE__ */ e.jsx("div", { className: "h-full columns-5 py-2", children: b(i, (t) => /* @__PURE__ */ e.jsx("div", { role: "button", tabIndex: 0, className: "my-1 flex", onClick: () => m(t.url), children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+        "img",
+        {
+          className: "h-auto flex-1 cursor-pointer rounded-md transition duration-300 ease-in-out hover:scale-105",
+          alt: t.name,
+          src: t.thumbUrl
+        }
+      ) }) }, t.id)) }) : b(i, (t) => (
+        // TODO: Drag and Drop Image to Canvas from Here use `pic.url` for image quality
+        /* @__PURE__ */ e.jsx("div", { role: "button", tabIndex: 0, className: "px-2 py-1", onClick: () => m(t.url), children: /* @__PURE__ */ e.jsx("div", { className: "relative overflow-hidden rounded-md bg-cover bg-no-repeat", children: /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            className: "h-auto w-full cursor-pointer transition duration-300 ease-in-out hover:scale-105",
+            alt: t.name,
+            src: t.url
+          }
+        ) }) }, t.id)
+      ))
+    ] })
+  ] });
+};
+export {
+  Re as default
+};