52 lines
1.4 KiB
JavaScript
52 lines
1.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import PropTypes from "prop-types";
|
|
import FormGroup from "@material-ui/core/FormGroup";
|
|
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
|
import Checkbox from "@material-ui/core/Checkbox";
|
|
|
|
const FormFieldChecks = props => {
|
|
const [value, setValue] = useState(props.dflt);
|
|
|
|
const toggle = part => {
|
|
let parts = value.slice(0);
|
|
let index = parts.indexOf(part);
|
|
if (index === -1) parts.push(part);
|
|
else parts.splice(index, 1);
|
|
setValue(parts);
|
|
props.updateValue(props.name, parts);
|
|
};
|
|
|
|
// Force state update when rerendering due to props change
|
|
// if (props.value !== value) setValue(props.value);
|
|
|
|
return (
|
|
<FormGroup>
|
|
{Object.keys(props.checks).map(i => {
|
|
let check = props.checks[i];
|
|
return (
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
checked={value.indexOf(i) === -1 ? false : true}
|
|
onChange={() => toggle(i)}
|
|
value={i}
|
|
/>
|
|
}
|
|
label={props.checks[i]}
|
|
key={i}
|
|
className="po-list-item"
|
|
/>
|
|
);
|
|
})}
|
|
</FormGroup>
|
|
);
|
|
};
|
|
|
|
FormFieldChecks.propTypes = {
|
|
dflt: PropTypes.array,
|
|
checks: PropTypes.object,
|
|
updateValue: PropTypes.func.isRequired,
|
|
name: PropTypes.string.isRequired
|
|
};
|
|
|
|
export default FormFieldChecks;
|