48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
import { useWorkflowStore, WorkflowState } from "@/stores/workflow";
|
|
import AddNode from "./AddNode";
|
|
import { NodeProps } from "./types";
|
|
import { useShallow } from "zustand/shallow";
|
|
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu";
|
|
import { Ellipsis, Trash2 } from "lucide-react";
|
|
|
|
const selectState = (state: WorkflowState) => ({
|
|
updateNode: state.updateNode,
|
|
removeBranch: state.removeBranch,
|
|
});
|
|
const ConditionNode = ({ data, branchId, branchIndex }: NodeProps) => {
|
|
const { updateNode, removeBranch } = useWorkflowStore(useShallow(selectState));
|
|
const handleNameBlur = (e: React.FocusEvent<HTMLDivElement>) => {
|
|
updateNode({ ...data, name: e.target.innerText });
|
|
};
|
|
return (
|
|
<>
|
|
<div className="rounded-md shadow-md w-[261px] mt-10 relative z-10">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger className="absolute right-2 top-1">
|
|
<Ellipsis size={17} className="text-stone-600" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent>
|
|
<DropdownMenuItem
|
|
className="flex space-x-2 text-red-600"
|
|
onClick={() => {
|
|
removeBranch(branchId ?? "", branchIndex ?? 0);
|
|
}}
|
|
>
|
|
<Trash2 size={16} /> <div>删除分支</div>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
|
|
<div className="w-[261px] flex flex-col justify-center text-foreground rounded-md bg-white px-5 py-5">
|
|
<div contentEditable suppressContentEditableWarning onBlur={handleNameBlur} className="text-center outline-slate-200 dark:text-stone-600">
|
|
{data.name}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AddNode data={data} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ConditionNode;
|