From 5b69e95be49f9e31084f4605996e3d39159c8ed7 Mon Sep 17 00:00:00 2001 From: Lev-Georgy Zamansky Date: Wed, 31 Jul 2024 14:00:36 +0300 Subject: [PATCH 1/4] fix: #78 tab refactoring, fix localization change in more dropdown, fix more button on dynamic tabs change --- .../helpers/useIntersectionChildren.ts | 9 +- .../src/tabs/Tabs.stories.tsx | 263 ----------- .../kaspersky-components/src/tabs/Tabs.tsx | 178 ++++---- .../src/tabs/TabsDropdown.tsx | 19 +- .../src/tabs/stories/Tabs.stories.tsx | 426 ++++++++++++++++++ .../kaspersky-components/src/tabs/tabsCss.ts | 46 +- .../kaspersky-components/src/tabs/types.ts | 7 + 7 files changed, 589 insertions(+), 359 deletions(-) delete mode 100644 packages/kaspersky-components/src/tabs/Tabs.stories.tsx create mode 100644 packages/kaspersky-components/src/tabs/stories/Tabs.stories.tsx diff --git a/packages/kaspersky-components/helpers/useIntersectionChildren.ts b/packages/kaspersky-components/helpers/useIntersectionChildren.ts index 2f30afd..8a3df0e 100644 --- a/packages/kaspersky-components/helpers/useIntersectionChildren.ts +++ b/packages/kaspersky-components/helpers/useIntersectionChildren.ts @@ -2,18 +2,17 @@ import { RefObject, useMemo } from 'react' import { useResizeObserver } from './useResizeObserver' /** Find position last inside element */ -export const useIntersectionChildren = (ref: RefObject, padding = 0): number | undefined => { +export const useIntersectionChildren = (ref: RefObject, padding = 0, wrapperClass?: string, disableCache?: number): number | undefined => { const { right: containerRight } = useResizeObserver(ref) ?? { right: 0 } return useMemo(() => { - const container = ref.current - if (container === null) return undefined + const container = wrapperClass ? ref.current?.querySelector(wrapperClass) : ref.current + if (container === null || container === undefined) return undefined const children = new Array(container.children.length) .fill(null) .map((_, i) => container.children[i]) - const res = children.findIndex((child) => child.getBoundingClientRect().right + padding > containerRight) return res === -1 ? undefined : Math.max(res - 1, 0) - }, [containerRight, ref]) + }, [containerRight, ref, padding, disableCache]) } diff --git a/packages/kaspersky-components/src/tabs/Tabs.stories.tsx b/packages/kaspersky-components/src/tabs/Tabs.stories.tsx deleted file mode 100644 index 79a42e7..0000000 --- a/packages/kaspersky-components/src/tabs/Tabs.stories.tsx +++ /dev/null @@ -1,263 +0,0 @@ -import React from 'react' -import { Meta, StoryObj } from '@storybook/react' -import MetaData from './__meta__/meta.json' -import { TabsProps } from './types' -import { Tabs } from './Tabs' -import { badges } from '@sb/badges' -import { withMeta } from '@helpers/hocs/MetaComponent/withMeta' -import { sbHideControls } from '@helpers/storybookHelpers' -import { Placeholder } from '@kaspersky/icons/16' -import { Button, GroupTabs, H3, Space } from '..' -import styled from 'styled-components' - -const meta: Meta = { - title: 'Atoms/Tabs', - component: Tabs, - argTypes: { - ...sbHideControls(['onChange', 'onTabClick', 'style', 'destroyInactiveTabPane', 'theme', 'className', 'type']) - }, - args: { - tabPosition: 'top', - defaultActiveKey: '1', - children: ( - Array.from({ length: 3 }).map((_, index) => ( - - Content of Tab Pane {index + 1} - - )) - ), - testId: 'tabs-test-id', - klId: 'tabs-kl-id' - }, - parameters: { - badges: [badges.reviewedByDesign], - docs: { - page: withMeta(MetaData) - }, - design: MetaData.figmaView - }, - decorators: [ - (Story, context) => ( - - - - ) - ] -} -export default meta - -type Story = StoryObj - -const Container = styled.div` - width: 100%; -` - -export const Basic: Story = {} - -export const WithIconAndNumber: Story = { - render: (args: TabsProps) => ( - - } key="1"> - Content of Tab Pane 1 - - } />} - key="2" - > - Content of Tab Pane 2 - - } number={5} /> - } - key="3" - > - Content of Tab Pane 3 - - - ) -} - -export const WithIndicator: Story = { - render: (args: TabsProps) => ( - - } key="1"> - Content of Tab Pane 1 - - } - key="2" - > - Content of Tab Pane 2 - - } />} - key="3" - > - Content of Tab Pane 3 - - } - number={5} - /> - } - key="4" - > - Content of Tab Pane 4 - - - ) -} - -export const WithDisabled: Story = { - render: (args: TabsProps) => ( - - } - number={5} - /> - } - key="1" - > - Content of Tab Pane 1 - - - Content of Tab Pane 2 - - - Content of Tab Pane 3 - - } number={5} /> - } - disabled - key="4" - > - Content of Tab Pane 4 - - - ) -} - -export const CollapsedHorizontalGroup: Story = { - render: (props: TabsProps) => ( - - {[ - ...Array.from({ length: 15 }, (_, i) => i) - ].map((i) => ( - } /> - } - key={i + 1} - disabled={i === 8} - > - Content of tab {i + 1} - - ))} - - ) -} - -const RightButton = + + { dynamicChange ? tabsForMoreButton : tabsForMoreButton2 } + ) + } +} + +const RightButton = + return ( - { dynamicChange ? tabsForMoreButton : tabsForMoreButton2 } - ) + {generateTabs(20, 'tabs.dropdown.more').map((el, i) => }/> + } + key={i + 1} + disabled={el.disabled} + > + {el.content} + + )} + ) } } @@ -285,7 +267,7 @@ const LeftButton =