clickable-json
Version:
Interactive JSON and JSON CRDT viewer and editor
26 lines • 1.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TypeAndId = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const json_crdt_1 = require("json-joy/lib/json-crdt");
const blockClass = (0, nano_theme_1.rule)(Object.assign(Object.assign({}, nano_theme_1.theme.font.mono), { fz: '10px', lh: '9px', us: 'none', pe: 'none' }));
exports.TypeAndId = React.memo(({ node, active, negative, extension }) => {
const theme = (0, nano_theme_1.useTheme)();
const crdtNode = node.node;
let type = crdtNode.name();
if (extension) {
if (crdtNode instanceof json_crdt_1.VecNode && crdtNode.isExt()) {
type = (React.createElement("span", { style: { whiteSpace: 'nowrap' } },
"ext ",
React.createElement("span", { style: { color: theme.color.sem.brand[1] } }, crdtNode.ext().name())));
}
}
const { sid, time } = crdtNode.id;
return (React.createElement("span", { className: blockClass, style: { color: active ? (negative ? theme.color.sem.negative[0] : theme.color.sem.blue[0]) : theme.g(0, 0.5) } },
type,
React.createElement("span", { style: { color: active ? theme.g(0, 0.45) : theme.g(0, 0.2), display: 'block' } },
active ? (sid > 999 ? '...' : '') + String(sid).slice(String(sid).length - 4) : null,
React.createElement("span", { style: { color: active ? theme.g(0, 0.7) : theme.g(0, 0.3) } }, '.' + time))));
});
//# sourceMappingURL=TypeAndId.js.map