/
Tabs.tsx
104 lines (95 loc) · 2.64 KB
/
Tabs.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React, { forwardRef } from 'react';
import {
DefaultProps,
useComponentDefaultProps,
StylesApiProvider,
Selectors,
} from '@mantine/styles';
import { ForwardRefWithStaticComponents } from '@mantine/utils';
import { Box } from '../Box';
import { TabsList, TabsListStylesNames } from './TabsList/TabsList';
import { TabsPanel, TabsPanelStylesNames } from './TabsPanel/TabsPanel';
import { Tab, TabStylesNames } from './Tab/Tab';
import { TabsProvider, TabsProviderProps } from './TabsProvider';
import { TabsStylesParams } from './Tabs.types';
import useStyles from './Tabs.styles';
export type TabsStylesNames =
| Selectors<typeof useStyles>
| TabsListStylesNames
| TabsPanelStylesNames
| TabStylesNames;
export interface TabsProps
extends TabsProviderProps,
DefaultProps<TabsStylesNames, TabsStylesParams>,
Omit<React.ComponentPropsWithoutRef<'div'>, keyof TabsProviderProps> {}
type TabsComponent = ForwardRefWithStaticComponents<
TabsProps,
{
List: typeof TabsList;
Tab: typeof Tab;
Panel: typeof TabsPanel;
}
>;
const defaultProps: Partial<TabsProps> = {
orientation: 'horizontal',
loop: true,
activateTabWithKeyboard: true,
allowTabDeactivation: false,
unstyled: false,
inverted: false,
variant: 'default',
};
export const Tabs: TabsComponent = forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
const {
defaultValue,
value,
orientation,
loop,
activateTabWithKeyboard,
allowTabDeactivation,
children,
id,
onTabChange,
variant,
color,
className,
unstyled,
classNames,
styles,
radius,
inverted,
keepMounted,
...others
} = useComponentDefaultProps('Tabs', defaultProps, props);
const { classes, cx } = useStyles(
{ orientation, color, variant, radius, inverted },
{ unstyled, name: 'Tabs', classNames, styles }
);
return (
<StylesApiProvider classNames={classNames} styles={styles} unstyled={unstyled}>
<TabsProvider
activateTabWithKeyboard={activateTabWithKeyboard}
defaultValue={defaultValue}
orientation={orientation}
onTabChange={onTabChange}
value={value}
id={id}
loop={loop}
allowTabDeactivation={allowTabDeactivation}
color={color}
variant={variant}
radius={radius}
inverted={inverted}
keepMounted={keepMounted}
>
<Box {...others} className={cx(classes.root, className)} id={id} ref={ref}>
{children}
</Box>
</TabsProvider>
</StylesApiProvider>
);
}) as any;
Tabs.List = TabsList;
Tabs.Tab = Tab;
Tabs.Panel = TabsPanel;
Tabs.displayName = '@mantine/core/Tabs';