Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-03-02 04:02:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

more tracking the three tabs that should be dynamically styled while a tab is dragged

Browse Source
This commit is contained in:
Red Adaya 2024-12-03 21:59:08 +08:00
parent e6810fdd36
commit 1fb76e7749
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@ interface TabProps {
tabWidth: number;
isNew: boolean;
tabIndicesMovedAtom: Atom<number[]>;
tabIds: string[];
onSelect: () => void;
onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null) => void;
onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@ -42,6 +43,7 @@ const Tab = React.memo(
tabWidth,
isNew,
tabIndicesMovedAtom,
tabIds,
onLoaded,
onSelect,
onClose,
@ -61,6 +63,7 @@ const Tab = React.memo(
const tabIndicesMoved = useAtomValue(tabIndicesMovedAtom);
console.log("tabIndicesMoved", tabIndicesMoved);
console.log("tabIds", tabIds);
useImperativeHandle(ref, () => tabRef.current as HTMLDivElement);

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

@ -114,7 +114,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const [draggingTab, setDraggingTab] = useState<string>();
const [tabsLoaded, setTabsLoaded] = useState({});
const [newTabId, setNewTabId] = useState<string | null>(null);
const [test, setTest] = useState("");
const tabbarWrapperRef = useRef<HTMLDivElement>(null);
const tabBarRef = useRef<HTMLDivElement>(null);
@ -329,8 +328,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
return newTabIndex;
};
console.log("test::::::::::::::::", test);
const handleMouseMove = (event: MouseEvent) => {
const { tabId, ref, tabStartX } = draggingTabDataRef.current;
@ -429,7 +426,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
if (getDragDirection(currentX) === "+") {
setTabIndicesMoved([tabIndex, newTabIndex, newTabIndex + 1]);
} else if (getDragDirection(currentX) === "-") {
setTabIndicesMoved([newTabIndex, tabIndex, tabIndex + 1]);
setTabIndicesMoved([newTabIndex - 1, newTabIndex, newTabIndex + 1]);
}
tabIds.splice(newTabIndex, 0, tabId);
@ -593,7 +590,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
</div>
) : undefined;
console.log("draggingTAb==========", draggingTab);
// console.log("tabIds==========", tabIds);
return (
<div ref={tabbarWrapperRef} className="tab-bar-wrapper">
@ -620,6 +617,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
tabWidth={tabWidthRef.current}
isNew={tabId === newTabId}
tabIndicesMovedAtom={tabIndicesMovedAtom}
tabIds={tabIds}
/>
);
})}