feat: work on the edit mode

rowyio · Apr 28, 2023 · 7813d18 · 7813d18
1 parent 140c23e
commit 7813d18
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 7 deletions.
diff --git a/src/components/Workflow/Node.tsx b/src/components/Workflow/Node.tsx
@@ -1,9 +1,11 @@
 import { Box, Menu, MenuItem, MenuList, Paper, Stack } from "@mui/material";
 import { FC, PropsWithChildren, useCallback, useState } from "react";
 
-export interface INodeProps {}
+export interface INodeProps {
+  options?: Array<{ label: string; onClick: () => void }>;
+}
 
-const Node: FC<PropsWithChildren<INodeProps>> = ({ children }) => {
+const Node: FC<PropsWithChildren<INodeProps>> = ({ options, children }) => {
   const [position, setPosition] = useState<{
     top: number;
     left: number;
@@ -47,6 +49,16 @@ const Node: FC<PropsWithChildren<INodeProps>> = ({ children }) => {
         anchorPosition={position!}
       >
         <MenuList sx={{ outline: "none" }}>
+          {options?.map(({ label, onClick }) => (
+            <MenuItem
+              onClick={() => {
+                setPosition(null);
+                onClick();
+              }}
+            >
+              {label}
+            </MenuItem>
+          ))}
           <MenuItem>Rename</MenuItem>
         </MenuList>
       </Menu>

diff --git a/src/components/Workflow/ScriptNode.tsx b/src/components/Workflow/ScriptNode.tsx
@@ -1,4 +1,4 @@
-import { Box, Drawer, Stack } from "@mui/material";
+import { Drawer, Stack } from "@mui/material";
 import CodeEditor from "@src/components/CodeEditor";
 import { map } from "lodash-es";
 import { FC, SVGProps, useCallback, useEffect, useState } from "react";
@@ -94,11 +94,18 @@ const ScriptNode: FC<IScriptNodeProps> = ({}) => {
 
   return (
     <>
-      <Node>
+      <Node
+        options={[
+          {
+            label: "Edit",
+            onClick: () => {
+              setIsEditing(true);
+            },
+          },
+        ]}
+      >
         <NodeToolbar collapsed={open} onToggleCollapse={handleToggleCollapse}>
-          <Box onClick={() => setIsEditing(true)}>
-            <Icon />
-          </Box>
+          <Icon />
           <NodeName name={name} onNameChange={handleNameChange} />
         </NodeToolbar>
         <NodeParams open={!open}>