-export interface SidePanelItem {
- id: string;
- name: string;
- icon: (className?: string) => React.ReactElement<any>;
- active?: boolean;
- open?: boolean;
- margin?: boolean;
- openAble?: boolean;
-}
-
-interface SidePanelProps {
- 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, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
- const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, iconArrowContainer } = classes;
- return (
- <div className={leftSidePanelContainer}>
- <List>
- {sidePanelItems.map(it => (
- <span key={it.name}>
- <ListItem button className={list} onClick={() => toggleActive(it.id)} onContextMenu={this.handleRowContextMenu(it)}>
- <span className={row}>
- {it.openAble ? (
- <i onClick={() => toggleOpen(it.id)} className={iconArrowContainer}>
- {SidePanelRightArrowIcon(this.getIconClassNames(it.open, it.active))}
- </i>
- ) : null}
- <ListItemIcon className={it.active ? active : ''}>
- {it.icon(`${icon} ${it.margin ? projectIconMargin : ''}`)}
- </ListItemIcon>
- <ListItemText className={listItemText}
- primary={renderListItemText(it.name, active, it.active)} />
- </span>
- </ListItem>
- {it.openAble ? (
- <Collapse in={it.open} timeout="auto" unmountOnExit>
- {children}
- </Collapse>
- ) : null}
- </span>
- ))}
- </List>
- </div>
- );
- }
-
- getIconClassNames = (itemOpen ?: boolean, itemActive ?: boolean) => {
- const { classes } = this.props;
- return classnames(classes.iconArrow, {
- [classes.iconOpen]: itemOpen,
- [classes.iconClose]: !itemOpen,
- [classes.active]: itemActive
- });
- }
-
- handleRowContextMenu = (item: SidePanelItem) =>
- (event: React.MouseEvent<HTMLElement>) =>
- item.openAble ? this.props.onContextMenu(event, item) : null
-
-}
-
-const renderListItemText = (itemName: string, active: string, itemActive?: boolean) =>
- <Typography className={itemActive ? active : ''}>{itemName}</Typography>;
-
-type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' |
- 'projectIconMargin' | 'iconClose' | 'iconOpen' | 'iconArrowContainer' | 'iconArrow';