mantine-json-view
Advanced tools
Comparing version 0.2.0 to 0.2.1
@@ -1,1 +0,1 @@ | ||
(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a.index={},a["react/jsx-runtime"],a.React,a["@mantine/core"]))})(this,function(a,n,l,c){"use strict";const p=l.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function u({sx:r,...e}){const{theme:t}=l.useContext(p);return n.jsx(c.Text,{...e,sx:{...r,fontFamily:t==null?void 0:t.fontFamily}})}const T=c.createStyles((r,{literal:e,theme:t})=>{const{key:o,literals:s={}}=(t==null?void 0:t.colors)||{};return{key:{color:o},root:{alignItems:"center",gap:8,width:"100%"},value:{color:s[e.type]}}});function A(r){switch(r.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${r.value}"`;default:return r.value.toString()}}function x({literal:r}){const{clipboardComponent:e,theme:t}=l.useContext(p),{classes:o}=T({literal:r,theme:t}),s=l.useMemo(()=>A(r),[r]);return n.jsxs(c.Flex,{className:o.root,children:[n.jsxs(u,{fz:"md",children:[n.jsxs("span",{className:o.key,children:['"',r.key,'":']})," ",n.jsx("span",{className:o.value,children:s})]}),e!==void 0&&n.jsx(e,{value:s})]})}const h={closeBracket:{textAlign:"center",width:"100%"},root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}};function f({object:r}){const{collapseComponent:e,theme:t}=l.useContext(p),[o,s]=l.useState(!1);return n.jsxs(c.Flex,{sx:h.root,children:[n.jsxs(c.Flex,{align:"center",direction:"column",gap:4,children:[e!==void 0&&n.jsx(e,{collapsed:o,setCollapsed:s}),!o&&n.jsx(c.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),!o&&n.jsxs(c.Flex,{direction:"column",children:[n.jsx(u,{fz:"md",children:'"object": {'}),r.children.map((i,d)=>{switch(i.type){case"array":return n.jsx(y,{array:i},d);case"object":return n.jsx(f,{object:i},d);default:return n.jsx(x,{literal:i},d)}})]}),!o&&n.jsx(u,{fz:"md",sx:h.closeBracket,children:"}"})]})}function y({array:r}){const{collapseComponent:e,theme:t}=l.useContext(p),[o,s]=l.useState(!1);return n.jsxs(c.Flex,{sx:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2},children:[n.jsxs(c.Flex,{align:"center",direction:"column",gap:4,children:[e!==void 0&&n.jsx(e,{collapsed:o,setCollapsed:s}),!o&&n.jsx(c.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),!o&&n.jsxs(c.Flex,{direction:"column",children:[n.jsx(u,{fz:"md",children:'"array": ['}),r.children.map((i,d)=>{switch(i.type){case"array":return n.jsx(y,{array:i},d);case"object":return n.jsx(f,{object:i},d);default:return n.jsx(x,{literal:i},d)}})]}),!o&&n.jsx(u,{fz:"md",sx:{textAlign:"center",width:"100%"},children:"]"})]})}function C(r){return typeof r=="object"&&!Array.isArray(r)&&r!==null}function F(r){try{const e=JSON.parse(r);if(Array.isArray(e))return b(e);if(C(e))return g(e);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function g(r){return{type:"object",children:Object.entries(r).map(([e,t])=>w(e,t))}}function b(r){return{type:"array",children:Object.entries(r).map(([e,t])=>w(e,t))}}function w(r,e){if(C(e))return g(e);if(Array.isArray(e))return b(e);if(typeof e=="boolean")return{type:"boolean",key:r,value:e};if(typeof e=="number")return{type:"number",key:r,value:e};if(typeof e=="string")return{type:"string",key:r,value:e};if(e===void 0)return{type:"undefined",key:r,value:e};if(e===null)return{type:"null",key:r,value:e};throw new Error(`Unable to parse value: ${e}`)}const S={parse:F};function j(r){return{ast:l.useMemo(()=>S.parse(r),[r]),json:r}}function J({collapseComponent:r,clipboardComponent:e,json:t,theme:o}){const{ast:s}=j(t);return n.jsx(p.Provider,{value:{collapseComponent:r,clipboardComponent:e,theme:o},children:s.type==="object"?n.jsx(f,{object:s}):n.jsx(y,{array:s})})}a.JsonView=J,a.useJsonParser=j,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}); | ||
(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c.index={},c["react/jsx-runtime"],c.React,c["@mantine/core"]))})(this,function(c,n,i,s){"use strict";const f=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function a({sx:e,...r}){const{theme:t}=i.useContext(f);return n.jsx(s.Text,{...r,sx:{...e,fontFamily:t==null?void 0:t.fontFamily}})}const T=s.createStyles((e,{literal:r,theme:t})=>{const{key:o,literals:l={}}=(t==null?void 0:t.colors)||{};return{key:{color:o},root:{alignItems:"center",gap:8,width:"100%"},value:{color:l[r.type]}}});function m(e){switch(e.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${e.value}"`;default:return e.value.toString()}}function x({literal:e}){const{clipboardComponent:r,theme:t}=i.useContext(f),{classes:o}=T({literal:e,theme:t}),l=i.useMemo(()=>m(e),[e]);return n.jsxs(s.Flex,{className:o.root,children:[n.jsxs(a,{fz:"md",children:[n.jsxs("span",{className:o.key,children:['"',e.key,'":']})," ",n.jsx("span",{className:o.value,children:l})]}),r!==void 0&&n.jsx(r,{value:l})]})}const h={closeBracket:{textAlign:"center",width:"100%"},root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}};function u({object:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:h.root,children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:'"object": {'}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"}"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(y,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(x,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:h.closeBracket,children:"}"})]})}function y({array:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2},children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:'"array": ['}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"]"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(y,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(x,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:{textAlign:"center",width:"100%"},children:"]"})]})}function g(e){return typeof e=="object"&&!Array.isArray(e)&&e!==null}function F(e){try{const r=JSON.parse(e);if(Array.isArray(r))return w(r);if(g(r))return C(r);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function C(e){return{type:"object",children:Object.entries(e).map(([r,t])=>b(r,t))}}function w(e){return{type:"array",children:Object.entries(e).map(([r,t])=>b(r,t))}}function b(e,r){if(g(r))return C(r);if(Array.isArray(r))return w(r);if(typeof r=="boolean")return{type:"boolean",key:e,value:r};if(typeof r=="number")return{type:"number",key:e,value:r};if(typeof r=="string")return{type:"string",key:e,value:r};if(r===void 0)return{type:"undefined",key:e,value:r};if(r===null)return{type:"null",key:e,value:r};throw new Error(`Unable to parse value: ${r}`)}const A={parse:F};function j(e){return{ast:i.useMemo(()=>A.parse(e),[e]),json:e}}function S({collapseComponent:e,clipboardComponent:r,json:t,theme:o}){const{ast:l}=j(t);return n.jsx(f.Provider,{value:{collapseComponent:e,clipboardComponent:r,theme:o},children:l.type==="object"?n.jsx(u,{object:l}):n.jsx(y,{array:l})})}c.JsonView=S,c.useJsonParser=j,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}); |
@@ -1,4 +0,4 @@ | ||
import { jsx as t, jsxs as i } from "react/jsx-runtime"; | ||
import { createContext as A, useContext as d, useMemo as g, useState as b } from "react"; | ||
import { Text as T, createStyles as J, Flex as a } from "@mantine/core"; | ||
import { jsx as n, jsxs as i } from "react/jsx-runtime"; | ||
import { createContext as A, useContext as u, useMemo as h, useState as g } from "react"; | ||
import { Text as T, createStyles as z, Flex as s } from "@mantine/core"; | ||
const p = A({ | ||
@@ -9,5 +9,5 @@ collapseComponent: void 0, | ||
}); | ||
function u({ sx: e, ...r }) { | ||
const { theme: n } = d(p); | ||
return /* @__PURE__ */ t( | ||
function a({ sx: e, ...r }) { | ||
const { theme: t } = u(p); | ||
return /* @__PURE__ */ n( | ||
T, | ||
@@ -18,3 +18,3 @@ { | ||
...e, | ||
fontFamily: n == null ? void 0 : n.fontFamily | ||
fontFamily: t == null ? void 0 : t.fontFamily | ||
} | ||
@@ -24,4 +24,4 @@ } | ||
} | ||
const S = J((e, { literal: r, theme: n }) => { | ||
const { key: o, literals: s = {} } = (n == null ? void 0 : n.colors) || {}; | ||
const J = z((e, { literal: r, theme: t }) => { | ||
const { key: o, literals: c = {} } = (t == null ? void 0 : t.colors) || {}; | ||
return { | ||
@@ -37,7 +37,7 @@ key: { | ||
value: { | ||
color: s[r.type] | ||
color: c[r.type] | ||
} | ||
}; | ||
}); | ||
function k(e) { | ||
function S(e) { | ||
switch (e.type) { | ||
@@ -54,6 +54,6 @@ case "null": | ||
} | ||
function h({ literal: e }) { | ||
const { clipboardComponent: r, theme: n } = d(p), { classes: o } = S({ literal: e, theme: n }), s = g(() => k(e), [e]); | ||
return /* @__PURE__ */ i(a, { className: o.root, children: [ | ||
/* @__PURE__ */ i(u, { fz: "md", children: [ | ||
function x({ literal: e }) { | ||
const { clipboardComponent: r, theme: t } = u(p), { classes: o } = J({ literal: e, theme: t }), c = h(() => S(e), [e]); | ||
return /* @__PURE__ */ i(s, { className: o.root, children: [ | ||
/* @__PURE__ */ i(a, { fz: "md", children: [ | ||
/* @__PURE__ */ i("span", { className: o.key, children: [ | ||
@@ -65,8 +65,8 @@ '"', | ||
" ", | ||
/* @__PURE__ */ t("span", { className: o.value, children: s }) | ||
/* @__PURE__ */ n("span", { className: o.value, children: c }) | ||
] }), | ||
r !== void 0 && /* @__PURE__ */ t(r, { value: s }) | ||
r !== void 0 && /* @__PURE__ */ n(r, { value: c }) | ||
] }); | ||
} | ||
const m = { | ||
const y = { | ||
closeBracket: { | ||
@@ -83,17 +83,17 @@ textAlign: "center", | ||
function f({ object: e }) { | ||
const { collapseComponent: r, theme: n } = d(p), [o, s] = b(!1); | ||
return /* @__PURE__ */ i(a, { sx: m.root, children: [ | ||
/* @__PURE__ */ i(a, { align: "center", direction: "column", gap: 4, children: [ | ||
r !== void 0 && /* @__PURE__ */ t( | ||
const { collapseComponent: r, theme: t } = u(p), [o, c] = g(!1); | ||
return /* @__PURE__ */ i(s, { sx: y.root, children: [ | ||
/* @__PURE__ */ i(s, { align: "center", direction: "column", gap: 4, children: [ | ||
r !== void 0 && /* @__PURE__ */ n( | ||
r, | ||
{ | ||
collapsed: o, | ||
setCollapsed: s | ||
setCollapsed: c | ||
} | ||
), | ||
!o && /* @__PURE__ */ t( | ||
a, | ||
!o && /* @__PURE__ */ n( | ||
s, | ||
{ | ||
sx: { | ||
backgroundColor: n == null ? void 0 : n.colors.collapse, | ||
backgroundColor: t == null ? void 0 : t.colors.collapse, | ||
flexGrow: 1, | ||
@@ -105,22 +105,26 @@ width: 1 | ||
] }), | ||
!o && /* @__PURE__ */ i(a, { direction: "column", children: [ | ||
/* @__PURE__ */ t(u, { fz: "md", children: '"object": {' }), | ||
e.children.map((c, l) => { | ||
switch (c.type) { | ||
/* @__PURE__ */ i(s, { direction: "column", children: [ | ||
/* @__PURE__ */ i(s, { align: "center", gap: "xs", children: [ | ||
/* @__PURE__ */ n(a, { fz: "md", children: '"object": {' }), | ||
/* @__PURE__ */ n(a, { c: "dimmed", fz: "xs", children: e.children.length === 1 ? "1 item" : `${e.children.length} items` }), | ||
o && /* @__PURE__ */ n(a, { fz: "md", children: "}" }) | ||
] }), | ||
!o && e.children.map((l, d) => { | ||
switch (l.type) { | ||
case "array": | ||
return /* @__PURE__ */ t(y, { array: c }, l); | ||
return /* @__PURE__ */ n(m, { array: l }, d); | ||
case "object": | ||
return /* @__PURE__ */ t(f, { object: c }, l); | ||
return /* @__PURE__ */ n(f, { object: l }, d); | ||
default: | ||
return /* @__PURE__ */ t(h, { literal: c }, l); | ||
return /* @__PURE__ */ n(x, { literal: l }, d); | ||
} | ||
}) | ||
] }), | ||
!o && /* @__PURE__ */ t(u, { fz: "md", sx: m.closeBracket, children: "}" }) | ||
!o && /* @__PURE__ */ n(a, { fz: "md", sx: y.closeBracket, children: "}" }) | ||
] }); | ||
} | ||
function y({ array: e }) { | ||
const { collapseComponent: r, theme: n } = d(p), [o, s] = b(!1); | ||
function m({ array: e }) { | ||
const { collapseComponent: r, theme: t } = u(p), [o, c] = g(!1); | ||
return /* @__PURE__ */ i( | ||
a, | ||
s, | ||
{ | ||
@@ -133,15 +137,15 @@ sx: { | ||
children: [ | ||
/* @__PURE__ */ i(a, { align: "center", direction: "column", gap: 4, children: [ | ||
r !== void 0 && /* @__PURE__ */ t( | ||
/* @__PURE__ */ i(s, { align: "center", direction: "column", gap: 4, children: [ | ||
r !== void 0 && /* @__PURE__ */ n( | ||
r, | ||
{ | ||
collapsed: o, | ||
setCollapsed: s | ||
setCollapsed: c | ||
} | ||
), | ||
!o && /* @__PURE__ */ t( | ||
a, | ||
!o && /* @__PURE__ */ n( | ||
s, | ||
{ | ||
sx: { | ||
backgroundColor: n == null ? void 0 : n.colors.collapse, | ||
backgroundColor: t == null ? void 0 : t.colors.collapse, | ||
flexGrow: 1, | ||
@@ -153,17 +157,21 @@ width: 1 | ||
] }), | ||
!o && /* @__PURE__ */ i(a, { direction: "column", children: [ | ||
/* @__PURE__ */ t(u, { fz: "md", children: '"array": [' }), | ||
e.children.map((c, l) => { | ||
switch (c.type) { | ||
/* @__PURE__ */ i(s, { direction: "column", children: [ | ||
/* @__PURE__ */ i(s, { align: "center", gap: "xs", children: [ | ||
/* @__PURE__ */ n(a, { fz: "md", children: '"array": [' }), | ||
/* @__PURE__ */ n(a, { c: "dimmed", fz: "xs", children: e.children.length === 1 ? "1 item" : `${e.children.length} items` }), | ||
o && /* @__PURE__ */ n(a, { fz: "md", children: "]" }) | ||
] }), | ||
!o && e.children.map((l, d) => { | ||
switch (l.type) { | ||
case "array": | ||
return /* @__PURE__ */ t(y, { array: c }, l); | ||
return /* @__PURE__ */ n(m, { array: l }, d); | ||
case "object": | ||
return /* @__PURE__ */ t(f, { object: c }, l); | ||
return /* @__PURE__ */ n(f, { object: l }, d); | ||
default: | ||
return /* @__PURE__ */ t(h, { literal: c }, l); | ||
return /* @__PURE__ */ n(x, { literal: l }, d); | ||
} | ||
}) | ||
] }), | ||
!o && /* @__PURE__ */ t( | ||
u, | ||
!o && /* @__PURE__ */ n( | ||
a, | ||
{ | ||
@@ -185,7 +193,7 @@ fz: "md", | ||
} | ||
function z(e) { | ||
function k(e) { | ||
try { | ||
const r = JSON.parse(e); | ||
if (Array.isArray(r)) | ||
return x(r); | ||
return b(r); | ||
if (C(r)) | ||
@@ -202,11 +210,11 @@ return w(r); | ||
children: Object.entries(e).map( | ||
([r, n]) => j(r, n) | ||
([r, t]) => j(r, t) | ||
) | ||
}; | ||
} | ||
function x(e) { | ||
function b(e) { | ||
return { | ||
type: "array", | ||
children: Object.entries(e).map( | ||
([r, n]) => j(r, n) | ||
([r, t]) => j(r, t) | ||
) | ||
@@ -219,3 +227,3 @@ }; | ||
if (Array.isArray(r)) | ||
return x(r); | ||
return b(r); | ||
if (typeof r == "boolean") | ||
@@ -253,23 +261,23 @@ return { | ||
} | ||
const E = { | ||
parse: z | ||
const $ = { | ||
parse: k | ||
}; | ||
function N(e) { | ||
function E(e) { | ||
return { | ||
ast: g(() => E.parse(e), [e]), | ||
ast: h(() => $.parse(e), [e]), | ||
json: e | ||
}; | ||
} | ||
function $({ | ||
function O({ | ||
collapseComponent: e, | ||
clipboardComponent: r, | ||
json: n, | ||
json: t, | ||
theme: o | ||
}) { | ||
const { ast: s } = N(n); | ||
return /* @__PURE__ */ t( | ||
const { ast: c } = E(t); | ||
return /* @__PURE__ */ n( | ||
p.Provider, | ||
{ | ||
value: { collapseComponent: e, clipboardComponent: r, theme: o }, | ||
children: s.type === "object" ? /* @__PURE__ */ t(f, { object: s }) : /* @__PURE__ */ t(y, { array: s }) | ||
children: c.type === "object" ? /* @__PURE__ */ n(f, { object: c }) : /* @__PURE__ */ n(m, { array: c }) | ||
} | ||
@@ -279,4 +287,4 @@ ); | ||
export { | ||
$ as JsonView, | ||
N as useJsonParser | ||
O as JsonView, | ||
E as useJsonParser | ||
}; |
@@ -1,1 +0,1 @@ | ||
(function(a,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],n):(a=typeof globalThis<"u"?globalThis:a||self,n(a.index={},a["react/jsx-runtime"],a.React,a["@mantine/core"]))})(this,function(a,n,l,c){"use strict";const p=l.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function u({sx:r,...e}){const{theme:t}=l.useContext(p);return n.jsx(c.Text,{...e,sx:{...r,fontFamily:t==null?void 0:t.fontFamily}})}const T=c.createStyles((r,{literal:e,theme:t})=>{const{key:o,literals:s={}}=(t==null?void 0:t.colors)||{};return{key:{color:o},root:{alignItems:"center",gap:8,width:"100%"},value:{color:s[e.type]}}});function A(r){switch(r.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${r.value}"`;default:return r.value.toString()}}function x({literal:r}){const{clipboardComponent:e,theme:t}=l.useContext(p),{classes:o}=T({literal:r,theme:t}),s=l.useMemo(()=>A(r),[r]);return n.jsxs(c.Flex,{className:o.root,children:[n.jsxs(u,{fz:"md",children:[n.jsxs("span",{className:o.key,children:['"',r.key,'":']})," ",n.jsx("span",{className:o.value,children:s})]}),e!==void 0&&n.jsx(e,{value:s})]})}const h={closeBracket:{textAlign:"center",width:"100%"},root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}};function f({object:r}){const{collapseComponent:e,theme:t}=l.useContext(p),[o,s]=l.useState(!1);return n.jsxs(c.Flex,{sx:h.root,children:[n.jsxs(c.Flex,{align:"center",direction:"column",gap:4,children:[e!==void 0&&n.jsx(e,{collapsed:o,setCollapsed:s}),!o&&n.jsx(c.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),!o&&n.jsxs(c.Flex,{direction:"column",children:[n.jsx(u,{fz:"md",children:'"object": {'}),r.children.map((i,d)=>{switch(i.type){case"array":return n.jsx(y,{array:i},d);case"object":return n.jsx(f,{object:i},d);default:return n.jsx(x,{literal:i},d)}})]}),!o&&n.jsx(u,{fz:"md",sx:h.closeBracket,children:"}"})]})}function y({array:r}){const{collapseComponent:e,theme:t}=l.useContext(p),[o,s]=l.useState(!1);return n.jsxs(c.Flex,{sx:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2},children:[n.jsxs(c.Flex,{align:"center",direction:"column",gap:4,children:[e!==void 0&&n.jsx(e,{collapsed:o,setCollapsed:s}),!o&&n.jsx(c.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),!o&&n.jsxs(c.Flex,{direction:"column",children:[n.jsx(u,{fz:"md",children:'"array": ['}),r.children.map((i,d)=>{switch(i.type){case"array":return n.jsx(y,{array:i},d);case"object":return n.jsx(f,{object:i},d);default:return n.jsx(x,{literal:i},d)}})]}),!o&&n.jsx(u,{fz:"md",sx:{textAlign:"center",width:"100%"},children:"]"})]})}function C(r){return typeof r=="object"&&!Array.isArray(r)&&r!==null}function F(r){try{const e=JSON.parse(r);if(Array.isArray(e))return b(e);if(C(e))return g(e);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function g(r){return{type:"object",children:Object.entries(r).map(([e,t])=>w(e,t))}}function b(r){return{type:"array",children:Object.entries(r).map(([e,t])=>w(e,t))}}function w(r,e){if(C(e))return g(e);if(Array.isArray(e))return b(e);if(typeof e=="boolean")return{type:"boolean",key:r,value:e};if(typeof e=="number")return{type:"number",key:r,value:e};if(typeof e=="string")return{type:"string",key:r,value:e};if(e===void 0)return{type:"undefined",key:r,value:e};if(e===null)return{type:"null",key:r,value:e};throw new Error(`Unable to parse value: ${e}`)}const S={parse:F};function j(r){return{ast:l.useMemo(()=>S.parse(r),[r]),json:r}}function J({collapseComponent:r,clipboardComponent:e,json:t,theme:o}){const{ast:s}=j(t);return n.jsx(p.Provider,{value:{collapseComponent:r,clipboardComponent:e,theme:o},children:s.type==="object"?n.jsx(f,{object:s}):n.jsx(y,{array:s})})}a.JsonView=J,a.useJsonParser=j,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})}); | ||
(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("react/jsx-runtime"),require("react"),require("@mantine/core")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mantine/core"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c.index={},c["react/jsx-runtime"],c.React,c["@mantine/core"]))})(this,function(c,n,i,s){"use strict";const f=i.createContext({collapseComponent:void 0,clipboardComponent:void 0,theme:void 0});function a({sx:e,...r}){const{theme:t}=i.useContext(f);return n.jsx(s.Text,{...r,sx:{...e,fontFamily:t==null?void 0:t.fontFamily}})}const T=s.createStyles((e,{literal:r,theme:t})=>{const{key:o,literals:l={}}=(t==null?void 0:t.colors)||{};return{key:{color:o},root:{alignItems:"center",gap:8,width:"100%"},value:{color:l[r.type]}}});function m(e){switch(e.type){case"null":return"null";case"undefined":return"undefined";case"string":return`"${e.value}"`;default:return e.value.toString()}}function x({literal:e}){const{clipboardComponent:r,theme:t}=i.useContext(f),{classes:o}=T({literal:e,theme:t}),l=i.useMemo(()=>m(e),[e]);return n.jsxs(s.Flex,{className:o.root,children:[n.jsxs(a,{fz:"md",children:[n.jsxs("span",{className:o.key,children:['"',e.key,'":']})," ",n.jsx("span",{className:o.value,children:l})]}),r!==void 0&&n.jsx(r,{value:l})]})}const h={closeBracket:{textAlign:"center",width:"100%"},root:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2}};function u({object:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:h.root,children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:'"object": {'}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"}"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(y,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(x,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:h.closeBracket,children:"}"})]})}function y({array:e}){const{collapseComponent:r,theme:t}=i.useContext(f),[o,l]=i.useState(!1);return n.jsxs(s.Flex,{sx:{display:"grid",gridTemplateColumns:"auto 1fr",gap:2},children:[n.jsxs(s.Flex,{align:"center",direction:"column",gap:4,children:[r!==void 0&&n.jsx(r,{collapsed:o,setCollapsed:l}),!o&&n.jsx(s.Flex,{sx:{backgroundColor:t==null?void 0:t.colors.collapse,flexGrow:1,width:1}})]}),n.jsxs(s.Flex,{direction:"column",children:[n.jsxs(s.Flex,{align:"center",gap:"xs",children:[n.jsx(a,{fz:"md",children:'"array": ['}),n.jsx(a,{c:"dimmed",fz:"xs",children:e.children.length===1?"1 item":`${e.children.length} items`}),o&&n.jsx(a,{fz:"md",children:"]"})]}),!o&&e.children.map((d,p)=>{switch(d.type){case"array":return n.jsx(y,{array:d},p);case"object":return n.jsx(u,{object:d},p);default:return n.jsx(x,{literal:d},p)}})]}),!o&&n.jsx(a,{fz:"md",sx:{textAlign:"center",width:"100%"},children:"]"})]})}function g(e){return typeof e=="object"&&!Array.isArray(e)&&e!==null}function F(e){try{const r=JSON.parse(e);if(Array.isArray(r))return w(r);if(g(r))return C(r);throw new Error("Invalid json")}catch{throw new Error("Error parsing json")}}function C(e){return{type:"object",children:Object.entries(e).map(([r,t])=>b(r,t))}}function w(e){return{type:"array",children:Object.entries(e).map(([r,t])=>b(r,t))}}function b(e,r){if(g(r))return C(r);if(Array.isArray(r))return w(r);if(typeof r=="boolean")return{type:"boolean",key:e,value:r};if(typeof r=="number")return{type:"number",key:e,value:r};if(typeof r=="string")return{type:"string",key:e,value:r};if(r===void 0)return{type:"undefined",key:e,value:r};if(r===null)return{type:"null",key:e,value:r};throw new Error(`Unable to parse value: ${r}`)}const A={parse:F};function j(e){return{ast:i.useMemo(()=>A.parse(e),[e]),json:e}}function S({collapseComponent:e,clipboardComponent:r,json:t,theme:o}){const{ast:l}=j(t);return n.jsx(f.Provider,{value:{collapseComponent:e,clipboardComponent:r,theme:o},children:l.type==="object"?n.jsx(u,{object:l}):n.jsx(y,{array:l})})}c.JsonView=S,c.useJsonParser=j,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}); |
{ | ||
"name": "mantine-json-view", | ||
"version": "0.2.0", | ||
"version": "0.2.1", | ||
"engines": { | ||
@@ -5,0 +5,0 @@ "node": "18", |
23034
444