feat(Flow): allow to specify input and output id

lumada-design · Nov 23, 2023 · 6b4b8fc · 6b4b8fc
1 parent d9f1b92
commit 6b4b8fc
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 48 deletions.
diff --git a/packages/lab/src/components/Flow/Node/BaseNode.tsx b/packages/lab/src/components/Flow/Node/BaseNode.tsx
@@ -57,18 +57,14 @@ export interface HvFlowBaseNodeProps<T = any>
 const isInputConnected = (
   id: string,
   type: "target" | "source",
-  idx: number,
+  handleId: string,
   edges: Edge[]
 ) => {
   if (type === "target") {
-    return edges.some(
-      (e) => e.target === id && e.targetHandle === idx.toString()
-    );
+    return edges.some((e) => e.target === id && e.targetHandle === handleId);
   }
   if (type === "source") {
-    return edges.some(
-      (e) => e.source === id && e.sourceHandle === idx.toString()
-    );
+    return edges.some((e) => e.source === id && e.sourceHandle === handleId);
   }
 
   return false;
@@ -203,28 +199,31 @@ export const HvFlowBaseNode = ({
           </div>
 
           <div className={classes.inputsContainer}>
-            {inputs?.map((input, idx) => (
-              <div className={classes.inputContainer} key={idx}>
-                <Handle
-                  type="target"
-                  isConnectableStart={false}
-                  id={`${idx}`}
-                  position={Position.Left}
-                  style={{
-                    top: "auto",
-                    bottom:
-                      (outputs?.length ? 80 : 18) +
-                      (outputs?.length || 0) * 29 +
-                      29 * idx,
-                  }}
-                />
-                <HvTypography>{input.label}</HvTypography>
-                {input.isMandatory &&
-                  !isInputConnected(id, "target", idx, edges) && (
-                    <div className={classes.mandatory} />
-                  )}
-              </div>
-            ))}
+            {inputs?.map((input, idx) => {
+              const handleId = input.id ?? idx.toString();
+              return (
+                <div className={classes.inputContainer} key={idx}>
+                  <Handle
+                    type="target"
+                    isConnectableStart={false}
+                    id={handleId}
+                    position={Position.Left}
+                    style={{
+                      top: "auto",
+                      bottom:
+                        (outputs?.length ? 80 : 18) +
+                        (outputs?.length || 0) * 29 +
+                        29 * idx,
+                    }}
+                  />
+                  <HvTypography>{input.label}</HvTypography>
+                  {input.isMandatory &&
+                    !isInputConnected(id, "target", handleId, edges) && (
+                      <div className={classes.mandatory} />
+                    )}
+                </div>
+              );
+            })}
           </div>
         </>
       )}
@@ -234,25 +233,28 @@ export const HvFlowBaseNode = ({
             <HvTypography>Outputs</HvTypography>
           </div>
           <div className={classes.outputsContainer}>
-            {outputs?.map((output, idx) => (
-              <div className={classes.outputContainer} key={idx}>
-                <Handle
-                  type="source"
-                  isConnectableEnd={false}
-                  id={`${idx}`}
-                  position={Position.Right}
-                  style={{
-                    bottom: -10 + 29 * (outputs.length - idx),
-                    top: "auto",
-                  }}
-                />
-                {output.isMandatory &&
-                  !isInputConnected(id, "source", idx, edges) && (
-                    <div className={classes.mandatory} />
-                  )}
-                <HvTypography>{output.label}</HvTypography>
-              </div>
-            ))}
+            {outputs?.map((output, idx) => {
+              const handleId = output.id ?? idx.toString();
+              return (
+                <div className={classes.outputContainer} key={idx}>
+                  <Handle
+                    type="source"
+                    isConnectableEnd={false}
+                    id={handleId}
+                    position={Position.Right}
+                    style={{
+                      bottom: -10 + 29 * (outputs.length - idx),
+                      top: "auto",
+                    }}
+                  />
+                  {output.isMandatory &&
+                    !isInputConnected(id, "source", handleId, edges) && (
+                      <div className={classes.mandatory} />
+                    )}
+                  <HvTypography>{output.label}</HvTypography>
+                </div>
+              );
+            })}
           </div>
         </>
       )}

diff --git a/packages/lab/src/components/Flow/types/flow.ts b/packages/lab/src/components/Flow/types/flow.ts
@@ -67,13 +67,15 @@ export interface HvFlowNodeMeta {
 }
 
 export type HvFlowNodeInput = {
+  id?: string;
   label: string;
   isMandatory?: boolean;
   accepts?: string[];
   maxConnections?: number;
 };
 
 export type HvFlowNodeOutput = {
+  id?: string;
   label: string;
   isMandatory?: boolean;
   provides?: string;