clickable-json
Version:
Interactive JSON and JSON CRDT viewer and editor
92 lines • 4.08 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonCrdtRegion = void 0;
const React = require("react");
const FocusRegion_1 = require("../FocusRegion");
const focus_1 = require("../context/focus");
const style_1 = require("../context/style");
const context_1 = require("./context");
const TypeAndId_1 = require("./TypeAndId");
const utils_1 = require("./utils");
const JsonCrdtRegionEdit_1 = require("./JsonCrdtRegionEdit");
const isObjTombstone = (node) => {
const parent = node.parent;
if (!parent)
return false;
if (node.node.name() !== 'con')
return false;
return node.node.val === undefined;
};
const JsonCrdtRegion = ({ node, editing, extension, toolbar, children }) => {
var _a;
const { model } = (0, context_1.useJsonCrdt)();
const { compact, readonly } = (0, style_1.useStyles)();
const { focused, focus, pointed, point } = (0, focus_1.useFocus)();
const nodeId = (0, utils_1.id)(node);
const [edit, setEdit] = React.useState(false);
const onMouseMove = (e) => {
e.stopPropagation();
if (pointed !== nodeId)
point(nodeId);
};
const onMouseEnter = (e) => {
e.preventDefault();
e.stopPropagation();
point(nodeId);
};
const onMouseLeave = () => {
point('');
};
const onClick = (e) => {
e.preventDefault();
e.stopPropagation();
focus(nodeId);
};
const isFocused = focused === nodeId;
const isPointed = pointed === nodeId;
const parentNodeType = (_a = node.parent) === null || _a === void 0 ? void 0 : _a.node.name();
const isTombstone = isObjTombstone(node);
const parentIsObj = parentNodeType === 'obj';
const parentIsArr = parentNodeType === 'arr';
const parentIsVec = parentNodeType === 'vec';
const aside = isFocused ? (React.createElement("span", { style: { display: 'inline-block', margin: '-4px 0 0' } },
React.createElement(TypeAndId_1.TypeAndId, { node: node, active: isFocused, negative: isTombstone, extension: extension }))) : undefined;
if (edit) {
return React.createElement(JsonCrdtRegionEdit_1.JsonCrdtRegionEdit, { node: node, onCancel: () => setEdit(false) });
}
return (React.createElement(FocusRegion_1.FocusRegion, { pointed: isPointed, focused: isFocused, compact: compact, negative: isTombstone, aside: aside, toolbar: toolbar, onClick: onClick, onMouseMove: onMouseMove, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onDelete: editing || readonly
? undefined
: !isFocused || isTombstone
? undefined
: parentIsObj
? () => {
const api = model.api.wrap(node.parent.node);
api.del([node.step]);
}
: parentIsArr
? () => {
const api = model.api.wrap(node.parent.node);
api.del(+node.step, 1);
}
: parentIsVec
? () => {
const api = model.api.wrap(node.parent.node);
api.set([[+node.step, undefined]]);
}
: parentNodeType === 'val' && !isTombstone
? () => {
const api = model.api.wrap(node.parent.node);
api.set(undefined);
}
: undefined, onEdit: editing || readonly
? undefined
: isFocused &&
(parentNodeType === 'obj' ||
parentNodeType === 'val' ||
parentNodeType === 'root' ||
parentNodeType === 'vec')
? () => setEdit(true)
: undefined }, children));
};
exports.JsonCrdtRegion = JsonCrdtRegion;
//# sourceMappingURL=JsonCrdtRegion.js.map