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

Update values on resize

Browse Source 
Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>
This commit is contained in:
DmitriyNoa 2022-01-25 15:52:36 +01:00
parent 130618c8f4
commit f484620ebb
1 changed files with 37 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,33 +21,34 @@ interface Props {
export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) => {
const elem = useRef(null);
const contentElem = useRef(null);
const [contentWidth, setContentWidth] = useState(0);
const [containerWidth, setContainerWidth] = useState(0);
const [scrollPosition, setScrollPosition] = useState(0);
const scrollStep = 200;
const scrollToRight = (): void => {
if(!elem) return;
const scroll = scrollPosition + scrollStep;
setScrollPosition(scrollPosition + scrollStep);
setScrollPosition(scroll);
elem.current.scrollLeft = scrollPosition;
elem.current.scrollLeft = scroll;
};
const scrollToLeft = (): void => {
if(!elem) return;
const scroll = scrollPosition - scrollStep;
setScrollPosition(scrollPosition - scrollStep);
setScrollPosition(scroll);
elem.current.scrollLeft = scrollPosition;
elem.current.scrollLeft = scroll;
};
const isScrollableRight = (): boolean => {
if(!elem || !contentElem) return false;
const containerWidth = elem.current?.clientWidth;
const contentWidth = contentElem.current?.clientWidth;
return contentWidth > containerWidth && scrollPosition < contentWidth - scrollStep;
return contentWidth > containerWidth && scrollPosition < contentWidth - containerWidth;
};
const isScrollableLeft = (): boolean => {
@ -56,6 +57,22 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) =
return scrollPosition > scrollStep;
};
const updateScrollPosition = ( evt: UIEvent<HTMLDivElement>) => {
const position = evt.currentTarget.scrollLeft;
if (position!== undefined) {
setScrollPosition(position);
}
};
const onWindowResize = () => {
if(!elem || !contentElem) return;
setContentWidth(contentElem.current.clientWidth);
setContainerWidth(elem.current.clientWidth);
setScrollPosition(elem.current.scrollLeft);
};
const renderTab = (tab?: DockTabModel) => {
if (!tab) {
return null;
@ -75,14 +92,19 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) =
}
};
useEffect(() => {
elem.current.addEventListener("scroll", ( evt: UIEvent<HTMLDivElement>) => {
const position = evt.currentTarget.scrollLeft;
if (position!== undefined) {
setScrollPosition(position);
}
});
useEffect(() => {
if(!elem || !contentElem) return;
setContentWidth(contentElem.current.clientWidth);
setContainerWidth(elem.current.clientWidth);
setScrollPosition(elem.current.scrollLeft);
// update values in store on scroll
elem.current.addEventListener("scroll", updateScrollPosition);
// update current values on resize to show/hide scroll
window.addEventListener("resize", onWindowResize);
}, []);
return (