fix: remove extra prop, add storybook case

gravity-ui · Aug 8, 2023 · 3e472a7 · 3e472a7
1 parent 3017810
commit 3e472a7
Show file tree

Hide file tree

Showing 3 changed files with 127 additions and 67 deletions.
diff --git a/src/components/AdaptiveTabs/AdaptiveTabs.tsx b/src/components/AdaptiveTabs/AdaptiveTabs.tsx
@@ -60,34 +60,18 @@ export interface TabProps {
     active?: boolean;
     disabled?: boolean;
     onClick?: (id: string, event: React.MouseEvent) => void;
-    renderTab?: AdaptiveTabsProps<any>['renderTab'];
-    isMore?: boolean;
 }
 
 // https://github.com/gravity-ui/components/issues/7
-class Tab extends React.PureComponent<TabProps> {
+class Tab extends React.Component<TabProps> {
     onClick = (event: React.MouseEvent) => {
         if (this.props.onClick) {
             this.props.onClick(this.props.id, event);
         }
     };
 
     render() {
-        const {active, disabled, hint, title = this.props.id, renderTab, isMore} = this.props;
-
-        if (renderTab) {
-            const tabContent = renderTab({title, isMore});
-            return (
-                <div
-                    className={b('tab', {active, disabled})}
-                    title={String(hint || title || '')}
-                    onClick={disabled ? undefined : this.onClick}
-                >
-                    {tabContent}
-                </div>
-            );
-        }
-
+        const {active, disabled, hint, title = this.props.id} = this.props;
         return (
             <div
                 className={b('tab', {active, disabled})}
@@ -120,15 +104,11 @@ export interface AdaptiveTabsProps<T> {
     onSelectTab: (tabId: string, event?: React.MouseEvent) => void;
     /** Allows to wrap TabItem into another component or render custom tab */
     // FIXME: https://github.com/gravity-ui/components/issues/26
-    /**
-     * @deprecated use renderTab instead
-     */
     wrapTo?(
         item: TabItem<T> | undefined,
         node: React.ReactNode,
         index: number | undefined,
     ): React.ReactNode;
-    renderTab?: (options: {title: string | React.ReactNode; isMore?: boolean}) => React.ReactNode;
     /** Class name for the tabs container */
     className?: string;
     /** Tabs size */
@@ -782,7 +762,7 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
             active?: boolean;
         },
     ) => {
-        const {wrapTo, renderTab} = this.props;
+        const {wrapTo} = this.props;
         const {onClick, active, ref, text, onKeyDown} = switcherProps;
 
         const title = (
@@ -794,10 +774,8 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
             </div>
         );
 
-        const switcherTabProps = {title, hint: text, id: 'switcher-tab', isMore: true};
-        const tabItemNode = (
-            <Tab {...switcherTabProps} active={Boolean(active)} renderTab={renderTab} />
-        );
+        const switcherTabProps = {title, hint: text, id: 'switcher-tab'};
+        const tabItemNode = <Tab {...switcherTabProps} active={Boolean(active)} />;
 
         return (
             <div
@@ -839,7 +817,7 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
     };
 
     renderTabItem = (item: TabItem<T>, tabIndex: number) => {
-        const {items, wrapTo, renderTab} = this.props;
+        const {items, wrapTo} = this.props;
         const activeTabID = this.activeTab;
         const {dimensionsWereCollected, currentContainerWidthName} = this.state;
 
@@ -854,7 +832,7 @@ export class AdaptiveTabs<T> extends React.Component<AdaptiveTabsProps<T>, Adapt
             ? this.overflownTabsCurrentWidth[tabIndex]
             : `${this.tabMaxWidthInPercentsForScreenSize[currentContainerWidthName!]}%`;
 
-        const tabNode = <Tab {...item} active={item.id === activeTabID} renderTab={renderTab} />;
+        const tabNode = <Tab {...item} active={item.id === activeTabID} />;
 
         return (
             <div

diff --git a/src/components/AdaptiveTabs/__stories__/AdaptiveTabs.stories.tsx b/src/components/AdaptiveTabs/__stories__/AdaptiveTabs.stories.tsx
@@ -1,10 +1,10 @@
 import React, {useState} from 'react';
 
-import {SquarePlus, SquareXmark} from '@gravity-ui/icons';
-import {Button, Icon} from '@gravity-ui/uikit';
-import {Meta, StoryFn} from '@storybook/react';
+import {Meta, Story} from '@storybook/react';
 
 import {AdaptiveTabs, AdaptiveTabsProps} from '../AdaptiveTabs';
+import {adaptiveTabsItems} from './AdaptiveTabsItems';
+
 export default {
     title: 'Components/AdaptiveTabs',
     component: AdaptiveTabs,
@@ -16,7 +16,7 @@ export default {
         },
     },
 } as Meta;
-const Template: StoryFn<{size: 'm' | 'l' | 'xl'} & AdaptiveTabs<{}>> = (args) => {
+const Template: Story<{size: 'm' | 'l' | 'xl'} & AdaptiveTabs<{}>> = (args) => {
     const [activeTab, setActiveTab] = useState('active');
     const items: AdaptiveTabsProps<{}>['items'] = React.useMemo(
         () => [
@@ -58,7 +58,7 @@ const Template: StoryFn<{size: 'm' | 'l' | 'xl'} & AdaptiveTabs<{}>> = (args) =>
 };
 export const Default = Template.bind({});
 
-const WrapTemplate: StoryFn<AdaptiveTabsProps<{}>> = (args) => {
+const WrapTemplate: Story<AdaptiveTabsProps<{}>> = (args) => {
     const [activeTab, setActiveTab] = useState('active');
     const items: AdaptiveTabsProps<{}>['items'] = React.useMemo(
         () => [
@@ -108,7 +108,7 @@ const WrapTemplate: StoryFn<AdaptiveTabsProps<{}>> = (args) => {
 };
 export const Wrap = WrapTemplate.bind({});
 
-const RenderTabTemplate: StoryFn<AdaptiveTabsProps<{}>> = (args) => {
+/*const RenderTabTemplate: StoryFn<AdaptiveTabsProps<{}>> = (args) => {
     const [activeTab, setActiveTab] = useState('active');
     const items: AdaptiveTabsProps<{}>['items'] = React.useMemo(
         () => [
@@ -144,57 +144,84 @@ const RenderTabTemplate: StoryFn<AdaptiveTabsProps<{}>> = (args) => {
                 items={items}
                 onSelectTab={setActiveTab}
                 activeTab={activeTab}
-                renderTab={({title}) => {
+                /!*renderTab={({title}) => {
                     return (
                         <div>
                             <span>extra</span>
                             {title}
                         </div>
                     );
-                }}
+                }}*!/
             />
         </div>
     );
 };
 export const RenderTab = RenderTabTemplate.bind({});
 
-const RenderTabWithOverflowTextTemplate: StoryFn<AdaptiveTabsProps<{}>> = (args) => {
-    const [activeTab, setActiveTab] = useState('active');
-    const items: AdaptiveTabsProps<{}>['items'] = React.useMemo(
-        () => [
-            {
-                id: 'first',
-                title: 'First Tab',
-            },
-            {
-                id: 'active',
-                title: 'Active Tab',
-            },
-            {
-                id: 'disabled',
-                title: 'Disabled With Long Text Tab',
-                disabled: true,
-            },
-            {
-                id: 'fourth',
-                title: 'Fourth Long Text To Show Tab',
-            },
-            {
-                id: 'fifth',
-                title: 'One More Long Text Tab To Show',
-            },
-        ],
-        [],
+const renderTitleWithWrap = (title: string | React.ReactNode) => {
+
+    return (
+        <div>
+            <Button size="xs" view="flat">
+                <Icon data={SquarePlus} size="xs" />
+            </Button>
+
+            <span
+                style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: 'calc(100px - 20px - 20px)', // minus icons width
+                    display: 'inline-block',
+                    verticalAlign: 'top',
+                }}
+                /!*title={String(title)}*!/
+            >
+                {title}
+            </span>
+            <Button size="xs">
+                <Icon data={SquareXmark} size="xs" />
+            </Button>
+        </div>
     );
+};
 
+const CustomTitle = ({title}: {title: string | React.ReactNode}) => {
+    return (
+        <div>
+            <Button size="xs" view="flat">
+                <Icon data={SquarePlus} size="xs" />
+            </Button>
+
+            <span
+                style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: 'calc(100px - 20px - 20px)', // minus icons width
+                    display: 'inline-block',
+                    verticalAlign: 'top',
+                }}
+                /!*title={String(title)}*!/
+            >
+                {title}
+            </span>
+            <Button size="xs">
+                <Icon data={SquareXmark} size="xs" />
+            </Button>
+        </div>
+    );
+};
+*/
+
+const RenderTabWithOverflowTextTemplate: Story<AdaptiveTabsProps<{}>> = (args) => {
+    const [activeTab, setActiveTab] = useState('active');
     return (
         <div style={{resize: 'horizontal', overflow: 'auto'}}>
             <AdaptiveTabs
                 {...args}
-                items={items}
+                items={adaptiveTabsItems}
                 onSelectTab={setActiveTab}
                 activeTab={activeTab}
-                renderTab={({title, isMore}) => {
+                /*renderTab={({title, isMore}) => {
                     if (isMore) {
                         return title;
                     }
@@ -222,7 +249,7 @@ const RenderTabWithOverflowTextTemplate: StoryFn<AdaptiveTabsProps<{}>> = (args)
                             </Button>
                         </div>
                     );
-                }}
+                }}*/
             />
         </div>
     );

diff --git a/src/components/AdaptiveTabs/__stories__/AdaptiveTabsItems.tsx b/src/components/AdaptiveTabs/__stories__/AdaptiveTabsItems.tsx
@@ -0,0 +1,55 @@
+import {SquarePlus, SquareXmark} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import {AdaptiveTabsProps} from '../AdaptiveTabs';
+import React from 'react';
+
+const RenderTitleWithWrap = (props: {title: string | React.ReactNode}) => {
+    const {title} = props;
+    return (
+        <div>
+            <Button size="xs" view="flat">
+                <Icon data={SquarePlus} size="xs" />
+            </Button>
+
+            <span
+                style={{
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: 'calc(100px - 20px - 20px)', // minus icons width
+                    display: 'inline-block',
+                    verticalAlign: 'top',
+                }}
+                title={typeof title === 'string' ? title : undefined}
+            >
+                {title}
+            </span>
+            <Button size="xs">
+                <Icon data={SquareXmark} size="xs" />
+            </Button>
+        </div>
+    );
+};
+
+export const adaptiveTabsItems: AdaptiveTabsProps<{}>['items'] = [
+    {
+        id: 'first',
+        title: <RenderTitleWithWrap title="First Tab" />,
+    },
+    {
+        id: 'active',
+        title: <RenderTitleWithWrap title="Active Tab" />,
+    },
+    {
+        id: 'disabled',
+        title: <RenderTitleWithWrap title="Disabled With Long Text Tab" />,
+        disabled: true,
+    },
+    {
+        id: 'fourth',
+        title: <RenderTitleWithWrap title="Fourth Long Text To Show Tab" />,
+    },
+    {
+        id: 'fifth',
+        title: <RenderTitleWithWrap title="One More Long Text Tab To Show" />,
+    },
+];