This commit is contained in:
Red Adaya 2024-12-10 15:26:37 +08:00
parent 4ea5426b57
commit 0c8c75c187

View File

@ -203,8 +203,6 @@ const Tab = memo(
); );
useEffect(() => { useEffect(() => {
console.log("triggered!!!!", tabsSwapped);
// Get the index of the current tab ID // Get the index of the current tab ID
const currentIndex = tabIds.indexOf(id); const currentIndex = tabIds.indexOf(id);
// Get the right adjacent ID // Get the right adjacent ID
@ -261,18 +259,12 @@ const Tab = memo(
}; };
if (tabsSwapped || isActive) { if (tabsSwapped || isActive) {
// Find the index of the current tab ID
console.log("tabIds", tabIds);
console.log("id", id);
const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
if (!currentTabElement) return; if (!currentTabElement) return;
const separator = currentTabElement.querySelector(".separator") as HTMLElement; const separator = currentTabElement.querySelector(".separator") as HTMLElement;
const rightSeparator = currentTabElement.querySelector(".right-separator") as HTMLElement; const rightSeparator = currentTabElement.querySelector(".right-separator") as HTMLElement;
if (isActive || draggingId === id) { if (isActive || draggingId === id) {
console.log("here!!!!!", currentTabElement, draggingId);
separator.style.opacity = "0"; separator.style.opacity = "0";
if (rightSeparator) { if (rightSeparator) {
rightSeparator.style.opacity = "0"; rightSeparator.style.opacity = "0";
@ -293,26 +285,17 @@ const Tab = memo(
} }
return () => { return () => {
console.log("entered return +++++++++++++++");
reset(); reset();
}; };
} else { } else {
console.log("entered else ?????????????????????????", tabsSwapped);
reset(); reset();
} }
}, [id, tabIds, isActive, draggingId, tabsSwapped]); }, [id, tabIds, isActive, draggingId, tabsSwapped]);
const handleMouseEnter = useCallback(() => { const handleMouseEnter = useCallback(() => {
if (isActive) return; if (isActive) return;
const currentIndex = tabIds.indexOf(id);
// console.log("tabIds", tabIds);
// console.log("id", id);
const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
if (currentTabElement) { if (currentTabElement) {
// Ensure the element exists
if (!tabsSwapped) { if (!tabsSwapped) {
currentTabElement.classList.add("hover"); currentTabElement.classList.add("hover");
} }
@ -321,14 +304,8 @@ const Tab = memo(
const handleMouseLeave = useCallback(() => { const handleMouseLeave = useCallback(() => {
if (isActive) return; if (isActive) return;
// console.log("tabIds", tabIds);
// console.log("id", id);
const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement; const currentTabElement = document.querySelector(`[data-tab-id="${id}"]`) as HTMLElement;
if (currentTabElement) { if (currentTabElement) {
// Ensure the element exists
currentTabElement.classList.remove("hover"); currentTabElement.classList.remove("hover");
} }
}, [id, isActive, tabsSwapped]); }, [id, isActive, tabsSwapped]);
@ -338,6 +315,7 @@ const Tab = memo(
ref={tabRef} ref={tabRef}
className={clsx("tab", { className={clsx("tab", {
active: isActive, active: isActive,
"is-pinned": isPinned,
"is-dragging": draggingId === id, "is-dragging": draggingId === id,
"before-active": isBeforeActive, "before-active": isBeforeActive,
"new-tab": isNew, "new-tab": isNew,