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 '../../common/custom-theme';
   9
  10 interface AttributeDataProps {
  11     label: string;
  12     value?: string | number;
  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         display: 'flex',
  46         alignItems: 'flex-start',
  47         marginBottom: theme.spacing.unit
  48     },
  49     label: {
  50         color: theme.palette.grey["500"],
  51         width: '40%'
  52     },
  53     value: {
  54         width: '60%',
  55         display: 'flex',
  56         alignItems: 'flex-start',
  57         textTransform: 'capitalize'
  58     },
  59     link: {
  60         width: '60%',
  61         color: theme.palette.primary.main,
  62         textDecoration: 'none',
  63         overflowWrap: 'break-word'
  64     }
  65 });
  66
  67 export default withStyles(styles)(Attribute);