Rename logic done
This commit is contained in:
parent
96ae8916d5
commit
bfbb44a2d1
2 changed files with 37 additions and 5 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue