@ea-lab/reactive-json
Version:
A REACT-based lib that transforms JSON (or YAML) into interactive HTML markup.
116 lines (115 loc) • 4.77 kB
JavaScript
import { jsx as e, jsxs as a, Fragment as x } from "react/jsx-runtime";
import { useState as p, useContext as B, useRef as g, useEffect as q, useMemo as m } from "react";
import { r as E } from "../../../../dnd-kit-sortable-tree.esm-Cz1RJyIg.js";
import { ActionDependant as L } from "../../../../engine/Actions.js";
import "../../../../engine/EventDispatcherContext.js";
import "../../../../engine/EventDispatcherProvider.js";
import "../../../../engine/GlobalDataContext.js";
import "../../../../engine/PaginationContext.js";
import "../../../../lodash-CYNxjS-I.js";
import { TemplateContext as $ } from "../../../../engine/TemplateContext.js";
import "../../../../index-NNBvIV0S.js";
import "../../../../jsonpath-B9kE9k9e.js";
import "../../../../js-yaml-CFDLc3Ha.js";
import "../../../../engine/ParsingDebugDisplay/ParsingDebugDisplay.js";
import { DebugMode as c } from "./DebugMode.enum.js";
import R from "./ModeDisplay/DebugList/DebugList.js";
import D from "./ModeDisplay/DebugJson/DebugJson.js";
import { flattenObject as J } from "./utils.js";
import '../../../../assets/VariablesDebug.css';const O = "_debugRoot_1ny7q_1", j = "_container_1ny7q_16", k = "_expanded_1ny7q_34", T = "_header_1ny7q_39", I = "_actions_1ny7q_45", P = "_btn_1ny7q_50", M = "_active_1ny7q_58", w = "_path_1ny7q_62", A = "_value_1ny7q_66", H = "_copyBtn_1ny7q_70", V = "_copyBtnSuccess_1ny7q_74", F = "_copyBtnError_1ny7q_78", W = "_info_1ny7q_82", n = {
debugRoot: O,
container: j,
expanded: k,
header: T,
actions: I,
btn: P,
active: M,
path: w,
value: A,
copyBtn: H,
copyBtnSuccess: V,
copyBtnError: F,
info: W
}, dt = ({ props: v }) => {
const [r, u] = p(!1), [i, _] = p(c.LIST), o = B($), d = g(null), [y, S] = p(null), f = g(null);
q(() => {
if (typeof document > "u") return;
let t = document.getElementById("rj-debug-root");
t || (t = document.createElement("div"), t.id = "rj-debug-root", t.classList.add(n.debugRoot), document.body.appendChild(t)), S(t);
}, []);
const l = m(() => (o == null ? void 0 : o.templateData) ?? {}, [o]), b = m(() => JSON.stringify(l, null, 2), [l, o]), h = m(() => J(l), [l, o]), C = async () => {
const t = d.current;
try {
if (await navigator.clipboard.writeText(
i === c.JSON ? b : h.map((s) => `${s.path}: ${JSON.stringify(s.value)}`).join(`
`)
), !t) return;
t.classList.add(n.copyBtnSuccess), t.textContent = "Copied!", setTimeout(() => {
var s;
(s = d.current) == null || s.classList.remove(n.copyBtnSuccess, n.copyBtnError);
}, 3e3);
} catch {
t == null || t.classList.add(n.copyBtnError), setTimeout(() => {
t == null || t.classList.remove(n.copyBtnError);
}, 3e3);
}
}, N = /* @__PURE__ */ e(L, { ...v, attributesHolderRef: f, children: /* @__PURE__ */ a(
"div",
{
className: `${n.container} ${r ? n.expanded : ""}`,
onClick: () => u((t) => !t),
role: "button",
ref: f,
children: [
/* @__PURE__ */ a("div", { className: n.header, children: [
/* @__PURE__ */ a("p", { style: { margin: 0, fontWeight: 600 }, children: [
"Debug Variables ",
/* @__PURE__ */ e("code", { children: o.templatePath })
] }),
/* @__PURE__ */ a("div", { className: n.actions, onClick: (t) => t.stopPropagation(), children: [
r && /* @__PURE__ */ a(x, { children: [
/* @__PURE__ */ e(
"button",
{
className: `${n.btn} ${i === c.LIST ? n.active : ""}`,
onClick: () => _(c.LIST),
children: "List"
}
),
/* @__PURE__ */ e(
"button",
{
className: `${n.btn} ${i === c.JSON ? n.active : ""}`,
onClick: () => _(c.JSON),
children: "JSON"
}
)
] }),
/* @__PURE__ */ e(
"button",
{
className: n.btn,
onClick: () => u((t) => !t),
children: r ? "Collapse" : "Expand"
}
),
r && /* @__PURE__ */ e(
"button",
{
className: `${n.btn} ${n.copyBtn}`,
onClick: C,
ref: d,
children: "Copy"
}
)
] })
] }),
r && /* @__PURE__ */ e("div", { className: n.info, onClick: (t) => t.stopPropagation(), children: i === c.JSON ? /* @__PURE__ */ e(D, { jsonString: b }) : /* @__PURE__ */ e(R, { flatRows: h }) })
]
}
) });
return y ? E.createPortal(N, y) : null;
};
export {
dt as VariablesDebug
};