import { IconType } from '../icon/icon';
import * as classnames from "classnames";
-export interface ListItemTextIconDataProps {
- icon: IconType;
- name: string;
- isActive?: boolean;
- hasMargin?: boolean;
-}
-
-type ListItemTextIconProps = ListItemTextIconDataProps & WithStyles<CssRules>;
-
-class ListItemTextIcon extends React.Component<ListItemTextIconProps, {}> {
- render() {
- const { classes, isActive, hasMargin, name, icon: Icon } = this.props;
- return (
- <Typography component='span' className={classes.root}>
- <ListItemIcon className={classnames({
- [classes.hasMargin]: hasMargin,
- [classes.active]: isActive
- })}>
- <Icon />
- </ListItemIcon>
- <ListItemText primary={
- <Typography variant='body1' className={classnames(classes.listItemText, {
- [classes.active]: isActive
- })}>
- {name}
- </Typography>
- } />
- </Typography>
- );
- }
-}
-
type CssRules = 'root' | 'listItemText' | 'hasMargin' | 'active';
-
+
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
display: 'flex',
color: theme.palette.primary.main,
},
hasMargin: {
- marginLeft: '18px',
+ marginLeft: `${theme.spacing.unit}px`,
},
});
-export default withStyles(styles)(ListItemTextIcon);
\ No newline at end of file
+export interface ListItemTextIconDataProps {
+ icon: IconType;
+ name: string;
+ isActive?: boolean;
+ hasMargin?: boolean;
+}
+
+type ListItemTextIconProps = ListItemTextIconDataProps & WithStyles<CssRules>;
+
+export const ListItemTextIcon = withStyles(styles)(
+ class extends React.Component<ListItemTextIconProps, {}> {
+ render() {
+ const { classes, isActive, hasMargin, name, icon: Icon } = this.props;
+ return (
+ <Typography component='span' className={classes.root}>
+ <ListItemIcon className={classnames({
+ [classes.hasMargin]: hasMargin,
+ [classes.active]: isActive
+ })}>
+ <Icon />
+ </ListItemIcon>
+ <ListItemText primary={
+ <Typography variant='body1' className={classnames(classes.listItemText, {
+ [classes.active]: isActive
+ })}>
+ {name}
+ </Typography>
+ } />
+ </Typography>
+ );
+ }
+ }
+);