Mo Elzubeir
85 lines
2.0 KiB
JavaScript
85 lines
2.0 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { FormGroup, Label, CustomInput } from 'reactstrap';
|
|
import { Interpolate, translate } from 'react-i18next';
|
|
|
|
// need changes: err cannot be removed once triggered
|
|
function Checkbox({
|
|
t,
|
|
title,
|
|
hideTitle,
|
|
name,
|
|
formGroupClass,
|
|
required,
|
|
trueValue,
|
|
value,
|
|
disabled,
|
|
error,
|
|
description,
|
|
handleChange
|
|
}) {
|
|
function onChange(e) {
|
|
const { name, checked } = e.target;
|
|
let oppValue = null;
|
|
if (typeof trueValue === 'boolean') oppValue = false;
|
|
else if (typeof trueValue === 'number') oppValue = 0;
|
|
handleChange(name, checked ? trueValue : oppValue);
|
|
}
|
|
|
|
return (
|
|
<FormGroup className={formGroupClass}>
|
|
{!hideTitle && (
|
|
<Label>
|
|
{title}
|
|
{required ? <span className="text-danger">*</span> : null}
|
|
</Label>
|
|
)}
|
|
<CustomInput
|
|
id={name}
|
|
type="checkbox"
|
|
checked={trueValue === value}
|
|
title={title}
|
|
name={name}
|
|
value={value}
|
|
disabled={disabled}
|
|
label={description}
|
|
invalid={error}
|
|
onChange={onChange}
|
|
/>
|
|
{error === true ? (
|
|
<span className="text-danger">
|
|
<Interpolate t={t} i18nKey="messages.selectMsg" title={title} />
|
|
</span>
|
|
) : (
|
|
<span className="text-danger">{error}</span>
|
|
)}
|
|
</FormGroup>
|
|
);
|
|
}
|
|
|
|
Checkbox.defaultProps = {
|
|
handleChange: () => {},
|
|
trueValue: true,
|
|
disabled: false,
|
|
hideTitle: false,
|
|
formGroupClass: ''
|
|
};
|
|
|
|
Checkbox.propTypes = {
|
|
t: PropTypes.func,
|
|
title: PropTypes.string,
|
|
name: PropTypes.string.isRequired,
|
|
type: PropTypes.string,
|
|
formGroupClass: PropTypes.string,
|
|
value: PropTypes.bool,
|
|
hideTitle: PropTypes.bool,
|
|
trueValue: PropTypes.any,
|
|
description: PropTypes.any,
|
|
required: PropTypes.bool,
|
|
disabled: PropTypes.bool,
|
|
error: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
|
|
handleChange: PropTypes.func.isRequired
|
|
};
|
|
|
|
export default React.memo(translate(['common'], { wait: true })(Checkbox));
|