LabeledValue.tsx

LabeledValue.tsx

import React from 'react'
import Typography from '@material-ui/core/Typography'

import { makeStyles, createStyles } from '@material-ui/core/styles'
import { grey } from '@material-ui/core/colors'

const useStyles = makeStyles((theme) =>
  createStyles({
    label: {
      fontSize: 14,
      lineHeight: 1.1,
      color: grey[700],
    },
    value: {
      fontSize: 18,
      lineHeight: 1.5,
      color: theme.palette.common.black,
    },
  })
)

export const BooleanFormatter = (value: any) => {
  if (value) {
    return 'Yes'
  } else {
    return 'No'
  }
}

export const DateStringFormatter = (value: any) => {
  if (value) {
    return new Date(value).toLocaleString()
  } else {
    return null
  }
}

export type LabeledValueFormatter = (org: any) => string | null

export interface LabeledValueProps {
  className?: string
  label: string
  value: string | number | boolean | null
  formatter?: LabeledValueFormatter
}

export const LabeledValue: React.FC<LabeledValueProps> = ({
  className,
  label,
  value,
  formatter,
}) => {
  const classes = useStyles({})

  let v = value
  if (formatter) {
    v = formatter(v)
  }

  return (
    <div className={className}>
      <Typography className={classes.label}>{label}</Typography>
      <Typography className={classes.value}>{v || '\u00a0'}</Typography>
    </div>
  )
}