}
const getSpecificIcon = (props: any) => ({
- access_time: <AccessTime className={props.className} />,
- announcement: <CloseAnnouncement className={props.className} />,
- code: <CodeIcon className={props.className} />,
- collection: <i className={classnames([props.className, 'fas fa-archive fa-lg'])} />,
- close: <CloseIcon className={props.className} />,
- delete: <DeleteIcon className={props.className} />,
- folder: <FolderIcon className={props.className} />,
- help: <HelpIcon className={props.className} />,
- info: <InfoIcon className={props.className} />,
- inbox: <InboxIcon className={props.className} />,
- notifications: <NotificationsIcon className={props.className} />,
- people: <PeopleIcon className={props.className} />,
- person: <PersonIcon className={props.className} />,
- play_arrow: <PlayArrow className={props.className} />,
- process: <i className={classnames([props.className, 'fas fa-cogs fa-lg'])} />,
- project: <i className={classnames([props.className, 'fas fa-folder fa-lg'])} />,
- star: <StarIcon className={props.className} />
+ [IconTypes.ACCESS_TIME]: <AccessTime className={props.className} />,
+ [IconTypes.ANNOUNCEMENT]: <CloseAnnouncement className={props.className} />,
+ [IconTypes.CODE]: <CodeIcon className={props.className} />,
+ [IconTypes.COLLECTION]: <i className={classnames([props.className, 'fas fa-archive fa-lg'])} />,
+ [IconTypes.CLOSE]: <CloseIcon className={props.className} />,
+ [IconTypes.DELETE]: <DeleteIcon className={props.className} />,
+ [IconTypes.FOLDER]: <FolderIcon className={props.className} />,
+ [IconTypes.HELP]: <HelpIcon className={props.className} />,
+ [IconTypes.INFO]: <InfoIcon className={props.className} />,
+ [IconTypes.INBOX]: <InboxIcon className={props.className} />,
+ [IconTypes.NOTIFICATIONS]: <NotificationsIcon className={props.className} />,
+ [IconTypes.PEOPLE]: <PeopleIcon className={props.className} />,
+ [IconTypes.PERSON]: <PersonIcon className={props.className} />,
+ [IconTypes.PLAY_ARROW]: <PlayArrow className={props.className} />,
+ [IconTypes.PROCESS]: <i className={classnames([props.className, 'fas fa-cogs fa-lg'])} />,
+ [IconTypes.PROJECT]: <i className={classnames([props.className, 'fas fa-folder fa-lg'])} />,
+ [IconTypes.STAR]: <StarIcon className={props.className} />
});
class IconBase extends React.Component<IconBaseProps, IconBaseState> {
import { ArvadosTheme } from '../../common/custom-theme';
import { List, ListItem, ListItemText, ListItemIcon, Collapse, Typography } from "@material-ui/core";
import IconBase, { IconTypes } from '../icon/icon';
+import * as classnames from "classnames";
export interface SidePanelItem {
id: string;
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,
- iconOpen, iconClose, iconArrow, iconArrowContainer } = classes;
+ const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, iconArrowContainer } = classes;
return (
<div className={leftSidePanelContainer}>
<List>
{it.openAble ? (
<i onClick={() => toggleOpen(it.id)} className={iconArrowContainer}>
<IconBase icon={IconTypes.PLAY_ARROW}
- className={`
- ${iconArrow}
- ${it.active ? active : ''}
- ${it.open ? iconOpen : iconClose}
- `} />
+ className={this.getIconClassNames(it.open, it.active)}/>
</i>
) : null}
<ListItemIcon className={it.active ? active : ''}>
);
}
+ 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