@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
84 lines • 4.36 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 __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 from "react";
import getColorConfiguration from "../../../common/utils/getColorConfiguration.js";
import { CodeEditor } from "../../../extensions/index.js";
import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext.js";
import { Button, FieldItem, Icon, SimpleDialog, Tag, TagList, } from "./../../../index.js";
export var StickyNoteModal = React.memo(function (_a) {
var _b, _c;
var metaData = _a.metaData, onClose = _a.onClose, onSubmit = _a.onSubmit, translate = _a.translate, simpleDialogProps = _a.simpleDialogProps, codeEditorProps = _a.codeEditorProps;
var refNote = React.useRef((_b = metaData === null || metaData === void 0 ? void 0 : metaData.note) !== null && _b !== void 0 ? _b : "");
var _d = __read(React.useState((_c = metaData === null || metaData === void 0 ? void 0 : metaData.color) !== null && _c !== void 0 ? _c : ""), 2), color = _d[0], setSelectedColor = _d[1];
var noteColors = Object.entries(getColorConfiguration("stickynotes")).map(function (_a) {
var _b = __read(_a, 2), key = _b[0], value = _b[1];
return [key, value];
});
var disableHotKeys = React.useContext(ReactFlowHotkeyContext).disableHotKeys;
React.useEffect(function () {
disableHotKeys(true);
return function () {
disableHotKeys(false);
};
}, []);
React.useEffect(function () {
if (!color && noteColors[0][1]) {
setSelectedColor(noteColors[0][1]);
}
}, [color, noteColors]);
var predefinedColorsMenu = (React.createElement(TagList, null, noteColors &&
noteColors.map(function (_a) {
var _b = __read(_a, 2), colorName = _b[0], colorValue = _b[1];
var selectedFeedback = color === colorValue
? {
icon: React.createElement(Icon, { name: "state-checkedsimple" }),
large: true,
}
: {};
return (React.createElement(Tag, __assign({ round: true, onClick: function () { return setSelectedColor(colorValue); }, backgroundColor: colorValue }, selectedFeedback, { key: colorName })));
})));
return (React.createElement(SimpleDialog, __assign({ size: "small", title: translate("modalTitle"), hasBorder: true, isOpen: true, onClose: onClose, actions: [
React.createElement(Button, { key: "submit", "data-test-id": "sticky-submit-btn", affirmative: true, onClick: function () {
onSubmit({ note: refNote.current, color: color || "#444444" });
onClose();
} }, translate("saveButton")),
React.createElement(Button, { key: "cancel", onClick: onClose }, translate("cancelButton")),
] }, simpleDialogProps),
React.createElement(FieldItem, { key: "note", labelProps: {
htmlFor: "noteinput",
text: translate("noteLabel"),
} },
React.createElement(CodeEditor, __assign({ name: translate("noteLabel"), id: "sticky-note-input", mode: "markdown", preventLineNumbers: true, onChange: function (value) {
refNote.current = value;
}, defaultValue: refNote.current }, codeEditorProps))),
React.createElement(FieldItem, { key: "color", labelProps: {
htmlFor: "colorinput",
text: translate("colorLabel"),
} }, predefinedColorsMenu)));
});
//# sourceMappingURL=StickyNoteModal.js.map