@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
117 lines • 6.54 kB
JavaScript
;
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;
};
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.HandleDefault = void 0;
const react_1 = __importStar(require("react"));
const react_flow_renderer_1 = require("react-flow-renderer");
const react_2 = require("@xyflow/react");
const core_1 = require("@blueprintjs/core");
const Intent_1 = require("../../../common/Intent");
const constants_1 = require("../../../configuration/constants");
const versionsupport_1 = require("../versionsupport");
const HandleContent_1 = require("./HandleContent");
exports.HandleDefault = (0, react_1.memo)((_a) => {
var { flowVersion, data, tooltip, children, category, intent } = _a, handleProps = __rest(_a, ["flowVersion", "data", "tooltip", "children", "category", "intent"]);
const evaluateFlowVersion = (0, versionsupport_1.useReactFlowVersion)();
const flowVersionCheck = flowVersion || evaluateFlowVersion;
const handleDefaultRef = react_1.default.useRef(null);
const [extendedTooltipDisplayed, setExtendedTooltipDisplayed] = react_1.default.useState(false);
let toolsTarget;
react_1.default.useEffect(() => {
if (handleDefaultRef.current) {
toolsTarget = handleDefaultRef.current.getElementsByClassName(`${constants_1.CLASSPREFIX}-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-${constants_1.CLASSPREFIX}-graphviz__handletools-target`);
}
}
});
const tooltipTitle = tooltip ? { title: tooltip } : {};
const handleContentTooltipProps = {
placement: handleProps.position === "left" || handleProps.position === "right"
? `${handleProps.position}-end`
: undefined,
modifiers: {
offset: {
enabled: true,
options: {
offset: [3, 20],
},
},
},
intent: intent,
className: `${constants_1.CLASSPREFIX}-graphviz__handle__tooltip-target`,
isOpen: extendedTooltipDisplayed,
};
const handleContentProps = react_1.default.useMemo(() => (Object.assign(Object.assign({}, data), { tooltipProps: Object.assign(Object.assign({}, handleContentTooltipProps), data === null || data === void 0 ? void 0 : data.tooltipProps) })), [intent, category, handleProps.isConnectable]);
const handleContent = react_1.default.useMemo(() => react_1.default.createElement(HandleContent_1.HandleContent, Object.assign({}, handleContentProps), children), []);
let switchTooltipTimerOn;
let switchToolsTimerOff;
const handleConfig = react_1.default.useMemo(() => (Object.assign(Object.assign(Object.assign({}, handleProps), tooltipTitle), { className: intent ? `${(0, Intent_1.intentClassName)(intent)} ` : "" + ` ${constants_1.CLASSPREFIX}-graphviz__handle ${constants_1.CLASSPREFIX}-graphviz__handle--${flowVersionCheck}`, onClick: (e) => {
if (handleProps.onClick) {
handleProps.onClick(e);
}
if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
setExtendedTooltipDisplayed(false);
toolsTarget[0].click();
}
}, "data-category": category, onMouseEnter: (e) => {
var _a, _b;
if (switchToolsTimerOff)
clearTimeout(switchToolsTimerOff);
if (e.target === handleDefaultRef.current) {
switchTooltipTimerOn = setTimeout(() => 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: () => {
if (switchTooltipTimerOn)
clearTimeout(switchTooltipTimerOn);
if (toolsTarget.length > 0 && toolsTarget[0].classList.contains(core_1.Classes.POPOVER_OPEN)) {
switchToolsTimerOff = setTimeout(() => toolsTarget[0].click(), 500);
}
setExtendedTooltipDisplayed(false);
} })), [intent, category, tooltip, handleProps.isConnectable, handleProps.style]);
switch (flowVersionCheck) {
case "v9":
return (react_1.default.createElement(react_flow_renderer_1.Handle, Object.assign({ ref: handleDefaultRef }, handleConfig), handleContent));
case "v12":
return (react_1.default.createElement(react_2.Handle, Object.assign({ ref: handleDefaultRef }, handleConfig), handleContent));
default:
return react_1.default.createElement(react_1.default.Fragment, null);
}
});
//# sourceMappingURL=HandleDefault.js.map