fix(tabs): fix bottom line calculation (#1482)

* fix(tabs): fix bottom line calculation
core-ds · Dec 26, 2024 · acab856 · acab856
1 parent cefed5b
commit acab856
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 3 deletions.
diff --git a/.changeset/tender-tips-leave.md b/.changeset/tender-tips-leave.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-tabs': patch
+---
+
+Исправлен расчет положения нижней линии таба
diff --git a/packages/tabs/src/components/primary-tablist/Component.tsx b/packages/tabs/src/components/primary-tablist/Component.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
 import cn from 'classnames';
 
@@ -55,6 +55,13 @@ export const PrimaryTabList = ({
         return fnUtils.noop;
     }, [selectedTab]);
 
+    const handleTitleResize = useCallback(() => {
+        if (selectedTab && lineRef.current) {
+            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
+            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+        }
+    }, [selectedTab]);
+
     const renderContent = () => (
         <div
             role='tablist'
@@ -73,6 +80,7 @@ export const PrimaryTabList = ({
                             styles={styles}
                             showSkeleton={showSkeleton}
                             skeletonProps={skeletonProps}
+                            onResize={handleTitleResize}
                         />
                     )}
                 </KeyboardFocusable>

diff --git a/packages/tabs/src/components/tabs/Component.test.tsx b/packages/tabs/src/components/tabs/Component.test.tsx
@@ -21,6 +21,12 @@ Object.defineProperty(window, 'matchMedia', {
     }),
 });
 
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+
 const tabVariants: Array<
     [typeof TabsMobile | typeof TabsDesktop | typeof TabsResponsive, TabsProps['view']]
 > = [

diff --git a/packages/tabs/src/components/title/Component.tsx b/packages/tabs/src/components/title/Component.tsx
@@ -1,4 +1,5 @@
-import React, { ButtonHTMLAttributes, forwardRef } from 'react';
+import React, { ButtonHTMLAttributes, forwardRef, useEffect, useRef } from 'react';
+import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
 import { Skeleton, SkeletonProps } from '@alfalab/core-components-skeleton';
@@ -12,6 +13,7 @@ type Props = TabListTitle &
         isOption?: boolean;
         showSkeleton?: boolean;
         skeletonProps?: Omit<SkeletonProps, 'visible'>;
+        onResize?: () => void;
     };
 
 export const Title = forwardRef<HTMLButtonElement, Props>(
@@ -30,19 +32,42 @@ export const Title = forwardRef<HTMLButtonElement, Props>(
             isOption = false,
             showSkeleton = false,
             skeletonProps,
+            onResize,
             ...restProps
         },
         ref,
     ) => {
+        const buttonRef = useRef<HTMLButtonElement | null>(null);
+
         const titleClassName = {
             [styles.content]: true,
             [styles.focused]: focused,
         };
 
+        useEffect(() => {
+            const resizeObserver = new ResizeObserver(() => {
+                if (onResize) {
+                    onResize();
+                }
+            });
+
+            const button = buttonRef.current;
+
+            if (button) {
+                resizeObserver.observe(button);
+            }
+
+            return () => {
+                if (button) {
+                    resizeObserver.unobserve(button);
+                }
+            };
+        }, [onResize]);
+
         return hidden ? null : (
             <button
                 {...restProps}
-                ref={ref}
+                ref={mergeRefs([ref, buttonRef])}
                 disabled={disabled || showSkeleton}
                 type='button'
                 id={String(id)}

diff --git a/packages/tabs/src/hooks/use-tabs.test.tsx b/packages/tabs/src/hooks/use-tabs.test.tsx
@@ -5,6 +5,12 @@ import userEvent from '@testing-library/user-event';
 import { TabsDesktop } from '../desktop';
 import { Tab } from '../components/tab';
 
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+
 const renderTabs = async (props = { selectedId: 'tab-1' }) => {
     const renderResult = render(
         <TabsDesktop {...props}>