@eccenca/gui-elements 23.4.2-rc.0 → 23.6.0-rc.0

package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx

@@ -1,9 +1,11 @@
 import React from "react";
-import { Tag, TagList, SimpleDialog, Icon, Button, FieldItem } from "./../../../index";
+
 import getColorConfiguration from "../../../common/utils/getColorConfiguration";
 import { CodeEditor } from "../../../extensions";
 import { ReactFlowHotkeyContext } from "../extensions/ReactFlowHotkeyContext";
 
+import { Button, FieldItem, Icon, SimpleDialog, Tag, TagList } from "./../../../index";
+
 export type StickyNoteModalTranslationKeys = "modalTitle" | "noteLabel" | "colorLabel" | "saveButton" | "cancelButton";
 
 export type StickyNoteMetadataType = { note: string; color: string };
@@ -28,109 +30,106 @@ export interface StickyNoteModalProps {
     translate: (key: StickyNoteModalTranslationKeys) => string;
 }
 
-export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(({
-    metaData,
-    onClose,
-    onSubmit,
-    translate
-}) => {
-    const refNote = React.useRef<string>(metaData?.note ?? "");
-    const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
-    const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
-        ([key, value]) => [key, value as string]
-    );
-    const {disableHotKeys} = React.useContext(ReactFlowHotkeyContext)
+export const StickyNoteModal: React.FC<StickyNoteModalProps> = React.memo(
+    ({ metaData, onClose, onSubmit, translate }) => {
+        const refNote = React.useRef<string>(metaData?.note ?? "");
+        const [color, setSelectedColor] = React.useState<string>(metaData?.color ?? "");
+        const noteColors: [string, string][] = Object.entries(getColorConfiguration("stickynotes")).map(
+            ([key, value]) => [key, value as string]
+        );
+        const { disableHotKeys } = React.useContext(ReactFlowHotkeyContext);
 
-    React.useEffect(() => {
-        disableHotKeys(true)
+        React.useEffect(() => {
+            disableHotKeys(true);
 
-        return () => {
-            disableHotKeys(false)
-        }
-    }, [])
+            return () => {
+                disableHotKeys(false);
+            };
+        }, []);
 
-    React.useEffect(() => {
-        if (!color && noteColors[0][1]) {
-            setSelectedColor(noteColors[0][1]);
-        }
-    }, [color, noteColors]);
+        React.useEffect(() => {
+            if (!color && noteColors[0][1]) {
+                setSelectedColor(noteColors[0][1]);
+            }
+        }, [color, noteColors]);
 
-    const predefinedColorsMenu = (
-        <TagList>
-            {noteColors &&
-                noteColors.map(([colorName, colorValue]) => {
-                    const selectedFeedback =
-                        color === colorValue
-                            ? {
-                                  icon: <Icon name="state-checkedsimple" />,
-                                  large: true,
-                              }
-                            : {};
-                    return (
-                        <Tag
-                            round
-                            onClick={() => setSelectedColor(colorValue)}
-                            backgroundColor={colorValue}
-                            {...selectedFeedback}
-                            key={colorName}
-                        />
-                    );
-                })}
-        </TagList>
-    );
+        const predefinedColorsMenu = (
+            <TagList>
+                {noteColors &&
+                    noteColors.map(([colorName, colorValue]) => {
+                        const selectedFeedback =
+                            color === colorValue
+                                ? {
+                                      icon: <Icon name="state-checkedsimple" />,
+                                      large: true,
+                                  }
+                                : {};
+                        return (
+                            <Tag
+                                round
+                                onClick={() => setSelectedColor(colorValue)}
+                                backgroundColor={colorValue}
+                                {...selectedFeedback}
+                                key={colorName}
+                            />
+                        );
+                    })}
+            </TagList>
+        );
 
-    return (
-        <SimpleDialog
-            data-test-id={"sticky-note-modal"}
-            size="small"
-            title={translate("modalTitle")}
-            hasBorder
-            isOpen
-            onClose={onClose}
-            actions={[
-                <Button
-                    key="submit"
-                    data-test-id="sticky-submit-btn"
-                    affirmative
-                    onClick={() => {
-                        onSubmit({ note: refNote.current, color: color || "#444444" });
-                        onClose();
+        return (
+            <SimpleDialog
+                data-test-id={"sticky-note-modal"}
+                size="small"
+                title={translate("modalTitle")}
+                hasBorder
+                isOpen
+                onClose={onClose}
+                actions={[
+                    <Button
+                        key="submit"
+                        data-test-id="sticky-submit-btn"
+                        affirmative
+                        onClick={() => {
+                            onSubmit({ note: refNote.current, color: color || "#444444" });
+                            onClose();
+                        }}
+                    >
+                        {translate("saveButton")}
+                    </Button>,
+                    <Button key="cancel" onClick={onClose}>
+                        {translate("cancelButton")}
+                    </Button>,
+                ]}
+            >
+                <FieldItem
+                    key="note"
+                    labelProps={{
+                        htmlFor: "noteinput",
+                        text: translate("noteLabel"),
                     }}
                 >
-                    {translate("saveButton")}
-                </Button>,
-                <Button key="cancel" onClick={onClose}>
-                    {translate("cancelButton")}
-                </Button>,
-            ]}
-        >
-            <FieldItem
-                key="note"
-                labelProps={{
-                    htmlFor: "noteinput",
-                    text: translate("noteLabel"),
-                }}
-            >
-                <CodeEditor
-                    name={translate("noteLabel")}
-                    id={"sticky-note-input"}
-                    mode="markdown"
-                    preventLineNumbers
-                    onChange={(value) => {
-                        refNote.current = value;
+                    <CodeEditor
+                        name={translate("noteLabel")}
+                        id={"sticky-note-input"}
+                        mode="markdown"
+                        preventLineNumbers
+                        onChange={(value) => {
+                            refNote.current = value;
+                        }}
+                        defaultValue={refNote.current}
+                    />
+                </FieldItem>
+                <FieldItem
+                    key="color"
+                    labelProps={{
+                        htmlFor: "colorinput",
+                        text: translate("colorLabel"),
                     }}
-                    defaultValue={refNote.current}
-                />
-            </FieldItem>
-            <FieldItem
-                key="color"
-                labelProps={{
-                    htmlFor: "colorinput",
-                    text: translate("colorLabel"),
-                }}
-            >
-                {predefinedColorsMenu}
-            </FieldItem>
-        </SimpleDialog>
-    );
-});
+                >
+                    {predefinedColorsMenu}
+                </FieldItem>
+            </SimpleDialog>
+        );
+    }
+);

package/src/cmem/react-flow/_minimap.scss

@@ -8,6 +8,7 @@
     &:not([fill]) {
         fill: $color;
     }
+
     &:not([stroke]) {
         stroke: $color;
     }

package/src/cmem/react-flow/configuration/_colors-graph.scss

@@ -2,7 +2,6 @@ $reactflow-color-graph-node: #745a85 !default;
 $reactflow-color-class-node: #3a7896 !default;
 $reactflow-color-instance-node: #0097a7 !default;
 $reactflow-color-property-node: #ffd54f !default;
-
 $reactflow-color-implicit-edge: #ae3c74 !default;
 $reactflow-color-import-edge: $reactflow-color-graph-node !default;
 $reactflow-color-subclass-edge: $reactflow-color-class-node !default;

package/src/cmem/react-flow/configuration/_colors-linking.scss

@@ -3,7 +3,6 @@ $reactflow-color-targetpath-node: #3a7896 !default;
 $reactflow-color-transformation-node: #ae3c74 !default;
 $reactflow-color-comparator-node: #40a691 !default;
 $reactflow-color-aggregator-node: #0097a7 !default;
-
 $reactflow-color-value-edge: #222 !default;
 $reactflow-color-score-edge: $reactflow-color-aggregator-node !default;
 

package/src/cmem/react-flow/extensions/ReactFlowHotkeyContext.ts

@@ -2,13 +2,13 @@ import React from "react";
 
 export interface ReactFlowHotkeyContextProps {
     /** Allows to disable hot keys. */
-    disableHotKeys: (enable: boolean) => any
+    disableHotKeys: (enable: boolean) => any;
 
     /** If the hot keys are currently disabled. */
-    hotKeysDisabled: boolean
+    hotKeysDisabled: boolean;
 }
 
 export const ReactFlowHotkeyContext = React.createContext<ReactFlowHotkeyContextProps>({
     disableHotKeys: () => {},
-    hotKeysDisabled: false
-})
+    hotKeysDisabled: false,
+});