IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared:Components:Tabs: fix scroll to selected tab after for first render

Browse Source
This commit is contained in:
Timofey Boyko 2024-07-11 15:08:17 +03:00
parent fd6365bf17
commit 48478d33df
1 changed files with 46 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
packages/shared/components/tabs/Tabs.tsx
View File

@ -24,7 +24,7 @@
// content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import React, { useState, useRef, useEffect } from "react";
import React, { useState, useRef, useEffect, useCallback } from "react";
import { useTheme } from "styled-components";
import { Scrollbar as ScrollbarType } from "../scrollbar/custom-scrollbar";
@ -69,56 +69,60 @@ const Tabs = (props: TabsProps) => {
const isViewFirstTab = useViewTab(scrollRef, tabsRef, 0);
const isViewLastTab = useViewTab(scrollRef, tabsRef, items.length - 1);
useEffect(() => {
setCurrentItem(items[selectedItemIndex]);
}, [selectedItemIndex, items]);
const scrollToTab = useCallback(
(index: number): void => {
if (!scrollRef.current || !tabsRef.current) return;
const scrollToTab = (index: number): void => {
if (!scrollRef.current || !tabsRef.current) return;
const containerElement = scrollRef.current.scrollerElement;
const tabElement = tabsRef.current.children[index] as HTMLDivElement;
const containerElement = scrollRef.current.scrollerElement;
const tabElement = tabsRef.current.children[index] as HTMLDivElement;
if (!containerElement || !tabElement) return;
if (!containerElement || !tabElement) return;
const containerWidth = containerElement.offsetWidth;
const tabWidth = tabElement?.offsetWidth;
const tabOffsetLeft = tabElement?.offsetLeft;
const containerWidth = containerElement.offsetWidth;
const tabWidth = tabElement?.offsetWidth;
const tabOffsetLeft = tabElement?.offsetLeft;
if (theme.interfaceDirection === "ltr") {
if (tabOffsetLeft - OFFSET_LEFT < containerElement.scrollLeft) {
scrollRef.current.scrollTo(tabOffsetLeft - OFFSET_LEFT);
} else if (
tabOffsetLeft + tabWidth >
containerElement.scrollLeft + containerWidth
) {
scrollRef.current.scrollTo(
tabOffsetLeft - containerWidth + tabWidth + OFFSET_RIGHT,
);
}
if (theme.interfaceDirection === "ltr") {
if (tabOffsetLeft - OFFSET_LEFT < containerElement.scrollLeft) {
scrollRef.current.scrollTo(tabOffsetLeft - OFFSET_LEFT);
} else if (
tabOffsetLeft + tabWidth >
containerElement.scrollLeft + containerWidth
) {
scrollRef.current.scrollTo(
tabOffsetLeft - containerWidth + tabWidth + OFFSET_RIGHT,
);
return;
}
return;
}
const rect = tabElement?.getBoundingClientRect();
const rect = tabElement?.getBoundingClientRect();
if (rect.left - OFFSET_LEFT < 0) {
scrollRef.current.scrollTo(
-(
Math.abs(rect.left) +
OFFSET_LEFT +
Math.abs(containerElement.scrollLeft)
),
);
} else if (rect.right > containerWidth && !!containerElement.scrollLeft) {
scrollRef.current.scrollTo(
rect.right -
containerWidth +
containerElement.scrollLeft +
OFFSET_RIGHT,
);
}
},
[theme.interfaceDirection],
);
if (rect.left - OFFSET_LEFT < 0) {
scrollRef.current.scrollTo(
-(
Math.abs(rect.left) +
OFFSET_LEFT +
Math.abs(containerElement.scrollLeft)
),
);
} else if (rect.right > containerWidth && !!containerElement.scrollLeft) {
scrollRef.current.scrollTo(
rect.right -
containerWidth +
containerElement.scrollLeft +
OFFSET_RIGHT,
);
}
};
useEffect(() => {
setCurrentItem(items[selectedItemIndex]);
scrollToTab(selectedItemIndex);
}, [selectedItemIndex, items, scrollToTab]);
const setSelectedItem = (selectedTabItem: TTabItem, index: number): void => {
setCurrentItem(selectedTabItem);