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

Fixed Playground modal and size

Browse source
This commit is contained in:
Lucas Oliveira 2024-06-06 16:21:15 -03:00
commit 78e656f4c0
2 changed files with 26 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/frontend/src/modals/baseModal/helpers/switch-case-size.ts
View file

@ -44,17 +44,17 @@ export const switchCaseModalSize = (size: string) => {
break;
case "large-thin":
minWidth = "min-w-[65vw]";
height = "h-[80vh]";
height = "h-[90vh]";
break;
case "md-thin":
minWidth = "min-w-[85vw]";
height = "h-[70vh]";
height = "h-[90vh]";
break;
case "sm-thin":
minWidth = "min-w-[65vw]";
height = "h-[70vh]";
height = "h-[90vh]";
break;
case "large-h-full":

38
src/frontend/src/modals/baseModal/index.tsx
View file

@ -103,7 +103,7 @@ interface BaseModalProps {
React.ReactElement<ContentProps>,
React.ReactElement<HeaderProps>,
React.ReactElement<TriggerProps>?,
React.ReactElement<FooterProps>?
React.ReactElement<FooterProps>?,
];
open?: boolean;
setOpen?: (open: boolean) => void;
@ -138,16 +138,16 @@ function BaseModal({
onSubmit,
}: BaseModalProps) {
const headerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Header
(child) => (child as React.ReactElement).type === Header,
);
const triggerChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Trigger
(child) => (child as React.ReactElement).type === Trigger,
);
const ContentChild = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Content
(child) => (child as React.ReactElement).type === Content,
);
const ContentFooter = React.Children.toArray(children).find(
(child) => (child as React.ReactElement).type === Footer
(child) => (child as React.ReactElement).type === Footer,
);
let { minWidth, height } = switchCaseModalSize(size);
@ -164,17 +164,21 @@ function BaseModal({
{type === "modal" ? (
<Modal open={open} onOpenChange={setOpen}>
{triggerChild}
<ModalContent className={cn(minWidth, "duration-300")}>
<div className="truncate-doubleline word-break-break-word">
<ModalContent
className={cn(minWidth, height, "flex flex-col duration-300")}
>
<div className="flex-shrink-0 truncate-doubleline word-break-break-word">
{headerChild}
</div>
<div
className={`flex flex-col ${height} w-full transition-all duration-300`}
className={`flex w-full flex-1 flex-col transition-all duration-300`}
>
{ContentChild}
</div>
{ContentFooter && (
<div className="flex flex-row-reverse">{ContentFooter}</div>
<div className="flex flex-shrink-0 flex-row-reverse">
{ContentFooter}
</div>
)}
</ModalContent>
</Modal>
@ -184,7 +188,7 @@ function BaseModal({
<DialogContent
className={cn(minWidth, height, "flex flex-col duration-300")}
>
<div className="truncate-doubleline word-break-break-word">
<div className="flex-shrink-0 truncate-doubleline word-break-break-word">
{headerChild}
</div>
{onSubmit ? (
@ -193,26 +197,30 @@ function BaseModal({
event.preventDefault();
onSubmit();
}}
className="flex flex-1 flex-col gap-6"
className="flex min-h-0 flex-1 flex-col gap-6"
>
<div
className={`flex w-full flex-1 flex-col transition-all duration-300`}
className={`flex w-full flex-1 flex-col overflow-hidden transition-all duration-300`}
>
{ContentChild}
</div>
{ContentFooter && (
<div className="flex flex-row-reverse">{ContentFooter}</div>
<div className="flex flex-shrink-0 flex-row-reverse">
{ContentFooter}
</div>
)}
</Form.Root>
) : (
<>
<div
className={`flex w-full flex-1 flex-col transition-all duration-300`}
className={`flex min-h-0 w-full flex-1 flex-col transition-all duration-300`}
>
{ContentChild}
</div>
{ContentFooter && (
<div className="flex flex-row-reverse">{ContentFooter}</div>
<div className="flex flex-shrink-0 flex-row-reverse">
{ContentFooter}
</div>
)}
</>
)}