clickable-json
Version:
Interactive JSON and JSON CRDT viewer and editor
37 lines • 2.51 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ObjectLayout = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const css = require("../css");
const style_1 = require("../context/style");
const ObjectLayout = ({ property, collapsedView, header, collapsed, comma, brackets = ['{', '}'], children, onClick, onCollapserClick, onCollapsedClick, onBracketClick, }) => {
const [brackedHovered, setBracketHovered] = React.useState(false);
const theme = (0, nano_theme_1.useTheme)();
const { noCollapseToggles } = (0, style_1.useStyles)();
const onBracketMouseEnter = () => {
setBracketHovered(true);
};
const onBracketMouseLeave = () => {
setBracketHovered(false);
};
const bracketColor = theme.g(0.3);
collapsedView = (React.createElement("span", { className: css.collapsed, style: { display: !collapsed ? 'none' : undefined }, onClick: onCollapsedClick },
React.createElement("span", { style: { color: css.blue } }, brackets[0]),
collapsedView,
React.createElement("span", { style: { color: css.blue } }, brackets[1])));
const bracket1 = (React.createElement("span", null,
property,
React.createElement("span", { className: css.bracket + (brackedHovered ? css.bracketHovered : ''), style: { display: collapsed ? 'none' : undefined, color: bracketColor }, onMouseEnter: onBracketMouseEnter, onMouseLeave: onBracketMouseLeave, onClick: onBracketClick },
brackets[0],
!!header && (React.createElement("span", { style: { display: 'inline-block', position: 'absolute', top: '-0.27em', left: '1em' } }, header)))));
return (React.createElement("span", { className: css.object, onClick: onClick },
!noCollapseToggles && (React.createElement("span", { className: css.collapser, style: { color: theme.g(0.6) }, onClick: onCollapserClick }, collapsed ? '+' : '—')),
bracket1,
collapsedView,
React.createElement("span", { className: css.list, style: { display: collapsed ? 'none' : undefined } }, children),
React.createElement("span", { className: css.bracket + (brackedHovered ? css.bracketHovered : ''), style: { display: collapsed ? 'none' : undefined, color: bracketColor }, onMouseEnter: onBracketMouseEnter, onMouseLeave: onBracketMouseLeave, onClick: onBracketClick }, brackets[1]),
!!comma && ','));
};
exports.ObjectLayout = ObjectLayout;
//# sourceMappingURL=index.js.map