clickable-json/lib/FocusRegion/index.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusRegion = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const use_t_1 = require("use-t");
const css = require("../css");
const CancelAction_1 = require("../buttons/Action/CancelAction");
const EditAction_1 = require("../buttons/Action/EditAction");
const hoverableClass = (0, nano_theme_1.rule)({
    d: 'inline-block',
    pos: 'relative',
    va: 'top',
    bxz: 'border-box',
    pd: '3px',
    bdrad: '4px',
    trs: 'background-color .3s ease-out',
});
const hoverableCompactClass = (0, nano_theme_1.rule)({
    pd: '1px 3px',
});
const hoveredClass = (0, nano_theme_1.rule)({
    bgc: nano_theme_1.theme.blue(0.1),
});
const hoveredNegativeClass = (0, nano_theme_1.rule)({
    bgc: nano_theme_1.theme.red(0.1),
});
const hoveredDangerClass = (0, nano_theme_1.rule)({
    bgc: nano_theme_1.theme.red(0.08),
});
const activeClass = (0, nano_theme_1.rule)({
    out: `1px dotted ${css.blue}`,
});
const activeNegativeClass = (0, nano_theme_1.rule)({
    out: `1px dotted ${css.negative}`,
});
const asideClass = (0, nano_theme_1.rule)({
    d: 'inline-block',
    pos: 'absolute',
    top: '-1px',
    l: 'calc(100% + 0.5em)',
});
const toolbarClass = (0, nano_theme_1.rule)({
    d: 'inline-block',
    pos: 'absolute',
    top: '-11px',
    l: 'calc(100% - 24px)',
});
const FocusRegion = (props) => {
    const { focused, pointed, compact, aside, toolbar, negative, children, onClick, onMouseMove, onMouseEnter, onMouseLeave, onDelete, onEdit, } = props;
    const [t] = (0, use_t_1.useT)();
    const [deleteHovered, setDeleteHovered] = React.useState(false);
    const deleteButton = onDelete ? (React.createElement(CancelAction_1.CancelAction, { tooltip: t('Delete'), onClick: onDelete, onMouseEnter: () => setDeleteHovered(true), onMouseOver: () => setDeleteHovered(true), onMouseLeave: () => setDeleteHovered(false) })) : undefined;
    const className = hoverableClass +
        (compact ? hoverableCompactClass : '') +
        (pointed ? (negative ? hoveredNegativeClass : hoveredClass) : '') +
        (deleteHovered ? hoveredDangerClass : '') +
        (focused ? (negative ? activeNegativeClass : activeClass) : '');
    return (React.createElement("span", { className: className, style: {
            outline: deleteHovered ? `1px dotted ${css.negative}` : undefined,
        }, onMouseMove: onMouseMove, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick },
        children,
        deleteButton,
        !!focused && onEdit && (React.createElement("span", { className: css.bottomRightActionPos },
            React.createElement(EditAction_1.EditAction, { tooltip: t('Set'), onClick: onEdit }))),
        !!aside && React.createElement("span", { className: asideClass }, aside),
        !!focused && !!toolbar && React.createElement("span", { className: toolbarClass }, toolbar)));
};
exports.FocusRegion = FocusRegion;
//# sourceMappingURL=index.js.map