@flanksource/clicky-ui
Version:
Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.
75 lines (74 loc) • 3.23 kB
JavaScript
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { useState } from "react";
function JsonView({ data, name, depth = 0, defaultOpenDepth = 2 }) {
const [open, setOpen] = useState(depth < defaultOpenDepth);
if (data === null || data === void 0) {
return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic", children: "null" });
}
if (typeof data === "string") {
return /* @__PURE__ */ jsxs("span", { className: "text-green-700 dark:text-green-400", children: [
'"',
data,
'"'
] });
}
if (typeof data === "number" || typeof data === "boolean") {
return /* @__PURE__ */ jsx("span", { className: "text-blue-700 dark:text-blue-400", children: String(data) });
}
if (typeof data !== "object") {
return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: String(data) });
}
const isArray = Array.isArray(data);
const entries = isArray ? data.map((v, i) => [i, v]) : Object.entries(data);
const [openB, closeB] = isArray ? ["[", "]"] : ["{", "}"];
if (entries.length === 0) {
return /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
openB,
closeB
] });
}
return /* @__PURE__ */ jsxs("div", { className: "text-sm font-mono", style: { paddingLeft: depth > 0 ? "12px" : "0" }, children: [
/* @__PURE__ */ jsxs(
"span",
{
className: "cursor-pointer hover:bg-accent rounded px-0.5 select-none",
onClick: () => setOpen(!open),
children: [
/* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs mr-1", children: open ? "▼" : "▶" }),
name && /* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-400", children: name }),
name && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: ": " }),
!open && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
openB,
" ",
entries.length,
" ",
isArray ? "items" : "keys",
" ",
closeB
] }),
open && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: openB })
]
}
),
open && /* @__PURE__ */ jsxs(Fragment, { children: [
entries.map(([key, val]) => /* @__PURE__ */ jsx("div", { className: "pl-3 border-l border-border ml-1", children: typeof val === "object" && val !== null ? /* @__PURE__ */ jsx(
JsonView,
{
data: val,
name: String(key),
depth: depth + 1,
defaultOpenDepth
}
) : /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("span", { className: "text-purple-600 dark:text-purple-400", children: isArray ? "" : String(key) }),
!isArray && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: ": " }),
/* @__PURE__ */ jsx(JsonView, { data: val, depth: depth + 1, defaultOpenDepth })
] }) }, key)),
/* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: closeB })
] })
] });
}
export {
JsonView
};
//# sourceMappingURL=JsonView.js.map