clickable-json/lib/buttons/Action/index.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Action = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const css = require("../../css");
const blockClass = (0, nano_theme_1.drule)({
    pos: 'relative',
    d: 'flex',
    jc: 'center',
    ai: 'center',
    w: '17px',
    h: '17px',
    bdrad: '2px',
    pad: 0,
    mr: 0,
    out: 0,
    ff: 'monospace',
    lh: '16px',
    cur: 'pointer',
    bd: `1px dotted ${css.blue}`,
    col: css.blue,
    fw: 'normal',
    z: 3,
});
const tooltipClass = (0, nano_theme_1.drule)({
    [`.${blockClass.toString().trim()}:hover &`]: {
        d: 'inline-block',
    },
});
const Action = ({ className = '', tooltip, children, onClick, onMouseEnter, onMouseLeave, onMouseOver, }) => {
    const theme = (0, nano_theme_1.useTheme)();
    return (React.createElement("button", { className: blockClass({
            bg: theme.bg,
            '&:hover': {
                col: theme.bg,
                bg: css.blue,
            },
            '&:active': {
                col: theme.g(0.9),
                bg: theme.g(0.1),
                bd: `1px solid ${theme.g(0.1)}`,
            },
        }) + className, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onMouseOver: onMouseOver },
        children,
        !!tooltip && React.createElement("span", { className: css.tooltip + tooltipClass({}) }, tooltip)));
};
exports.Action = Action;
//# sourceMappingURL=index.js.map