clickable-json/lib/Root/index.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Root = void 0;
const React = require("react");
const useClickAway_1 = require("react-use/lib/useClickAway");
const useMountedState_1 = require("react-use/lib/useMountedState");
const style_1 = require("../context/style");
const focus_1 = require("../context/focus");
const input_1 = require("../context/input");
const nano_theme_1 = require("nano-theme");
const blockClass = (0, nano_theme_1.rule)({
    d: 'inline-block',
    ff: 'monospace',
});
const Root = ({ children, onFocus }) => {
    const isMounted = (0, useMountedState_1.default)();
    const styles = (0, style_1.useStyles)();
    const { focused, focus, point } = (0, focus_1.useFocus)();
    const ref = React.useRef(null);
    const focusRef = React.useRef(focused);
    (0, useClickAway_1.default)(ref, () => {
        if (!isMounted)
            return;
        point(null);
        focus(null);
    });
    if (onFocus && focused !== focusRef.current) {
        focusRef.current = focused;
        onFocus(focused);
    }
    return (React.createElement(input_1.InputProvider, null,
        React.createElement("span", { ref: ref, className: blockClass, style: { fontSize: styles.fontSize || '13.4px' } }, children)));
};
exports.Root = Root;
//# sourceMappingURL=index.js.map