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

✨ (codeAreaModal/index.tsx): add event listener to prevent the Escape key from closing the modal

Browse source 
📝 (codeAreaModal/index.tsx): improve code readability by adding line breaks and indentation for better code organization
This commit is contained in:
cristhianzl 2024-03-19 15:00:46 -03:00
commit 35198a3abb
1 changed files with 74 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

140
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -146,75 +146,83 @@ export default function CodeAreaModal({
setCode(value); setCode(value);
}, [value, open]); }, [value, open]);
const handlePreventEsc = (e: React.KeyboardEvent) => {
if (e.key === "Escape") {
e.preventDefault();
}
};
return ( return (
<BaseModal open={open} setOpen={setOpen}> <div onKeyDown={(e) => handlePreventEsc(e)}>
<BaseModal.Trigger>{children}</BaseModal.Trigger> <BaseModal open={open} setOpen={setOpen}>
<BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}> <BaseModal.Trigger>{children}</BaseModal.Trigger>
<span className="pr-2"> {EDIT_CODE_TITLE} </span> <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
<IconComponent <span className="pr-2"> {EDIT_CODE_TITLE} </span>
name="prompts" <IconComponent
className="h-6 w-6 pl-1 text-primary " name="prompts"
aria-hidden="true" className="h-6 w-6 pl-1 text-primary "
/> aria-hidden="true"
</BaseModal.Header> />
<BaseModal.Content> </BaseModal.Header>
<Input <BaseModal.Content>
value={code} <Input
readOnly value={code}
className="absolute left-[500%] top-[500%]" readOnly
id="codeValue" className="absolute left-[500%] top-[500%]"
/> id="codeValue"
<div className="flex h-full w-full flex-col transition-all"> />
<div className="h-full w-full"> <div className="flex h-full w-full flex-col transition-all">
<AceEditor <div className="h-full w-full">
readOnly={readonly} <AceEditor
value={code} readOnly={readonly}
mode="python" value={code}
setOptions={{ fontFamily: "monospace" }} mode="python"
height={height ?? "100%"} setOptions={{ fontFamily: "monospace" }}
highlightActiveLine={true} height={height ?? "100%"}
showPrintMargin={false} highlightActiveLine={true}
fontSize={14} showPrintMargin={false}
showGutter fontSize={14}
enableLiveAutocompletion showGutter
theme={dark ? "twilight" : "github"} enableLiveAutocompletion
name="CodeEditor" theme={dark ? "twilight" : "github"}
onChange={(value) => { name="CodeEditor"
setCode(value); onChange={(value) => {
}} setCode(value);
className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600" }}
/> className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
</div> />
<div </div>
className={ <div
"whitespace-break-spaces transition-all delay-500" + className={
(error?.detail?.error !== undefined ? "h-2/6" : "h-0") "whitespace-break-spaces transition-all delay-500" +
} (error?.detail?.error !== undefined ? "h-2/6" : "h-0")
> }
<div className="mt-1 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll"> >
<h1 className="text-lg text-destructive"> <div className="mt-1 h-full max-h-[10rem] w-full overflow-y-auto overflow-x-clip text-left custom-scroll">
{error?.detail?.error} <h1 className="text-lg text-destructive">
</h1> {error?.detail?.error}
<div className="ml-2 w-full text-sm text-status-red word-break-break-word"> </h1>
<span className="w-full word-break-break-word"> <div className="ml-2 w-full text-sm text-status-red word-break-break-word">
{error?.detail?.traceback} <span className="w-full word-break-break-word">
</span> {error?.detail?.traceback}
</span>
</div>
</div> </div>
</div> </div>
<div className="flex h-fit w-full justify-end">
<Button
className="mt-3"
onClick={handleClick}
type="submit"
id="checkAndSaveBtn"
disabled={readonly}
>
Check & Save
</Button>
</div>
</div> </div>
<div className="flex h-fit w-full justify-end"> </BaseModal.Content>
<Button </BaseModal>
className="mt-3" </div>
onClick={handleClick}
type="submit"
id="checkAndSaveBtn"
disabled={readonly}
>
Check & Save
</Button>
</div>
</div>
</BaseModal.Content>
</BaseModal>
); );
} }