@devgateway/dvz-ui-react/dist/esm/layout/PreviewComponent.js

A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.

import { jsx as e } from "react/jsx-runtime";
import d, { useState as u, useEffect as g } from "react";
import { useParams as f, useLocation as l, useSearchParams as w } from "react-router";
import { Container as y, Segment as P } from "semantic-ui-react";
import { SettingsConsumer as C } from "@devgateway/wp-react-lib";
import { getComponentByNameIgnoreCase as h } from "../embeddable/index.js";
const v = () => {
  const m = f();
  l();
  const [n] = u(() => h(m.name ?? ""));
  let [r, i] = w();
  const a = (c) => {
    console.log("-------------------------------reading message ----------------------------------------");
    const t = c.data;
    if (t.messageType && t.messageType == "component-attributes") {
      const s = { ...r };
      Object.keys(t).forEach((o) => {
        s["data-" + o.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()] = typeof t[o] == "object" ? JSON.stringify(t[o]) : t[o];
      }), i(s);
    }
  };
  g(() => (window.addEventListener("message", a, !1), window.parent && window.parent.postMessage({ type: "componentReady", value: !0 }, "*"), window.top && window.top.postMessage({ type: "componentReady", value: !0 }, "*"), () => {
    window.removeEventListener("message", a);
  }), []);
  const p = d.useMemo(() => Object.fromEntries(r.entries()), [r]);
  return /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(y, { fluid: !0, className: "editing", children: n ? /* @__PURE__ */ e(n, { ...p, editing: !0 }) : /* @__PURE__ */ e(P.Group, { color: "red", textAlign: "center", children: /* @__PURE__ */ e("h1", { children: "Wrong Component Name" }) }) }) });
}, N = () => /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(v, {}) });
export {
  N as default
};