src/components/single-list-item/single-list-item.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   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";
  11
  12 export interface SingleListItemDataProps {
  13     icon: IconType;
  14     name: string;
  15     isActive?: boolean;
  16     hasMargin?: boolean;
  17 }
  18
  19 type SingleListItemProps = SingleListItemDataProps & WithStyles<CssRules>;
  20
  21 class SingleListItem extends React.Component<SingleListItemProps, {}> {
  22     render() {
  23         const { classes, isActive, hasMargin, name, icon: Icon } = this.props;
  24         return (
  25             <Typography component='span' className={classes.root}>
  26                 <ListItemIcon className={classnames({
  27                         [classes.hasMargin]: hasMargin,
  28                         [classes.active]: isActive
  29                     })}>
  30                     <Icon />
  31                 </ListItemIcon>
  32                 <ListItemText primary={
  33                     <Typography variant='body1' className={classnames(classes.listItemText, {
  34                             [classes.active]: isActive
  35                         })}>
  36                         {name}
  37                     </Typography>
  38                 } />
  39             </Typography>
  40         );
  41     }
  42 }
  43
  44 type CssRules = 'root' | 'listItemText' | 'hasMargin' | 'active';
  45
  46 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  47     root: {
  48         display: 'flex',
  49         alignItems: 'center'
  50     },
  51     listItemText: {
  52         fontWeight: 700
  53     },
  54     active: {
  55         color: theme.palette.primary.main,
  56     },
  57     hasMargin: {
  58         marginLeft: '18px',
  59     },
  60 });
  61
  62 export default withStyles(styles)(SingleListItem);