src/components/attribute/attribute.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 Typography from '@material-ui/core/Typography';
   7 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
   8 import { ArvadosTheme } from 'src/common/custom-theme';
   9
  10 interface AttributeDataProps {
  11     label: string;
  12     value?: string;
  13     link?: string;
  14 }
  15
  16 type AttributeProps = AttributeDataProps & WithStyles<CssRules>;
  17
  18 class Attribute extends React.Component<AttributeProps> {
  19
  20     hasLink() {
  21         return !!this.props.link;
  22     }
  23
  24     render() {
  25         const { label, link, value, children, classes } = this.props;
  26         return <Typography component="div" className={classes.attribute}>
  27                     <Typography component="span" className={classes.label}>{label}</Typography>
  28                     { this.hasLink() ? (
  29                     <a href='{link}' className={classes.link} target='_blank'>{value}</a>
  30                     ) : (
  31                         <Typography component="span" className={classes.value}>
  32                             {value}
  33                             {children}
  34                         </Typography>
  35                     )}
  36                 </Typography>;
  37     }
  38
  39 }
  40
  41 type CssRules = 'attribute' | 'label' | 'value' | 'link';
  42
  43 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  44     attribute: {
  45         height: '24px',
  46         display: 'flex',
  47         alignItems: 'center',
  48         marginBottom: theme.spacing.unit
  49     },
  50     label: {
  51         color: theme.palette.grey["500"],
  52         width: '40%'
  53     },
  54     value: {
  55         display: 'flex',
  56         alignItems: 'center'
  57     },
  58     link: {
  59         color: theme.palette.primary.main,
  60         textDecoration: 'none'
  61     }
  62 });
  63
  64 export default withStyles(styles)(Attribute);