clickable-json
Version:
Interactive JSON and JSON CRDT viewer and editor
36 lines • 1.37 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tombstones = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const use_t_1 = require("use-t");
const MiniTitle_1 = require("nice-ui/lib/3-list-item/MiniTitle");
const blockClass = (0, nano_theme_1.rule)({
d: 'block',
bxz: 'border-box',
pd: '0 4px 4px 16px',
bdrad: '8px',
mr: '4px 0 0 -16px',
w: 'calc(100% + 16px)',
bg: nano_theme_1.theme.red(0.05),
});
const titleClass = (0, nano_theme_1.rule)({
d: 'block',
w: '100%',
bxz: 'border-box',
pd: '4px 8px 3px 3px',
cur: 'default',
us: 'none',
});
const Tombstones = ({ tombstones }) => {
const [showTombstones, setShowTombstones] = React.useState(false);
const [t] = (0, use_t_1.useT)();
if (!tombstones.length)
return null;
return (React.createElement("span", { className: blockClass },
React.createElement("style", { className: titleClass, onClick: () => setShowTombstones((x) => !x) },
React.createElement(MiniTitle_1.MiniTitle, { style: { fontSize: '0.65em', color: nano_theme_1.theme.red(0.75) } }, tombstones.length + ' ' + (tombstones.length === 1 ? t('tombstone') : t('tombstones')))),
showTombstones && tombstones));
};
exports.Tombstones = Tombstones;
//# sourceMappingURL=Tombstones.js.map