Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-21 16:38:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

handle hiding/showing of separators on hover programmatically

Browse Source
This commit is contained in:
Red Adaya 2024-12-04 09:50:48 +08:00
parent 993249583c
commit c324259a9b
2 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/app/tab/tab.tsx
View File

@ -24,10 +24,12 @@ interface TabProps {
isNew: boolean;
tabIndicesMovedAtom: Atom<number[]>;
tabIds: string[];
onSelect: () => void;
onClick: () => void;
onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null) => void;
onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
onMouseDown: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
onLoaded: () => void;
onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
onMouseLeave: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}
const Tab = memo(
@ -44,9 +46,11 @@ const Tab = memo(
tabIndicesMovedAtom,
tabIds,
onLoaded,
onSelect,
onClick,
onClose,
onDragStart,
onMouseDown,
onMouseEnter,
onMouseLeave,
},
ref
) => {
@ -195,12 +199,13 @@ const Tab = memo(
const showSeparator = useCallback(
(id) => {
if (isFirst) return false;
const idx = tabIds.indexOf(id);
const found = tabIndicesMoved.find((i, ii) => ii !== 0 && i === idx) === undefined;
console.log("idx", id, ":", idx, ":", found);
return found;
},
[tabIndicesMoved]
[tabIndicesMoved, isFirst, active]
);
console.log("showSeparator(id)=====", id, showSeparator(id));
@ -214,12 +219,14 @@ const Tab = memo(
"before-active": isBeforeActive,
"new-tab": isNew,
})}
onMouseDown={onDragStart}
onClick={onSelect}
onMouseDown={onMouseDown}
onClick={onClick}
onContextMenu={handleContextMenu}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
data-tab-id={id}
>
{!isFirst && showSeparator(id) && <div className="separator"></div>}
{showSeparator(id) && <div className="separator"></div>}
<div className="tab-inner">
<div
ref={editableRef}

15
frontend/app/tab/tabbar.tsx
View File

@ -142,7 +142,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
let prevDelta: number;
let prevDragDirection: string;
let prevRightAdjacentIndex: number | null = null; // Track the previous right-adjacent tab index
// Update refs when tabIds change
useEffect(() => {
@ -540,6 +539,14 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
});
}, []);
const handleMouseEnterTab = (index: number) => {
setTabIndicesMoved([index - 1, index, index + 1]);
};
const handleMouseLeaveTab = (index: number) => {
setTabIndicesMoved([]);
};
const isBeforeActive = (tabId: string) => {
return tabIds.indexOf(tabId) === tabIds.indexOf(activeTabId) - 1;
};
@ -576,9 +583,9 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
ref={tabRefs.current[index]}
id={tabId}
isFirst={index === 0}
onSelect={() => handleSelectTab(tabId)}
onClick={() => handleSelectTab(tabId)}
active={activeTabId === tabId}
onDragStart={(event) => handleDragStart(event, tabId, tabRefs.current[index])}
onMouseDown={(event) => handleDragStart(event, tabId, tabRefs.current[index])}
onClose={(event) => handleCloseTab(event, tabId)}
onLoaded={() => handleTabLoaded(tabId)}
isBeforeActive={isBeforeActive(tabId)}
@ -587,6 +594,8 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
isNew={tabId === newTabId}
tabIndicesMovedAtom={tabIndicesMovedAtom}
tabIds={tabIds}
onMouseEnter={() => handleMouseEnterTab(index)}
onMouseLeave={() => handleMouseLeaveTab(index)}
/>
);
})}