1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
7 import { ArvadosTheme } from '~/common/custom-theme';
8 import { ListItemIcon, ListItemText, Typography } from '@material-ui/core';
9 import { IconType } from '../icon/icon';
10 import * as classnames from "classnames";
12 type CssRules = 'root' | 'listItemText' | 'hasMargin' | 'active' | 'fixFontSize';
14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
23 color: theme.palette.primary.main,
26 marginLeft: `${theme.spacing.unit}px`,
33 export interface ListItemTextIconDataProps {
38 fixFontSize?: boolean;
41 type ListItemTextIconProps = ListItemTextIconDataProps & WithStyles<CssRules>;
43 export const ListItemTextIcon = withStyles(styles)(
44 class extends React.Component<ListItemTextIconProps, {}> {
46 const { classes, isActive, hasMargin, name, icon: Icon, fixFontSize } = this.props;
48 <Typography component='span' className={classes.root}>
49 <ListItemIcon className={classnames({
50 [classes.hasMargin]: hasMargin,
51 [classes.active]: isActive
53 <Icon className={classnames({
54 [classes.fixFontSize]: fixFontSize
57 <ListItemText primary={
58 <Typography variant='body1' className={classnames(classes.listItemText, {
59 [classes.active]: isActive