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:
parent
c24263baa1
commit
f74fd5588e
@ -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}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user