Add typescript paths to top level folders
[arvados.git] / src / components / list-item-text-icon / list-item-text-icon.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 type CssRules = 'root' | 'listItemText' | 'hasMargin' | 'active';
13
14 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
15     root: {
16         display: 'flex',
17         alignItems: 'center'
18     },
19     listItemText: {
20         fontWeight: 700
21     },
22     active: {
23         color: theme.palette.primary.main,
24     },
25     hasMargin: {
26         marginLeft: `${theme.spacing.unit}px`,
27     },
28 });
29
30 export interface ListItemTextIconDataProps {
31     icon: IconType;
32     name: string;
33     isActive?: boolean;
34     hasMargin?: boolean;
35 }
36
37 type ListItemTextIconProps = ListItemTextIconDataProps & WithStyles<CssRules>;
38
39 export const ListItemTextIcon = withStyles(styles)(
40     class extends React.Component<ListItemTextIconProps, {}> {
41         render() {
42             const { classes, isActive, hasMargin, name, icon: Icon } = this.props;
43             return (
44                 <Typography component='span' className={classes.root}>
45                     <ListItemIcon className={classnames({
46                             [classes.hasMargin]: hasMargin,
47                             [classes.active]: isActive
48                         })}>
49                         <Icon />
50                     </ListItemIcon>
51                     <ListItemText primary={
52                         <Typography variant='body1' className={classnames(classes.listItemText, {
53                                 [classes.active]: isActive
54                             })}>
55                             {name}
56                         </Typography>
57                     } />
58                 </Typography>
59             );
60         }
61     }
62 );