src/components/subprocess-filter/subprocess-filter.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 { Grid, Typography, Switch } from '@material-ui/core';
   9
  10 type CssRules = 'grid' | 'label' | 'value' | 'switch';
  11
  12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  13     grid: {
  14         display: 'flex',
  15         height: '20px',
  16         paddingTop: '0px!important',
  17         paddingBottom: '0px!important',
  18         marginBottom: theme.spacing.unit
  19     },
  20     label: {
  21         width: '86px',
  22         color: theme.palette.grey["500"],
  23         textAlign: 'right',
  24     },
  25     value: {
  26         width: '24px',
  27         paddingLeft: theme.spacing.unit,
  28     },
  29     switch: {
  30         height: '20px',
  31         '& span:first-child': {
  32             height: '18px'
  33         }
  34     }
  35 });
  36
  37 export interface SubprocessFilterDataProps {
  38     label: string;
  39     value: number;
  40     checked?: boolean;
  41     key?: string;
  42     onToggle?: () => void;
  43 }
  44
  45 type SubprocessFilterProps = SubprocessFilterDataProps & WithStyles<CssRules>;
  46
  47 export const SubprocessFilter = withStyles(styles)(
  48     ({ classes, label, value, key, checked, onToggle }: SubprocessFilterProps) =>
  49         <Grid item className={classes.grid} md={12} lg={6} >
  50             <Typography component="span" className={classes.label}>{label}:</Typography>
  51             <Typography component="span" className={classes.value}>{value}</Typography>
  52             {onToggle && <Switch classes={{ root: classes.switch }}
  53                 checked={checked}
  54                 onChange={onToggle}
  55                 value={key}
  56                 color="primary" />
  57             }
  58         </Grid>
  59 );