50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { Position } from "@xyflow/react";
|
|
import { COND_H, COND_W, SCOPE_CONFIG, type ScopeKey } from "../constants";
|
|
import { RFEdgeHandle } from "./rfEdgeHandle";
|
|
|
|
/** Width of the left scope-color strip (matches common “start node” accent bars). */
|
|
const ACCENT_STRIP_CLASS = "w-2.5";
|
|
|
|
export function RFConditionNode({ data }: { data: any }) {
|
|
const condition = data.condition as string;
|
|
const color = data.color as string | null;
|
|
const scopes = (data.scopes as string[] | undefined) ?? [];
|
|
const accent = color ?? undefined;
|
|
|
|
return (
|
|
<div className="relative" style={{ width: COND_W, minHeight: COND_H }}>
|
|
<RFEdgeHandle type="target" position={Position.Left} accentColor={accent ?? "var(--muted-foreground)"} />
|
|
<RFEdgeHandle type="source" position={Position.Right} accentColor={accent ?? "var(--muted-foreground)"} />
|
|
<div
|
|
className="dark:bg-card relative z-10 flex w-full cursor-grab overflow-hidden rounded-lg border bg-white shadow-sm active:cursor-grabbing"
|
|
style={{ minHeight: COND_H, borderColor: accent }}
|
|
>
|
|
<div
|
|
className={cn("shrink-0 self-stretch", ACCENT_STRIP_CLASS, !accent && "bg-muted")}
|
|
style={accent ? { backgroundColor: accent } : undefined}
|
|
aria-hidden
|
|
/>
|
|
<div className="flex min-w-0 flex-1 flex-col gap-4 px-3 py-2.5">
|
|
<code className="text-foreground flex-1 font-mono text-[12px] leading-snug break-all">{condition}</code>
|
|
{scopes.length > 0 && (
|
|
<div className="flex flex-wrap gap-1">
|
|
{scopes.map((sc) => {
|
|
const cfg = SCOPE_CONFIG[sc as ScopeKey];
|
|
return cfg ? (
|
|
<span
|
|
key={sc}
|
|
className="rounded px-1 py-0 text-[9px] font-semibold"
|
|
style={{ backgroundColor: `${cfg.color}18`, color: cfg.color }}
|
|
>
|
|
{cfg.label}
|
|
</span>
|
|
) : null;
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |