2024-11-12 13:16:23 +08:00

71 lines
2.6 KiB
TypeScript

import { Button } from "@/components/ui/button";
import AddNode from "./AddNode";
import { WorkflowBranchNode, WorkflowNode } from "@/domain/workflow";
import NodeRender from "./NodeRender";
import { memo } from "react";
import { BrandNodeProps } from "./types";
import { useWorkflowStore, WorkflowState } from "@/providers/workflow";
import { useShallow } from "zustand/shallow";
import { useTranslation } from "react-i18next";
const selectState = (state: WorkflowState) => ({
addBranch: state.addBranch,
});
const BranchNode = memo(({ data }: BrandNodeProps) => {
const { addBranch } = useWorkflowStore(useShallow(selectState));
const { t } = useTranslation();
const renderNodes = (node: WorkflowBranchNode | WorkflowNode | undefined, branchNodeId?: string, branchIndex?: number) => {
const elements: JSX.Element[] = [];
let current = node;
while (current) {
elements.push(<NodeRender data={current} branchId={branchNodeId} branchIndex={branchIndex} key={current.id} />);
current = current.next;
}
return elements;
};
return (
<>
<div className="border-t-[2px] border-b-[2px] relative flex gap-x-16 border-stone-200 bg-background">
<Button
onClick={() => {
addBranch(data.id);
}}
size={"sm"}
variant={"outline"}
className="text-xs px-2 h-6 rounded-full absolute -top-3 left-[50%] -translate-x-1/2 z-10 dark:text-stone-200"
>
{t("workflow.node.addBranch.label")}
</Button>
{data.branches.map((branch, index) => (
<div
key={branch.id}
className="relative flex flex-col items-center before:content-[''] before:w-[2px] before:bg-stone-200 before:absolute before:h-full before:left-[50%] before:-translate-x-[50%] before:top-0"
>
{index == 0 && (
<>
<div className="w-[50%] h-2 absolute -top-1 bg-background -left-[1px]"></div>
<div className="w-[50%] h-2 absolute -bottom-1 bg-background -left-[1px]"></div>
</>
)}
{index == data.branches.length - 1 && (
<>
<div className="w-[50%] h-2 absolute -top-1 bg-background -right-[1px]"></div>
<div className="w-[50%] h-2 absolute -bottom-1 bg-background -right-[1px]"></div>
</>
)}
{/* 条件 1 */}
<div className="relative flex flex-col items-center">{renderNodes(branch, data.id, index)}</div>
</div>
))}
</div>
<AddNode data={data} />
</>
);
});
export default BranchNode;