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 { Typography, Switch } from '@material-ui/core';
   9
  10 type CssRules = 'container' | 'label' | 'value';
  11
  12 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  13     container: {
  14         display: 'flex',
  15         alignItems: 'center',
  16         height: '20px'
  17     },
  18     label: {
  19         width: '86px',
  20         color: theme.palette.grey["500"],
  21         textAlign: 'right',
  22     },
  23     value: {
  24         width: '24px',
  25         paddingLeft: theme.spacing.unit,
  26     }
  27 });
  28
  29 export interface SubprocessFilterDataProps {
  30     label: string;
  31     value: number;
  32     checked?: boolean;
  33     key?: string;
  34     onToggle?: () => void;
  35 }
  36
  37 type SubprocessFilterProps = SubprocessFilterDataProps & WithStyles<CssRules>;
  38
  39 export const SubprocessFilter = withStyles(styles)(
  40     ({ classes, label, value, key, checked, onToggle }: SubprocessFilterProps) =>
  41         <div className={classes.container} >
  42             <Typography component="span" className={classes.label}>{label}:</Typography>
  43             <Typography component="span" className={classes.value}>{value}</Typography>
  44             {onToggle && <Switch
  45                 checked={checked}
  46                 onChange={onToggle}
  47                 value={key}
  48                 color="primary" />
  49             }
  50         </div>
  51 );