diff --git a/.changeset/tender-tips-leave.md b/.changeset/tender-tips-leave.md new file mode 100644 index 0000000000..2fd21eecb3 --- /dev/null +++ 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 index e52948d7ff..244421c47c 100644 --- 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 = () => (
)} diff --git a/packages/tabs/src/components/tabs/Component.test.tsx b/packages/tabs/src/components/tabs/Component.test.tsx index ab4d3bf6c6..62957d792c 100644 --- 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 index 2cfafe1206..4b6d2d5603 100644 --- 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