schyma
Version:
JSON Schemas Visualizer React component
71 lines • 5.83 kB
JavaScript
import React, { useEffect, useState } from 'react';
import Tables from './Tables';
import CodeComponent from './Code';
import { formatRequiredSentence } from '../helpers/formatRequired';
import SidebarIcon from '../icons/SidebarIcon';
function Panel({ node, nodes, title, description, isCollapsed, setIsCollapsed }) {
var _a;
const [view, setView] = useState();
const [children, setChildren] = useState([]);
const [activeNode, setActiveNode] = useState(node);
const [activeExampleIndex, setActiveExampleIndex] = useState(0);
const [activeMainTab, setActiveMainTab] = useState('examples');
const data = node === null || node === void 0 ? void 0 : node.data;
useEffect(() => {
if (node) {
setView(true);
setActiveExampleIndex(0);
if (data.children.length > 0) {
setChildren(data.children);
setActiveNode(node);
}
else {
setActiveNode(nodes[data.parent]);
setChildren(nodes[data.parent].data.children);
}
}
}, [node]);
const handleToggle = () => {
setIsCollapsed(!isCollapsed);
};
if (view) {
return (React.createElement("div", { className: isCollapsed ? 'panel-wrapper-collapsed' : 'panel-wrapper' },
React.createElement("button", { className: 'panel-toggle-btn', onClick: handleToggle, title: isCollapsed ? 'Expand panel' : 'Collapse panel' },
React.createElement(SidebarIcon, { isCollapsed: isCollapsed })),
React.createElement("div", { className: `panel ${isCollapsed ? 'panel-collapsed' : ''}` },
React.createElement("div", { className: 'panel-content' },
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),
((_a = activeNode === null || activeNode === void 0 ? void 0 : activeNode.data) === null || _a === void 0 ? void 0 : _a.required) && activeNode.data.required.length > 0 && (React.createElement("p", { className: 'required-sentence' }, formatRequiredSentence(activeNode.data.required))),
children.length > 0 && React.createElement(Tables, { nodes: children, active: node }),
(() => {
var _a, _b;
const hasExamples = ((_a = activeNode === null || activeNode === void 0 ? void 0 : activeNode.data) === null || _a === void 0 ? void 0 : _a.examples) && activeNode.data.examples.length > 0;
const hasJson = (_b = activeNode === null || activeNode === void 0 ? void 0 : activeNode.data) === null || _b === void 0 ? void 0 : _b._json;
if (!hasExamples && !hasJson)
return null;
return (React.createElement("div", { className: 'panel-code-section' },
React.createElement("div", { className: 'main-tabs' },
hasExamples && (React.createElement("button", { className: `main-tab ${activeMainTab === 'examples' || !hasJson ? 'main-tab-active' : ''}`, onClick: () => setActiveMainTab('examples') }, "Examples")),
hasJson && (React.createElement("button", { className: `main-tab ${activeMainTab === 'json' || !hasExamples ? 'main-tab-active' : ''}`, onClick: () => setActiveMainTab('json') }, "JSON"))),
(activeMainTab === 'examples' || !hasJson) && hasExamples && (React.createElement("div", { className: 'examples-wrapper' },
activeNode.data.examples.length > 1 && (React.createElement("div", { className: 'example-header' },
React.createElement("div", { className: 'examples-tabs' }, activeNode.data.examples.map((example, index) => (React.createElement("button", { key: index, className: `examples-tab ${activeExampleIndex === index ? 'examples-tab-active' : ''}`, onClick: () => setActiveExampleIndex(index) }, example.title || `#${index + 1}`)))))),
React.createElement("div", { className: 'examples-content' },
React.createElement("div", { className: 'examples-code-container' },
React.createElement(CodeComponent, null, JSON.stringify(activeNode.data.examples[activeExampleIndex], null, 2)))))),
(activeMainTab === 'json' || !hasExamples) && hasJson && (React.createElement("div", { className: 'json-wrapper' },
React.createElement("div", { className: 'examples-code-container' },
React.createElement(CodeComponent, null, JSON.stringify(activeNode === null || activeNode === void 0 ? void 0 : activeNode.data._json, null, 2)))))));
})()))));
}
return (React.createElement("div", { className: isCollapsed ? 'panel-wrapper-collapsed' : 'panel-wrapper' },
React.createElement("button", { className: 'panel-toggle-btn', onClick: handleToggle, title: isCollapsed ? 'Expand panel' : 'Collapse panel' },
React.createElement(SidebarIcon, { isCollapsed: isCollapsed })),
React.createElement("div", { className: `panel ${isCollapsed ? 'panel-collapsed' : ''}` },
React.createElement("div", { className: 'panel-content' },
React.createElement("h1", null, title),
React.createElement("p", null, description)))));
}
export default Panel;
//# sourceMappingURL=Panel.js.map