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

fix(sideBarDraggableComponent): fix alignment and positioning of select trigger and select content

Browse source 
feat(sideBarDraggableComponent): add support for download option in select content
feat(sideBarDraggableComponent): add support for delete option in select content for non-official items
This commit is contained in:
cristhianzl 2024-01-17 16:57:02 -03:00
commit bd0d0cb1b2
1 changed files with 36 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx
View file

@ -1,3 +1,4 @@
import { SelectTrigger } from "@radix-ui/react-select";
import { DragEventHandler, forwardRef, useRef, useState } from "react"; import { DragEventHandler, forwardRef, useRef, useState } from "react";
import IconComponent from "../../../../../components/genericIconComponent"; import IconComponent from "../../../../../components/genericIconComponent";
import { import {
@ -106,50 +107,48 @@ export const SidebarDraggableComponent = forwardRef(
); );
}} }}
> >
<div <SelectTrigger className="w-full text-left">
data-testid={sectionName + display_name} <div
id={sectionName + display_name} data-testid={sectionName + display_name}
className="side-bar-components-div-form" id={sectionName + display_name}
> className="side-bar-components-div-form"
<span className="side-bar-components-text">{display_name}</span> >
<div ref={popoverRef}> <span className="side-bar-components-text">{display_name}</span>
<IconComponent <div ref={popoverRef}>
name="Menu" <IconComponent
className="side-bar-components-icon " name="Menu"
/> className="side-bar-components-icon "
<SelectContent />
position="popper" <SelectContent
side="bottom" position="popper"
sideOffset={-25} side="bottom"
style={{ sideOffset={-15}
position: "absolute", alignOffset={25}
left: cursorPos.x, >
top: cursorPos.y, <SelectItem value={"download"}>
}}
>
<SelectItem value={"download"}>
<div className="flex">
<IconComponent
name="Download"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
Download{" "}
</div>{" "}
</SelectItem>
{!official && (
<SelectItem value={"delete"}>
<div className="flex"> <div className="flex">
<IconComponent <IconComponent
name="Trash2" name="Download"
className="relative top-0.5 mr-2 h-4 w-4" className="relative top-0.5 mr-2 h-4 w-4"
/>{" "} />{" "}
Delete{" "} Download{" "}
</div>{" "} </div>{" "}
</SelectItem> </SelectItem>
)} {!official && (
</SelectContent> <SelectItem value={"delete"}>
<div className="flex">
<IconComponent
name="Trash2"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
Delete{" "}
</div>{" "}
</SelectItem>
)}
</SelectContent>
</div>
</div> </div>
</div> </SelectTrigger>
</div> </div>
</div> </div>
</Select> </Select>