100 lines
2.1 KiB
JavaScript
Raw Normal View History

/**
2019-08-13 11:31:10 +02:00
*
* InputCheckboxPlugin
*
*/
import React from 'react';
import PropTypes from 'prop-types';
2019-09-17 15:24:22 +02:00
import { Label, Wrapper } from './Components';
2019-09-18 17:39:54 +02:00
function InputCheckboxPlugin(
2019-09-19 14:49:18 +02:00
{
inputSelected,
label,
name,
setNewInputSelected,
setShouldDisplayPolicieshint,
value,
},
2019-09-18 17:39:54 +02:00
context
) {
const isSelected = inputSelected === name;
2019-09-18 17:39:54 +02:00
const handleChange = () => {
const target = {
type: 'checkbox',
2019-09-18 17:39:54 +02:00
name: name,
value: !value,
};
2019-09-18 17:39:54 +02:00
if (!value) {
setNewInputSelected(name);
context.setShouldDisplayPolicieshint();
context.setInputPoliciesPath(name);
} else {
2019-09-18 17:39:54 +02:00
setNewInputSelected('');
}
2019-09-18 17:39:54 +02:00
context.onChange({ target });
2019-08-13 11:31:10 +02:00
};
2019-09-18 17:39:54 +02:00
const handleClick = () => {
setNewInputSelected(name);
context.setInputPoliciesPath(name);
2019-09-18 17:39:54 +02:00
if (isSelected) {
context.resetShouldDisplayPoliciesHint();
} else {
2019-09-18 17:39:54 +02:00
setShouldDisplayPolicieshint();
}
2019-08-13 11:31:10 +02:00
};
2019-09-18 17:39:54 +02:00
return (
<Wrapper className="col-md-4">
<div className={`form-check ${isSelected ? 'highlighted' : ''}`}>
<Label
className={`form-check-label ${value ? 'checked' : ''}`}
htmlFor={name}
2019-08-13 11:31:10 +02:00
>
2019-09-18 17:39:54 +02:00
<input
className="form-check-input"
defaultChecked={value}
id={name}
name={name}
onChange={handleChange}
type="checkbox"
/>
{label}
</Label>
<i className="fa fa-cog" onClick={handleClick} />
</div>
</Wrapper>
);
}
InputCheckboxPlugin.contextTypes = {
onChange: PropTypes.func.isRequired,
resetShouldDisplayPoliciesHint: PropTypes.func.isRequired,
setInputPoliciesPath: PropTypes.func.isRequired,
setShouldDisplayPolicieshint: PropTypes.func.isRequired,
};
InputCheckboxPlugin.defaultProps = {
label: '',
value: false,
};
InputCheckboxPlugin.propTypes = {
inputSelected: PropTypes.string.isRequired,
isOpen: PropTypes.bool.isRequired,
label: PropTypes.string,
name: PropTypes.string.isRequired,
setNewInputSelected: PropTypes.func.isRequired,
value: PropTypes.bool,
};
export default InputCheckboxPlugin;