120 lines
3.0 KiB
TypeScript
120 lines
3.0 KiB
TypeScript
import { Handle, NodeProps, Position, Node, Edge } from "@xyflow/react";
|
|
import {
|
|
HANDLE_STYLE_CONNECTED,
|
|
HANDLE_STYLE_CONNECTED_V,
|
|
HANDLE_STYLE_DISCONNECTED,
|
|
HANDLE_STYLE_DISCONNECTED_V,
|
|
} from "./defaultHandleStyle";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useState } from "react";
|
|
|
|
interface IfElseNodeProps extends Node {
|
|
condition: string;
|
|
edges?: Edge[];
|
|
}
|
|
|
|
export default function IfElseNode({
|
|
id,
|
|
data,
|
|
edges = [],
|
|
}: NodeProps<IfElseNodeProps> & { edges?: Edge[] }) {
|
|
const { t } = useTranslation();
|
|
|
|
const isHandle1Connected = edges.some(
|
|
(e: Edge) => e.source === id && e.sourceHandle === "1"
|
|
);
|
|
const isHandle2Connected = edges.some(
|
|
(e: Edge) => e.source === id && e.sourceHandle === "2"
|
|
);
|
|
return (
|
|
<>
|
|
<div
|
|
style={{
|
|
border: "0px solid",
|
|
borderRadius: 8,
|
|
backgroundColor: "white",
|
|
width: "248px",
|
|
minHeight: "144px",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
paddingLeft: "12px",
|
|
height: "48px",
|
|
fontWeight: "600px",
|
|
fontSize: "16px",
|
|
gap: "12px",
|
|
}}
|
|
>
|
|
<img
|
|
style={{ height: "24px", width: "24px" }}
|
|
src="/icons/node/ifElse.svg"
|
|
alt="if else logo"
|
|
/>
|
|
{t("ifElseNode")}
|
|
</div>
|
|
<div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "12px",
|
|
fontSize: "14px",
|
|
minHeight: "48px",
|
|
position: "relative",
|
|
}}
|
|
>
|
|
{t("conditionIf", { condition: data.condition })}
|
|
<Handle
|
|
type="source"
|
|
position={Position.Right}
|
|
id="1"
|
|
style={{
|
|
...(isHandle1Connected
|
|
? { ...HANDLE_STYLE_CONNECTED_V }
|
|
: { ...HANDLE_STYLE_DISCONNECTED_V }),
|
|
position: "absolute",
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
}}
|
|
/>
|
|
</div>
|
|
<div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
paddingLeft: "12px",
|
|
fontSize: "14px",
|
|
height: "48px",
|
|
}}
|
|
>
|
|
{t("conditionElse")}
|
|
</div>
|
|
|
|
<Handle
|
|
type="target"
|
|
position={Position.Top}
|
|
id="input"
|
|
style={{ ...HANDLE_STYLE_CONNECTED }}
|
|
/>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Bottom}
|
|
id="2"
|
|
style={
|
|
isHandle2Connected
|
|
? { ...HANDLE_STYLE_CONNECTED }
|
|
: { ...HANDLE_STYLE_DISCONNECTED }
|
|
}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|