feat: name edit mode

rowyio · Apr 11, 2023 · 3073148 · 3073148
1 parent 69adcff
commit 3073148
Showing 1 changed file with 101 additions and 52 deletions.
diff --git a/src/stories/node/OpenApiNode.tsx b/src/stories/node/OpenApiNode.tsx
@@ -1,7 +1,7 @@
 import { Box, Divider, Paper, Stack, Tooltip, Typography } from "@mui/material";
 import { motion } from "framer-motion";
 import { map } from "lodash-es";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { schema } from "./schema";
 
 export interface OpenApiNodeProps {
@@ -143,6 +143,101 @@ const Params = ({ meth, collapsed }: any) => {
   );
 };
 
+const NodeName = ({ meth }: any) => {
+  const [editMode, setEditMode] = useState(false);
+
+  const handleKeydown = useCallback((e: any) => {
+    if (e.keyCode === 27 || e.keyCode === 13) {
+      setEditMode(false);
+    }
+  }, []);
+
+  if (editMode) {
+    return (
+      <Box
+        component="input"
+        value={meth.summary}
+        autoFocus
+        onKeyDown={handleKeydown}
+        bgcolor="background.paper"
+        onBlur={() => {
+          setEditMode(false);
+        }}
+        sx={{
+          border: 1,
+          borderColor: "primary.main",
+          borderRadius: 2,
+          outline: "none",
+          px: 1,
+          height: 28,
+          // width: 136,
+          textAlign: "center",
+        }}
+      />
+    );
+  } else {
+    return (
+      <Tooltip title={meth.description}>
+        <Typography
+          width={112}
+          variant="body2"
+          fontSize={12}
+          overflow="hidden"
+          textOverflow="ellipsis"
+          textAlign="center"
+          onDoubleClick={(e) => {
+            setEditMode(true);
+          }}
+          sx={{ whiteSpace: "nowrap" }}
+        >
+          {meth.summary}
+        </Typography>
+      </Tooltip>
+    );
+  }
+};
+
+const NodeHeader = ({ meth, collapsed, setCollapsed }: any) => {
+  return (
+    <Stack px={1.5} pt={1.5} pb={1.25} onClick={() => setCollapsed(!collapsed)}>
+      <Stack
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Stack
+          alignItems="center"
+          justifyContent="center"
+          width={20}
+          height={20}
+          overflow="hidden"
+        >
+          <TableIcon />
+        </Stack>
+        <div onClick={(e) => e.stopPropagation()}>
+          <NodeName meth={meth} />
+        </div>
+        <Stack
+          alignItems="center"
+          justifyContent="center"
+          width={20}
+          height={20}
+          overflow="hidden"
+          component={motion.div}
+          variants={{
+            hidden: { rotate: -90 },
+            visible: { rotate: 0 },
+          }}
+          initial="hidden"
+          animate={collapsed ? "hidden" : "visible"}
+        >
+          <ChevronDown />
+        </Stack>
+      </Stack>
+    </Stack>
+  );
+};
+
 const OpenApiNode: React.FC<OpenApiNodeProps> = ({
   path = "/",
   method = "GET",
@@ -159,57 +254,11 @@ const OpenApiNode: React.FC<OpenApiNodeProps> = ({
 
   return (
     <Stack component={Paper} maxWidth={280} border={1} borderColor="divider">
-      <Stack
-        px={1.5}
-        pt={1.5}
-        pb={1.25}
-        onClick={() => setCollapsed(!collapsed)}
-      >
-        <Stack
-          flexDirection="row"
-          justifyContent="space-between"
-          alignItems="center"
-        >
-          <Stack
-            alignItems="center"
-            justifyContent="center"
-            width={20}
-            height={20}
-            overflow="hidden"
-          >
-            <TableIcon />
-          </Stack>
-          <Tooltip title={meth.description}>
-            <Typography
-              width={112}
-              variant="body2"
-              fontSize={12}
-              overflow="hidden"
-              textOverflow="ellipsis"
-              textAlign="center"
-              sx={{ whiteSpace: "nowrap" }}
-            >
-              {meth.summary}
-            </Typography>
-          </Tooltip>
-          <Stack
-            alignItems="center"
-            justifyContent="center"
-            width={20}
-            height={20}
-            overflow="hidden"
-            component={motion.div}
-            variants={{
-              hidden: { rotate: -90 },
-              visible: { rotate: 0 },
-            }}
-            initial="hidden"
-            animate={collapsed ? "hidden" : "visible"}
-          >
-            <ChevronDown />
-          </Stack>
-        </Stack>
-      </Stack>
+      <NodeHeader
+        meth={meth}
+        collapsed={collapsed}
+        setCollapsed={setCollapsed}
+      />
 
       <Divider
         component={motion.div}