clickable-json/lib/PropertyLayout/index.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyLayout = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const css = require("../css");
const PropertyLayout = ({ property, formal, focused }) => {
    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);
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("span", { className: css.property, style: style }, formal ? JSON.stringify(property) : property),
        React.createElement("span", { className: css.colon, style: { color: theme.g(0.5) } },
            React.createElement("span", null, ":"))));
};
exports.PropertyLayout = PropertyLayout;
//# sourceMappingURL=index.js.map