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 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 6x 6x 2x 2x 4x 4x 8x 8x 8x 2x 2x 2x 2x 2x 2x | import React from "react";
import styled from "styled-components";
import { SideBarProps, SideBarStyleProps } from "./SideBar.types";
import { useTheme } from "../ThemeProvider/ThemeProvider";
import { getColorPalette } from "../../helpers/helpers";
import colorTokens from "../../tokens/colors.json";
import { SideBarItemProps } from "./SideBarItem/SideBarItem.types";
const SideBar = ({
children,
className,
style,
top = "0",
right = "0",
color = colorTokens.default.primary.main,
"data-testid": dataTestId,
onChange,
...props
}: SideBarProps) => {
const theme = useTheme().theme;
const colorPalette = getColorPalette(theme, color);
const [selectedIndex, setSelectedIndex] = React.useState<number | undefined>();
const _handleSelectedIndex = (index?: number, value?: string) => {
Iif (index === selectedIndex) return;
setSelectedIndex(index);
onChange && onChange(value);
}
let index=0;
const childrenList = Array.isArray(children) ? children : [children];
const ChildrenEle = React.Children.map(childrenList, (child) => {
Iif (!React.isValidElement(child) || !child.type) return child;
if ((child.type as any).displayName === "SideBarItem") {
index++;
return React.cloneElement(child, {
_index: index,
...(color && !child.props.color && { color: color }),
selected: selectedIndex ? selectedIndex === index : child.props.selected,
_getSelectedIndex: _handleSelectedIndex
} as Partial<SideBarItemProps>);
}
if((child.type as any).displayName === "SideBarGroup"){
return React.cloneElement(child as any, {
children: React.Children.map(child.props.children, (child) => {
if(child.type.displayName === "SideBarGroupItem"){
index++;
return React.cloneElement(child, {
_index: index,
_getSelectedIndex: _handleSelectedIndex,
...(color && !child.props.color && {color: color}),
selected: selectedIndex ? selectedIndex === index : (child.props as any).selected
} as Partial<SideBarItemProps>);
} else E{
return child;
}
}),
...(color && !child.props.color && {color: color})
})
}
})
return (
<StyledSideBar
$colorPalette={colorPalette}
$color={color}
className={className}
style={style}
$top={top}
$right={right}
data-testid={dataTestId}
{...props}
>
{ChildrenEle}
</StyledSideBar>
);
};
export default SideBar;
const StyledSideBar = styled.div<SideBarStyleProps>`
display: flex;
flex-direction: column;
position: fixed;
width: 10rem;
height: 100vh;
overflow: scroll;
right: ${(props) => props.$right};
top: ${(props) => props.$top};
color: ${(props) => props.$colorPalette[props.$color].grayScale[11]};
`;
|