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

refactor(sideBarDraggableComponent): remove unused useRef and useState hooks to simplify code

Browse source 
feat(sideBarDraggableComponent): add right-click functionality to open the select menu for additional options
This commit is contained in:
anovazzi1 2023-10-03 17:19:20 -03:00
commit 3abbd5c5e4
2 changed files with 113 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

96
src/frontend/package-lock.json generated
View file

@ -3780,9 +3780,9 @@
"integrity": "sha512-xPSg0jm4mqgEkNhowKgZFBNtwoEwF6gJ4Dhww+GFpm3IgtNseHQZ5IqdNwnquZEoANxyDAKDRAdVo4Z72VvD/g==" "integrity": "sha512-xPSg0jm4mqgEkNhowKgZFBNtwoEwF6gJ4Dhww+GFpm3IgtNseHQZ5IqdNwnquZEoANxyDAKDRAdVo4Z72VvD/g=="
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "16.18.55", "version": "16.18.57",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.55.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.57.tgz",
"integrity": "sha512-Y1zz/LIuJek01+hlPNzzXQhmq/Z2BCP96j18MSXC0S0jSu/IG4FFxmBs7W4/lI2vPJ7foVfEB0hUVtnOjnCiTg==", "integrity": "sha512-piPoDozdPaX1hNWFJQzzgWqE40gh986VvVx/QO9RU4qYRE55ld7iepDVgZ3ccGUw0R4wge0Oy1dd+3xOQNkkUQ==",
"devOptional": true "devOptional": true
}, },
"node_modules/@types/parse-json": { "node_modules/@types/parse-json": {
@ -4516,9 +4516,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001542", "version": "1.0.30001543",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001543.tgz",
"integrity": "sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA==", "integrity": "sha512-qxdO8KPWPQ+Zk6bvNpPeQIOH47qZSYdFZd6dXQzb2KzhnSXju4Kd7H1PkSJx6NICSMgo/IhRZRhhfPTHYpJUCA==",
"funding": [ "funding": [
{ {
"type": "opencollective", "type": "opencollective",
@ -5236,9 +5236,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.538", "version": "1.4.540",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.538.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.540.tgz",
"integrity": "sha512-1a2m63NEookb1beNFTGDihgF3CKL7ksZ7PSA0VloON5DpTEhnOVgaDes8xkrDhkXRxlcN8JymQDGnv+Nn+uvhg==" "integrity": "sha512-aoCqgU6r9+o9/S7wkcSbmPRFi7OWZWiXS9rtjEd+Ouyu/Xyw5RSq2XN8s5Qp8IaFOLiRrhQCphCIjAxgG3eCAg=="
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
"version": "8.0.0", "version": "8.0.0",
@ -5727,7 +5727,8 @@
"node_modules/function-bind": { "node_modules/function-bind": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
"dev": true
}, },
"node_modules/functions-have-names": { "node_modules/functions-have-names": {
"version": "1.2.3", "version": "1.2.3",
@ -5859,12 +5860,9 @@
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
}, },
"node_modules/has": { "node_modules/has": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==",
"dependencies": {
"function-bind": "^1.1.1"
},
"engines": { "engines": {
"node": ">= 0.4.0" "node": ">= 0.4.0"
} }
@ -6801,9 +6799,9 @@
} }
}, },
"node_modules/katex": { "node_modules/katex": {
"version": "0.16.8", "version": "0.16.9",
"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz", "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.9.tgz",
"integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==", "integrity": "sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==",
"funding": [ "funding": [
"https://opencollective.com/katex", "https://opencollective.com/katex",
"https://github.com/sponsors/katex" "https://github.com/sponsors/katex"
@ -10744,9 +10742,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "4.4.9", "version": "4.4.10",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.10.tgz",
"integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==", "integrity": "sha512-TzIjiqx9BEXF8yzYdF2NTf1kFFbjMjUSV0LFZ3HyHoI3SGSPLnnFUKiIQtL3gl2AjHvMrprOvQ3amzaHgQlAxw==",
"dependencies": { "dependencies": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",
"postcss": "^8.4.27", "postcss": "^8.4.27",
@ -11392,9 +11390,9 @@
} }
}, },
"node_modules/zod": { "node_modules/zod": {
"version": "3.22.2", "version": "3.22.3",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.22.2.tgz", "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.3.tgz",
"integrity": "sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==", "integrity": "sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug==",
"funding": { "funding": {
"url": "https://github.com/sponsors/colinhacks" "url": "https://github.com/sponsors/colinhacks"
} }
@ -13720,9 +13718,9 @@
"integrity": "sha512-xPSg0jm4mqgEkNhowKgZFBNtwoEwF6gJ4Dhww+GFpm3IgtNseHQZ5IqdNwnquZEoANxyDAKDRAdVo4Z72VvD/g==" "integrity": "sha512-xPSg0jm4mqgEkNhowKgZFBNtwoEwF6gJ4Dhww+GFpm3IgtNseHQZ5IqdNwnquZEoANxyDAKDRAdVo4Z72VvD/g=="
}, },
"@types/node": { "@types/node": {
"version": "16.18.55", "version": "16.18.57",
"resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.55.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.57.tgz",
"integrity": "sha512-Y1zz/LIuJek01+hlPNzzXQhmq/Z2BCP96j18MSXC0S0jSu/IG4FFxmBs7W4/lI2vPJ7foVfEB0hUVtnOjnCiTg==", "integrity": "sha512-piPoDozdPaX1hNWFJQzzgWqE40gh986VvVx/QO9RU4qYRE55ld7iepDVgZ3ccGUw0R4wge0Oy1dd+3xOQNkkUQ==",
"devOptional": true "devOptional": true
}, },
"@types/parse-json": { "@types/parse-json": {
@ -14228,9 +14226,9 @@
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==" "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
}, },
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001542", "version": "1.0.30001543",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001542.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001543.tgz",
"integrity": "sha512-UrtAXVcj1mvPBFQ4sKd38daP8dEcXXr5sQe6QNNinaPd0iA/cxg9/l3VrSdL73jgw5sKyuQ6jNgiKO12W3SsVA==" "integrity": "sha512-qxdO8KPWPQ+Zk6bvNpPeQIOH47qZSYdFZd6dXQzb2KzhnSXju4Kd7H1PkSJx6NICSMgo/IhRZRhhfPTHYpJUCA=="
}, },
"ccount": { "ccount": {
"version": "2.0.1", "version": "2.0.1",
@ -14748,9 +14746,9 @@
} }
}, },
"electron-to-chromium": { "electron-to-chromium": {
"version": "1.4.538", "version": "1.4.540",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.538.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.540.tgz",
"integrity": "sha512-1a2m63NEookb1beNFTGDihgF3CKL7ksZ7PSA0VloON5DpTEhnOVgaDes8xkrDhkXRxlcN8JymQDGnv+Nn+uvhg==" "integrity": "sha512-aoCqgU6r9+o9/S7wkcSbmPRFi7OWZWiXS9rtjEd+Ouyu/Xyw5RSq2XN8s5Qp8IaFOLiRrhQCphCIjAxgG3eCAg=="
}, },
"emoji-regex": { "emoji-regex": {
"version": "8.0.0", "version": "8.0.0",
@ -15092,7 +15090,8 @@
"function-bind": { "function-bind": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
"dev": true
}, },
"functions-have-names": { "functions-have-names": {
"version": "1.2.3", "version": "1.2.3",
@ -15188,12 +15187,9 @@
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
}, },
"has": { "has": {
"version": "1.0.3", "version": "1.0.4",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ=="
"requires": {
"function-bind": "^1.1.1"
}
}, },
"has-bigints": { "has-bigints": {
"version": "1.0.2", "version": "1.0.2",
@ -15831,9 +15827,9 @@
} }
}, },
"katex": { "katex": {
"version": "0.16.8", "version": "0.16.9",
"resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz", "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.9.tgz",
"integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==", "integrity": "sha512-fsSYjWS0EEOwvy81j3vRA8TEAhQhKiqO+FQaKWp0m39qwOzHVBgAUBIXWj1pB+O2W3fIpNa6Y9KSKCVbfPhyAQ==",
"requires": { "requires": {
"commander": "^8.3.0" "commander": "^8.3.0"
}, },
@ -18413,9 +18409,9 @@
} }
}, },
"vite": { "vite": {
"version": "4.4.9", "version": "4.4.10",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.10.tgz",
"integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==", "integrity": "sha512-TzIjiqx9BEXF8yzYdF2NTf1kFFbjMjUSV0LFZ3HyHoI3SGSPLnnFUKiIQtL3gl2AjHvMrprOvQ3amzaHgQlAxw==",
"requires": { "requires": {
"esbuild": "^0.18.10", "esbuild": "^0.18.10",
"fsevents": "~2.3.2", "fsevents": "~2.3.2",
@ -18749,9 +18745,9 @@
"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==" "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
}, },
"zod": { "zod": {
"version": "3.22.2", "version": "3.22.3",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.22.2.tgz", "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.3.tgz",
"integrity": "sha512-wvWkphh5WQsJbVk1tbx1l1Ly4yg+XecD+Mq280uBGt9wa5BKSWf4Mhp6GmrkPixhMxmabYY7RbzlwVP32pbGCg==" "integrity": "sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug=="
}, },
"zustand": { "zustand": {
"version": "4.4.2", "version": "4.4.2",

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

@ -1,4 +1,4 @@
import { DragEventHandler, useRef, useState } from "react"; import { DragEventHandler, useRef } from "react";
import IconComponent from "../../../../../components/genericIconComponent"; import IconComponent from "../../../../../components/genericIconComponent";
import { import {
Select, Select,
@ -20,101 +20,79 @@ export default function SidebarDraggableComponent({
color: string; color: string;
onDragStart: DragEventHandler<HTMLDivElement>; onDragStart: DragEventHandler<HTMLDivElement>;
}) { }) {
const isOpen = useRef(false); const open = useRef(false);
const [editMode, setEditMode] = useState(false);
const inside = useRef(false);
return ( return (
<div key={itemName} data-tooltip-id={itemName}> <Select
onOpenChange={(change) => (open.current = change)}
open={open.current}
>
<div <div
draggable={!error} onContextMenuCapture={(e) => {
className={ e.preventDefault();
"side-bar-components-border bg-background" + open.current = true;
(error ? " cursor-not-allowed select-none" : "")
}
style={{
borderLeftColor: color,
}}
onDragStart={onDragStart}
onDragEnd={() => {
document.body.removeChild(
document.getElementsByClassName("cursor-grabbing")[0]
);
}} }}
key={itemName}
data-tooltip-id={itemName}
> >
<div className="side-bar-components-div-form"> <div
<span className="side-bar-components-text">{display_name}</span> draggable={!error}
<div className={
onMouseLeave={() => { "side-bar-components-border bg-background" +
if (!isOpen.current) { (error ? " cursor-not-allowed select-none" : "")
inside.current = false; }
setEditMode(false); style={{
} borderLeftColor: color,
}} }}
onMouseOver={() => { onDragStart={onDragStart}
inside.current = true; onDragEnd={() => {
setTimeout(() => { document.body.removeChild(
if (inside.current) setEditMode(true); document.getElementsByClassName("cursor-grabbing")[0]
}, 800); );
}} }}
> >
{editMode ? ( <div className="side-bar-components-div-form">
<Select <span className="side-bar-components-text">{display_name}</span>
onOpenChange={(open) => { <div>
if (!open) { <SelectTrigger>
isOpen.current = false; <IconComponent
inside.current = false; name="Menu"
setEditMode(false); className="side-bar-components-icon "
} else { />
isOpen.current = true; </SelectTrigger>
} <SelectContent>
}} <SelectItem value={"share"}>
> <div className="flex">
<SelectTrigger> <IconComponent
<IconComponent name="Share2"
name="MoreHorizontal" className="relative top-0.5 mr-2 h-4 w-4"
className="side-bar-components-icon " />{" "}
/> Share{" "}
</SelectTrigger> </div>{" "}
<SelectContent> </SelectItem>
<SelectItem value={"share"}> <SelectItem value={"download"}>
<div className="flex"> <div className="flex">
<IconComponent <IconComponent
name="Share2" name="Download"
className="relative top-0.5 mr-2 h-4 w-4" className="relative top-0.5 mr-2 h-4 w-4"
/>{" "} />{" "}
Share{" "} Download{" "}
</div>{" "} </div>{" "}
</SelectItem> </SelectItem>
<SelectItem value={"download"}> <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>
<SelectItem value={"delete"}> </SelectContent>
<div className="flex"> </div>
<IconComponent
name="Trash2"
className="relative top-0.5 mr-2 h-4 w-4"
/>{" "}
Delete{" "}
</div>{" "}
</SelectItem>
</SelectContent>
</Select>
) : (
<IconComponent
name="Menu"
className="side-bar-components-icon "
/>
)}
</div> </div>
</div> </div>
</div> </div>
</div> </Select>
); );
} }