Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x | import * as React from "react";
import styled from "styled-components";
import { TabsProps } from "./Tabs.types";
import colorTokens from "../../tokens/colors.json";
const Tabs: React.FC<TabsProps> = ({
children,
variant = "contained",
color = colorTokens.default.primary.main,
value = "",
style,
className,
onChange,
"data-testid": dataTestId,
...props
}) => {
const [selectedValue, setSelectedValue] = React.useState<string>(value);
// const theme = useTheme().theme;
// const colorPalette = getColorPalette(theme, color);
const _pvtOnClickHandler = (value: string) => {
setSelectedValue(value);
onChange && onChange(value);
};
const _Children = React.Children.map(children, (child) => {
Iif (!React.isValidElement(child)) return child;
if ((child.type as any).displayName === "TabList") {
return React.cloneElement(child as any, {
children: React.Children.map(child.props.children, (tab, index) => {
if (tab.type.displayName === "Tab") {
return React.cloneElement(tab, {
selected: selectedValue
? tab.props.value === selectedValue
: index === 0,
pvtOnClick: _pvtOnClickHandler,
...(color && !tab.props.color && { color: color }),
...(variant && !tab.props.variant && { variant: variant }),
});
}
return tab;
}),
...(color && !child.props.color && { color: color }),
...(variant && !child.props.variant && { variant: variant }),
});
}
if ((child.type as any).displayName === "TabPanels") {
return React.cloneElement(child as any, {
children: React.Children.map(
child.props.children,
(tabPanel, index) => {
if (tabPanel.type.displayName === "TabPanel") {
return React.cloneElement(tabPanel, {
selected: selectedValue
? tabPanel.props.value === selectedValue
: index === 0,
...(color && !tabPanel.props.color && { color: color }),
...(variant && !tabPanel.props.variant && { variant: variant }),
});
}
return tabPanel;
}
),
...(color && child.props.color && { color: color }),
...(variant && child.props.variant && { variant: variant }),
});
}
});
return (
<StyledTabs className={className} style={style} data-testid={dataTestId} {...props}>
{_Children}
</StyledTabs>
);
};
export default Tabs;
Tabs.displayName = "Tabs";
const StyledTabs = styled.div`
display: flex;
flex-direction: column;
`;
|