fix(FlowNode): handle content when already connected

lumada-design · Jan 30, 2024 · cbb231c · cbb231c
1 parent aed0975
commit cbb231c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 14 deletions.
diff --git a/packages/lab/src/Flow/Flow.styles.tsx b/packages/lab/src/Flow/Flow.styles.tsx
@@ -5,12 +5,6 @@ import { flowBaseNodeClasses } from "./Node";
 export const { staticClasses, useClasses } = createClasses("HvFlow", {
   root: {
     height: "100%",
-    "& .react-flow__handle-connecting": {
-      backgroundColor: theme.colors.negative_20,
-    },
-    "& .react-flow__handle-valid": {
-      backgroundColor: theme.colors.positive_20,
-    },
     [`& .selected > .${flowBaseNodeClasses.root}`]: {
       border: `1px solid ${theme.colors.secondary_60}`,
       borderRadius: theme.radii.round,

diff --git a/packages/lab/src/Flow/Node/BaseNode.styles.tsx b/packages/lab/src/Flow/Node/BaseNode.styles.tsx
@@ -92,6 +92,12 @@ export const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
     "&.react-flow__handle-right": {
       right: -21,
     },
+    "&.react-flow__handle-connecting": {
+      backgroundColor: theme.colors.negative_20,
+    },
+    "&.react-flow__handle-valid": {
+      backgroundColor: theme.colors.positive_20,
+    },
     "::before": {
       fontSize: 14,
       color: theme.colors.secondary_60,
@@ -104,6 +110,11 @@ export const { staticClasses, useClasses } = createClasses("HvFlowBaseNode", {
     backgroundColor: theme.colors.secondary_60,
     width: 8,
     height: 8,
+
+    "::before": {
+      fontSize: 11,
+      marginTop: -8,
+    },
   },
   mandatory: {
     width: 10,

diff --git a/packages/lab/src/Flow/Node/BaseNode.tsx b/packages/lab/src/Flow/Node/BaseNode.tsx
@@ -181,10 +181,9 @@ export const HvFlowBaseNode = ({
           isConnectableEnd={false}
           id={output.id}
           position={Position.Right}
-          className={cx(
-            classes.handle,
-            edgeConnected && classes.handleConnected
-          )}
+          className={cx(classes.handle, {
+            [classes.handleConnected]: edgeConnected,
+          })}
         />
         {output.isMandatory && !edgeConnected && (
           <div className={classes.mandatory} />
@@ -204,10 +203,9 @@ export const HvFlowBaseNode = ({
           isConnectableStart={false}
           id={input.id}
           position={Position.Left}
-          className={cx(
-            classes.handle,
-            edgeConnected && classes.handleConnected
-          )}
+          className={cx(classes.handle, {
+            [classes.handleConnected]: edgeConnected,
+          })}
         />
         <HvTypography component="div">{input.label}</HvTypography>
         {input.isMandatory && !edgeConnected && (