@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
118 lines • 6.27 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import React, { memo } from "react";
import { Handle as HandleV9 } from "react-flow-renderer";
import { Handle as HandleV12 } from "@xyflow/react";
import { Classes as BlueprintClasses } from "@blueprintjs/core";
import { intentClassName } from "../../../common/Intent/index.js";
import { CLASSPREFIX as eccgui } from "../../../configuration/constants.js";
import { useReactFlowVersion } from "../versionsupport.js";
import { HandleContent } from "./HandleContent.js";
export var HandleDefault = memo(function (_a) {
var flowVersion = _a.flowVersion, data = _a.data, tooltip = _a.tooltip, children = _a.children, category = _a.category, intent = _a.intent, handleProps = __rest(_a, ["flowVersion", "data", "tooltip", "children", "category", "intent"]);
var evaluateFlowVersion = useReactFlowVersion();
var flowVersionCheck = flowVersion || evaluateFlowVersion;
var handleDefaultRef = React.useRef(null);
var _b = __read(React.useState(false), 2), extendedTooltipDisplayed = _b[0], setExtendedTooltipDisplayed = _b[1];
var toolsTarget;
React.useEffect(function () {
if (handleDefaultRef.current) {
toolsTarget = handleDefaultRef.current.getElementsByClassName("".concat(eccgui, "-graphviz__handletools-target"));
if (toolsTarget && toolsTarget[0]) {
// Polyfill for FF that does not support the `:has()` pseudo selector until at least version 119 or 120
// need to be re-evaluated then
// @see https://connect.mozilla.org/t5/ideas/when-is-has-css-selector-going-to-be-fully-implemented-in/idi-p/23794
handleDefaultRef.current.classList.add("ffpolyfill-has-".concat(eccgui, "-graphviz__handletools-target"));
}
}
});
var tooltipTitle = tooltip ? { title: tooltip } : {};
var handleContentTooltipProps = {
placement: handleProps.position === "left" || handleProps.position === "right"
? "".concat(handleProps.position, "-end")
: undefined,
modifiers: {
offset: {
enabled: true,
options: {
offset: [3, 20],
},
},
},
intent: intent,
className: "".concat(eccgui, "-graphviz__handle__tooltip-target"),
isOpen: extendedTooltipDisplayed,
};
var handleContentProps = React.useMemo(function () { return (__assign(__assign({}, data), { tooltipProps: __assign(__assign({}, handleContentTooltipProps), data === null || data === void 0 ? void 0 : data.tooltipProps) })); }, [intent, category, handleProps.isConnectable]);
var handleContent = React.useMemo(function () { return React.createElement(HandleContent, __assign({}, handleContentProps), children); }, []);
var switchTooltipTimerOn;
var switchToolsTimerOff;
var handleConfig = React.useMemo(function () { return (__assign(__assign(__assign({}, handleProps), tooltipTitle), { className: intent ? "".concat(intentClassName(intent), " ") : "" + " ".concat(eccgui, "-graphviz__handle ").concat(eccgui, "-graphviz__handle--").concat(flowVersionCheck), onClick: function (e) {
if (handleProps.onClick) {
handleProps.onClick(e);
}
if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
setExtendedTooltipDisplayed(false);
toolsTarget[0].click();
}
}, "data-category": category, onMouseEnter: function (e) {
var _a, _b;
if (switchToolsTimerOff)
clearTimeout(switchToolsTimerOff);
if (e.target === handleDefaultRef.current) {
switchTooltipTimerOn = setTimeout(function () { return setExtendedTooltipDisplayed(true); }, (_b = (_a = data === null || data === void 0 ? void 0 : data.tooltipProps) === null || _a === void 0 ? void 0 : _a.hoverOpenDelay) !== null && _b !== void 0 ? _b : 500);
}
}, onMouseLeave: function () {
if (switchTooltipTimerOn)
clearTimeout(switchTooltipTimerOn);
if (toolsTarget.length > 0 && toolsTarget[0].classList.contains(BlueprintClasses.POPOVER_OPEN)) {
switchToolsTimerOff = setTimeout(function () { return toolsTarget[0].click(); }, 500);
}
setExtendedTooltipDisplayed(false);
} })); }, [intent, category, tooltip, handleProps.isConnectable, handleProps.style]);
switch (flowVersionCheck) {
case "v9":
return (React.createElement(HandleV9, __assign({ ref: handleDefaultRef }, handleConfig), handleContent));
case "v12":
return (React.createElement(HandleV12, __assign({ ref: handleDefaultRef }, handleConfig), handleContent));
default:
return React.createElement(React.Fragment, null);
}
});
//# sourceMappingURL=HandleDefault.js.map