diff --git a/src/components/ast/javascript-ast-tree-item.tsx b/src/components/ast/javascript-ast-tree-item.tsx index dec7a27..d3e12b0 100644 --- a/src/components/ast/javascript-ast-tree-item.tsx +++ b/src/components/ast/javascript-ast-tree-item.tsx @@ -20,12 +20,12 @@ export const JavascriptAstTreeItem: FC = ({ }) => ( {data.type} - +
{Object.entries(data).map(item => ( diff --git a/src/components/ast/json-ast-tree-item.tsx b/src/components/ast/json-ast-tree-item.tsx index 523120a..49a740d 100644 --- a/src/components/ast/json-ast-tree-item.tsx +++ b/src/components/ast/json-ast-tree-item.tsx @@ -22,12 +22,12 @@ export const JsonAstTreeItem: FC = ({ }) => ( {data.type} - +
{Object.entries(data).map(item => ( diff --git a/src/components/ast/markdown-ast-tree-item.tsx b/src/components/ast/markdown-ast-tree-item.tsx index 1759861..aa80424 100644 --- a/src/components/ast/markdown-ast-tree-item.tsx +++ b/src/components/ast/markdown-ast-tree-item.tsx @@ -22,12 +22,12 @@ export const MarkdownAstTreeItem: FC = ({ }) => ( {data.type} - +
{Object.entries(data).map(item => ( diff --git a/src/components/scope/scope-item.tsx b/src/components/scope/scope-item.tsx index 01edc0e..150aba2 100644 --- a/src/components/scope/scope-item.tsx +++ b/src/components/scope/scope-item.tsx @@ -44,12 +44,12 @@ export const ScopeItem: FC = ({ return ( {isArray && `${Math.max(index, 0)}.`} {key} - +
{properties.map((item, index) => ( = ({ data, path }) => { const [key, value] = data; const [open, setOpen] = useState(false); const Icon = open ? MinusSquareIcon : PlusSquareIcon; - const toggleOpen = () => setOpen(!open); + const isObject = typeof value === "object" && value !== null; + const isExpandable = + isObject && + (Array.isArray(value) + ? value.length > 0 + : Object.keys(value).length > 0); + const values = renderValue(value); + const renderParts = values.map((part, partIndex) => ( + + {part} + + )); return ( <>
- {(typeof value === "object" && - Object.values(value ?? {}).length) || - (Array.isArray(value) && value.length) ? ( + {isExpandable ? ( ) : ( -
+
)} - {key && {key}} - {renderValue(value).map((part, partIndex) => ( - - {part} - - ))} + {key && {key}} + {renderParts}
{open ? ( (({ className, children, ...props }, ref) => (
{children}