schyma
Version:
JSON Schemas Visualizer React component
74 lines • 6.46 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const Tables_1 = tslib_1.__importDefault(require("./Tables"));
const Code_1 = tslib_1.__importDefault(require("./Code"));
const formatRequired_1 = require("../helpers/formatRequired");
const SidebarIcon_1 = tslib_1.__importDefault(require("../icons/SidebarIcon"));
function Panel({ node, nodes, title, description, isCollapsed, setIsCollapsed }) {
var _a;
const [view, setView] = (0, react_1.useState)();
const [children, setChildren] = (0, react_1.useState)([]);
const [activeNode, setActiveNode] = (0, react_1.useState)(node);
const [activeExampleIndex, setActiveExampleIndex] = (0, react_1.useState)(0);
const [activeMainTab, setActiveMainTab] = (0, react_1.useState)('examples');
const data = node === null || node === void 0 ? void 0 : node.data;
(0, react_1.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_1.default.createElement("div", { className: isCollapsed ? 'panel-wrapper-collapsed' : 'panel-wrapper' },
react_1.default.createElement("button", { className: 'panel-toggle-btn', onClick: handleToggle, title: isCollapsed ? 'Expand panel' : 'Collapse panel' },
react_1.default.createElement(SidebarIcon_1.default, { isCollapsed: isCollapsed })),
react_1.default.createElement("div", { className: `panel ${isCollapsed ? 'panel-collapsed' : ''}` },
react_1.default.createElement("div", { className: 'panel-content' },
react_1.default.createElement("h1", null, (activeNode === null || activeNode === void 0 ? void 0 : activeNode.data.title) || (activeNode === null || activeNode === void 0 ? void 0 : activeNode.data.label)),
react_1.default.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_1.default.createElement("p", { className: 'required-sentence' }, (0, formatRequired_1.formatRequiredSentence)(activeNode.data.required))),
children.length > 0 && react_1.default.createElement(Tables_1.default, { 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_1.default.createElement("div", { className: 'panel-code-section' },
react_1.default.createElement("div", { className: 'main-tabs' },
hasExamples && (react_1.default.createElement("button", { className: `main-tab ${activeMainTab === 'examples' || !hasJson ? 'main-tab-active' : ''}`, onClick: () => setActiveMainTab('examples') }, "Examples")),
hasJson && (react_1.default.createElement("button", { className: `main-tab ${activeMainTab === 'json' || !hasExamples ? 'main-tab-active' : ''}`, onClick: () => setActiveMainTab('json') }, "JSON"))),
(activeMainTab === 'examples' || !hasJson) && hasExamples && (react_1.default.createElement("div", { className: 'examples-wrapper' },
activeNode.data.examples.length > 1 && (react_1.default.createElement("div", { className: 'example-header' },
react_1.default.createElement("div", { className: 'examples-tabs' }, activeNode.data.examples.map((example, index) => (react_1.default.createElement("button", { key: index, className: `examples-tab ${activeExampleIndex === index ? 'examples-tab-active' : ''}`, onClick: () => setActiveExampleIndex(index) }, example.title || `#${index + 1}`)))))),
react_1.default.createElement("div", { className: 'examples-content' },
react_1.default.createElement("div", { className: 'examples-code-container' },
react_1.default.createElement(Code_1.default, null, JSON.stringify(activeNode.data.examples[activeExampleIndex], null, 2)))))),
(activeMainTab === 'json' || !hasExamples) && hasJson && (react_1.default.createElement("div", { className: 'json-wrapper' },
react_1.default.createElement("div", { className: 'examples-code-container' },
react_1.default.createElement(Code_1.default, null, JSON.stringify(activeNode === null || activeNode === void 0 ? void 0 : activeNode.data._json, null, 2)))))));
})()))));
}
return (react_1.default.createElement("div", { className: isCollapsed ? 'panel-wrapper-collapsed' : 'panel-wrapper' },
react_1.default.createElement("button", { className: 'panel-toggle-btn', onClick: handleToggle, title: isCollapsed ? 'Expand panel' : 'Collapse panel' },
react_1.default.createElement(SidebarIcon_1.default, { isCollapsed: isCollapsed })),
react_1.default.createElement("div", { className: `panel ${isCollapsed ? 'panel-collapsed' : ''}` },
react_1.default.createElement("div", { className: 'panel-content' },
react_1.default.createElement("h1", null, title),
react_1.default.createElement("p", null, description)))));
}
exports.default = Panel;
//# sourceMappingURL=Panel.js.map