Fix stack overflow error in condition group rendering by improving component structure and adding controls.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/15a8b3d4-ed52-4589-a78f-46735f4177f5.jpg
This commit is contained in:
alphaeusmote
2025-04-10 12:21:47 +00:00
parent 8ef5b99822
commit be90987bfe
2 changed files with 247 additions and 4 deletions
@@ -383,7 +383,99 @@ const ConditionBuilder: React.FC<ConditionBuilderProps> = ({
{...attributes}
>
{condition.isGroup ? (
renderConditionGroup(condition, index, level)
<div
key={`group-${index}`}
className="border border-border rounded-md p-3 mb-3"
>
<div className="flex items-center justify-between mb-2">
<div className="flex items-center space-x-2">
<button
type="button"
onClick={() => condition.id && toggleGroupExpand(condition.id)}
className="p-1 hover:bg-accent rounded-sm"
>
{condition.id && expandedGroups.has(condition.id) ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</button>
<span className="text-sm font-medium">
Condition Group ({condition.logicalOperator})
</span>
</div>
<div className="flex items-center space-x-2" {...listeners}>
<Move className="h-4 w-4 text-muted-foreground mr-2 cursor-grab" />
<Select
value={condition.logicalOperator || 'AND'}
onValueChange={(value) => updateCondition(index, 'logicalOperator', value)}
>
<SelectTrigger className="w-20 h-8">
<SelectValue placeholder="Operator" />
</SelectTrigger>
<SelectContent>
{logicalOperators.map((op) => (
<SelectItem key={op.value} value={op.value}>
{op.label}
</SelectItem>
))}
</SelectContent>
</Select>
<Button
variant="ghost"
size="icon"
onClick={() => addCondition(condition.id)}
title="Add Condition"
>
<Plus className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => addConditionGroup(condition.id)}
title="Add Group"
>
<FolderPlus className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => removeCondition(index)}
title="Remove Group"
>
<Trash className="h-4 w-4" />
</Button>
</div>
</div>
{condition.id && expandedGroups.has(condition.id) && (
<div className="pl-2">
{condition.id ? (
(() => {
const childConditions = getConditionsForParent(condition.id);
return childConditions.length === 0 ? (
<div className="text-sm text-muted-foreground p-2">
No conditions in this group. Add one using the buttons above.
</div>
) : (
childConditions.map((child, childIndex) => {
const originalIndex = conditions.findIndex(c => c === child);
return child.isGroup
? <SortableItem key={`child-${originalIndex}`} condition={child} index={originalIndex} level={level + 1} />
: <SortableItem key={`child-${originalIndex}`} condition={child} index={originalIndex} level={level + 1} />;
})
);
})()
) : null}
</div>
)}
</div>
) : (
renderConditionContent(condition, index, level, listeners)
)}
@@ -539,9 +631,11 @@ const ConditionBuilder: React.FC<ConditionBuilderProps> = ({
<div className="space-y-2">
{conditions.map((condition, index) => (
condition.parentId === null || condition.parentId === undefined ? (
condition.isGroup ?
renderConditionGroup(condition, index) :
<SortableItem condition={condition} index={index} />
<SortableItem
key={`root-${index}`}
condition={condition}
index={index}
/>
) : null
))}
</div>