@eccenca/gui-elements 22.1.0-rc.0 → 22.1.0-rc.1

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

@@ -7,6 +7,7 @@ import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import {ValidIconName} from "../../../components/Icon/canonicalIconNames";
 import { HandleDefault, HandleProps } from "./../handles/HandleDefault";
 import { NodeProps } from "./NodeDefault";
+import { NodeContentExtensionProps } from "./NodeContentExtension";
 
 export type HighlightingState = "success" | "warning" | "danger" | "match" | "altmatch";
 
@@ -35,7 +36,7 @@ interface NodeContentData<CONTENT_PROPS = any> {
     /**
      * Content extension, displayed at the bottom side of a node.
      */
-    contentExtension?: React.ReactNode;
+    contentExtension?: React.ReactElement<NodeContentExtensionProps>;
 }
 
 export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends NodeContentData, React.HTMLAttributes<HTMLDivElement> {
@@ -124,6 +125,11 @@ export interface NodeContentProps<NODE_DATA, NODE_CONTENT_PROPS = any> extends N
      * If set then it will be always overwritten internally.
      */
     selected?: boolean;
+    /**
+     * Allow react flow wheel events, e.g. for zooming using the mouse wheel over a node.
+     * If this is allowed scrolling inside a node is not possible.
+     */
+    letPassWheelEvents?: boolean;
 }
 
 interface MemoHandlerProps extends HandleProps {
@@ -226,6 +232,7 @@ const MemoHandler = React.memo(
      sourcePosition = Position.Right,
      isConnectable = true,
      selected,
+     letPassWheelEvents = false,
      // businessData is just being ignored
      businessData,
      // other props for DOM element
@@ -279,7 +286,8 @@ const MemoHandler = React.memo(
                      ` ${eccgui}-graphviz__node--minimal-${minimalShape}` +
                      (!!highlightedState ? " " + gethighlightedStateClasses(highlightedState, `${eccgui}-graphviz__node`) : "") +
                      (animated ? ` ${eccgui}-graphviz__node--animated` : "") +
-                     (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "")
+                     (showUnconnectableHandles === false ? ` ${eccgui}-graphviz__node--hidehandles` : "") +
+                     (letPassWheelEvents === false ? ` nowheel` : "")
                  }
              >
                  <header className={`${eccgui}-graphviz__node__header`}>
@@ -311,11 +319,9 @@ const MemoHandler = React.memo(
                          {typeof content === "function" ? content(adjustedContentProps) : content}
                      </div>
                  )}
-                 {contentExtension && (
-                     <div className={`${eccgui}-graphviz__node__footer`}>
-                         {contentExtension}
-                     </div>
-                 )}
+                 <div className={`${eccgui}-graphviz__node__footer`}>
+                 </div>
+                 {contentExtension}
              </section>
              {!!handles && (
                  <>

package/src/extensions/react-flow/nodes/NodeContentExtension.tsx

@@ -3,6 +3,10 @@ import { CLASSPREFIX as eccgui } from "../../../configuration/constants";
 import IconButton from "../../../components/Icon/IconButton";
 
 export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * When enabled the element is displayed in a way that it does not count into the node size calculation.
+     */
+    slideOutOfNode?: boolean;
     /**
      * Element is displayed in expanded state.
      * If it has no `onToggle` handler property set then it is always expanded.
@@ -33,6 +37,7 @@ export interface NodeContentExtensionProps extends React.HTMLAttributes<HTMLDivE
  */
 export const NodeContentExtension = ({
     children,
+    slideOutOfNode = false,
     isExpanded = false,
     onToggle = undefined,
     actionButtons,
@@ -50,6 +55,7 @@ export const NodeContentExtension = ({
             {...otherProps}
             className={
                 `${eccgui}-graphviz__node__extension` +
+                (slideOutOfNode ? ` ${eccgui}-graphviz__node__extension--slideout` : "") +
                 (expanded ? ` ${eccgui}-graphviz__node__extension--expanded` : "")
             }
         >

package/src/extensions/react-flow/nodes/NodeTools.tsx

@@ -1,4 +1,4 @@
-import React, {memo, useState} from "react";import {
+import React, {memo, useEffect, useState} from "react";import {
     IPopoverProps as IBlueprintPopoverProps,
     PopoverInteractionKind as BlueprintPopoverInteractionKind,
 } from "@blueprintjs/core";
@@ -11,6 +11,14 @@ export interface NodeToolsProps extends IBlueprintPopoverProps {
     togglerElement?: ValidIconName | JSX.Element;
     togglerText?: string;
     menuButtonDataTestId?: string
+    /** If defined this function will be called with the menu API object to be used externally. */
+    menuFunctionsCallback?: (menuFunctions: NodeToolsMenuFunctions) => any
+}
+
+// Functions regarding the menu that can be called from the outside
+export interface NodeToolsMenuFunctions {
+    /** Closes the menu if its open. */
+    closeMenu: () => void
 }
 
 export const NodeTools = memo(({
@@ -18,16 +26,25 @@ export const NodeTools = memo(({
     togglerElement = "item-moremenu",
     togglerText = "Show more options",
     menuButtonDataTestId,
+    menuFunctionsCallback,
     ...otherOverlayProps
 }: NodeToolsProps) => {
-    const [isOpened, toggleIsOpened] = useState<boolean>(false);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+
+    useEffect(() => {
+        menuFunctionsCallback && menuFunctionsCallback({
+            closeMenu(): void {
+                setIsOpen(false)
+            }
+        })
+    }, [menuFunctionsCallback])
 
     return (
         <ContextOverlay
-            defaultIsOpen={isOpened}
-            interactionKind={isOpened ? BlueprintPopoverInteractionKind.HOVER : BlueprintPopoverInteractionKind.CLICK}
-            onOpening={() => { toggleIsOpened(true); }}
-            onClosing={() => { toggleIsOpened(false); }}
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+            hoverCloseDelay={500}
+            interactionKind={isOpen ? BlueprintPopoverInteractionKind.HOVER : BlueprintPopoverInteractionKind.CLICK}
             {...otherOverlayProps}
         >
             {typeof togglerElement === "string" ? (
@@ -35,9 +52,8 @@ export const NodeTools = memo(({
                     data-test-id={menuButtonDataTestId}
                     name={togglerElement}
                     text={togglerText}
-                    onMouseUp={() => {
-                        if (isOpened) { toggleIsOpened(false) };
-                    }}/>
+                    onClick={() => setIsOpen(previous => !previous)}
+                />
             ) : (
                 { togglerElement }
             )}

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -178,15 +178,15 @@
 // Node sizes
 
 .#{$eccgui}-graphviz__node--tiny {
-    width: $reactflow-node-basesize * 3;
+    width: $reactflow-node-basesize * 4;
     min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 2;
+    max-height: $reactflow-node-basesize * 4;
 }
 
 .#{$eccgui}-graphviz__node--small {
     width: $reactflow-node-basesize * 5;
     min-height: $reactflow-node-basesize;
-    max-height: $reactflow-node-basesize * 3;
+    max-height: $reactflow-node-basesize * 8;
 }
 
 .#{$eccgui}-graphviz__node--medium {
@@ -268,12 +268,18 @@
 // Node tools
 
 .#{$eccgui}-graphviz__nodetools__content {
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: 0;
 }
 
 // Node content extension
 
 .#{$eccgui}-graphviz__node__extension {
     background-color: $reactflow-node-background-color;
+    min-height: $eccgui-size-block-whitespace / 2;
+    flex-grow: 1;
+    flex-shrink: 1;
 
     .#{$eccgui}-graphviz__node--tiny & {
         max-height: $reactflow-node-basesize * 3;
@@ -295,11 +301,6 @@
 .#{$eccgui}-graphviz__node__extension--expanded {
     display: flex;
     flex-direction: column;
-    border-width: $reactflow-node-border-width;
-    border-color: $reactflow-node-border-color;
-    border-radius: $reactflow-node-border-radius;
-    border-style: solid;
-
     // separation between node content and extension
     // do not inherit styles here
     border-top-color: $eccgui-color-separation-divider !important;
@@ -308,10 +309,16 @@
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
 
-    position: absolute;
-    top: 100%;
-    left: -1 * $reactflow-node-border-width;
-    right: -1 * $reactflow-node-border-width;
+    &.#{$eccgui}-graphviz__node__extension--slideout {
+        position: absolute;
+        top: 100%;
+        left: -1 * $reactflow-node-border-width;
+        right: -1 * $reactflow-node-border-width;
+        border-width: $reactflow-node-border-width;
+        border-color: $reactflow-node-border-color;
+        border-radius: $reactflow-node-border-radius;
+        border-style: solid;
+    }
 }
 
 .#{$eccgui}-graphviz__node__extension-expandbutton {
@@ -327,6 +334,18 @@
     flex-shrink: 1;
     overflow: auto;
     overflow: auto;
+
+    .#{$eccgui}-tag__item {
+        max-width: 20%;
+
+        &:first-child {
+            max-width: 75%;
+        }
+
+        &:last-child {
+            max-width: 100%
+        }
+    }
 }
 
 .#{$eccgui}-graphviz__node__extension-actions {

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

@@ -7,7 +7,10 @@ import HtmlContentBlock from "../../../../components/Typography/HtmlContentBlock
 import { NodeContent } from "./../NodeContent";
 import { nodeTypes } from "./../nodeTypes";
 import { NodeContentExtension } from "./../NodeContentExtension";
-import { Default as ContentExtensionExample } from "./NodeContentExtension.stories";
+import {
+    Default as ContentExtensionExample,
+    SlideOutOfNode as ContentExtensionExampleSlideOut,
+} from "./NodeContentExtension.stories";
 
 export default {
     title: "Extensions/React Flow/Node Content",
@@ -81,3 +84,9 @@ Default.args = {
     contentExtension: <ContentExtensionExample />,
     minimalShape: "none",
 };
+
+export const SlideOut = Template.bind({});
+SlideOut.args = {
+    ...Default.args,
+    contentExtension: <ContentExtensionExampleSlideOut />
+};

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

@@ -34,3 +34,26 @@ export const Default = () => {
             </HtmlContentBlock>
         </NodeContentExtension>);
 }
+
+export const SlideOutOfNode = () => {
+    const [isExpanded, setExpanded] = useState<boolean>(false);
+
+    const toggleExpansion = (event: React.MouseEvent<HTMLElement>, expanded: boolean) => {
+        setExpanded(!expanded);
+    }
+
+    return (
+        <NodeContentExtension
+            slideOutOfNode
+            isExpanded={isExpanded}
+            onToggle={toggleExpansion}
+            actionButtons={
+                <IconButton name="item-question" onClick={(e) => { alert("this is a action button"); }} />
+            }
+        >
+            <HtmlContentBlock>
+                <h4>Extension example.</h4>
+                <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            </HtmlContentBlock>
+        </NodeContentExtension>);
+}

package/src/index.ts

@@ -198,8 +198,8 @@ export {
     TextField,
     TextArea,
     SearchField,
-    Switch, // TODO: scss styles
-    NumericInput, // TODO: scss styles
+    Switch,
+    NumericInput,
     FieldItem,
     FieldItemRow,
     FieldSet,
@@ -239,7 +239,7 @@ export {
     PropertyValueList,
     Toast,
     HelperClasses,
-    Select, // TODO: include as own element
+    Select, // FIXME: CMEM-3742: include as own element
     MultiSelect,
     AutoCompleteField,
     ProgressBar,