1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Scroll active tab into view

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

View File

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