1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
6 import { WrappedFieldProps } from 'redux-form';
14 } from '@material-ui/core';
16 export const CheckboxField = (props: WrappedFieldProps & { label?: string }) =>
20 checked={props.input.value}
21 onChange={props.input.onChange}
22 disabled={props.meta.submitting}
28 type MultiCheckboxFieldProps = {
31 minSelection?: number;
32 maxSelection?: number;
37 export const MultiCheckboxField = (props: WrappedFieldProps & MultiCheckboxFieldProps) => {
38 const isValid = (items: string[]) => (items.length >= (props.minSelection || 0)) &&
39 (items.length <= (props.maxSelection || items.length));
40 return <FormControl error={!isValid(props.input.value)}>
41 <FormLabel component='label'>{props.label}</FormLabel>
42 <FormGroup row={props.rowLayout}>
43 { props.items.map((item, idx) =>
48 name={`${props.input.name}[${idx}]`}
50 checked={props.input.value.indexOf(item) !== -1}
52 const newValue = [...props.input.value];
53 if (e.target.checked) {
56 newValue.splice(newValue.indexOf(item), 1);
58 if (!isValid(newValue)) { return; }
59 return props.input.onChange(newValue);
61 disabled={props.meta.submitting}
66 <FormHelperText>{props.helperText}</FormHelperText>