From bfbb44a2d1eb2d6c0b954bf6cd8ac0b9be41fcfe Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 22 Feb 2023 23:26:52 -0300
Subject: [PATCH] Rename logic done

---
 space_flow/src/contexts/tabsContext.tsx       |  1 +
 .../flowManager/tabComponent/index.tsx        | 41 ++++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/space_flow/src/contexts/tabsContext.tsx b/space_flow/src/contexts/tabsContext.tsx
index fbe5a3d0d..4e72dc86f 100644
--- a/space_flow/src/contexts/tabsContext.tsx
+++ b/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;
diff --git a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx b/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
index 3cdaf6b8b..6db56e043 100644
--- a/space_flow/src/pages/FlowPage/flowManager/tabComponent/index.tsx
+++ b/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">
-            {flow.name}
+          <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">
+            {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);