clickable-json/lib/ClickableJson/JsonHoverable.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonHoverable = void 0;
const React = require("react");
const context_1 = require("./context");
const FocusRegion_1 = require("../FocusRegion");
const focus_1 = require("../context/focus");
const style_1 = require("../context/style");
const input_1 = require("../context/input");
const JsonHoverable = ({ pointer, children }) => {
    const { focused, focus, pointed, point } = (0, focus_1.useFocus)();
    const { pfx, onChange } = React.useContext(context_1.context);
    const { compact } = (0, style_1.useStyles)();
    const input = (0, input_1.useInput)();
    const prefixedPointer = pfx + pointer;
    const onMouseMove = (e) => {
        e.stopPropagation();
        if (pointed !== prefixedPointer)
            point(prefixedPointer);
    };
    const onMouseEnter = (e) => {
        e.preventDefault();
        e.stopPropagation();
        point(prefixedPointer);
    };
    const onMouseLeave = () => {
        point(null);
    };
    const onClick = (e) => {
        e.preventDefault();
        e.stopPropagation();
        focus(prefixedPointer);
    };
    return (React.createElement(FocusRegion_1.FocusRegion, { pointed: pointed === prefixedPointer, focused: focused === prefixedPointer, compact: compact, onClick: onClick, onMouseMove: onMouseMove, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onDelete: !!onChange && !input.focused && prefixedPointer === focused
            ? () => onChange([{ op: 'remove', path: pointer }])
            : undefined }, children));
};
exports.JsonHoverable = JsonHoverable;
//# sourceMappingURL=JsonHoverable.js.map