clickable-json/lib/ClickableJsonCrdt/JsonCrdtRegionEdit.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonCrdtRegionEdit = void 0;
const React = require("react");
const JsonCrdtProperty_1 = require("./JsonCrdtProperty");
const ValueInput_1 = require("../inserts/ValueInput");
const CancelAction_1 = require("../buttons/Action/CancelAction");
const FocusRegion_1 = require("../FocusRegion");
const style_1 = require("../context/style");
const utils_1 = require("./utils");
const context_1 = require("./context");
const JsonCrdtRegionEdit = ({ node, onCancel }) => {
    const { compact } = (0, style_1.useStyles)();
    const { model } = (0, context_1.useJsonCrdt)();
    const handleSubmit = (json, type) => {
        const parent = node.parent;
        if (parent && parent.node.name() === 'obj') {
            const valueId = (0, utils_1.createValue)(model, json, type, true);
            const nodeApi = model.api.wrap(parent.node);
            nodeApi.set({ [node.step]: valueId });
        }
        else if (parent && (parent.node.name() === 'val' || parent.node.name() === 'root')) {
            const valueId = (0, utils_1.createValue)(model, json, type, true);
            const nodeApi = model.api.wrap(parent.node);
            nodeApi.set(valueId);
        }
        else if (parent && parent.node.name() === 'vec') {
            const valueId = (0, utils_1.createValue)(model, json, type, true);
            const nodeApi = model.api.wrap(parent.node);
            nodeApi.set([[+node.step, valueId]]);
        }
        if (onCancel)
            onCancel();
    };
    const view = node.node.view();
    const value = (0, utils_1.isContainer)(view) ? '' : JSON.stringify(view);
    return (React.createElement(FocusRegion_1.FocusRegion, { compact: compact },
        React.createElement(JsonCrdtProperty_1.JsonCrdtProperty, { node: node }),
        React.createElement("span", { style: { display: 'inline-block', margin: '-3px 0', position: 'relative' } },
            React.createElement(ValueInput_1.ValueInput, { focus: true, withType: true, visible: true, initialType: node.node.name() === 'con' && node.node.view() !== undefined ? 'con' : 'any', initialValue: value, onSubmit: handleSubmit, onCancel: onCancel }),
            !!onCancel && React.createElement(CancelAction_1.CancelAction, { onClick: () => onCancel() }))));
};
exports.JsonCrdtRegionEdit = JsonCrdtRegionEdit;
//# sourceMappingURL=JsonCrdtRegionEdit.js.map