@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
32 lines • 2.42 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ReactFlowMarker = exports.ReactFlowMarkers = exports.MarkerArrowClosedInverse = void 0;
const react_1 = __importDefault(require("react"));
const Intent_1 = require("../../../common/Intent");
const constants_1 = require("../../../configuration/constants");
// FIXME: we need to check how these markers are used and if we can justify the namings
const MarkerArrowClosedInverse_1 = require("./MarkerArrowClosedInverse");
Object.defineProperty(exports, "MarkerArrowClosedInverse", { enumerable: true, get: function () { return MarkerArrowClosedInverse_1.MarkerArrowClosedInverse; } });
const ReactFlowMarker = ({ className, appearance = "arrow-closed", intent, reverse }) => {
const markerDisplay = {
"arrow-closed": (react_1.default.createElement("path", { d: "M-5,-4 L5,0 L-5,4 Z", fill: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round" })),
};
return (react_1.default.createElement("marker", { id: `react-flow__marker--${appearance}${intent ? `-${intent}` : ""}${reverse ? "-reverse" : ""}`, className: `${constants_1.CLASSPREFIX}-graphviz__marker` +
(className ? ` ${className}` : "") +
(intent ? ` ${(0, Intent_1.intentClassName)(intent)}` : ""), markerWidth: "12.5", markerHeight: "12.5", viewBox: "-10 -10 20 20", refX: "0", refY: "0", orient: reverse ? "auto-start-reverse" : "auto" }, markerDisplay[appearance]));
};
exports.ReactFlowMarker = ReactFlowMarker;
const ReactFlowMarkers = () => {
const intents = ["none", "primary", "accent", "success", "warning", "danger", "info"];
return (react_1.default.createElement("svg", null,
react_1.default.createElement("defs", null,
react_1.default.createElement(MarkerArrowClosedInverse_1.MarkerArrowClosedInverse, null),
intents.map((intent) => (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(ReactFlowMarker, { appearance: "arrow-closed", intent: intent }),
react_1.default.createElement(ReactFlowMarker, { appearance: "arrow-closed", intent: intent, reverse: true })))))));
};
exports.ReactFlowMarkers = ReactFlowMarkers;
//# sourceMappingURL=ReactFlowMarkers.js.map