icon: string;
active?: boolean;
open?: boolean;
+ margin?: boolean;
+ openAble?: boolean;
}
interface SidePanelProps {
- toggleSidePanelOpen: (id: string) => void;
- toggleSidePanelActive: (id: string) => void;
+ toggleOpen: (id: string) => void;
+ toggleActive: (id: string) => void;
sidePanelItems: SidePanelItem[];
+ onContextMenu: (event: React.MouseEvent<HTMLElement>, item: SidePanelItem) => void;
}
class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
render(): ReactElement<any> {
- const { classes, toggleSidePanelOpen, toggleSidePanelActive, sidePanelItems } = this.props;
- const { listItemText, leftSidePanelContainer, row, list, icon, projectIcon, active, activeArrow, inactiveArrow, arrowTransition, arrowRotate } = classes;
+ const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
+ const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, activeArrow, inactiveArrow, arrowTransition, arrowRotate } = classes;
return (
<div className={leftSidePanelContainer}>
<List>
{sidePanelItems.map(it => (
<span key={it.name}>
- <ListItem button className={list} onClick={() => toggleSidePanelActive(it.id)}>
+ <ListItem button className={list} onClick={() => toggleActive(it.id)} onContextMenu={this.handleRowContextMenu(it)}>
<span className={row}>
- {it.name === "Projects" ? <i onClick={() => toggleSidePanelOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow}
+ {it.openAble ? <i onClick={() => toggleOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow}
${it.open ? `fas fa-caret-down ${arrowTransition}` : `fas fa-caret-down ${arrowRotate}`}`} /> : null}
<ListItemIcon className={it.active ? active : ''}>
- <i className={`${it.icon} ${icon} ${it.name === "Projects" ? projectIcon : ''}`} />
+ <i className={`${it.icon} ${icon} ${it.margin ? projectIconMargin : ''}`} />
</ListItemIcon>
<ListItemText className={listItemText} primary={<Typography className={it.active ? active : ''}>{it.name}</Typography>} />
</span>
</ListItem>
- {it.name === "Projects" ? (
+ {it.openAble ? (
<Collapse in={it.open} timeout="auto" unmountOnExit>
- {this.props.children}
+ {children}
</Collapse>) : null}
</span>
))}
</div>
);
}
+
+ handleRowContextMenu = (item: SidePanelItem) =>
+ (event: React.MouseEvent<HTMLElement>) =>
+ item.openAble ? this.props.onContextMenu(event, item) : null
+
}
-type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 'projectIcon' |
+type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 'projectIconMargin' |
'activeArrow' | 'inactiveArrow' | 'arrowRotate' | 'arrowTransition';
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
overflowY: 'auto',
minWidth: '240px',
whiteSpace: 'nowrap',
- marginTop: '38px',
+ marginTop: '52px',
display: 'flex',
flexGrow: 1,
},
icon: {
minWidth: '20px',
},
- projectIcon: {
+ projectIconMargin: {
marginLeft: '17px',
}
});