clickable-json/lib/ClickableJson/JsonDoc.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonDoc = void 0;
const React = require("react");
const css = require("../css");
const context_1 = require("./context");
const JsonProperty_1 = require("./JsonProperty");
const JsonValue_1 = require("./JsonValue");
const JsonHoverable_1 = require("./JsonHoverable");
const JsonObjectInsert_1 = require("./JsonObjectInsert");
const JsonArrayInsert_1 = require("./JsonArrayInsert");
const ObjectLayout_1 = require("../ObjectLayout");
const focus_1 = require("../context/focus");
const style_1 = require("../context/style");
const json_pointer_1 = require("@jsonjoy.com/json-pointer");
const JsonObject = ({ property, doc, pointer, parentCollapsed, comma, onChange }) => {
    const { pfx } = React.useContext(context_1.context);
    const { focused } = (0, focus_1.useFocus)();
    const { formal, keepOrder, collapsed: startsCollapsed } = (0, style_1.useStyles)();
    const keys = React.useMemo(() => {
        const k = Object.keys(doc);
        return keepOrder ? k : k.sort();
    }, [doc]);
    const [collapsed, setCollapsed] = React.useState(startsCollapsed);
    const handleBracketClick = () => {
        if (!collapsed && pfx + pointer === focused)
            setCollapsed(true);
    };
    const entries = keys.map((key, index) => {
        const itemPointer = `${pointer}/${(0, json_pointer_1.escapeComponent)(key)}`;
        return (React.createElement("span", { key: key, className: css.line },
            React.createElement(JsonHoverable_1.JsonHoverable, { pointer: itemPointer },
                React.createElement("span", { className: css.lineInner },
                    React.createElement(exports.JsonDoc, { property: key, doc: doc[key], pointer: itemPointer, parentCollapsed: collapsed, comma: formal && index < keys.length - 1, onChange: onChange })))));
    });
    return (React.createElement(ObjectLayout_1.ObjectLayout, { collapsed: collapsed, collapsedView: !!keys.length && React.createElement("strong", null, keys.length), comma: comma, property: typeof property === 'string' && (React.createElement(JsonProperty_1.JsonProperty, { key: 'k' + String(parentCollapsed), pointer: pointer, onChange: onChange })), onClick: () => {
            if (collapsed)
                setCollapsed(false);
        }, onCollapserClick: () => setCollapsed((x) => !x), onBracketClick: handleBracketClick },
        entries,
        React.createElement(JsonObjectInsert_1.JsonObjectInsert, { pointer: pointer, visible: focused === pfx + pointer })));
};
const JsonArray = ({ property, doc, pointer, parentCollapsed, comma, onChange }) => {
    const { pfx } = React.useContext(context_1.context);
    const { focused } = (0, focus_1.useFocus)();
    const { formal: selectable, collapsed: startsCollapsed } = (0, style_1.useStyles)();
    const [collapsed, setCollapsed] = React.useState(startsCollapsed);
    const handleBracketClick = () => {
        if (!collapsed && pfx + pointer === focused)
            setCollapsed(true);
    };
    const entries = doc.map((value, index) => {
        const itemPointer = `${pointer}/${index}`;
        return (React.createElement(React.Fragment, { key: index },
            React.createElement(JsonArrayInsert_1.JsonArrayInsert, { pointer: `${pointer}/${index}`, visible: focused === pfx + pointer }),
            React.createElement("span", { className: css.line },
                React.createElement(JsonHoverable_1.JsonHoverable, { pointer: itemPointer },
                    React.createElement("span", { className: css.lineInner },
                        React.createElement(exports.JsonDoc, { doc: doc[index], pointer: itemPointer, parentCollapsed: collapsed, comma: selectable && index < doc.length - 1, onChange: onChange }))))));
    });
    return (React.createElement(ObjectLayout_1.ObjectLayout, { collapsed: collapsed, collapsedView: !!doc.length && React.createElement("strong", null, doc.length), comma: comma, property: typeof property === 'string' && (React.createElement(JsonProperty_1.JsonProperty, { key: 'k' + String(parentCollapsed), pointer: pointer, onChange: onChange })), onClick: () => {
            if (collapsed)
                setCollapsed(false);
        }, onCollapserClick: () => setCollapsed((x) => !x), onBracketClick: handleBracketClick, brackets: ['[', ']'] },
        entries,
        React.createElement(JsonArrayInsert_1.JsonArrayInsert, { pointer: `${pointer}/-`, visible: focused === pfx + pointer })));
};
const JsonDoc = (props) => {
    const { doc, comma } = props;
    return !doc ? (React.createElement(JsonValue_1.JsonValue, Object.assign({}, props))) : typeof doc === 'object' ? (Array.isArray(doc) ? (React.createElement(JsonArray, Object.assign({}, props, { doc: doc }))) : doc instanceof Uint8Array ? (React.createElement(JsonValue_1.JsonValue, Object.assign({}, props, { comma: comma }))) : (React.createElement(JsonObject, Object.assign({}, props, { doc: doc })))) : (React.createElement(JsonValue_1.JsonValue, Object.assign({}, props)));
};
exports.JsonDoc = JsonDoc;
//# sourceMappingURL=JsonDoc.js.map