clickable-json/lib/inserts/ObjectInsert.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ObjectInsert = void 0;
const React = require("react");
const use_t_1 = require("use-t");
const css = require("../css");
const nano_theme_1 = require("nano-theme");
const flexible_input_1 = require("flexible-input");
const ValueInput_1 = require("./ValueInput");
const AddAction_1 = require("../buttons/Action/AddAction");
const ObjectInsert = ({ visible, withType, onSubmit }) => {
    const [t] = (0, use_t_1.useT)();
    const [editing, setEditing] = React.useState(false);
    const [property, setProperty] = React.useState('');
    const [value, setValue] = React.useState('');
    const inputPropertyRef = React.useRef(null);
    const inputValueRef = React.useRef(null);
    const theme = (0, nano_theme_1.useTheme)();
    const handleSubmit = (value, type) => {
        if (inputValueRef.current)
            inputValueRef.current.blur();
        onSubmit(property, value, type);
        setProperty('');
        setValue('');
        setEditing(false);
    };
    if (!visible)
        return null;
    if (editing) {
        const keyInput = (React.createElement("span", { className: css.property + css.input, style: {
                color: theme.g(0.1),
                background: theme.bg,
                display: visible ? undefined : 'none',
                margin: '-1px 0 -1px -2px',
                padding: '3px 4px',
                border: `1px solid ${theme.g(0.85)}`,
                fontWeight: 'bold',
            } },
            React.createElement(flexible_input_1.FlexibleInput, { focus: true, inp: (el) => (inputPropertyRef.current = el), value: property, onChange: (e) => setProperty(e.target.value), onSubmit: () => {
                    if (inputValueRef.current)
                        inputValueRef.current.focus();
                }, onCancel: () => {
                    if (property)
                        setProperty('');
                    else if (value)
                        setValue('');
                    else
                        setEditing(false);
                } })));
        const valueInput = (React.createElement(ValueInput_1.ValueInput, { inp: (el) => (inputValueRef.current = el), visible: visible, withType: withType, onSubmit: handleSubmit, onCancel: () => {
                if (inputPropertyRef.current)
                    inputPropertyRef.current.focus();
            } }));
        return (React.createElement("span", { style: { display: visible ? undefined : 'none' } },
            keyInput,
            React.createElement("span", { className: css.colon },
                React.createElement("span", null, ':')),
            valueInput));
    }
    return (React.createElement("span", { className: css.insArrBlock, style: { display: visible ? undefined : 'none' }, onClick: () => setEditing(true) },
        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('Add key'), onClick: () => setEditing(true) }))));
};
exports.ObjectInsert = ObjectInsert;
//# sourceMappingURL=ObjectInsert.js.map