mirror of
https://github.com/usual2970/certimate.git
synced 2025-06-09 05:59:50 +00:00
71 lines
2.6 KiB
TypeScript
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;
|