import { IconFont } from '@/components/icon-font'; import { Card, CardContent } from '@/components/ui/card'; import { ISwitchCondition, ISwitchNode } from '@/interfaces/database/flow'; import { NodeProps, Position } from '@xyflow/react'; import { memo, useCallback } from 'react'; import { SwitchOperatorOptions } from '../../constant'; import { useGetComponentLabelByValue } from '../../hooks/use-get-begin-query'; import { CommonHandle } from './handle'; import { RightHandleStyle } from './handle-icon'; import NodeHeader from './node-header'; import { NodeWrapper } from './node-wrapper'; import { ToolBar } from './toolbar'; import { useBuildSwitchHandlePositions } from './use-build-switch-handle-positions'; const getConditionKey = (idx: number, length: number) => { if (idx === 0 && length !== 1) { return 'If'; } else if (idx === length - 1) { return 'Else'; } return 'ElseIf'; }; const ConditionBlock = ({ condition, nodeId, }: { condition: ISwitchCondition; nodeId: string; }) => { const items = condition?.items ?? []; const getLabel = useGetComponentLabelByValue(nodeId); const renderOperatorIcon = useCallback((operator?: string) => { const name = SwitchOperatorOptions.find((x) => x.value === operator)?.icon; return ; }, []); return ( {items.map((x, idx) => (
{getLabel(x?.cpn_id)}
{renderOperatorIcon(x?.operator)}
{x?.value}
))}
); }; function InnerSwitchNode({ id, data, selected }: NodeProps) { const { positions } = useBuildSwitchHandlePositions({ data, id }); return (
{positions.map((position, idx) => { return (
{idx < positions.length - 1 && position.condition?.logical_operator?.toUpperCase()} {getConditionKey(idx, positions.length)}
{position.condition && ( )}
); })}
); } export const SwitchNode = memo(InnerSwitchNode);