@eccenca/gui-elements 23.1.0-easynav.0 → 23.1.0-easynav.2

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -1,12 +1,19 @@
 import React, { useState, useEffect, useCallback } from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
+import { LoremIpsum, loremIpsum } from 'react-lorem-ipsum';
 import ReactFlow, { Elements, ReactFlowProvider } from 'react-flow-renderer';
 import {
+    Badge,
+    ContextMenu,
+    MenuItem,
     OverflowText,
     HtmlContentBlock,
+    IconButton,
+    Tag,
+    TagList,
 } from "./../../../../index";
 import canonicalIcons from "./../../../../components/Icon/canonicalIconNames";
+import { Definitions } from "../../../../common/Intent";
 
 import { NodeContent } from "./../NodeContent";
 import { nodeTypes } from "./../nodeTypes";
@@ -30,10 +37,64 @@ export default {
                 "Slide out example": <NodeContentExtension {...ContentExtensionExampleSlideOut.args} />,
             },
         },
+        labelSubline: {
+            control: "select",
+            options: ["Not set", "Text string", "OverflowText element", "Tag list"],
+            mapping: {
+                "Not set": undefined,
+                "Text string": loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 8, random: false }).toString(),
+                "OverflowText element": <OverflowText>{loremIpsum({ p: 1, avgSentencesPerParagraph: 2, avgWordsPerSentence: 4, random: false }).toString()}</OverflowText>,
+                "Tag list": <TagList>{
+                    loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 5, random: false })
+                    .toString()
+                    .split(" ")
+                    .map((term) => <Tag small>{term}</Tag>)
+                }</TagList>
+            },
+        },
+        menuButtons: {
+            control: "select",
+            options: ["Not set", "Icon button", "Context Menu", "Info badge"],
+            mapping: {
+                "Not set": undefined,
+                "Icon button": <IconButton name="item-info" text="Icon button" onClick={()=>alert("Click info")} />,
+                "Context Menu": <ContextMenu><MenuItem text="Context menu" /></ContextMenu>,
+                "Info badge": <Badge intent="info">Info</Badge>,
+            },
+        },
         iconName: {
             control: "select",
             options: [...(Object.keys(canonicalIcons))],
         },
+        highlightedState: {
+            control: "select",
+            options: ["Not set", "success", "warning", "danger", "match", "altmatch", "danger + match"],
+            mapping: {
+                "Not set": undefined,
+                "danger + match": ["danger", "match"],
+            },
+        },
+        border: {
+            control: "select",
+            options: [undefined, "solid", "double", "dashed", "dotted"],
+        },
+        intent: {
+            control: "select",
+            options: {"Not set": undefined, ...Definitions},
+        },
+        highlightColor: {
+            control: "select",
+            options: {
+                "Not set": undefined,
+                "Default": "default",
+                "Alternate": "alternate",
+                "Default + alternate": ["default" , "alternate"],
+                "Custom (red)": "red",
+                "Default + Custom (red)": ["default", "red"],
+                "Custom (green) + alternate": ["green", "alternate"],
+                "Custom (purple) + custom (yellow)": ["purple", "yellow"],
+            }
+        },
         content: { control: "none" },
         footerContent: { control: "none" },
         isConnectable: { table: { disable: true } },

package/src/extensions/react-flow/versionsupport.ts

@@ -1,6 +1,22 @@
+import { useStoreState as useStoreStateFlowLegacy } from "react-flow-renderer";
+import { useStore as useStoreStateFlowNext } from "react-flow-renderer-lts";
+
 export interface ReacFlowVersionSupportProps {
     /**
      * Spevifies the context of the react flow renderer version that is used for the component.
      */
-    flowVersion?: "legacy" | "next";
+    flowVersion?: "legacy" | "next" | "none";
+}
+
+export const useReactFlowVersion = () => {
+    try {
+        const [, , zoom] = useStoreStateFlowLegacy((state) => state.transform);
+        return !!zoom ? "legacy" : "none";
+    } catch {}
+    try {
+        const [, , zoom] = useStoreStateFlowNext((state) => state.transform);
+        return !!zoom ? "next" : "none";
+    } catch {}
+
+    return "none";
 }