schyma
Version:
JSON Schemas Visualizer React component
48 lines • 2.15 kB
JavaScript
import React, { useEffect } from 'react';
import Panel from './Panel';
import { useState } from 'react';
import Nodes from './Nodes';
import { propMerge, getCompositionType } from '../utils/reusables';
import { position } from '../constants/node';
import Loader from '../icons/Loader';
import { getValidator } from '../helpers/ajv';
function Schyma({ title, description, schema, defaultCollapsed = false }) {
const ajv = getValidator(schema === null || schema === void 0 ? void 0 : schema.$schema);
const [currentNode, setCurrentNode] = useState();
const [nNodes, setnNodes] = useState({});
const [render, setRender] = useState(false);
const [isPanelCollapsed, setIsPanelCollapsed] = useState(defaultCollapsed);
const properties = propMerge(schema, '');
const compositionType = getCompositionType(schema);
const initialNode = {
id: '1',
type: compositionType ? 'schema' : 'input',
data: {
label: title,
description,
properties: properties,
relations: {},
compositionType,
isRoot: true,
},
position,
};
let validate = false;
try {
const result = ajv.validateSchema(schema);
validate = typeof result === 'boolean' ? result : false;
}
catch (_a) {
validate = false;
}
useEffect(() => {
setRender(validate);
}, [validate]);
return (React.createElement("div", null, render ? (React.createElement("div", { className: 'body-wrapper' },
React.createElement("div", { className: 'node-container' },
React.createElement(Nodes, { setnNodes: setnNodes, setCurrentNode: setCurrentNode, nNodes: nNodes, initialNode: initialNode, schema: schema, isPanelCollapsed: isPanelCollapsed })),
React.createElement(Panel, { title: title, description: description, node: currentNode, nodes: nNodes, isCollapsed: isPanelCollapsed, setIsCollapsed: setIsPanelCollapsed }))) : (React.createElement("div", { className: 'activity-loader' },
React.createElement(Loader, null)))));
}
export default Schyma;
//# sourceMappingURL=App.js.map