Rename logic done

space_flow/src/contexts/tabsContext.tsx

@@ -59,6 +59,7 @@ export function TabsProvider({children}){
             const index = newFlows.findIndex(flow=>flow.id===newFlow.id)
             if(index!==-1){
                 newFlows[index].data = newFlow.data
+                newFlows[index].name = newFlow.name
             }
             window.sessionStorage.setItem('tabs', JSON.stringify(newFlows));
             return newFlows;

space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx

@@ -1,15 +1,19 @@
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/solid";
-import { useContext } from "react";
+import { useContext, useRef, useState } from "react";
 import { TabsContext } from "../../../../contexts/tabsContext";
 
+var _ = require("lodash");
+
 export default function TabComponent({ selected, flow, onClick }) {
-  const { removeFlow } = useContext(TabsContext);
+  const { removeFlow, updateFlow } = useContext(TabsContext);
+  const [isRename, setIsRename] = useState(false);
+  const [value, setValue] = useState("");
   return (
     <>
       {flow ? (
         !selected ? (
           <div
-            className="flex justify-between select-none w-36 items-center px-4 my-2 mt-3 border-x border-gray-300 -ml-px"
+            className="flex justify-between select-none truncate w-44 items-center px-4 my-2 mt-3 border-x border-gray-300 -ml-px"
             onClick={onClick}
           >
             {flow.name}
@@ -23,8 +27,35 @@ export default function TabComponent({ selected, flow, onClick }) {
             </button>
           </div>
         ) : (
-          <div className="bg-white flex select-none justify-between w-36 items-center pt-3 border border-b-0 border-gray-300 px-4 py-2 rounded-t-xl -ml-px">
+          <div className="bg-white flex select-none justify-between w-44 items-center pt-3 border border-b-0 border-gray-300 px-4 py-2 rounded-t-xl -ml-px">
-            {flow.name}
+            {isRename ? (
+              <input
+                autoFocus
+                className="bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md  w-28"
+                onBlur={() => {
+                  setIsRename(false);
+                  if (value !== "") {
+                    let newFlow = _.cloneDeep(flow);
+                    newFlow.name = value;
+                    updateFlow(newFlow);
+                  }
+                }}
+                value={value}
+                onChange={(e) => {
+                  setValue(e.target.value);
+                }}
+              />
+            ) : (
+              <span
+                className="text-left truncate"
+                onDoubleClick={() => {
+                  setIsRename(true);
+                  setValue(flow.name);
+                }}
+              >
+                {flow.name}
+              </span>
+            )}
             <button
               onClick={() => {
                 removeFlow(flow.id);