@logicflow/react-node-registry/lib/components/TitleBar.js

LogicFlow React Shape

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TitleBar = void 0;
var react_1 = __importStar(require("react"));
var lodash_es_1 = require("lodash-es");
var TitleBar = function (_a) {
    var node = _a.node, graph = _a.graph;
    var props = (node === null || node === void 0 ? void 0 : node.properties) || {};
    var icon = props._icon;
    var title = props._title || '';
    var expanded = !!props._expanded;
    var titleHeight = (0, lodash_es_1.isNumber)(props._titleHeight) ? props._titleHeight : 28;
    var actProps = props._titleActions || [];
    var privActs = node.__actions || [];
    var actions = Array.isArray(privActs) && privActs.length > 0 ? privActs : actProps;
    var showMoreAction = Array.isArray(actions) && actions.length > 0;
    var trigger = props.titleTrigger === 'hover' ? 'hover' : 'click';
    var _b = (0, react_1.useState)(false), showTooltip = _b[0], setShowTooltip = _b[1];
    var moreBtnRef = (0, react_1.useRef)(null);
    var tooltipRef = (0, react_1.useRef)(null);
    var toggleExpand = function () {
        var _a;
        var cur = !!((_a = node === null || node === void 0 ? void 0 : node.properties) === null || _a === void 0 ? void 0 : _a._expanded);
        node === null || node === void 0 ? void 0 : node.setProperty('_expanded', !cur);
    };
    var runAction = function (act) {
        var _a;
        var fn = (act === null || act === void 0 ? void 0 : act.callback) ||
            ((_a = (privActs || []).find(function (a) { return (a === null || a === void 0 ? void 0 : a.name) === (act === null || act === void 0 ? void 0 : act.name); })) === null || _a === void 0 ? void 0 : _a.callback);
        typeof fn === 'function' && fn(node, graph);
    };
    (0, react_1.useEffect)(function () {
        if (trigger === 'hover') {
            var mb_1 = moreBtnRef.current;
            var tt_1 = tooltipRef.current;
            var onEnter_1 = function () { return setShowTooltip(true); };
            var onLeave_1 = function () { return setShowTooltip(false); };
            mb_1 === null || mb_1 === void 0 ? void 0 : mb_1.addEventListener('mouseenter', onEnter_1);
            mb_1 === null || mb_1 === void 0 ? void 0 : mb_1.addEventListener('mouseleave', onLeave_1);
            tt_1 === null || tt_1 === void 0 ? void 0 : tt_1.addEventListener('mouseenter', onEnter_1);
            tt_1 === null || tt_1 === void 0 ? void 0 : tt_1.addEventListener('mouseleave', onLeave_1);
            return function () {
                mb_1 === null || mb_1 === void 0 ? void 0 : mb_1.removeEventListener('mouseenter', onEnter_1);
                mb_1 === null || mb_1 === void 0 ? void 0 : mb_1.removeEventListener('mouseleave', onLeave_1);
                tt_1 === null || tt_1 === void 0 ? void 0 : tt_1.removeEventListener('mouseenter', onEnter_1);
                tt_1 === null || tt_1 === void 0 ? void 0 : tt_1.removeEventListener('mouseleave', onLeave_1);
            };
        }
        var onDoc = function (e) {
            var mb = moreBtnRef.current;
            var tt = tooltipRef.current;
            var t = e.target;
            if (showTooltip && mb && tt && !mb.contains(t) && !tt.contains(t)) {
                setShowTooltip(false);
            }
        };
        document.addEventListener('click', onDoc);
        return function () { return document.removeEventListener('click', onDoc); };
    }, [trigger, showTooltip]);
    return (react_1.default.createElement("div", { className: expanded
            ? 'lf-vue-node-title lf-vue-node-title-expanded'
            : 'lf-vue-node-title', style: { height: expanded ? titleHeight : 18 }, title: title },
        react_1.default.createElement("div", { className: "lf-vue-node-title-left" },
            icon ? react_1.default.createElement("i", { className: "lf-vue-node-title-icon" }, icon) : null,
            react_1.default.createElement("span", { className: "lf-vue-node-title-text" }, title)),
        react_1.default.createElement("div", { className: "lf-vue-node-title-actions" },
            react_1.default.createElement("button", { className: "lf-vue-node-title-expand", onClick: function (e) {
                    e.stopPropagation();
                    toggleExpand();
                } },
                react_1.default.createElement("svg", { width: 14, height: 12, viewBox: "0 0 14 12", xmlns: "http://www.w3.org/2000/svg", className: "lf-vue-node-title-expand-icon", style: { transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' } },
                    react_1.default.createElement("path", { d: "M0.5201124,5.47988755C0.23603013,5.7639699,0.24460429,6.2271326,0.53900635,6.5005059L6.3195491,11.8681526C6.7032304,12.2244282,7.2967696,12.2244282,7.6804514,11.8681526L13.460994,6.5005059C13.755396,6.2271326,13.76397,5.7639699,13.479888,5.47988755C13.211547,5.21154633,12.779465,5.20215771,12.499721,5.45858961L7.3378625,10.1902928C7.1467018,10.3655233,6.8532982,10.3655233,6.6621375,10.1902928L1.5002797,5.45858967C1.2205358,5.20215771,0.78845364,5.21154633,0.5201124,5.47988755Z", fill: "#474747" }),
                    react_1.default.createElement("path", { d: "M0.5201124,0.47988755C0.23603013,0.7639699,0.24460429,1.2271326,0.53900635,1.5005059L6.3195491,6.8681526C6.7032304,7.2244282,7.2967696,7.2244282,7.6804514,6.8681526L13.460994,1.5005059C13.755396,1.2271326,13.76397,0.7639699,13.479888,0.47988755C13.211547,0.21154633,12.779465,0.20215771,12.499721,0.45858961L7.3378625,5.1902928C7.1467018,5.3655233,6.8532982,5.3655233,6.6621375,5.1902928L1.5002797,0.45858967C1.2205358,0.20215771,0.78845364,0.21154633,0.5201124,0.47988755Z", fill: "#9B9B9B" }))),
            showMoreAction && (react_1.default.createElement("button", { ref: moreBtnRef, className: "lf-vue-node-title-more", onClick: function (e) {
                    e.stopPropagation();
                    if (trigger === 'click')
                        setShowTooltip(!showTooltip);
                } },
                react_1.default.createElement("i", { className: "lf-vue-node-title-more-icon" }, "\u22EF"))),
            showMoreAction && (react_1.default.createElement("div", { ref: tooltipRef, className: "lf-vue-node-title-tooltip", style: {
                    opacity: showTooltip ? 1 : 0,
                    pointerEvents: showTooltip ? 'auto' : 'none',
                } },
                react_1.default.createElement("div", { className: "lf-vue-node-title-tooltip-list" }, actions.map(function (act, idx) { return (react_1.default.createElement("div", { key: idx, className: "lf-vue-node-title-tooltip-item", onClick: function (e) {
                        e.stopPropagation();
                        runAction(act);
                    } }, (act === null || act === void 0 ? void 0 : act.name) || '')); })))))));
};
exports.TitleBar = TitleBar;
exports.default = exports.TitleBar;
//# sourceMappingURL=TitleBar.js.map