clickable-json/lib/ClickableJson/JsonProperty.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonProperty = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const json_pointer_1 = require("@jsonjoy.com/json-pointer");
const css = require("../css");
const flexible_input_1 = require("flexible-input");
const style_1 = require("../context/style");
const JsonProperty = ({ pointer, onChange }) => {
    const { formal } = (0, style_1.useStyles)();
    const steps = React.useMemo(() => pointer.split('/'), [pointer]);
    const property = React.useMemo(() => (0, json_pointer_1.unescapeComponent)(steps[steps.length - 1]), [steps]);
    const [proposed, setProposed] = React.useState(property);
    const inputRef = React.useRef(null);
    const [focused, setFocused] = React.useState(false);
    const theme = (0, nano_theme_1.useTheme)();
    const style = {
        color: theme.g(0.1),
    };
    if (focused) {
        style.background = theme.bg;
        style.border = `1px solid ${theme.g(0.9)}`;
        style.fontWeight = 'bold';
        style.margin = '-3px';
        style.padding = '2px';
    }
    if (!property || property.indexOf(' ') !== -1) {
        style.background = theme.blue(0.1);
    }
    const onSubmit = (e) => {
        if (e)
            e.preventDefault();
        if (e)
            e.stopPropagation();
        if (onChange)
            onChange([
                { op: 'move', from: pointer, path: steps.slice(0, steps.length - 1).join('/') + '/' + (0, json_pointer_1.escapeComponent)(proposed) },
            ]);
    };
    return (React.createElement(React.Fragment, null,
        !onChange ? (React.createElement("span", { className: css.property, style: style }, formal ? JSON.stringify(property) : property)) : (React.createElement("span", { className: css.property + css.input, style: style },
            React.createElement(flexible_input_1.FlexibleInput, { inp: (el) => (inputRef.current = el), value: focused ? proposed : property, onChange: (e) => setProposed(e.target.value), onFocus: (e) => {
                    const input = e.target;
                    const value = input.value;
                    const length = value.length;
                    if (length && length < 6) {
                        setTimeout(() => {
                            input.setSelectionRange(0, length, 'forward');
                        }, 155);
                    }
                    setFocused(true);
                }, onBlur: () => {
                    setFocused(false);
                }, onSubmit: (e) => {
                    if (inputRef.current) {
                        inputRef.current.blur();
                        setFocused(false);
                    }
                    onSubmit(e);
                }, onCancel: () => {
                    if (inputRef.current) {
                        inputRef.current.blur();
                        setFocused(false);
                    }
                } }))),
        React.createElement("span", { className: css.colon, style: { color: theme.g(0.5) } },
            React.createElement("span", null, ":"))));
};
exports.JsonProperty = JsonProperty;
//# sourceMappingURL=JsonProperty.js.map