@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
58 lines • 3.86 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.StickyNoteModal = void 0;
const react_1 = __importDefault(require("react"));
const getColorConfiguration_1 = __importDefault(require("../../../common/utils/getColorConfiguration"));
const extensions_1 = require("../../../extensions");
const ReactFlowHotkeyContext_1 = require("../extensions/ReactFlowHotkeyContext");
const index_1 = require("./../../../index");
exports.StickyNoteModal = react_1.default.memo(({ metaData, onClose, onSubmit, translate, simpleDialogProps, codeEditorProps }) => {
var _a, _b, _c;
const refNote = react_1.default.useRef((_a = metaData === null || metaData === void 0 ? void 0 : metaData.note) !== null && _a !== void 0 ? _a : "");
const [color, setSelectedColor] = react_1.default.useState((_b = metaData === null || metaData === void 0 ? void 0 : metaData.color) !== null && _b !== void 0 ? _b : "");
const noteColors = Object.entries((0, getColorConfiguration_1.default)("stickynotes")).map(([key, value]) => [key, value]);
const { disableHotKeys } = react_1.default.useContext(ReactFlowHotkeyContext_1.ReactFlowHotkeyContext);
react_1.default.useEffect(() => {
disableHotKeys(true);
return () => {
disableHotKeys(false);
};
}, []);
react_1.default.useEffect(() => {
if (!color && noteColors[0][1]) {
setSelectedColor(noteColors[0][1]);
}
}, [color, noteColors]);
const predefinedColorsMenu = (react_1.default.createElement(index_1.TagList, null, noteColors &&
noteColors.map(([colorName, colorValue]) => {
const selectedFeedback = color === colorValue
? {
icon: react_1.default.createElement(index_1.Icon, { name: "state-checkedsimple" }),
large: true,
}
: {};
return (react_1.default.createElement(index_1.Tag, Object.assign({ round: true, onClick: () => setSelectedColor(colorValue), backgroundColor: colorValue }, selectedFeedback, { key: colorName })));
})));
return (react_1.default.createElement(index_1.SimpleDialog, Object.assign({ size: "small", title: translate("modalTitle"), hasBorder: true, isOpen: true, onClose: onClose, actions: [
react_1.default.createElement(index_1.Button, { key: "submit", "data-test-id": "sticky-submit-btn", affirmative: true, onClick: () => {
onSubmit({ note: refNote.current, color: color || "#444444" });
onClose();
} }, translate("saveButton")),
react_1.default.createElement(index_1.Button, { key: "cancel", onClick: onClose }, translate("cancelButton")),
] }, simpleDialogProps, { "data-test-id": (_c = (simpleDialogProps !== null && simpleDialogProps !== void 0 ? simpleDialogProps : {})["data-test-id"]) !== null && _c !== void 0 ? _c : "sticky-note-modal" }),
react_1.default.createElement(index_1.FieldItem, { key: "note", labelProps: {
htmlFor: "noteinput",
text: translate("noteLabel"),
} },
react_1.default.createElement(extensions_1.CodeEditor, Object.assign({ name: translate("noteLabel"), id: "sticky-note-input", mode: "markdown", preventLineNumbers: true, onChange: (value) => {
refNote.current = value;
}, defaultValue: refNote.current }, codeEditorProps))),
react_1.default.createElement(index_1.FieldItem, { key: "color", labelProps: {
htmlFor: "colorinput",
text: translate("colorLabel"),
} }, predefinedColorsMenu)));
});
//# sourceMappingURL=StickyNoteModal.js.map