schyma
Version:
JSON Schemas Visualizer React component
51 lines • 2.58 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const Panel_1 = tslib_1.__importDefault(require("./Panel"));
const react_2 = require("react");
const Nodes_1 = tslib_1.__importDefault(require("./Nodes"));
const reusables_1 = require("../utils/reusables");
const node_1 = require("../constants/node");
const Loader_1 = tslib_1.__importDefault(require("../icons/Loader"));
const ajv_1 = require("../helpers/ajv");
function Schyma({ title, description, schema, defaultCollapsed = false }) {
const ajv = (0, ajv_1.getValidator)(schema === null || schema === void 0 ? void 0 : schema.$schema);
const [currentNode, setCurrentNode] = (0, react_2.useState)();
const [nNodes, setnNodes] = (0, react_2.useState)({});
const [render, setRender] = (0, react_2.useState)(false);
const [isPanelCollapsed, setIsPanelCollapsed] = (0, react_2.useState)(defaultCollapsed);
const properties = (0, reusables_1.propMerge)(schema, '');
const compositionType = (0, reusables_1.getCompositionType)(schema);
const initialNode = {
id: '1',
type: compositionType ? 'schema' : 'input',
data: {
label: title,
description,
properties: properties,
relations: {},
compositionType,
isRoot: true,
},
position: node_1.position,
};
let validate = false;
try {
const result = ajv.validateSchema(schema);
validate = typeof result === 'boolean' ? result : false;
}
catch (_a) {
validate = false;
}
(0, react_1.useEffect)(() => {
setRender(validate);
}, [validate]);
return (react_1.default.createElement("div", null, render ? (react_1.default.createElement("div", { className: 'body-wrapper' },
react_1.default.createElement("div", { className: 'node-container' },
react_1.default.createElement(Nodes_1.default, { setnNodes: setnNodes, setCurrentNode: setCurrentNode, nNodes: nNodes, initialNode: initialNode, schema: schema, isPanelCollapsed: isPanelCollapsed })),
react_1.default.createElement(Panel_1.default, { title: title, description: description, node: currentNode, nodes: nNodes, isCollapsed: isPanelCollapsed, setIsCollapsed: setIsPanelCollapsed }))) : (react_1.default.createElement("div", { className: 'activity-loader' },
react_1.default.createElement(Loader_1.default, null)))));
}
exports.default = Schyma;
//# sourceMappingURL=App.js.map