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

fix(nodeToolbarComponent): fix indentation and formatting issues in the code

Browse source 
feat(nodeToolbarComponent): add support for minimal mode in the toolbar
feat(nodeToolbarComponent): add functionality to show/hide advanced options in the toolbar
This commit is contained in:
anovazzi1 2023-09-21 20:03:47 -03:00
commit 1796e349c2
1 changed files with 57 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
View file

@ -46,7 +46,7 @@ export default function NodeToolbarComponent({
if (countHandles > 1) return false; if (countHandles > 1) return false;
return true; return true;
} }
const isMinimal = canMinimize();
const { paste } = useContext(TabsContext); const { paste } = useContext(TabsContext);
const reactFlowInstance = useReactFlow(); const reactFlowInstance = useReactFlow();
const [showModalAdvanced, setShowModalAdvanced] = useState(false); const [showModalAdvanced, setShowModalAdvanced] = useState(false);
@ -131,49 +131,67 @@ export default function NodeToolbarComponent({
</a> </a>
</ShadTooltip> </ShadTooltip>
<Select onValueChange={handleSelectChange} value={selectedValue}> {isMinimal ? (
<ShadTooltip content="More" side="top"> <Select onValueChange={handleSelectChange} value={selectedValue}>
<SelectTrigger> <ShadTooltip content="More" side="top">
<div> <SelectTrigger>
<div <div>
className={classNames( <div
"relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" + className={classNames(
(nodeLength == 0 "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
? " text-muted-foreground" (nodeLength == 0
: " text-foreground") ? " text-muted-foreground"
)} : " text-foreground")
> )}
<IconComponent >
name="MoreHorizontal" <IconComponent
className="relative left-2 h-4 w-4" name="MoreHorizontal"
/> className="relative left-2 h-4 w-4"
/>
</div>
</div> </div>
</div> </SelectTrigger>
</SelectTrigger> </ShadTooltip>
</ShadTooltip> <SelectContent>
<SelectContent> <SelectItem value={getRandomKeyByssmm() + "advanced"}>
<SelectItem value={getRandomKeyByssmm() + "advanced"}>
<div className="flex">
<IconComponent
name="Settings2"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
Edit{" "}
</div>{" "}
</SelectItem>
{canMinimize() && (
<SelectItem value={getRandomKeyByssmm() + "show"}>
<div className="flex"> <div className="flex">
<IconComponent <IconComponent
name={showNode ? "Minimize2" : "Maximize2"} name="Settings2"
className="relative top-0.5 mr-2 h-4 w-4" className="relative top-0.5 mr-2 h-4 w-4"
/> />{" "}
{showNode ? "Minimize" : "Expand"} Edit{" "}
</div> </div>{" "}
</SelectItem> </SelectItem>
)} {isMinimal && (
</SelectContent> <SelectItem value={getRandomKeyByssmm() + "show"}>
</Select> <div className="flex">
<IconComponent
name={showNode ? "Minimize2" : "Maximize2"}
className="relative top-0.5 mr-2 h-4 w-4"
/>
{showNode ? "Minimize" : "Expand"}
</div>
</SelectItem>
)}
</SelectContent>
</Select>
) : (
<ShadTooltip content="Edit" side="top">
<div>
<button
onClick={() => setShowModalAdvanced(true)}
className={classNames(
"relative -ml-px inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10" +
(nodeLength == 0
? " text-muted-foreground"
: " text-foreground")
)}
>
<IconComponent name="Settings2" className="h-4 w-4 " />
</button>
</div>
</ShadTooltip>
)}
{showModalAdvanced && ( {showModalAdvanced && (
<EditNodeModal <EditNodeModal