@salutejs/plasma-new-hope 0.172.0-canary.1493.11403245502.0 → 0.172.0-canary.1494.11453767955.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Tabs/createTabsController.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +1 -0
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +1 -0
- package/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/cjs/index.js +0 -6
- package/cjs/index.js.map +1 -1
- package/emotion/cjs/components/Tabs/Tabs.template-doc.mdx +4 -22
- package/emotion/cjs/components/Tabs/index.js +0 -26
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +1 -0
- package/emotion/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +1 -0
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/TabItem.js +0 -6
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.js +1 -7
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
- package/emotion/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
- package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
- package/emotion/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
- package/emotion/es/components/Tabs/Tabs.template-doc.mdx +4 -22
- package/emotion/es/components/Tabs/index.js +0 -2
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +1 -0
- package/emotion/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +1 -0
- package/emotion/es/examples/plasma_b2c/components/Tabs/TabItem.js +1 -7
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.js +2 -8
- package/emotion/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
- package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
- package/emotion/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
- package/emotion/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
- package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +15 -19
- package/emotion/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +15 -19
- package/es/components/Tabs/createTabsController.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +1 -0
- package/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js.map +1 -1
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +1 -0
- package/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js.map +1 -1
- package/es/index.js +0 -2
- package/es/index.js.map +1 -1
- package/package.json +4 -4
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +4 -22
- package/styled-components/cjs/components/Tabs/index.js +0 -26
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +1 -0
- package/styled-components/cjs/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +1 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/TabItem.js +0 -6
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.js +1 -7
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
- package/styled-components/cjs/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
- package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
- package/styled-components/cjs/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +4 -22
- package/styled-components/es/components/Tabs/index.js +0 -2
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.js +1 -0
- package/styled-components/es/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.js +1 -0
- package/styled-components/es/examples/plasma_b2c/components/Tabs/TabItem.js +1 -7
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.js +2 -8
- package/styled-components/es/examples/plasma_b2c/components/Tabs/Tabs.stories.tsx +22 -64
- package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
- package/styled-components/es/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
- package/styled-components/es/examples/plasma_web/components/Tabs/Tabs.stories.tsx +22 -64
- package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.js +0 -4
- package/styled-components/es/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.js +0 -4
- package/types/components/Tabs/TabItem.types.d.ts +10 -52
- package/types/components/Tabs/TabItem.types.d.ts.map +1 -1
- package/types/components/Tabs/Tabs.types.d.ts +2 -39
- package/types/components/Tabs/Tabs.types.d.ts.map +1 -1
- package/types/components/Tabs/createTabsController.d.ts +3 -3
- package/types/components/Tabs/createTabsController.d.ts.map +1 -1
- package/types/components/Tabs/index.d.ts +1 -3
- package/types/components/Tabs/index.d.ts.map +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabItem/HorizontalTabItem.d.ts.map +1 -1
- package/types/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.d.ts +2 -2
- package/types/components/Tabs/ui/horizontal/HorizontalTabs/HorizontalTabs.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts +1 -74
- package/types/examples/plasma_b2c/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts +2 -22
- package/types/examples/plasma_b2c/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +0 -4
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.d.ts +0 -4
- package/types/examples/plasma_b2c/components/Tabs/horizontal/HorizontalTabs.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/TabItem.d.ts +0 -18
- package/types/examples/plasma_web/components/Tabs/TabItem.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/Tabs.d.ts +1 -1
- package/types/examples/plasma_web/components/Tabs/Tabs.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts +0 -4
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabItem.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.d.ts +0 -4
- package/types/examples/plasma_web/components/Tabs/horizontal/HorizontalTabs.config.d.ts.map +1 -1
- package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.css +0 -13
- package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -37
- package/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js.map +0 -1
- package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.css +0 -16
- package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -37
- package/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js.map +0 -1
- package/emotion/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -34
- package/emotion/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -34
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -29
- package/emotion/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -30
- package/emotion/cjs/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -29
- package/emotion/cjs/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -30
- package/emotion/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -28
- package/emotion/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -28
- package/emotion/es/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -23
- package/emotion/es/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -24
- package/emotion/es/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -23
- package/emotion/es/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -24
- package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.css +0 -13
- package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -32
- package/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js.map +0 -1
- package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.css +0 -16
- package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -32
- package/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js.map +0 -1
- package/styled-components/cjs/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -34
- package/styled-components/cjs/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -34
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -29
- package/styled-components/cjs/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -30
- package/styled-components/cjs/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -29
- package/styled-components/cjs/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -30
- package/styled-components/es/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.js +0 -28
- package/styled-components/es/components/Tabs/ui/header/HeaderTabs/HeaderTabs.js +0 -28
- package/styled-components/es/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.js +0 -23
- package/styled-components/es/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.js +0 -24
- package/styled-components/es/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.js +0 -23
- package/styled-components/es/examples/plasma_web/components/Tabs/header/HeaderTabs.config.js +0 -24
- package/types/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.d.ts +0 -25
- package/types/components/Tabs/ui/header/HeaderTabItem/HeaderTabItem.d.ts.map +0 -1
- package/types/components/Tabs/ui/header/HeaderTabs/HeaderTabs.d.ts +0 -25
- package/types/components/Tabs/ui/header/HeaderTabs/HeaderTabs.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.d.ts +0 -22
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabItem.config.d.ts.map +0 -1
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.d.ts +0 -23
- package/types/examples/plasma_b2c/components/Tabs/header/HeaderTabs.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.d.ts +0 -22
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabItem.config.d.ts.map +0 -1
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabs.config.d.ts +0 -23
- package/types/examples/plasma_web/components/Tabs/header/HeaderTabs.config.d.ts.map +0 -1
@@ -63,7 +63,6 @@ export function App() {
|
|
63
63
|
|
64
64
|
### Расположение табов
|
65
65
|
Табы могут быть горизонтальными (по умолчанию) и вертикальными. За это отвечает свойство `orientation`.
|
66
|
-
Также у горизонтальных табов есть свойство `header`.
|
67
66
|
|
68
67
|
```tsx live
|
69
68
|
import React, { useState } from 'react';
|
@@ -72,11 +71,10 @@ import { IconClock } from '@salutejs/plasma-icons';
|
|
72
71
|
|
73
72
|
export function App() {
|
74
73
|
const items = Array(8).fill(0);
|
75
|
-
const [
|
76
|
-
const [horizontalIndex, setHorizontalIndex] = useState(0);
|
74
|
+
const [index, setIndex] = useState(0);
|
77
75
|
|
78
76
|
return (
|
79
|
-
<div
|
77
|
+
<div>
|
80
78
|
<Tabs view="divider" orientation="vertical" size="xs" style=\{{ width: '15rem' }}>
|
81
79
|
{items.map((_, i) => (
|
82
80
|
<TabItem
|
@@ -84,26 +82,10 @@ export function App() {
|
|
84
82
|
orientation="vertical"
|
85
83
|
key={`item:${i}`}
|
86
84
|
size="xs"
|
87
|
-
selected={i ===
|
85
|
+
selected={i === index}
|
88
86
|
tabIndex={0}
|
89
87
|
contentLeft={<IconClock size="xs" color="inherit" />}
|
90
|
-
onClick={() =>
|
91
|
-
>
|
92
|
-
{`Label${i + 1}`}
|
93
|
-
</TabItem>
|
94
|
-
))}
|
95
|
-
</Tabs>
|
96
|
-
|
97
|
-
<Tabs header view="divider" size="h5" style=\{{ width: '15rem' }}>
|
98
|
-
{items.map((_, i) => (
|
99
|
-
<TabItem
|
100
|
-
header
|
101
|
-
view="divider"
|
102
|
-
key={`item:${i}`}
|
103
|
-
size="h5"
|
104
|
-
selected={i === horizontalIndex}
|
105
|
-
tabIndex={0}
|
106
|
-
onClick={() => setHorizontalIndex(i)}
|
88
|
+
onClick={() => setIndex(i)}
|
107
89
|
>
|
108
90
|
{`Label${i + 1}`}
|
109
91
|
</TabItem>
|
@@ -2,8 +2,6 @@ export { horizontalTabsRoot, horizontalTabsConfig } from './ui/horizontal/Horizo
|
|
2
2
|
export { horizontalTabItemRoot, horizontalTabItemConfig } from './ui/horizontal/HorizontalTabItem/HorizontalTabItem';
|
3
3
|
export { verticalTabsRoot, verticalTabsConfig } from './ui/vertical/VerticalTabs/VerticalTabs';
|
4
4
|
export { verticalTabItemRoot, verticalTabItemConfig } from './ui/vertical/VerticalTabItem/VerticalTabItem';
|
5
|
-
export { headerTabsRoot, headerTabsConfig } from './ui/header/HeaderTabs/HeaderTabs';
|
6
|
-
export { headerTabItemRoot, headerTabItemConfig } from './ui/header/HeaderTabItem/HeaderTabItem';
|
7
5
|
export { tokens as tabsTokens } from './tokens';
|
8
6
|
export { TabItemRefs, TabsContext } from './TabsContext';
|
9
7
|
export { createTabsController } from './createTabsController';
|
@@ -1,21 +1,15 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import {
|
2
|
+
import { horizontalTabItemConfig, verticalTabItemConfig } from '../../../../components/Tabs';
|
3
3
|
import { component, mergeConfig } from '../../../../engines';
|
4
4
|
import { config as horizontalConfig } from './horizontal/HorizontalTabItem.config';
|
5
5
|
import { config as verticalConfig } from './vertical/VerticalTabItem.config';
|
6
|
-
import { config as headerConfig } from './header/HeaderTabItem.config';
|
7
6
|
var mergedHorizontalTabItemConfig = /*#__PURE__*/mergeConfig(horizontalTabItemConfig, horizontalConfig);
|
8
7
|
var HorizontalTabItem = /*#__PURE__*/component(mergedHorizontalTabItemConfig);
|
9
8
|
var mergedVerticalTabItemConfig = /*#__PURE__*/mergeConfig(verticalTabItemConfig, verticalConfig);
|
10
9
|
var VerticalTabItem = /*#__PURE__*/component(mergedVerticalTabItemConfig);
|
11
|
-
var mergedHeaderTabItemConfig = /*#__PURE__*/mergeConfig(headerTabItemConfig, headerConfig);
|
12
|
-
var HeaderTabItem = /*#__PURE__*/component(mergedHeaderTabItemConfig);
|
13
10
|
export var TabItem = function TabItem(props) {
|
14
11
|
if (props.orientation === 'vertical') {
|
15
12
|
return /*#__PURE__*/React.createElement(VerticalTabItem, props);
|
16
13
|
}
|
17
|
-
if (props.header) {
|
18
|
-
return /*#__PURE__*/React.createElement(HeaderTabItem, props);
|
19
|
-
}
|
20
14
|
return /*#__PURE__*/React.createElement(HorizontalTabItem, props);
|
21
15
|
};
|
@@ -1,21 +1,15 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
import { horizontalTabsConfig, verticalTabsConfig
|
2
|
+
import { horizontalTabsConfig, verticalTabsConfig } from '../../../../components/Tabs';
|
3
3
|
import { component, mergeConfig } from '../../../../engines';
|
4
4
|
import { config as horizontalConfig } from './horizontal/HorizontalTabs.config';
|
5
5
|
import { config as verticalConfig } from './vertical/VerticalTabs.config';
|
6
|
-
import { config as headerConfig } from './header/HeaderTabs.config';
|
7
6
|
var mergedHorizontalTabsConfig = /*#__PURE__*/mergeConfig(horizontalTabsConfig, horizontalConfig);
|
8
|
-
var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
|
9
7
|
var mergedVerticalTabsConfig = /*#__PURE__*/mergeConfig(verticalTabsConfig, verticalConfig);
|
8
|
+
var HorizontalTabs = /*#__PURE__*/component(mergedHorizontalTabsConfig);
|
10
9
|
var VerticalTabs = /*#__PURE__*/component(mergedVerticalTabsConfig);
|
11
|
-
var mergedHeaderTabsConfig = /*#__PURE__*/mergeConfig(headerTabsConfig, headerConfig);
|
12
|
-
var HeaderTabs = /*#__PURE__*/component(mergedHeaderTabsConfig);
|
13
10
|
export var Tabs = function Tabs(props) {
|
14
11
|
if (props.orientation === 'vertical') {
|
15
12
|
return /*#__PURE__*/React.createElement(VerticalTabs, props);
|
16
13
|
}
|
17
|
-
if (props.header) {
|
18
|
-
return /*#__PURE__*/React.createElement(HeaderTabs, props);
|
19
|
-
}
|
20
14
|
return /*#__PURE__*/React.createElement(HorizontalTabs, props);
|
21
15
|
};
|
@@ -12,7 +12,6 @@ import { Tabs } from './Tabs';
|
|
12
12
|
import { TabItem } from './TabItem';
|
13
13
|
|
14
14
|
const clips = ['none', 'scroll', 'showAll'];
|
15
|
-
const headerClips = ['none', 'scroll'];
|
16
15
|
const sizes = ['xs', 's', 'm', 'l'] as const;
|
17
16
|
const headerSizes = ['h5', 'h4', 'h3', 'h2', 'h1'] as const;
|
18
17
|
|
@@ -53,7 +52,6 @@ const getContentRight = (contentRightOption: string, size: Size) => {
|
|
53
52
|
type StoryTabsProps = ComponentProps<typeof Tabs> & CustomStoryTabsProps;
|
54
53
|
type HorizontalStoryTabsProps = StoryTabsProps & { width: string };
|
55
54
|
type VerticalStoryTabsProps = StoryTabsProps & { height: string };
|
56
|
-
type HeaderStoryTabsProps = StoryTabsProps & { width: string };
|
57
55
|
|
58
56
|
const meta: Meta<StoryTabsProps> = {
|
59
57
|
title: 'plasma_b2c/Tabs',
|
@@ -70,7 +68,6 @@ const meta: Meta<StoryTabsProps> = {
|
|
70
68
|
'forwardedAs',
|
71
69
|
'outsideScroll',
|
72
70
|
'index',
|
73
|
-
'header',
|
74
71
|
]),
|
75
72
|
contentRight: {
|
76
73
|
options: contentRightOptions,
|
@@ -606,55 +603,31 @@ export const VerticalTabs: StoryObj<VerticalStoryTabsProps> = {
|
|
606
603
|
},
|
607
604
|
};
|
608
605
|
|
609
|
-
const
|
610
|
-
const {
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
key={`item:${i}`}
|
620
|
-
view="divider"
|
621
|
-
selected={i === index}
|
622
|
-
onClick={() => !disabled && setIndex(i)}
|
623
|
-
tabIndex={!disabled ? 0 : -1}
|
624
|
-
disabled={disabled}
|
625
|
-
value={helperText}
|
626
|
-
size={size as HeaderSize}
|
627
|
-
>
|
628
|
-
{`Label${i + 1}`}
|
629
|
-
</TabItem>
|
630
|
-
))}
|
631
|
-
</Tabs>
|
632
|
-
);
|
633
|
-
};
|
634
|
-
|
635
|
-
const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
|
636
|
-
const { disabled, itemQuantity, size, hasDivider, helperText, width } = props;
|
606
|
+
const StoryHeaderTabs = (props: StoryTabsProps) => {
|
607
|
+
const {
|
608
|
+
disabled,
|
609
|
+
itemQuantity,
|
610
|
+
size,
|
611
|
+
contentLeft: contentLeftOption,
|
612
|
+
contentRight: contentRightOption,
|
613
|
+
hasDivider,
|
614
|
+
stretch,
|
615
|
+
} = props;
|
637
616
|
const items = Array(itemQuantity).fill(0);
|
638
617
|
const [index, setIndex] = useState(0);
|
639
618
|
|
640
619
|
return (
|
641
|
-
<Tabs
|
642
|
-
header
|
643
|
-
view={hasDivider ? 'divider' : 'clear'}
|
644
|
-
disabled={disabled}
|
645
|
-
size={size as HeaderSize}
|
646
|
-
style={{ width }}
|
647
|
-
>
|
620
|
+
<Tabs view={hasDivider ? 'divider' : 'clear'} disabled={disabled} size={size} stretch={stretch}>
|
648
621
|
{items.map((_, i) => (
|
649
622
|
<TabItem
|
650
|
-
header
|
651
623
|
key={`item:${i}`}
|
652
624
|
view="divider"
|
653
625
|
selected={i === index}
|
654
626
|
onClick={() => !disabled && setIndex(i)}
|
655
627
|
tabIndex={!disabled ? 0 : -1}
|
656
628
|
disabled={disabled}
|
657
|
-
|
629
|
+
contentLeft={getContentLeft(contentLeftOption, size as Size)}
|
630
|
+
contentRight={getContentRight(contentRightOption, size as Size)}
|
658
631
|
size={size as HeaderSize}
|
659
632
|
>
|
660
633
|
{`Label${i + 1}`}
|
@@ -664,14 +637,12 @@ const StoryHeaderScroll = (props: HeaderStoryTabsProps) => {
|
|
664
637
|
);
|
665
638
|
};
|
666
639
|
|
667
|
-
export const HeaderTabs: StoryObj<
|
640
|
+
export const HeaderTabs: StoryObj<StoryTabsProps> = {
|
668
641
|
args: {
|
669
642
|
size: 'h5',
|
670
643
|
disabled: false,
|
671
644
|
hasDivider: true,
|
672
|
-
|
673
|
-
itemQuantity: 6,
|
674
|
-
width: '12rem',
|
645
|
+
itemQuantity: 4,
|
675
646
|
},
|
676
647
|
argTypes: {
|
677
648
|
size: {
|
@@ -680,36 +651,23 @@ export const HeaderTabs: StoryObj<HeaderStoryTabsProps> = {
|
|
680
651
|
type: 'select',
|
681
652
|
},
|
682
653
|
},
|
683
|
-
|
684
|
-
options:
|
654
|
+
contentLeft: {
|
655
|
+
options: contentLeftOptions,
|
685
656
|
control: {
|
686
657
|
type: 'select',
|
687
658
|
},
|
688
|
-
if: { arg: 'stretch', truthy: false },
|
689
659
|
},
|
690
|
-
|
660
|
+
contentRight: {
|
661
|
+
options: contentRightOptions,
|
691
662
|
control: {
|
692
|
-
type: '
|
693
|
-
},
|
694
|
-
if: { arg: 'clip', eq: 'scroll' },
|
695
|
-
},
|
696
|
-
stretch: {
|
697
|
-
table: {
|
698
|
-
disable: true,
|
663
|
+
type: 'select',
|
699
664
|
},
|
700
665
|
},
|
701
|
-
|
666
|
+
clip: {
|
702
667
|
table: {
|
703
668
|
disable: true,
|
704
669
|
},
|
705
670
|
},
|
706
671
|
},
|
707
|
-
render: (args) => {
|
708
|
-
switch (args.clip) {
|
709
|
-
case 'scroll':
|
710
|
-
return <StoryHeaderScroll {...args} />;
|
711
|
-
default:
|
712
|
-
return <StoryHeaderDefault {...args} />;
|
713
|
-
}
|
714
|
-
},
|
672
|
+
render: (args) => <StoryHeaderTabs {...args} />,
|
715
673
|
};
|