clickable-json/lib/ClickableJsonCrdt/nodes/JsonCrdtStrNode/index.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonCrdtStrNode = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const use_t_1 = require("use-t");
const JsonCrdtRegion_1 = require("../../JsonCrdtRegion");
const JsonCrdtProperty_1 = require("../../JsonCrdtProperty");
const JsonAtom_1 = require("../../../JsonAtom");
const style_1 = require("../../../context/style");
const focus_1 = require("../../../context/focus");
const utils_1 = require("../../utils");
const css = require("../../../css");
const StrEdit_1 = require("./StrEdit");
const atomClass = (0, nano_theme_1.rule)({
    d: 'inline-block',
    pos: 'relative',
    cur: 'pointer',
    bdrad: '2px',
});
const atomFocusedClass = (0, nano_theme_1.rule)({
    out: '1px dotted transparent',
    '&:hover': {
        out: `1px dotted ${nano_theme_1.theme.color.sem.blue[0]}`,
    },
    [`&:hover .${css.tooltip.trim()}`]: {
        d: 'inline-block',
    },
});
const JsonCrdtStrNode = ({ node }) => {
    const [t] = (0, use_t_1.useT)();
    const { formal, readonly } = (0, style_1.useStyles)();
    const { focused } = (0, focus_1.useFocus)();
    const [editing, setEditing] = React.useState(false);
    const isFocused = focused === (0, utils_1.id)(node);
    return (React.createElement(JsonCrdtRegion_1.JsonCrdtRegion, { node: node, editing: editing },
        React.createElement(JsonCrdtProperty_1.JsonCrdtProperty, { node: node }),
        editing ? (React.createElement(StrEdit_1.StrEdit, { node: node, onCancel: () => setEditing(false), onDone: () => setEditing(false) })) : (React.createElement("span", { className: atomClass + (isFocused && !readonly ? atomFocusedClass : ''), onClick: isFocused && !readonly ? () => setEditing(true) : undefined },
            React.createElement(JsonAtom_1.JsonAtom, { value: node.node.view() }),
            !readonly && React.createElement("span", { className: css.tooltip }, t('Edit')))),
        !!formal && ','));
};
exports.JsonCrdtStrNode = JsonCrdtStrNode;
//# sourceMappingURL=index.js.map