@logicflow/react-node-registry
Version:
LogicFlow React Shape
87 lines • 6.56 kB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
import { isNumber } from 'lodash-es';
export 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 = 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 = useState(false), showTooltip = _b[0], setShowTooltip = _b[1];
var moreBtnRef = useRef(null);
var tooltipRef = 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);
};
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.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.createElement("div", { className: "lf-vue-node-title-left" },
icon ? React.createElement("i", { className: "lf-vue-node-title-icon" }, icon) : null,
React.createElement("span", { className: "lf-vue-node-title-text" }, title)),
React.createElement("div", { className: "lf-vue-node-title-actions" },
React.createElement("button", { className: "lf-vue-node-title-expand", onClick: function (e) {
e.stopPropagation();
toggleExpand();
} },
React.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.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.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.createElement("button", { ref: moreBtnRef, className: "lf-vue-node-title-more", onClick: function (e) {
e.stopPropagation();
if (trigger === 'click')
setShowTooltip(!showTooltip);
} },
React.createElement("i", { className: "lf-vue-node-title-more-icon" }, "\u22EF"))),
showMoreAction && (React.createElement("div", { ref: tooltipRef, className: "lf-vue-node-title-tooltip", style: {
opacity: showTooltip ? 1 : 0,
pointerEvents: showTooltip ? 'auto' : 'none',
} },
React.createElement("div", { className: "lf-vue-node-title-tooltip-list" }, actions.map(function (act, idx) { return (React.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) || '')); })))))));
};
export default TitleBar;
//# sourceMappingURL=TitleBar.js.map