40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { NodeProps } from "reactflow";
|
|
import { Repeat } from "lucide-react";
|
|
import { CompactNodeShell } from "./CompactNodeShell";
|
|
import type { DataTransformNodeData } from "@/types/node-editor";
|
|
|
|
export const DataTransformNode = memo(({ data, selected }: NodeProps<DataTransformNodeData>) => {
|
|
const ruleCount = data.transformRules?.length || 0;
|
|
const summary = ruleCount > 0
|
|
? `${ruleCount}개 변환 규칙`
|
|
: "변환 규칙을 설정해 주세요";
|
|
|
|
return (
|
|
<CompactNodeShell
|
|
color="#06B6D4"
|
|
label={data.displayName || "데이터 변환"}
|
|
summary={summary}
|
|
icon={<Repeat className="h-3.5 w-3.5" />}
|
|
selected={selected}
|
|
>
|
|
{ruleCount > 0 && (
|
|
<div className="space-y-0.5">
|
|
{data.transformRules!.slice(0, 3).map((r: any, i: number) => (
|
|
<div key={i} className="flex items-center gap-1.5">
|
|
<div className="h-1 w-1 rounded-full bg-cyan-400" />
|
|
<span>{r.sourceField || r.field || `규칙 ${i + 1}`}</span>
|
|
{r.targetField && <span className="text-zinc-600">→ {r.targetField}</span>}
|
|
</div>
|
|
))}
|
|
{ruleCount > 3 && <span className="text-zinc-600">외 {ruleCount - 3}개</span>}
|
|
</div>
|
|
)}
|
|
</CompactNodeShell>
|
|
);
|
|
});
|
|
|
|
DataTransformNode.displayName = "DataTransformNode";
|