clickable-json/lib/inserts/ArrayInsert.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ArrayInsert = void 0;
const React = require("react");
const use_t_1 = require("use-t");
const css = require("../css");
const ValueInput_1 = require("./ValueInput");
const AddAction_1 = require("../buttons/Action/AddAction");
const CancelAction_1 = require("../buttons/Action/CancelAction");
const ArrayInsert = ({ visible, withType, onSubmit }) => {
    const [t] = (0, use_t_1.useT)();
    const [editing, setEditing] = React.useState(false);
    const handleSubmit = (value, type) => {
        setEditing(false);
        onSubmit(value, type);
    };
    if (editing) {
        return (React.createElement("span", { style: { position: 'relative' } },
            React.createElement(ValueInput_1.ValueInput, { focus: true, withType: withType, visible: visible, onSubmit: handleSubmit, onCancel: () => setEditing(false) }),
            React.createElement(CancelAction_1.CancelAction, { onClick: () => setEditing(false) })));
    }
    return (React.createElement("span", { className: css.insArrBlock, style: { display: visible ? undefined : 'none' } },
        React.createElement("span", { className: css.insArrDot }),
        React.createElement("span", { className: css.insArrLine }),
        React.createElement("span", { className: css.insArrButton },
            React.createElement(AddAction_1.AddAction, { tooltip: t('Insert'), onClick: () => setEditing(true) }))));
};
exports.ArrayInsert = ArrayInsert;
//# sourceMappingURL=ArrayInsert.js.map