hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Scroll active tab into view

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-03-16 09:40:08 +03:00
parent c24263baa1
commit f74fd5588e
1 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/renderer/components/dock/dock-tabs.tsx
View File

@ -26,6 +26,10 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
const minTabSize = useRef<number>(0); const minTabSize = useRef<number>(0);
const [showScrollbar, setShowScrollbar] = useState<boolean>(false); const [showScrollbar, setShowScrollbar] = useState<boolean>(false);
const getTabElements = (): HTMLDivElement[] => {
return Array.from(elem.current?.querySelectorAll(".Tabs .Tab"));
};
const renderTab = (tab?: DockTabModel) => { const renderTab = (tab?: DockTabModel) => {
if (!tab) { if (!tab) {
return null; return null;
@ -45,9 +49,14 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
} }
}; };
const scrollActiveTabIntoView = () => {
const tab = elem.current?.querySelector(".Tab.active");
tab?.scrollIntoView();
};
const updateScrollbarVisibility = () => { const updateScrollbarVisibility = () => {
const allTabs: HTMLElement[] = Array.from(elem.current?.querySelectorAll(".Tabs .Tab")); const allTabsShrinked = getTabElements().every(tab => tab.offsetWidth == minTabSize.current);
const allTabsShrinked = allTabs.every(tab => tab.offsetWidth == minTabSize.current);
setShowScrollbar(allTabsShrinked); setShowScrollbar(allTabsShrinked);
}; };
@ -62,7 +71,10 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: DockTabs
updateScrollbarVisibility(); updateScrollbarVisibility();
}, [tabs]); }, [tabs]);
useResizeObserver(elem.current, updateScrollbarVisibility); useResizeObserver(elem.current, () => {
scrollActiveTabIntoView();
updateScrollbarVisibility();
});
return ( return (
<div className={styles.dockTabs} ref={elem}> <div className={styles.dockTabs} ref={elem}>