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; break;
case "large-thin": case "large-thin":
minWidth = "min-w-[65vw]"; minWidth = "min-w-[65vw]";
height = "h-[80vh]"; height = "h-[90vh]";
break; break;
case "md-thin": case "md-thin":
minWidth = "min-w-[85vw]"; minWidth = "min-w-[85vw]";
height = "h-[70vh]"; height = "h-[90vh]";
break; break;
case "sm-thin": case "sm-thin":
minWidth = "min-w-[65vw]"; minWidth = "min-w-[65vw]";
height = "h-[70vh]"; height = "h-[90vh]";
break; break;
case "large-h-full": 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<ContentProps>,
React.ReactElement<HeaderProps>, React.ReactElement<HeaderProps>,
React.ReactElement<TriggerProps>?, React.ReactElement<TriggerProps>?,
React.ReactElement<FooterProps>? React.ReactElement<FooterProps>?,
]; ];
open?: boolean; open?: boolean;
setOpen?: (open: boolean) => void; setOpen?: (open: boolean) => void;
@ -138,16 +138,16 @@ function BaseModal({
onSubmit, onSubmit,
}: BaseModalProps) { }: BaseModalProps) {
const headerChild = React.Children.toArray(children).find( 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( 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( 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( 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); let { minWidth, height } = switchCaseModalSize(size);
@ -164,17 +164,21 @@ function BaseModal({
{type === "modal" ? ( {type === "modal" ? (
<Modal open={open} onOpenChange={setOpen}> <Modal open={open} onOpenChange={setOpen}>
{triggerChild} {triggerChild}
<ModalContent className={cn(minWidth, "duration-300")}> <ModalContent
<div className="truncate-doubleline word-break-break-word"> className={cn(minWidth, height, "flex flex-col duration-300")}
>
<div className="flex-shrink-0 truncate-doubleline word-break-break-word">
{headerChild} {headerChild}
</div> </div>
<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} {ContentChild}
</div> </div>
{ContentFooter && ( {ContentFooter && (
<div className="flex flex-row-reverse">{ContentFooter}</div> <div className="flex flex-shrink-0 flex-row-reverse">
{ContentFooter}
</div>
)} )}
</ModalContent> </ModalContent>
</Modal> </Modal>
@ -184,7 +188,7 @@ function BaseModal({
<DialogContent <DialogContent
className={cn(minWidth, height, "flex flex-col duration-300")} 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} {headerChild}
</div> </div>
{onSubmit ? ( {onSubmit ? (
@ -193,26 +197,30 @@ function BaseModal({
event.preventDefault(); event.preventDefault();
onSubmit(); onSubmit();
}} }}
className="flex flex-1 flex-col gap-6" className="flex min-h-0 flex-1 flex-col gap-6"
> >
<div <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} {ContentChild}
</div> </div>
{ContentFooter && ( {ContentFooter && (
<div className="flex flex-row-reverse">{ContentFooter}</div> <div className="flex flex-shrink-0 flex-row-reverse">
{ContentFooter}
</div>
)} )}
</Form.Root> </Form.Root>
) : ( ) : (
<> <>
<div <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} {ContentChild}
</div> </div>
{ContentFooter && ( {ContentFooter && (
<div className="flex flex-row-reverse">{ContentFooter}</div> <div className="flex flex-shrink-0 flex-row-reverse">
{ContentFooter}
</div>
)} )}
</> </>
)} )}