Rename logic done

This commit is contained in:
Lucas Oliveira 2023-02-22 23:26:52 -03:00
commit bfbb44a2d1
2 changed files with 37 additions and 5 deletions

View file

@ -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;

View file

@ -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);