2018-02-06 18:01:44 +01:00
|
|
|
/**
|
2019-08-13 11:31:10 +02:00
|
|
|
*
|
|
|
|
* InputCheckboxPlugin
|
|
|
|
*
|
|
|
|
*/
|
2018-02-06 18:01:44 +01:00
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
2019-09-17 15:24:22 +02:00
|
|
|
import { Label, Wrapper } from './Components';
|
2018-02-06 18:01:44 +01:00
|
|
|
|
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;
|
2018-02-06 18:01:44 +01:00
|
|
|
|
2019-09-18 17:39:54 +02:00
|
|
|
const handleChange = () => {
|
2018-02-06 18:01:44 +01:00
|
|
|
const target = {
|
|
|
|
type: 'checkbox',
|
2019-09-18 17:39:54 +02:00
|
|
|
name: name,
|
|
|
|
value: !value,
|
2018-02-06 18:01:44 +01:00
|
|
|
};
|
|
|
|
|
2019-09-18 17:39:54 +02:00
|
|
|
if (!value) {
|
|
|
|
setNewInputSelected(name);
|
|
|
|
|
|
|
|
context.setShouldDisplayPolicieshint();
|
|
|
|
context.setInputPoliciesPath(name);
|
2018-02-06 18:01:44 +01:00
|
|
|
} else {
|
2019-09-18 17:39:54 +02:00
|
|
|
setNewInputSelected('');
|
2018-02-06 18:01:44 +01:00
|
|
|
}
|
|
|
|
|
2019-09-18 17:39:54 +02:00
|
|
|
context.onChange({ target });
|
2019-08-13 11:31:10 +02:00
|
|
|
};
|
2018-02-06 18:01:44 +01:00
|
|
|
|
2019-09-18 17:39:54 +02:00
|
|
|
const handleClick = () => {
|
|
|
|
setNewInputSelected(name);
|
|
|
|
context.setInputPoliciesPath(name);
|
2018-02-06 18:01:44 +01:00
|
|
|
|
2019-09-18 17:39:54 +02:00
|
|
|
if (isSelected) {
|
|
|
|
context.resetShouldDisplayPoliciesHint();
|
2018-02-06 18:01:44 +01:00
|
|
|
} else {
|
2019-09-18 17:39:54 +02:00
|
|
|
setShouldDisplayPolicieshint();
|
2018-02-06 18:01:44 +01:00
|
|
|
}
|
2019-08-13 11:31:10 +02:00
|
|
|
};
|
2018-02-06 18:01:44 +01: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>
|
|
|
|
);
|
2018-02-06 18:01:44 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
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;
|