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

Refactor sidebar draggable component

Browse source
This commit is contained in:
anovazzi1 2024-01-17 17:27:05 -03:00
commit 7b889fe651
1 changed files with 39 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
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 {
Select, Select,
SelectContent, SelectContent,
SelectItem, SelectItem,
SelectTrigger,
} from "../../../../../components/ui/select-custom"; } from "../../../../../components/ui/select-custom";
import { useDarkStore } from "../../../../../stores/darkStore"; import { useDarkStore } from "../../../../../stores/darkStore";
import useFlowsManagerStore from "../../../../../stores/flowsManagerStore"; import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
@ -107,48 +107,51 @@ export const SidebarDraggableComponent = forwardRef(
); );
}} }}
> >
<SelectTrigger className="w-full text-left"> <div
<div data-testid={sectionName + display_name}
data-testid={sectionName + display_name} id={sectionName + display_name}
id={sectionName + display_name} className="side-bar-components-div-form"
className="side-bar-components-div-form" >
> <span className="side-bar-components-text">{display_name}</span>
<span className="side-bar-components-text">{display_name}</span> <div ref={popoverRef}>
<div ref={popoverRef}> <IconComponent
<IconComponent name="Menu"
name="Menu" className="side-bar-components-icon "
className="side-bar-components-icon " />
/> <SelectTrigger></SelectTrigger>
<SelectContent <SelectContent
position="popper" position="popper"
side="bottom" side="bottom"
sideOffset={-15} sideOffset={-25}
alignOffset={25} style={{
> position: "absolute",
<SelectItem value={"download"}> left: cursorPos.x,
top: cursorPos.y,
}}
>
<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="Download" name="Trash2"
className="relative top-0.5 mr-2 h-4 w-4" className="relative top-0.5 mr-2 h-4 w-4"
/>{" "} />{" "}
Download{" "} Delete{" "}
</div>{" "} </div>{" "}
</SelectItem> </SelectItem>
{!official && ( )}
<SelectItem value={"delete"}> </SelectContent>
<div className="flex">
<IconComponent
name="Trash2"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
Delete{" "}
</div>{" "}
</SelectItem>
)}
</SelectContent>
</div>
</div> </div>
</SelectTrigger> </div>
</div> </div>
</div> </div>
</Select> </Select>