services/workbench2/src/components/checkbox-field/checkbox-field.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 { WrappedFieldProps } from 'redux-form';
   7 import {
   8     FormControlLabel,
   9     Checkbox,
  10     FormControl,
  11     FormGroup,
  12     FormLabel,
  13     FormHelperText
  14 } from '@mui/material';
  15
  16 export const CheckboxField = (props: WrappedFieldProps & { label?: string }) =>
  17     <FormControlLabel
  18         control={
  19             <Checkbox
  20                 checked={props.input.value}
  21                 onChange={props.input.onChange}
  22                 disabled={props.meta.submitting}
  23                 color="primary" />
  24         }
  25         label={props.label}
  26     />;
  27
  28 type MultiCheckboxFieldProps = {
  29     items: string[];
  30     defaultValues?: string[];
  31     label?: string;
  32     minSelection?: number;
  33     maxSelection?: number;
  34     helperText?: string;
  35     rowLayout?: boolean;
  36 }
  37
  38 export const MultiCheckboxField = (props: WrappedFieldProps & MultiCheckboxFieldProps) => {
  39     const isValid = (items: string[]) => (items.length >= (props.minSelection || 0)) &&
  40         (items.length <= (props.maxSelection || items.length));
  41     if (props.input.value.length === 0 && (props.defaultValues || []).length !== 0) {
  42         props.input.value = props.defaultValues ? [...props.defaultValues] : [];
  43     }
  44     return (
  45         <FormControl variant="standard" error={!isValid(props.input.value)}>
  46             <FormLabel component='label'>{props.label}</FormLabel>
  47             <FormGroup row={props.rowLayout}>
  48             { props.items.map((item, idx) =>
  49                 <FormControlLabel
  50                     key={`label-${idx}`}
  51                     control={
  52                         <Checkbox
  53                             data-cy={`checkbox-${item}`}
  54                             key={`control-${idx}`}
  55                             name={`${props.input.name}[${idx}]`}
  56                             value={item}
  57                             checked={
  58                                 props.input.value.indexOf(item) !== -1 ||
  59                                 (props.input.value.length === 0 &&
  60                                     (props.defaultValues || []).indexOf(item) !== -1)
  61                             }
  62                             onChange={e => {
  63                                 const newValue = [...props.input.value];
  64                                 if (e.target.checked) {
  65                                     newValue.push(item);
  66                                 } else {
  67                                     newValue.splice(newValue.indexOf(item), 1);
  68                                 }
  69                                 if (!isValid(newValue)) { return; }
  70                                 return props.input.onChange(newValue);
  71                             }}
  72                             disabled={props.meta.submitting}
  73                             color="primary" />
  74                     }
  75                     label={item} />) }
  76             </FormGroup>
  77             <FormHelperText>{props.helperText}</FormHelperText>
  78         </FormControl>
  79     ); };