21128: dynamic menu types created Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa...
[arvados-workbench2.git] / 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 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 );