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

changed sideBarDraggableComponent to forwardRef

Browse source
This commit is contained in:
Lucas Oliveira 2024-01-06 14:46:49 -03:00
commit bacab7dbc1
1 changed files with 128 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,12 @@
import { DragEventHandler, useContext, 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 { AuthContext } from "../../../../../contexts/authContext"; import { useDarkStore } from "../../../../../stores/darkStore";
import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
import { APIClassType } from "../../../../../types/api"; import { APIClassType } from "../../../../../types/api";
import { import {
createFlowComponent, createFlowComponent,
@ -14,143 +14,147 @@ import {
getNodeId, getNodeId,
} from "../../../../../utils/reactflowUtils"; } from "../../../../../utils/reactflowUtils";
import { removeCountFromString } from "../../../../../utils/utils"; import { removeCountFromString } from "../../../../../utils/utils";
import { useDarkStore } from "../../../../../stores/darkStore";
import useFlowsManagerStore from "../../../../../stores/flowsManagerStore";
export default function SidebarDraggableComponent({ export const SidebarDraggableComponent = forwardRef(
sectionName, (
display_name, {
itemName, sectionName,
error, display_name,
color, itemName,
onDragStart, error,
apiClass, color,
official, onDragStart,
}: { apiClass,
sectionName: string; official,
apiClass: APIClassType; }: {
display_name: string; sectionName: string;
itemName: string; apiClass: APIClassType;
error: boolean; display_name: string;
color: string; itemName: string;
onDragStart: DragEventHandler<HTMLDivElement>; error: boolean;
official: boolean; color: string;
}) { onDragStart: DragEventHandler<HTMLDivElement>;
const [open, setOpen] = useState(false); official: boolean;
const deleteComponent = useFlowsManagerStore( },
(state) => state.deleteComponent ref
); ) => {
const version = useDarkStore((state) => state.version); const [open, setOpen] = useState(false);
const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 }); const deleteComponent = useFlowsManagerStore(
const popoverRef = useRef<HTMLDivElement>(null); (state) => state.deleteComponent
);
const version = useDarkStore((state) => state.version);
const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
const popoverRef = useRef<HTMLDivElement>(null);
const handlePointerDown = (e) => { const handlePointerDown = (e) => {
if (!open) { if (!open) {
const rect = popoverRef.current?.getBoundingClientRect() ?? { const rect = popoverRef.current?.getBoundingClientRect() ?? {
left: 0, left: 0,
top: 0, top: 0,
}; };
setCursorPos({ x: e.clientX - rect.left, y: e.clientY - rect.top }); setCursorPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
}
};
function handleSelectChange(value: string) {
switch (value) {
case "share":
break;
case "download":
const type = removeCountFromString(itemName);
downloadNode(
createFlowComponent(
{ id: getNodeId(type), type, node: apiClass },
version
)
);
break;
case "delete":
deleteComponent(display_name);
break;
}
} }
}; return (
<Select
function handleSelectChange(value: string) { onValueChange={handleSelectChange}
switch (value) { onOpenChange={(change) => setOpen(change)}
case "share": open={open}
break;
case "download":
const type = removeCountFromString(itemName);
downloadNode(
createFlowComponent(
{ id: getNodeId(type), type, node: apiClass },
version
)
);
break;
case "delete":
deleteComponent(display_name);
break;
}
}
return (
<Select
onValueChange={handleSelectChange}
onOpenChange={(change) => setOpen(change)}
open={open}
key={itemName}
>
<div
onPointerDown={handlePointerDown}
onContextMenuCapture={(e) => {
e.preventDefault();
setOpen(true);
}}
key={itemName} key={itemName}
data-tooltip-id={itemName}
> >
<div <div
draggable={!error} onPointerDown={handlePointerDown}
className={ onContextMenuCapture={(e) => {
"side-bar-components-border bg-background" + e.preventDefault();
(error ? " cursor-not-allowed select-none" : "") setOpen(true);
}
style={{
borderLeftColor: color,
}}
onDragStart={onDragStart}
onDragEnd={() => {
document.body.removeChild(
document.getElementsByClassName("cursor-grabbing")[0]
);
}} }}
key={itemName}
data-tooltip-id={itemName}
> >
<div <div
data-testid={sectionName + display_name} draggable={!error}
id={sectionName + display_name} className={
className="side-bar-components-div-form" "side-bar-components-border bg-background" +
(error ? " cursor-not-allowed select-none" : "")
}
style={{
borderLeftColor: color,
}}
onDragStart={onDragStart}
onDragEnd={() => {
document.body.removeChild(
document.getElementsByClassName("cursor-grabbing")[0]
);
}}
> >
<span className="side-bar-components-text">{display_name}</span> <div
<div ref={popoverRef}> data-testid={sectionName + display_name}
<IconComponent id={sectionName + display_name}
name="Menu" className="side-bar-components-div-form"
className="side-bar-components-icon " >
/> <span className="side-bar-components-text">{display_name}</span>
<SelectTrigger></SelectTrigger> <div ref={popoverRef}>
<SelectContent <IconComponent
position="popper" name="Menu"
side="bottom" className="side-bar-components-icon "
sideOffset={-25} />
style={{ <SelectContent
position: "absolute", position="popper"
left: cursorPos.x, side="bottom"
top: cursorPos.y, sideOffset={-25}
}} style={{
> position: "absolute",
<SelectItem value={"download"}> left: cursorPos.x,
<div className="flex"> top: cursorPos.y,
<IconComponent }}
name="Download" >
className="relative top-0.5 mr-2 h-4 w-4" <SelectItem value={"download"}>
/>{" "}
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> </div>
</div> </div>
</div> </Select>
</Select> );
); }
} );
export default SidebarDraggableComponent;