disabled size change at IO view

This commit is contained in:
Lucas Oliveira 2024-03-30 23:07:17 +02:00
commit 2b63863487

View file

@ -106,13 +106,7 @@ export default function IOModal({
return ( return (
<BaseModal <BaseModal
size={ size={selectedTab === 0 ? "large-thin" : "large"}
haveChat || selectedViewField
? selectedTab === 0
? "large-thin"
: "large"
: "small"
}
open={open} open={open}
setOpen={setOpen} setOpen={setOpen}
disable={disable} disable={disable}
@ -135,8 +129,7 @@ export default function IOModal({
{selectedTab !== 0 && ( {selectedTab !== 0 && (
<div <div
className={cn( className={cn(
"mr-6 flex h-full w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300", "mr-6 flex h-full w-2/6 w-2/6 flex-shrink-0 flex-col justify-start transition-all duration-300"
haveChat || selectedViewField ? "w-2/6" : "w-full"
)} )}
> >
<Tabs <Tabs
@ -299,54 +292,54 @@ export default function IOModal({
</div> </div>
)} )}
{haveChat || selectedViewField ? ( <div className="flex h-full min-w-96 flex-grow">
<div className="flex h-full min-w-96 flex-grow"> {selectedViewField && (
{selectedViewField && (
<div
className={cn(
"flex h-full w-full flex-col items-start gap-4 pt-4",
!selectedViewField ? "hidden" : ""
)}
>
<div className="font-xl flex items-center justify-center gap-3 font-semibold">
<button onClick={() => setSelectedViewField(undefined)}>
<IconComponent
name={"ArrowLeft"}
className="h-6 w-6"
></IconComponent>
</button>
{
nodes.find((node) => node.id === selectedViewField.id)
?.data.node.display_name
}
</div>
<div className="h-full w-full">
{inputs.some(
(input) => input.id === selectedViewField.id
) ? (
<IOFieldView
type={InputOutput.INPUT}
left={false}
fieldType={selectedViewField.type!}
fieldId={selectedViewField.id!}
/>
) : (
<IOFieldView
type={InputOutput.OUTPUT}
left={false}
fieldType={selectedViewField.type!}
fieldId={selectedViewField.id!}
/>
)}
</div>
</div>
)}
<div <div
className={cn( className={cn(
"flex h-full w-full", "flex h-full w-full flex-col items-start gap-4 pt-4",
selectedViewField ? "hidden" : "" !selectedViewField ? "hidden" : ""
)} )}
> >
<div className="font-xl flex items-center justify-center gap-3 font-semibold">
<button onClick={() => setSelectedViewField(undefined)}>
<IconComponent
name={"ArrowLeft"}
className="h-6 w-6"
></IconComponent>
</button>
{
nodes.find((node) => node.id === selectedViewField.id)
?.data.node.display_name
}
</div>
<div className="h-full w-full">
{inputs.some(
(input) => input.id === selectedViewField.id
) ? (
<IOFieldView
type={InputOutput.INPUT}
left={false}
fieldType={selectedViewField.type!}
fieldId={selectedViewField.id!}
/>
) : (
<IOFieldView
type={InputOutput.OUTPUT}
left={false}
fieldType={selectedViewField.type!}
fieldId={selectedViewField.id!}
/>
)}
</div>
</div>
)}
<div
className={cn(
"flex h-full w-full",
selectedViewField ? "hidden" : ""
)}
>
{haveChat ? (
<ChatView <ChatView
sendMessage={sendMessage} sendMessage={sendMessage}
chatValue={chatValue} chatValue={chatValue}
@ -354,11 +347,13 @@ export default function IOModal({
lockChat={lockChat} lockChat={lockChat}
setLockChat={setLockChat} setLockChat={setLockChat}
/> />
</div> ) : (
<span className="flex h-full w-full items-center justify-center font-thin text-muted-foreground">
Select an IO component to view
</span>
)}
</div> </div>
) : ( </div>
<div className="absolute bottom-8 right-8"></div>
)}
</div> </div>
</div> </div>
</BaseModal.Content> </BaseModal.Content>