schyma/dist/esm/components/App.js

JSON Schemas Visualizer React component

import React, { useEffect } from "react";
import Panel from "./Panel";
import { useState } from "react";
import Nodes from "./Nodes";
import Ajv from "ajv";
import { propMerge } from "../utils/reusables";
function Schyma({ title, description, schema }) {
    const ajv = new Ajv();
    const [currentNode, setCurrentNode] = useState();
    const [nNodes, setnNodes] = useState({});
    const [render, setRender] = useState(false);
    const position = { x: 0, y: 0 };
    const properties = propMerge(schema, "");
    const initialNode = {
        id: '1',
        data: {
            label: title,
            description,
            properties: properties,
            relations: {},
        },
        position,
    };
    const validate = ajv.validateSchema(schema);
    useEffect(() => {
        if (validate) {
            setRender(true);
        }
    }, [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 })),
        React.createElement(Panel, { title: title, description: description, node: currentNode, nodes: nNodes })) : React.createElement("div", null, "loading")));
}
export default Schyma;
//# sourceMappingURL=App.js.map