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 | 2x 2x 2x 2x 2x 2x 2x 2x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 2x 2x | import React from "react";
import {
SideBarGroupItemProps,
SideBarGroupItemStyleProps,
} from "./SideBarGroupItem.types";
import styled from "styled-components";
import Link from "../../Link/Link";
import { useTheme } from "../../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../../helpers/helpers";
import colorTokens from "../../../tokens/colors.json";
const StyledSideBarGroupItem = styled.div<SideBarGroupItemStyleProps>`
display: flex;
padding: 0.25rem 0.5rem 0.25rem 1.75rem;
`;
const SideBarGroupItem = ({
_index,
value,
children,
className,
style,
size,
selected,
color = colorTokens.default.primary.main,
// Events
onClick,
_getSelectedIndex,
"data-testid": dataTestId,
...props
}: SideBarGroupItemProps) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
const [_selected, setSelected] = React.useState(selected);
React.useEffect(() => {
setSelected(selected)
},[selected]);
const _onClick = (e: React.MouseEvent | React.KeyboardEvent) => {
setSelected(true);
_getSelectedIndex && _getSelectedIndex(_index, value);
onClick && onClick(e);
};
return (
<StyledSideBarGroupItem
$colorPalette={colorPalette}
$color={color}
className={className}
style={style}
onClick={_onClick}
data-testid={dataTestId}
{...props}
>
{typeof children === "string" ? (
<Link
tabIndex={onClick ? 0 : undefined}
size={size}
variant="hover"
preciseColor={_selected ? colorPalette![color].accentScale[10] : colorPalette![color].grayScale[11]}
className={className}
style={style}
onClick={_onClick}
>
{children}
</Link>
) : (
children
)}
</StyledSideBarGroupItem>
);
};
SideBarGroupItem.displayName = "SideBarGroupItem";
export default SideBarGroupItem;
|