clickable-json/lib/JsonAtom/index.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonAtom = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const utils_1 = require("../ClickableJson/utils");
const blue = nano_theme_1.theme.color.sem.blue[0];
const JsonAtom = (props) => {
    var _a;
    const { value, onClick } = props;
    const theme = (0, nano_theme_1.useTheme)();
    let color = theme.g(0.2);
    let formatted = '∅';
    if (Array.isArray(value)) {
        color = blue;
        formatted = '[' + value.length + ']';
    }
    else if (value instanceof Uint8Array) {
        color = theme.g(0.45);
        formatted = (React.createElement("span", null,
            [...value]
                .slice(0, 128)
                .map((n) => (n < 16 ? '0' + n.toString(16) : n.toString(16)))
                .join(' '),
            value.length > 128 ? React.createElement("span", { style: { color: theme.g(0.3) } }, ` … (${value.length - 128} more)`) : ''));
    }
    else if (value && typeof value === 'object') {
        color = blue;
        formatted = '{' + Object.keys(value).length + '}';
    }
    else {
        color = (_a = (0, utils_1.valueColor)(!theme.isLight, value)) !== null && _a !== void 0 ? _a : color;
        if (typeof value === 'string') {
            const MAX_STR_LENGTH = 64;
            const needsTrim = value.length > MAX_STR_LENGTH;
            const str = JSON.stringify(needsTrim ? value.slice(0, MAX_STR_LENGTH) : value);
            if (needsTrim) {
                formatted = (React.createElement("span", null,
                    str.slice(0, -1),
                    React.createElement("span", { style: { color: theme.g(0.3) } }, ` … (${value.length - MAX_STR_LENGTH} more)`),
                    '"'));
            }
            else
                formatted = str;
        }
        else {
            formatted = String(value);
        }
    }
    const background = (0, utils_1.valueBg)(value);
    const style = {
        color,
        background,
    };
    if (background) {
        style.borderRadius = 4;
        style.margin = -1;
        style.padding = 1;
    }
    return (React.createElement("span", { style: style, onClick: onClick }, formatted));
};
exports.JsonAtom = JsonAtom;
//# sourceMappingURL=index.js.map