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

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

import { Loader2 as g, Save as v, X as E } from "lucide-react";
import t, { useRef as n, useState as x, useEffect as s } from "react";
import { Button as b } from "./index9.es.js";
import { ImageEditorPortalContext as h } from "./index145.es.js";
import { Panel as y } from "./index146.es.js";
import { Ribbon as w } from "./index147.es.js";
import { Stage as S } from "./index148.es.js";
import { StatusBar as N } from "./index149.es.js";
function j({
  engine: a,
  ui: r,
  isOpen: l,
  saveLabel: u
}) {
  const o = n(null), [d, p] = x(null), i = n(null), c = n(null), m = n(!1);
  return s(() => {
    if (m.current) return;
    const e = i.current;
    !e?.canvas || !e.overlay || !e.textEditor || !e.stage || (a.mount({
      canvas: e.canvas,
      overlay: e.overlay,
      textEditor: e.textEditor,
      stage: e.stage
    }), m.current = !0);
  }, [r != null]), s(() => {
    if (!l || !o.current) return;
    o.current.hasAttribute("tabindex") || o.current.setAttribute("tabindex", "-1");
    const e = setTimeout(
      () => o.current?.focus({ preventScroll: !0 }),
      0
    );
    return () => clearTimeout(e);
  }, [l]), s(() => {
    l && a.refitStage();
  }, [l, a]), r ? /* @__PURE__ */ t.createElement(
    "div",
    {
      ref: (e) => {
        o.current = e, p(e);
      },
      className: "fixed inset-0 z-[2147483000] flex items-center justify-center bg-[rgba(24,22,18,.55)] backdrop-blur-sm",
      style: {
        display: l ? "flex" : "none",
        pointerEvents: "auto"
      },
      onMouseDown: (e) => {
        e.target === e.currentTarget && r.closeOnBackdrop && a.close();
      }
    },
    /* @__PURE__ */ t.createElement(h.Provider, { value: d }, /* @__PURE__ */ t.createElement("div", { className: "image-editor-modal-panel flex flex-col overflow-hidden bg-light-2 shadow-2xl" }, /* @__PURE__ */ t.createElement("div", { className: "flex items-center gap-3 border-b border-neutral-1 bg-light-3 px-4 py-3" }, /* @__PURE__ */ t.createElement(
      b,
      {
        variant: "primary",
        size: "sm",
        disabled: !r.hasImage || r.isLoadingImage || r.isSaving,
        onClick: a.save,
        className: "w-auto",
        prefixIcon: r.isSaving ? /* @__PURE__ */ t.createElement(g, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ t.createElement(v, { className: "h-4 w-4" })
      },
      r.isSaving ? "Saving…" : u
    ), /* @__PURE__ */ t.createElement(
      "button",
      {
        type: "button",
        title: "Close",
        onClick: () => a.close(),
        className: "ml-auto flex h-[30px] w-[30px] items-center justify-center rounded-lg border border-neutral-1 bg-white text-light-4 hover:bg-light-3 hover:text-light-2"
      },
      /* @__PURE__ */ t.createElement(E, { className: "h-4 w-4" })
    )), /* @__PURE__ */ t.createElement(
      w,
      {
        ui: r,
        engine: a,
        onOpenFile: () => c.current?.click()
      }
    ), /* @__PURE__ */ t.createElement(
      "input",
      {
        ref: c,
        type: "file",
        accept: "image/*",
        hidden: !0,
        onChange: (e) => {
          const f = e.target.files?.[0];
          f && a.openFile(f), e.target.value = "";
        }
      }
    ), /* @__PURE__ */ t.createElement("div", { className: "image-editor-stage-panel-wrap flex min-h-0 flex-1" }, /* @__PURE__ */ t.createElement(
      S,
      {
        ref: i,
        ui: r,
        onChooseImage: () => c.current?.click(),
        onDropFile: (e) => a.openFile(e)
      }
    ), /* @__PURE__ */ t.createElement(y, { ui: r, engine: a })), /* @__PURE__ */ t.createElement(N, { ui: r })))
  ) : null;
}
export {
  j as ImageEditorModal
};
//# sourceMappingURL=index133.es.js.map