61 lines
2.1 KiB
TypeScript
61 lines
2.1 KiB
TypeScript
import { memo } from 'react';
|
|
import { Handle, Position, NodeProps } from '@xyflow/react';
|
|
import { ConditionNode as ConditionNodeData } from '../../types/dialogue';
|
|
import { useValidation } from '../../hooks/useValidation';
|
|
import styles from './nodes.module.css';
|
|
|
|
export const ConditionNode = memo(({ data, selected }: NodeProps & { data: ConditionNodeData }) => {
|
|
const { hasError, hasWarning } = useValidation();
|
|
const error = hasError(data.id);
|
|
const warning = !error && hasWarning(data.id);
|
|
|
|
return (
|
|
<div
|
|
className={[
|
|
styles.node,
|
|
styles.conditionNode,
|
|
selected ? styles.selected : '',
|
|
error ? styles.hasError : '',
|
|
warning ? styles.hasWarning : '',
|
|
].join(' ')}
|
|
>
|
|
<Handle type="target" position={Position.Top} id="target" className={styles.handle} />
|
|
<div className={styles.nodeHeader}>
|
|
<span className={styles.speakerName}>Condition</span>
|
|
<span className={styles.nodeType}>If</span>
|
|
</div>
|
|
<div className={styles.nodeId}>{data.id}</div>
|
|
<div className={styles.nodeBody}>
|
|
{data.conditions.map((c, i) => (
|
|
<div key={i} className={styles.conditionRow}>
|
|
<span className={styles.flagPill}>{c.flag}</span>
|
|
<span className={styles.opBadge}>{c.op}</span>
|
|
<span className={styles.valuePill}>{String(c.value)}</span>
|
|
</div>
|
|
))}
|
|
{data.conditions.length === 0 && (
|
|
<span className={styles.emptyText}>(no conditions)</span>
|
|
)}
|
|
</div>
|
|
<div className={styles.conditionHandles}>
|
|
<span className={styles.trueLabel}>TRUE</span>
|
|
<span className={styles.falseLabel}>FALSE</span>
|
|
</div>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Bottom}
|
|
id="true"
|
|
className={[styles.handle, styles.trueHandle].join(' ')}
|
|
style={{ left: '30%' }}
|
|
/>
|
|
<Handle
|
|
type="source"
|
|
position={Position.Bottom}
|
|
id="false"
|
|
className={[styles.handle, styles.falseHandle].join(' ')}
|
|
style={{ left: '70%' }}
|
|
/>
|
|
</div>
|
|
);
|
|
});
|