From 84a2231142671c1940177d80b9812ffc73bae598 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 10 Aug 2023 12:54:35 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore(frontend):=20add=20@radix-?= =?UTF-8?q?ui/react-select=20package=20to=20package.json=20dependencies=20?= =?UTF-8?q?=F0=9F=94=A7=20chore(frontend):=20add=20SelectTrigger=20compone?= =?UTF-8?q?nt=20to=20handle=20select=20triggers=20in=20UI=20components=20?= =?UTF-8?q?=F0=9F=94=A7=20chore(frontend):=20add=20Select=20component=20to?= =?UTF-8?q?=20handle=20select=20inputs=20in=20UI=20components=20?= =?UTF-8?q?=F0=9F=94=A7=20chore(frontend):=20add=20EditNodeModal=20compone?= =?UTF-8?q?nt=20to=20handle=20editing=20of=20node=20data=20in=20modals?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The changes were made to add support for the @radix-ui/react-select package to the frontend package.json dependencies. Additionally, the SelectTrigger and Select components were added to handle select triggers and select inputs in the UI components. Finally, the EditNodeModal component was added to handle the editing of node data in modals. 🐛 fix(nodeToolbarComponent): fix import statements and add missing dependencies ✨ feat(nodeToolbarComponent): add select-trigger component and implement functionality to handle select change and show/hide modal based on selection --- src/frontend/package-lock.json | 52 ++++++++ src/frontend/package.json | 1 + .../src/components/ui/select-trigger.tsx | 116 +++++++++++++++++ src/frontend/src/components/ui/select.tsx | 121 ++++++++++++++++++ .../src/modals/EditNodeModal/index.tsx | 9 +- .../components/nodeToolbarComponent/index.tsx | 69 +++++++++- 6 files changed, 364 insertions(+), 4 deletions(-) create mode 100644 src/frontend/src/components/ui/select-trigger.tsx create mode 100644 src/frontend/src/components/ui/select.tsx diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index ed3eacd4f..4cd812e5c 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -22,6 +22,7 @@ "@radix-ui/react-menubar": "^1.0.3", "@radix-ui/react-popover": "^1.0.6", "@radix-ui/react-progress": "^1.0.3", + "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", @@ -1029,6 +1030,14 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@radix-ui/number": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", + "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, "node_modules/@radix-ui/primitive": { "version": "1.0.1", "license": "MIT", @@ -1652,6 +1661,49 @@ } } }, + "node_modules/@radix-ui/react-select": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.2.tgz", + "integrity": "sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/number": "1.0.1", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.4", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.3", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.2", + "@radix-ui/react-portal": "1.0.3", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-separator": { "version": "1.0.3", "license": "MIT", diff --git a/src/frontend/package.json b/src/frontend/package.json index e3814c1ad..dd0cadeeb 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -17,6 +17,7 @@ "@radix-ui/react-menubar": "^1.0.3", "@radix-ui/react-popover": "^1.0.6", "@radix-ui/react-progress": "^1.0.3", + "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", diff --git a/src/frontend/src/components/ui/select-trigger.tsx b/src/frontend/src/components/ui/select-trigger.tsx new file mode 100644 index 000000000..438f3d188 --- /dev/null +++ b/src/frontend/src/components/ui/select-trigger.tsx @@ -0,0 +1,116 @@ +"use client" + +import * as React from "react" +import * as SelectPrimitive from "@radix-ui/react-select" +import { Check, ChevronDown } from "lucide-react" +import { cn } from "../../utils/utils" + + +const Select = SelectPrimitive.Root + +const SelectGroup = SelectPrimitive.Group + +const SelectValue = SelectPrimitive.Value + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + + +)) +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + {children} + + + +)) +SelectContent.displayName = SelectPrimitive.Content.displayName + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectLabel.displayName = SelectPrimitive.Label.displayName + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + +)) +SelectItem.displayName = SelectPrimitive.Item.displayName + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectSeparator.displayName = SelectPrimitive.Separator.displayName + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, +} diff --git a/src/frontend/src/components/ui/select.tsx b/src/frontend/src/components/ui/select.tsx new file mode 100644 index 000000000..6398be1e2 --- /dev/null +++ b/src/frontend/src/components/ui/select.tsx @@ -0,0 +1,121 @@ +"use client" + +import * as React from "react" +import * as SelectPrimitive from "@radix-ui/react-select" +import { Check, ChevronDown } from "lucide-react" +import { cn } from "../../utils/utils" + + +const Select = SelectPrimitive.Root + +const SelectGroup = SelectPrimitive.Group + +const SelectValue = SelectPrimitive.Value + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + + + +)) +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + {children} + + + +)) +SelectContent.displayName = SelectPrimitive.Content.displayName + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectLabel.displayName = SelectPrimitive.Label.displayName + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + + {children} + +)) +SelectItem.displayName = SelectPrimitive.Item.displayName + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectSeparator.displayName = SelectPrimitive.Separator.displayName + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, +} diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 4b4b55568..70331b7ef 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -35,19 +35,23 @@ const EditNodeModal = forwardRef( setData, nodeLength, children, + open, + onClose }: { data: NodeDataType; setData: (data: NodeDataType) => void; nodeLength: number; children: ReactNode; + open?: boolean; + onClose?: (close: boolean) => void; }, ref ) => { - const [modalOpen, setModalOpen] = useState(false); + + const [modalOpen, setModalOpen] = useState(open ?? false); const [myData, setMyData] = useState(data); const { setTabsState, tabId } = useContext(TabsContext); const { reactFlowInstance } = useContext(typesContext); - let disabled = reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? false; @@ -70,6 +74,7 @@ const EditNodeModal = forwardRef( useEffect(() => { setMyData(data); // reset data to what it is on node when opening modal + onClose(modalOpen); }, [modalOpen]); return ( diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 06d8ea06d..daf6b84a7 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -2,9 +2,15 @@ import { useContext, useState } from "react"; import { useReactFlow } from "reactflow"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; import IconComponent from "../../../../components/genericIconComponent"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, +} from "../../../../components/ui/select-trigger"; import { TabsContext } from "../../../../contexts/tabsContext"; import EditNodeModal from "../../../../modals/EditNodeModal"; -import { classNames } from "../../../../utils/utils"; +import { classNames, getRandomKeyByssmm } from "../../../../utils/utils"; export default function NodeToolbarComponent({ data, setData, deleteNode }) { const [nodeLength, setNodeLength] = useState( @@ -25,6 +31,17 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }) { const { paste } = useContext(TabsContext); const reactFlowInstance = useReactFlow(); + const [showModalAdvanced, setShowModalAdvanced] = useState(false); + const [selectedValue, setSelectedValue] = useState(""); + + const handleSelectChange = (event) => { + setSelectedValue(event); + event.includes("advanced") + ? setShowModalAdvanced(true) + : setShowModalAdvanced(false); + console.log(showModalAdvanced); + }; + return ( <>
@@ -92,6 +109,54 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }) { + + + {showModalAdvanced && ( + { + setShowModalAdvanced(modal); + }} + > + <> + + )} + + {/*
- + */}