schyma
Version:
JSON Schemas Visualizer React component
37 lines • 2.04 kB
JavaScript
import React, { useEffect, useState } from 'react';
import Tables from './Tables';
import CodeComponent from './Code';
function Panel({ node, nodes, title, description }) {
var _a;
const [view, setView] = useState();
const [children, setChildren] = useState([]);
const [activeNode, setActiveNode] = useState(node);
const data = node === null || node === void 0 ? void 0 : node.data;
useEffect(() => {
if (node) {
setView(true);
if (data.children.length > 0) {
setChildren(data.children);
setActiveNode(node);
}
else {
setActiveNode(nodes[data.parent]);
setChildren(nodes[data.parent].data.children);
}
}
}, [node]);
if (view) {
return (React.createElement("div", { className: 'panel' },
React.createElement("h1", null, (activeNode === null || activeNode === void 0 ? void 0 : activeNode.data.title) || (activeNode === null || activeNode === void 0 ? void 0 : activeNode.data.label)),
React.createElement("p", null, activeNode === null || activeNode === void 0 ? void 0 : activeNode.data.description),
children.length > 0 && React.createElement(Tables, { nodes: children, active: node }),
((_a = activeNode === null || activeNode === void 0 ? void 0 : activeNode.data) === null || _a === void 0 ? void 0 : _a.examples) && (React.createElement("div", { className: 'examples-wrapper' },
React.createElement("h1", { className: 'font-bold' }, "Examples"), activeNode === null || activeNode === void 0 ? void 0 :
activeNode.data.examples.map((example) => (React.createElement(CodeComponent, { key: example.title }, JSON.stringify(example, null, 2))))))));
}
return (React.createElement("div", { className: 'panel' },
React.createElement("h1", null, title),
React.createElement("p", null, description)));
}
export default Panel;
//# sourceMappingURL=Panel.js.map