clickable-json
Version:
Interactive JSON and JSON CRDT viewer and editor
44 lines • 2.47 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonCrdtVecNode = void 0;
const React = require("react");
const use_t_1 = require("use-t");
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 PushElement_1 = require("./PushElement");
const style_1 = require("../../../context/style");
const JsonCrdtExtNode_1 = require("./JsonCrdtExtNode");
const SwitchAction_1 = require("../../../buttons/Action/SwitchAction");
const JsonCrdtVecNode = ({ node }) => {
const [t] = (0, use_t_1.useT)();
const [renderExtAsVec, setRenderExtAsVec] = React.useState(false);
const { readonly } = (0, style_1.useStyles)();
const { render } = (0, context_1.useJsonCrdt)();
(0, hooks_1.useRerenderModel)();
const isExtension = node.node.isExt();
if (isExtension && !renderExtAsVec) {
return React.createElement(JsonCrdtExtNode_1.JsonCrdtExtNode, { node: node, onViewChange: () => setRenderExtAsVec(true) });
}
const entries = [];
let i = 0;
node.node.children((child) => {
if (!child)
return;
const childRef = (0, NodeRef_1.nodeRef)(child, node, String(i));
if (!childRef)
return;
entries.push(React.createElement("span", { key: child.id.sid + '.' + child.id.time, className: css.line }, render(childRef)));
i++;
});
return (React.createElement(JsonCrdtRegion_1.JsonCrdtRegion, { node: node, toolbar: isExtension ? (React.createElement(SwitchAction_1.SwitchAction, { onClick: () => setRenderExtAsVec(false), tooltip: t('Show "ext" view') })) : undefined },
React.createElement(JsonCrdtObjectLayout_1.JsonCrdtObjectLayout, { node: node, property: React.createElement(JsonCrdtProperty_1.JsonCrdtProperty, { node: node }), collapsedView: !!entries.length && entries.length, brackets: ['[', ']'], header: React.createElement("span", { style: { opacity: 0.5, display: 'inline-block', margin: '0.25em 0 0 -0.3em' } }, "\u2192") },
entries,
!readonly && React.createElement(PushElement_1.PushElement, { node: node }))));
};
exports.JsonCrdtVecNode = JsonCrdtVecNode;
//# sourceMappingURL=index.js.map