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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 1x 2x 1x 1x | import * as React from "react";
import styled, { css } from "styled-components";
import { TabProps, TabPvtProps, TabStyleProps } from "./Tab.types";
import Text from "../Text/Text";
import colorTokens from "../../tokens/colors.json";
import { useTheme } from "../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../helpers/helpers";
const Tab: React.FC<TabProps> = ({
variant = "contained",
label,
value,
selected = false,
color = colorTokens.default.primary.main,
pvtOnClick,
}: TabProps & TabPvtProps) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
const Label = (() => {
Iif (!label) return null;
return typeof label === "string" ? (
<Text
disableColor
style={{
overflow: "hidden",
width: "100%",
textWrap: "nowrap",
textOverflow: "ellipsis",
}}
>
{label}
</Text>
) : (
label
);
})();
const _onClickHandler = () => {
pvtOnClick && pvtOnClick(value);
};
return (
<StyledTab
tabIndex={selected ? -1 : 0}
$variant={variant}
$selected={selected}
$colorPalette={colorPalette}
$color={color}
onClick={_onClickHandler}
>
{Label}
</StyledTab>
);
};
export default Tab;
Tab.displayName = "Tab";
const StyledTab = styled.button<TabStyleProps>`
display: flex;
flex: 1 1 0;
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
flex-direction: column;
padding: 0.5rem 1rem;
cursor: pointer;
${(props) => getVariantStyleProps(props)}
`;
const getVariantStyleProps = (props: TabStyleProps) => {
switch (props.$variant) {
case "contained":
return css`
background-color: ${props.$selected
? props.$colorPalette[props.$color].accentScale[8]
: props.$colorPalette[props.$color].accentScale[2]};
color: ${props.$selected
? props.$colorPalette[props.$color].accentContrast
: props.$colorPalette[props.$color].accentScale[11]};
border: 2px solid
${props.$selected
? props.$colorPalette[props.$color].accentScale[8]
: props.$colorPalette[props.$color].accentScale[2]};
&:hover {
background-color: ${props.$selected ? props.$colorPalette[props.$color].accentScale[8] : props.$colorPalette[props.$color].accentScale[3]};
}
&:focus-visible {
outline: ${`2px solid ${props.$colorPalette[props.$color].accentScale[9]}`};
outline-offset: -2px;
}
`;
case "outlined":
return css`
background-color: ${props.$selected
? props.$colorPalette[props.$color].accentScale[2]
: props.$colorPalette[props.$color].accentScale[1]};
color: ${props.$selected
? props.$colorPalette[props.$color].accentScale[10]
: props.$colorPalette[props.$color].accentScale[10]};
border: 2px solid
${props.$selected
? props.$colorPalette[props.$color].accentScale[7]
: "transparent"};
&:hover {
background-color: ${props.$colorPalette[props.$color].accentScale[2]};
}
&:focus-visible {
background-color: ${props.$colorPalette[props.$color].accentScale[2]};
outline: 0;
}
`;
}
};
|