clickable-json
Version:
Interactive JSON and JSON CRDT viewer and editor
42 lines • 2.03 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonCrdtObjNode = void 0;
const React = require("react");
const json_crdt_1 = require("json-joy/lib/json-crdt");
const css = require("../../../css");
const context_1 = require("../../context");
const NodeRef_1 = require("../../NodeRef");
const JsonCrdtRegion_1 = require("../../JsonCrdtRegion");
const JsonCrdtProperty_1 = require("../../JsonCrdtProperty");
const JsonCrdtObjectLayout_1 = require("../../JsonCrdtObjectLayout");
const hooks_1 = require("../../hooks");
const AddKey_1 = require("./AddKey");
const Tombstones_1 = require("./Tombstones");
const style_1 = require("../../../context/style");
const isTombstone = (node) => node instanceof json_crdt_1.ConNode && node.val === undefined;
const JsonCrdtObjNode = ({ node }) => {
const { readonly } = (0, style_1.useStyles)();
const { render } = (0, context_1.useJsonCrdt)();
(0, hooks_1.useRerender)(node);
const entries = [];
const tombstones = [];
node.node.nodes((child, key) => {
if (!child)
return;
const childRef = (0, NodeRef_1.nodeRef)(child, node, key);
if (!childRef)
return;
const element = (React.createElement("span", { key: key, className: css.line }, render(childRef)));
if (isTombstone(child))
tombstones.push(element);
else
entries.push(element);
});
return (React.createElement(JsonCrdtRegion_1.JsonCrdtRegion, { node: node },
React.createElement(JsonCrdtObjectLayout_1.JsonCrdtObjectLayout, { node: node, property: React.createElement(JsonCrdtProperty_1.JsonCrdtProperty, { node: node }), collapsedView: !!entries.length && entries.length },
entries,
!readonly && React.createElement(AddKey_1.AddKey, { node: node }),
!!tombstones.length && React.createElement(Tombstones_1.Tombstones, { tombstones: tombstones }))));
};
exports.JsonCrdtObjNode = JsonCrdtObjNode;
//# sourceMappingURL=index.js.map