clickable-json/lib/ClickableJsonCrdt/index.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ClickableJsonCrdt = void 0;
const React = require("react");
const context_1 = require("./context");
const style_1 = require("../context/style");
const NodeRef_1 = require("./NodeRef");
const Root_1 = require("../Root");
const focus_1 = require("../context/focus");
const json_crdt_1 = require("json-joy/lib/json-crdt");
const JsonCrdtConNode_1 = require("./nodes/JsonCrdtConNode");
const JsonCrdtValNode_1 = require("./nodes/JsonCrdtValNode");
const JsonCrdtObjNode_1 = require("./nodes/JsonCrdtObjNode");
const JsonCrdtVecNode_1 = require("./nodes/JsonCrdtVecNode");
const JsonCrdtArrNode_1 = require("./nodes/JsonCrdtArrNode");
const JsonCrdtStrNode_1 = require("./nodes/JsonCrdtStrNode");
const JsonCrdtBinNode_1 = require("./nodes/JsonCrdtBinNode");
const render = (node) => {
    if (node.node instanceof json_crdt_1.ConNode)
        return React.createElement(JsonCrdtConNode_1.JsonCrdtConNode, { node: node });
    if (node.node instanceof json_crdt_1.ValNode)
        return React.createElement(JsonCrdtValNode_1.JsonCrdtValNode, { node: node });
    if (node.node instanceof json_crdt_1.ObjNode)
        return React.createElement(JsonCrdtObjNode_1.JsonCrdtObjNode, { node: node });
    if (node.node instanceof json_crdt_1.StrNode)
        return React.createElement(JsonCrdtStrNode_1.JsonCrdtStrNode, { node: node });
    if (node.node instanceof json_crdt_1.VecNode)
        return React.createElement(JsonCrdtVecNode_1.JsonCrdtVecNode, { node: node });
    if (node.node instanceof json_crdt_1.ArrNode)
        return React.createElement(JsonCrdtArrNode_1.JsonCrdtArrNode, { node: node });
    if (node.node instanceof json_crdt_1.BinNode)
        return React.createElement(JsonCrdtBinNode_1.JsonCrdtBinNode, { node: node });
    return '∅';
};
const ClickableJsonCrdt = (props) => {
    const { model, compact, readonly, showRoot, onFocus } = props;
    const [reset, setReset] = React.useState(0);
    React.useEffect(() => {
        const unsubscribe = model.api.onReset.listen(() => setReset((r) => r + 1));
        return () => unsubscribe();
    }, [model]);
    const node = React.useMemo(() => (0, NodeRef_1.nodeRef)(showRoot ? model.root : model.root.node(), null, ''), [model, reset]);
    return (React.createElement(style_1.context.Provider, { value: { compact, readonly } },
        React.createElement(context_1.context.Provider, { value: { model, render } },
            React.createElement(focus_1.FocusProvider, { onFocus: onFocus }, !!node && React.createElement(Root_1.Root, { key: reset }, render(node))))));
};
exports.ClickableJsonCrdt = ClickableJsonCrdt;
//# sourceMappingURL=index.js.map