jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

🐛 fix(formModal/index.tsx): stop propagation of click event at the toggle component

Browse source
This commit is contained in:
Lucas Oliveira 2023-06-30 10:31:03 -03:00
commit 5520ecea7a
1 changed files with 62 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

114
src/frontend/src/modals/formModal/index.tsx
View file

@ -401,74 +401,82 @@ export default function FormModal({
<div className="flex h-[80vh] w-full mt-2 "> <div className="flex h-[80vh] w-full mt-2 ">
<div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6"> <div className="w-2/5 h-full overflow-auto scrollbar-hide flex flex-col justify-start mr-6">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="flex py-2"> <div className="flex py-2">
<Variable className="w-6 h-6 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable> <Variable className="w-6 h-6 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
<span className="text-md font-semibold text-gray-800 dark:text-white"> <span className="text-md font-semibold text-primary">
Input Variables Input Variables
</span> </span>
</div> </div>
<span className="mr-7 text-sm font-semibold text-gray-800 dark:text-white"> <span className="mr-2 text-md font-semibold text-primary">
Chat Chat Input
</span> </span>
</div> </div>
<Accordion type="single" collapsible className="w-full"> <Accordion type="single" collapsible className="w-full">
{Object.keys(tabsState[id.current].formKeysData.input_keys).map( {Object.keys(tabsState[id.current].formKeysData.input_keys).map(
(i, k) => ( (i, k) => (
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<AccordionItem className="w-full" key={k} value={i}> <AccordionItem className="w-full" key={k} value={i}>
<AccordionTrigger className="flex gap-2"> <AccordionTrigger className="flex gap-2">
<div className="flex items-center w-full justify-between"> <div className="flex items-center w-full justify-between">
<Badge variant="gray" size="md"> <Badge variant="gray" size="md">
{i} {i}
</Badge> </Badge>
<div className="-mb-1"> <div
<ToggleShadComponent className="-mb-1"
onClick={(event) => {
event.stopPropagation();
}}
>
<ToggleShadComponent
enabled={chatKey === i} enabled={chatKey === i}
setEnabled={(value) => setEnabled={(value) =>
handleOnCheckedChange(value, i) handleOnCheckedChange(value, i)
} }
size="small" size="small"
disabled={false} disabled={false}
/></div> />
</div>
</AccordionTrigger>
<AccordionContent>
<div className="p-1 flex flex-col gap-2">
{tabsState[id.current].formKeysData.handle_keys.some(
(t) => t === i
) ? (
<div className="font-normal text-muted-foreground ">
Handle
</div> </div>
) : ( </div>
<></> </AccordionTrigger>
)} <AccordionContent>
<Textarea <div className="p-1 flex flex-col gap-2">
value={ {tabsState[
tabsState[id.current].formKeysData.input_keys[i] id.current
} ].formKeysData.handle_keys.some((t) => t === i) ? (
onChange={(e) => { <div className="font-normal text-muted-foreground ">
if ( Handle
!tabsState[ </div>
id.current ) : (
].formKeysData.handle_keys.some((t) => t === i) <></>
) )}
setTabsState((old) => { <Textarea
let newTabsState = _.cloneDeep(old); value={
newTabsState[ tabsState[id.current].formKeysData.input_keys[i]
}
onChange={(e) => {
if (
!tabsState[
id.current id.current
].formKeysData.input_keys[i] = e.target.value; ].formKeysData.handle_keys.some(
return newTabsState; (t) => t === i
}); )
}} )
disabled={chatKey === i} setTabsState((old) => {
placeholder="Enter text..." let newTabsState = _.cloneDeep(old);
></Textarea> newTabsState[
</div> id.current
</AccordionContent> ].formKeysData.input_keys[i] =
</AccordionItem> e.target.value;
return newTabsState;
});
}}
disabled={chatKey === i}
placeholder="Enter text..."
></Textarea>
</div>
</AccordionContent>
</AccordionItem>
</div> </div>
) )
)} )}